postcss / postcss-nested

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

Conflicts with other postcss plugins #157

Closed Bygaga63 closed 11 months ago

Bygaga63 commented 11 months ago

Hello, cool lib. I faced with interesing bug: when i try to use this plugin with another one, i see interesting issue:

const postcss = require("postcss");

let input = `
.dashed-class {
  color: green;
  &_foo {
    color: blue;
  }

  &.bar {
    background: green;
  }
}
`;

let instance = postcss([
    require("postcss-nested"),
    require("postcss-modules-local-by-default")({mode: 'local'})
]);

instance.process(input).then((result) => {
    console.log(result.css);
});

Return

:local(.dashed-class) {
  color: green;
}
  :local(.dashed-class)_foo {
    color: blue;
  }
  :local(.dashed-class):local(.bar) {
    background: green;
  }

Problem with

  :local(.dashed-class)_foo {
    color: blue;
  }

I think should be

  :local(.dashed-class_foo) {
    color: blue;
  }

I debuged and found that Rule method in postcss-nested' is called afterOnceinpostcss-modules-local-by-default. Do you have any idea how to wait for rule result inpostcss-nested'. I only solution i found was to run process twice - get css from postcss-nested', and run again withpostcss-modules-local-by-default`

Maybe there is a better solution? Or i'm doing something wrong? Thanks.

ai commented 11 months ago

The best way is to convert postcss-modules-local-by-default from Once method to proper Rule, etc.

The possible conflicts between plugins are the reason why we are asking users to avoid using Once.