Closed bboro closed 3 years ago
There are 2 options:
Rule
event listener and change [dir=*]
in selectors.[dir=*]
selector to postcss-nested
. It will be hard since we need to be ready for .root { [dir=ltr] .child {} }
case.@ai Thanks for looking into this and for an answer! Might look into writing a PostCSS plugin later, but for now I think we're just gonna go with a workaround which utilizes postcss-nested :smile: and posting an example below for anyone else who needs:
.element-a {
.element-a-inner {
.title {
[dir="ltr"] & {
@apply pl-1;
}
[dir="ltr"] & {
@apply pr-1;
}
}
}
}
Thanks for the very useful plugin. We're currently using this on our installation and it works great. There's however one small problem we're noticing when we're trying to use this with
tailwindcss
+tailwindcss-rtl
plugin.Consider the following pcss:
This gets compiled into css:
which is wrong as we add the
dir
attribute on our root<html>
element, and that's also how the plugin states to do things. So the resulting CSS should ideally be:I've opened an issue on tailwindcss-rtl plugin's repo already, however they suggested to check with this plugin, so I'm trying my luck here. Honestly I'm not really sure where the core issue lies, or where to seek a fix for it. Thanks!