Nested css rules with postcss 8

[JulienKode]

With @leozero

By upgrading postcss 7 to postcss 8 we encounter an issue.

On certain version of postcss the AST see some css with 1 selector, and with other version it is see as two selector.

The issues is available here:
https://github.com/JulienKode/postcss-8-issue

• https://github.com/JulienKode/postcss-8-issue/blob/master/dist/index.prefixed.css
• https://github.com/JulienKode/postcss-8-issue/blob/chore/working-version-postcss-8/dist/index.prefixed.css

We have two branch:

• old postcss 8 version that are working well
• new postcss 8 version that have the issue

Here is a good example of the issue, the following css:

.foo {
  svg {
    display: none;
  }

  .bar {
    display: inline;
  }
}

Will have this output in postcss 8.0.9

.stuff .foo svg {
    display: none;
  }
.stuff .foo .bar {
   display: inline;
}

But in postcss 8.1.0 this produce this output:

.stuff .foo .stuff svg {
    display: none;
  }
.stuff .foo .stuff .bar {
   display: inline;
}

Did you have any idea what is causing this issue and how we can resolve it ?
For now we keep old postcss 8 version

[ai]

Can you update all dependencies to the latest version and update deep subdependencies by calling nom update or yarn upgrade.

We fixed one similar bug in the latest PostCSS version. But the best way to prevent it is to update all postcss inside dependencies tree.

[JulienKode]

Thanks for your reply and your help @ai, after upgrading we still have the issue

[ai]

Can you simplify reproduction repo by cleaning PostCSS plugins? For instance, postcss-import and tailwindcss.

[JulienKode]

Thanks for your quick reply.

Here is the issue cleaned https://github.com/JulienKode/postcss-8-issue/tree/issue/cleaned

[ai]

I will try to look during next week

[JulienKode]

Thank you for your help, once you have an idea for it, let me know how I can help regarding this issue

[JulienKode]

We've try to look at the AST, it seems to have a different behaviour between the version 8.0.9 and 8.1.0, We didn't find why for the moment

[davidgarry]

Hello @ai

Did you have time to take a look to this issue ?

[ai]

Nope. Seems like I will not have time for next week too.

@davidgarry Can I ask you to debug the issue and send PR? Feel free to ask questions.

[davidgarry]

First of all, thank you to answer each time so quickly 👏

I will try to allocate some time in my team to investigate more deeper the issue in the coming weeks !

[TheSeally]

Hello I tried to investigate the problem and I think it is connected with plugin postcss-prefix-selector (this plugin was on test case) that is not adopted to postcss and postcss-nested changes.
The main change is moving postcss-nested to visitor API. Wherein plugin postcss-prefix-selector depends on result of postcss-nested plugin.
Thus before this change postcss-nested plugin processed by runOnRoot function before postcss-prefix-selector and change result for it. Now postcss-nested processed in visitor block (

postcss/lib/lazy-result.js

Lines 387 to 412 in 0cb9fc2

	async runAsync() {
	this.plugin = 0
	for (let i = 0; i < this.plugins.length; i++) {
	let plugin = this.plugins[i]
	let promise = this.runOnRoot(plugin)
	if (isPromise(promise)) {
	try {
	await promise
	} catch (error) {
	throw this.handleError(error)
	}
	}
	}
	this.prepareVisitors()
	if (this.hasListener) {
	let root = this.result.root
	while (!root[isClean]) {
	root[isClean] = true
	let stack = [toStack(root)]
	while (stack.length > 0) {
	let promise = this.visitTick(stack)
	if (isPromise(promise)) {
	try {
	await promise
	} catch (e) {

)

Because of that in previous implementation postcss-prefix-selector get the 2 nodes with following selectors

But now it contains only one node with selector .foo (because postcss-nested was not processed)

So I don't know should this fixed in postcss or in postcss-prefix-selector. Or may be I don't right and my investigation is not correct (if so I can continue my research).

@ai what do you think?

[ai]

@TheSeally can we make a dirty refactoring of postcss-prefix-selector and move it to Rule event to prove this theory?

The file looks very small https://github.com/RadValentin/postcss-prefix-selector/blob/master/index.js

[TheSeally]

Yeah, I'll try this

[TheSeally]

I made a dirty change in postcss-prefix-selector only for check this theory. After this change the style.css file in test case processed normally.
So the changed code:

module.exports = function postcssPrefixSelector(options) {
  const prefix = options.prefix;
  const prefixWithSpace = /\s+$/.test(prefix) ? prefix : `${prefix} `;
  const ignoreFiles = options.ignoreFiles ? [].concat(options.ignoreFiles) : [];
  const includeFiles = options.includeFiles
    ? [].concat(options.includeFiles)
    : [];

  return {
    postcssPlugin: 'postcss-prefix-selector',
    Rule(rule) {
      if (
        ignoreFiles.length &&
        rule.source.input.file &&
        isFileInArray(rule.source.input.file, ignoreFiles)
      ) {
        return;
      }
      if (
        includeFiles.length &&
        rule.source.input.file &&
        !isFileInArray(rule.source.input.file, includeFiles)
      ) {
        return;
      }

      const keyframeRules = [
        'keyframes',
        '-webkit-keyframes',
        '-moz-keyframes',
        '-o-keyframes',
      ];

      if (rule.parent && keyframeRules.includes(rule.parent.name)) {
        return;
      }

      rule.selectors = rule.selectors.map((selector) => {
        if (options.exclude && excludeSelector(selector, options.exclude)) {
          return selector;
        }

        if (options.transform) {
          return options.transform(
            prefix,
            selector,
            prefixWithSpace + selector
          );
        }

        return prefixWithSpace + selector;
      });
    }
  }
};

[ai]

Amazing!

Are you came from Cult of Martians? I will mark task as solved my you (you can give me your name in Russian if you want).

Can I ask you to create an issue in postcss-prefix-selector. If you will even send PR to it, it will be the best solution.