postcss-nesting 10.1.9 regression

[ai]

Bug description

After updating to postcss-nesting 10.1.9 I found regression in my UI.

I solved the problem by noIsPseudoSelector option.

But why :is() is not working?

If it is my mistake, let’s improve ChangeLog.

Source CSS

.checkbox_icon::before {
  @nest .checkbox_input:checked + .checkbox_control > & {
    color: black
  }
}

Expected CSS

10.1.8 output works good:

.checkbox_input:checked + .checkbox_control > .checkbox_icon::before {
    color: black
}

Actual CSS

10.1.9 doesn’t work [at least] in Firefox 101

.checkbox_input:checked + .checkbox_control > :is(.checkbox_icon::before) {
    color: black;
}

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

Yes

Debug output

No response

Extra config

PostCSS config:

{
  "plugins": {
    "@csstools/postcss-oklab-function": {
      "subFeatures": {
        "displayP3": false
      }
    },
    "postcss-opacity-percentage": {},
    "postcss-mixins": {
      "mixinsFiles": "view/**/mixins.pcss"
    },
    "postcss-nesting": {},
    "postcss-media-minmax": {},
    "autoprefixer": {}
  }
}

What plugin are you experiencing this issue on?

PostCSS Nesting

Plugin version

10.1.9

What OS are you experiencing this on?

No response

Node Version

18.4

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR

[romainmenke]

@ai thank you for reporting this!

It's a complex issue and a minimal repro would be :

.anything::before {
  @nest .something_else > & {
    color: black
  }
}

/* becomes */

.something_else > :is(.anything::before) { /* this is invalid CSS */
    color: black;
}

The root cause is that .anything::before is not a compound but a complex selector.
I only learned about this recently.

When a complex selector is the parent in a nested selector we wrap the parent with :is() to match the spec.

But at the same time ::before is not valid in :is().

---

10.1.9 was intended to resolve issues with compound selector orders.

To resolve some selectors without :is we have to re-order compound selectors so that h1 and .foo aren't glued together as .fooh1.

But :focus::before and ::before:focus are not the same and we can not re-order these.

---

I think we might need to roll back the changes (at least partly) in 10.1.9 and escalate this to CSS WG.

I actually have no idea how your case should be resolved and if it is valid (future) native CSS.

.anything::before {
  @nest .something_else > & {
    color: black
  }
}

.something_else > .anything::before {}

or

.anything.something_else::before {}

[Antonio-Laguna]

@ai this has just been released as 10.1.10. Thanks for reporting :)