tailwind icon indicating copy to clipboard operation
tailwind copied to clipboard

feat: support tw-shadow variable

Open lekhmanrus opened this issue 2 years ago • 4 comments

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

lekhmanrus avatar Mar 11 '22 23:03 lekhmanrus

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.

rigor789 avatar Mar 14 '22 22:03 rigor789

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.

lekhmanrus avatar Mar 15 '22 15:03 lekhmanrus

@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.

rigor789 avatar Mar 15 '22 16:03 rigor789

@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?

lekhmanrus avatar Mar 15 '22 17:03 lekhmanrus