RTL styles stripped out by Svelte compiler if dir="rtl" is outside of component (always)

[jacob-8]

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

[alexanderniebuhr]

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.

[jacob-8]

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.