search

postcss / postcss-nested

PostCSS plugin to unwrap nested rules like how Sass does it.
MIT License
1.15k stars 66 forks source link

Compatibility with `20lives/tailwindcss-rtl` plugin #133

Closed bboro closed 3 years ago

bboro commented 3 years ago

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:

.element-a {
  .element-a-inner {
    .title {
      @apply ps-1;
    }
  }
}

This gets compiled into css:

.element-a .element-a-inner [dir="rtl"] .title {
  padding-right: 0.25rem;
}

.element-a .element-a-inner [dir="ltr"] .title {
  padding-left: 0.25rem;
}

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:

[dir="rtl"] .element-a .element-a-inner .title {
  padding-right: 0.25rem;
}

[dir="ltr"] .element-a .element-a-inner .title {
  padding-left: 0.25rem;
}

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!

ai commented 3 years ago

There are 2 options:

  1. You can solve it with writing additional PostCSS plugin. It will have Rule event listener and change [dir=*] in selectors.
  2. You can send PR which will always unwrap [dir=*] selector to postcss-nested. It will be hard since we need to be ready for .root { [dir=ltr] .child {} } case.
bboro commented 3 years ago

@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;
      }
    }
  }
}