Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support tw-shadow variable #128

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

lekhmanrus
Copy link
Contributor

Because the shadow is supported, the --tw-shadow variable has to be supported as well.

@cla-bot cla-bot bot added the cla: yes label Mar 11, 2022
@rigor789
Copy link
Member

I don't think we can use variables in shadow definitions right now - will need to test, and see if we can implement it in core. The default tailwind shadows wouldn't work though, they layer multiple shadows on top of each other, which is not possible in NS atm... When implementing shadows, I did consider that scenario (mainly because of tailwind), but due to platform limitations, it's not feasible.

@lekhmanrus
Copy link
Contributor Author

The reason for this PR was that tailwind .shadow classes throw such errors like:

JS: Error: Failed to apply property [box-shadow] with value [0 0 #0000, 0 0 #0000, unset] to CardView(271). Error: Invalid color: unset
JS:     at new Color (file: src\webpack:\sc\node_modules\@nativescript\core\color\color-common.js:33:0)
JS:     at new Color (file: src\webpack:\sc\node_modules\@nativescript\core\color\index.android.js:2:7)
JS:     at parseCSSShadow (file: src\webpack:\sc\node_modules\@nativescript\core\ui\styling\css-shadow.js:56:0)
JS:     at valueConverter (file: src\webpack:\sc\node_modules\@nativescript\core\ui\styling\style-properties.js:1133:29)
JS:     at Style.setCssValue [as css:box-shadow] (file: src\webpack:\sc\node_modules\@nativescript\core\ui\core\properties\index.js:573:0)     
JS:     at CssState.setPropertyValues (file: src\webpack:\sc\node_modules\@nativescript\core\ui\styling\style-scope.js:540:47)
JS:     at file: src\webpack:\sc\node_modules\@nativescript\core\ui\styling\style-scope.js:428:0
JS:     at CardView._batchUpdate (file: src\webpack:\sc\node_modules\@nativescript\core\ui\core\view-base\index.js:286:0)

Because --tw-shadow is unset.

@rigor789
Copy link
Member

@lekhmanrus right, but I don't think it would work with this PR either - need to test a bit more... You can try as well - pack @nativescript/tailwind locally and try it npm i && npm pack after cloning should be all to produce a tgz file you can install into your project.

@lekhmanrus
Copy link
Contributor Author

@rigor789 I tried commenting tw-shadow directly in node_modules\@nativescript\tailwind\src\removeUnsupported.js. Sure, .shadow class still does nothing, but at least we do not have that error in the terminal. Does it make sense to deny/strip '.shadow' classes then? at least for now?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants