optimize(postcss-cascade-layers): shorter output

[CGQAQ]

I found that in the middle you don't have to be id

~ npm run test 
> @csstools/postcss-cascade-layers@1.1.1 test
> node .tape.mjs && npm run test:exports

pass postcss-cascade-layers

> @csstools/postcss-cascade-layers@1.1.1 test:exports
> node ./test/_import.mjs && node ./test/_require.cjs

~ npm run test:browser

> @csstools/postcss-cascade-layers@1.1.1 test:browser
> node ./test/_browser.mjs

[romainmenke]

This is incorrect.
These need to be ID selectors.

Is there something specific you are trying to fix by making these shorter?

[CGQAQ]

This is incorrect. These need to be ID selectors.

Is there something specific you are trying to fix by making these shorter?

No, just wondering could it be shorter. do you have any test cases that will failing in this PR? Thanks.

[romainmenke]

npm run test:browser runs test sourced from WPT in Chrome.
These fail with this change :)

[CGQAQ]

no, it works

[romainmenke]

Ah, yes, bad copy paste on my end :)
I will add a test that will fail with this change

[romainmenke]

I've added the test and updated this branch.
fb9d0ce

You should now get this error:

Error: Evaluation failed: Error: 3 ID specificity (processed), target 'first': expected rgb(0, 128, 0), got rgb(255, 0, 0)

[CGQAQ]

yeah! you are right

[romainmenke]

We do appreciate you looking into this and taking the time to try and improve the plugin ❤️

I think the suggestion by @yisibl to dynamically switch to :not(<compound-selector>) has the most promise :)