cascade-layers adding `:not(#\#)` unnecessary

[andershagbard]

Bug description

cascade-layers seems to be adding :not(#\#) unnecessary.

Source CSS

@layer base, components, utilities;

@layer base {
  .base-class {}
}

@layer components {
  .component-class {}
}

@layer utilities {
  .utility-class {}
}

Expected CSS

.base-class {}
.component-class {}
.utility-class {}

Actual CSS

.base-class {}
.component-class:not(#\#) {}
.utility-class:not(#\#):not(#\#) {}

Playgound example

https://preset-env.cssdb.org/playground/#JTdCJTIyc291cmNlJTIyJTNBJTIyJTQwbGF5ZXIlMjBiYXNlJTJDJTIwY29tcG9uZW50cyUyQyUyMHV0aWxpdGllcyUzQiU1Q24lNUNuJTQwbGF5ZXIlMjBiYXNlJTIwJTdCJTVDbiUyMCUyMC5iYXNlLWNsYXNzJTIwJTdCJTdEJTVDbiU3RCU1Q24lNUNuJTQwbGF5ZXIlMjBjb21wb25lbnRzJTIwJTdCJTVDbiUyMCUyMC5jb21wb25lbnQtY2xhc3MlMjAlN0IlN0QlNUNuJTdEJTVDbiU1Q24lNDBsYXllciUyMHV0aWxpdGllcyUyMCU3QiU1Q24lMjAlMjAudXRpbGl0eS1jbGFzcyUyMCU3QiU3RCU1Q24lN0QlNUNuJTIyJTJDJTIyY29uZmlnJTIyJTNBJTdCJTIyYnJvd3NlcnMlMjIlM0ElNUIlMjIlM0UlMjAwLjIlMjUlMjBhbmQlMjBub3QlMjBkZWFkJTIyJTVEJTJDJTIybWluaW11bVZlbmRvckltcGxlbWVudGF0aW9ucyUyMiUzQTAlMkMlMjJzdGFnZSUyMiUzQTIlMkMlMjJsb2dpY2FsJTIyJTNBJTdCJTIyaW5saW5lRGlyZWN0aW9uJTIyJTNBJTIybGVmdC10by1yaWdodCUyMiUyQyUyMmJsb2NrRGlyZWN0aW9uJTIyJTNBJTIydG9wLXRvLWJvdHRvbSUyMiU3RCU3RCU3RA==

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

None

Debug output

No response

Extra config

No response

What plugin are you experiencing this issue on?

PostCSS Cascade Layers

Plugin version

5.0.1

What OS are you experiencing this on?

macOS

Node Version

15.2

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]

Hi @andershagbard

How this plugin works is extremely well documented here: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-cascade-layers#how-it-works

This plugin does not analyze your CSS to detect the extremely rare case where cascade layers weren't actually doing anything.

Your example is very artificial and doesn't reflect real world cases.

In almost every real stylesheet you will have a mix of different specificities in each cascade layer and the order of appearance might not match the order of the cascade layers.

This plugin gives a strong guarantee that your CSS will work in older browser versions without cascade layers supports in exactly the same way as it does in modern browser versions. It does not make any attempt to reduce the number of :not(#\#) selectors.

---

Is there a bug?
Or did you just wish not to see :not(#\#) in your stylesheet?

[andershagbard]

Closing this. I must have misunderstood the plugin, and the significance of the :not(#\#)s.

I just expected this plugin to simply strip the layer and order the classes, and not having the :not selectors everywhere.