Incompatible with `postcss-nested` 5+

[emattias]

We just updated to postcss 8 including the postcss 8 compatible postcss-nested version which is 5.0 and later. Unfortunately this breaks all ember-css-modules nested classes that work fine with postcss-nested v4.

Interestingly enough it works with using postcss 8 for everything and then just including postcss-nested v4 (which will install postcss 7 also) as a before plugin in css modules settings.

Here are reproduction repos:

Both have css modules css like this:

.foo {
  border: 1px solid blue;
  &__bar{
    background: red;
  }
}

postcss-nested@4 as before plugin

https://github.com/emattias/ember-css-module-reproduction-nested-4 Here the css module class gets compiled to: _foo__bar_1h7kyx (which is correct)

postcss-nested@5 as before plugin

https://github.com/emattias/ember-css-module-reproduction-nested-5 Here the css module class gets compiled to: _foo_1h7kyx__bar (the hash is in the wrong place)

[emattias]

The maintainer of postcss-nested answered this:

ember-css-modules should update a little to be ready for that because visitor API is a new way to use plugins.

Here: https://github.com/postcss/postcss-nested/issues/140#issuecomment-953193830

[dfreeman]

Hi @emattias, thanks for the issue report! We delegate to the standard css-modules set of PostCSS plugins for the majority of the actual processing here, so this incompatibility will need to be at least partly solved there.

In particular, I think the issue is that postcss-modules-scope does its processing in the Once hook, which, with the change made in postcss-nested now means it always see the code before it's been unnested no matter what order the plugins are configured in.

Changing that may in turn need some of the other postcss-modules-* packages need to update their usage of the plugin API, and in turn that we need to change how we piece them together in broccoli-postcss-modules, but it seems like the fundamental incompatibility is in postcss-modules-scope.

I'm sorry not to be able to provide you a more useful answer, but hopefully if the base plugins can get their usage sorted out we'll be able to quickly adopt any changes necessary here downstream.