custom selector and custom media do not play nice with cascade layers

[romainmenke]

I think this behaviour is largely undefined at the moment but declaring custom selectors and custom media inside @layer does not work.

Should it work?

[Antonio-Laguna]

wow, that's a big question. I'm not sure. On one hand it's like, nope, shouldn't work and the other hand is a big mayybeee?

[romainmenke]

mayybeee

Hehe, after typing this up I kept coming back to that :D

---

I think in theory they could work, but them being nested in @layer just doesn't have any effect.

It will be safest if we keep the current (broken) behaviour and wait until the relevant specs are updated.

---

Forgot to mention that I encountered this with imported styles where it is a bit more unexpected.

/* file-alpha.css */
@custom-media --small (min-width: 320px);

/* file-beta.css */
@import url(file-alpha.css) layer(media-queries);

[mirisuzanne]

I'm pretty sure we did spec this - but in a short mention nested between examples:

Name-defining at-rules such as @keyframes or @font-face that are defined inside cascade layers also use the layer order when resolving name collisions.

I think that would apply to any sort of custom-property/selector/media at-rules, which are generally name-defining. So that means they should:

1. Work as expected even inside @layer
2. If there are name conflicts, the higher layer should win (this can be achieved by ordering them, I think?)

[romainmenke]

Thank you @mirisuzanne for finding this issue and sharing this.

I've been working on an updated version which ensures this works as you describe : #543

The main issue was that the plugins that handle custom selectors and custom media transformed the CSS before the cascade layers plugin.

Resolving this will be part of the upcoming major release of postcss-preset-env, where we hope to align everything much more closely with the CSS specifications.

---

I got side-tracked a bit recently taking on maintenance for the polyfill-library and 9to5 work. Hopefully more time will be available soon!

[dnnsjrng]

@romainmenke Thanks for clarification. Could you give a small update when a fix / next major release could be available? I've to decide if we start using this on a quite big project and if its just about a couple of weeks I would take the risk :) Is this part of your v8 release cause I couldn't find a hint on your project board about that topic. Thanks for your help!

[romainmenke]

1. we want to ship v8 with a version of nesting that will land in browsers, we don't want to ship v9 a short time after only because of nesting
2. we want to have solved @media param parsing
3. we want to have an implementation of logical properties that is much simpler and more correct at the same time.

I am currently working on 1 and 2.
I would not count on v8 being ready within the next few weeks :)

[dnnsjrng]

@romainmenke Thanks for you detailed answer! 🙏🏽

[romainmenke]

This is resolved in the latest pre-release version of postcss-preset-env : https://github.com/csstools/postcss-plugins/blob/postcss-preset-env--v8/plugin-packs/postcss-preset-env/CHANGELOG.md#800-alpha1-november-14-2022

[wesleyboar]

I want this fix, but I also use postcss-env-function. That pre-release also says "Removed postcss-env-function (breaking)." So:

1. Does this mean that if I want this fix via postcss-preset-env, I need to abandon postcss-env-function?
2. If so, should I be able to install postcss-custom-selectors@7.0.0 atop my setup (that relies on postcss-env-function) without breaking something?

[Antonio-Laguna]

@wesleyboar thanks for reaching out!

1. Yes, and no.
2. You'll get an error because of mismatched dependencies which you can choose to ignore but we won't be supporting such an environment so errors could happen.

Clarifying the answer to 1, you should be able to install postcss-env-function separately as it will stay frozen. We won't be releasing new fixes for that plugin nor relying on it for postcss-preset-env as part of the plugin pack. However, you still should be able to use it either as part of your stack of PostCSS plugins or even use insertBefore/insertAfter (see docs) with PostCSS Preset Env to inject it there.