RTL styles stripped out by Svelte compiler if `dir="rtl"` is outside of component (always)
jacob-8 opened this issue · 2 comments
Describe the bug
dir="rtl"
will almost always be set pretty close to the document body element (ie - outside of the Svelte component at hand), so when svelte-windicss-preprocessor sees an rtl
class like rtl:left-2
it will put [dir='rtl'] .rtl\:left-2
and [dir='rtl'].rtl\:left-2
into the style block which will promptly be removed by the svelte compiler (and it will give you a notice) as those scoped classes will never be used. In order for rtl classes to ever work in this context this preprocessor needs to write them as :global([dir='rtl'] .rtl\:left-2)
and :global([dir='rtl'].rtl\:left-2)
.
Note that there's an edge case scenario in which this could break some users' layouts if they use rtl:hidden rtl:md:block
in one component and then rtl:hidden
in a component whose styles get added to the DOM later on - the problem is that the latter rtl:hidden
class styles will override the expected rtl:md:block
styles.
System Info
System:
OS: Windows 10 10.0.22000
CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
Memory: 2.76 GB / 11.77 GB
Binaries:
Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
npm: 8.1.4 - C:\Program Files\nodejs\npm.CMD
IDEs:
VSCode: 1.65.2 - C:\Users\jacob\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
npmPackages:
svelte: ^3.46.6 => 3.46.6
-- Not sure why that command didn't print these out in my monorepo, but here they are from the package.json--
windicss: ^3.5.1
svelte-windicss-preprocess: ~4.1.0
Used Package Manager
pnpm
That is actually the use case of global vs scoped styles.
Not sure what the issue is.
But there are some updates to global style handling coming soo.
I guess I want to point out the larger issue that there are certain set of classes which by their very nature extend beyond a single component and will always be removed by the svelte compiler when they are scoped. rtl:...
classes and things like .space-x-1
when you are spacing multiple <Button>
components for example.
The advice to use windi:global
to not scope styles for particular components that use these classes which apply across components is dangerous advice as pointed out here. There should be a proper notice informing users about possible style conflicts if they use non-scoped media query styles in multiple components.
One possible solution would be to add a feature to svelte-windicss-preprocess
whereby a prefix, say gl:
for example would cause a specific class to be made global but not all classes found in that component. So you could use gl:space-x-1
for example if you were spacing out multiple components.