[postcss-cascade-layers] `:not()` selector order conflicts with pseudo elements

[rbndelrio]

Bug description

Hey! Running into an issue where postcss-cascade-layers appends the :not() selector after all pseudo elements. This causes blocks using :before, :after, etc., to be ignored by browsers. Re-ordering the selector would fix this in any case I'm aware of.

Source CSS

@layer top, bottom;

@layer top {
  h1:before { content: '👍' }
}

@layer bottom {
  h2:before { content: '👎 bug' }
}

h3:before { content: '🤔 bug' }

Expected CSS

h1:before { content: '👍' }
h2:not(#\#):before { content: '👎 bug' }
h3:not(#\##\#):before { content: '🤔 bug' }

Actual CSS

h1:before { content: '👍' }
h2:before:not(#\#) { content: '👎 bug' }
h3:before:not(#\##\#) { content: '🤔 bug' }

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

N/A

Debug output

No response

Extra config

Default options, minimal config: plugins: [require('@csstools/postcss-cascade-layers')()]

What plugin are you experiencing this issue on?

PostCSS Cascade Layers

Plugin version

1.0.0

What OS are you experiencing this on?

macOS

Node Version

18.1.0

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]

@rbndelrio Thank you for reporting this.
I've prepared a fix for this issue and we will try to ship this soon.

[Antonio-Laguna]

Hey @rbndelrio !

Thanks again for taking the time to report this! We've just released 1.0.1 with the fix @romainmenke did to pseudo elements, can you test with your code to ensure it now behaves as expected?

Thanks!

[romainmenke]

@rbndelrio Can you confirm if this is fixed for you?
Happy to take another look at this if it's still causing issues.