Issues when using nested selectors in a postcss-mixin

[spacedawwwg]

Using: postcss@8.1.1, postcss-nested@5.0.1 and postcss-mixins@7.0.1

postcss.config.js

module.exports = { 
  plugins: [
    require('postcss-mixins'),
    require('postcss-nested'),
  ] 
};

input.css

@define-mixin test {
  color: green;

  .test-child {
    color: red;
  }
}

.test {
  @mixin test;
}

output.css

.test {
  color: green;

  .test-child {
    color: red;
  }
}

expected.css

.test {
  color: green;
}
.test .test-child {
   color: red;
}

[spacedawwwg]

This seems to work fine with postcss@7.0.35, postcss-nested@4.2.3 and postcss-mixins@6.2.3

[ai]

Here is an issue where we discussed the problem postcss/postcss-mixins#110

We need to update postcss-nested to use visitor API. Sorry, I do not have time right now. Will be glad for PR.

[spacedawwwg]

Here is an issue where we discussed the problem #101 (comment)

We need to update postcss-nested to use visitor API. Sorry, I do not have time right now. Will be glad for PR.

@ai Happy to take a look. Not written a postcss plugin before - any chance of being pointed in the right direction of this visitor api?

[ai]

To solve this issue we need to replace Once in postcss-nested to Rule/AtRule according to Step 3 in Plugin Migration guide

[dan2k3k4]

Yeah, and to rewrite the functions being used in postcss-nested, I started a bit in the other open issue (perhaps we can close that one / merge it with this one).

@spacedawwwg I provided a patch diff to help get started:

#81 (comment)

[ai]

Fixed ec804d1.

[ai]

The fix was released in 5.0.2.

---

Sorry for long delay, but it is hard to work on big ecosystem without proper fundings. If you want to fix the source of the problem talk with manager about sponsoring open source dependencies (here is PostCSS OpenCollective).