Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incompatible with postcss-nested 5+ #253

Open
emattias opened this issue Oct 27, 2021 · 2 comments
Open

Incompatible with postcss-nested 5+ #253

emattias opened this issue Oct 27, 2021 · 2 comments
Labels

Comments

@emattias
Copy link

emattias commented Oct 27, 2021

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
Copy link
Author

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: postcss/postcss-nested#140 (comment)

@dfreeman
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants