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

romainmenke · 2022-06-16T21:33:01Z

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?

The text was updated successfully, but these errors were encountered:

Antonio-Laguna · 2022-06-17T05:33:32Z

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 · 2022-06-17T05:48:06Z

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 · 2022-08-10T16:21:52Z

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:

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

romainmenke · 2022-08-10T16:37:39Z

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 · 2022-11-04T20:04:11Z

@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 · 2022-11-04T22:05:02Z

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
we want to have solved @media param parsing
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 · 2022-11-05T19:29:30Z

@romainmenke Thanks for you detailed answer! 🙏🏽

romainmenke · 2022-11-14T18:23:44Z

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 · 2022-12-02T08:29:29Z

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

Does this mean that if I want this fix via postcss-preset-env, I need to abandon postcss-env-function?
If so, should I be able to install [email protected] atop my setup (that relies on postcss-env-function) without breaking something?

Antonio-Laguna · 2022-12-02T08:35:51Z

@wesleyboar thanks for reaching out!

Yes, and no.
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.

wesleyboar · 2022-12-02T09:28:38Z

My 2:20-morning brain could not think to install postcss-env-function separately. Thank you.

I tried installing the ~~beta~~ alpha and postcss-env-function. I do not see the fix succeed.

Has my 3:20-morning brain done anything wrong?

Source & Config

package.json (abbreviated)

  "peerDependencies": {
    "commander": "^9.4.1",
    "cssnano": "^5.1.14",
    "js-yaml": "^4.1.0",
    "merge-lite": "^1.0.2",
    "node-cmd": "^5.0.0",
    "npm-watch": "^0.11.0",
    "postcss": "^8.4.18",
    "postcss-banner": "^4.0.1",
    "postcss-cli": "^10.0.0",
    "postcss-extend": "^1.0.5",
    "postcss-env-function": "4.0.6",
    "postcss-import": "^15.0.0",
    "postcss-preset-env": "^8.0.0-alpha.1",
    "postcss-replace": "^2.0.0"
  },
  "devDependencies": {
    "@frctl/fractal": "^1.5.13",
    "@frctl/mandelbrot": "^1.10.1"
  },

No dependencies. Long story. Temporary. Does it matter?

npm list

➜  Core-Styles git:(dev--task/form-patterns--task/base-cms-portal-header) ✗ npm list postcss-env-function
@tacc/[email protected] /Users/wbomar/Code/Core-Styles
└── [email protected]

➜  Core-Styles git:(dev--task/form-patterns--task/base-cms-portal-header) ✗ npm list postcss-custom-selectors           
@tacc/[email protected] /Users/wbomar/Code/Core-Styles
└─┬ [email protected]
  └── [email protected]

src/.postcssrc.yml

plugins:
  postcss-import:
    path:
      - src/lib
  postcss-extend: {}
  postcss-env-function:
    importFrom:
      - src/lib/_themes/default.json
  postcss-preset-env:
    stage: false
    features:
      custom-media-queries: true
      media-query-ranges: true
      custom-selectors: true
  cssnano:
    preset:
      - default
      - discardDuplicates:
          exclude: true
        mergeRules:
          exclude: true
  postcss-banner:
    banner: '@tacc/core-styles v0.11.0-30-g66400cb+ | MIT | github.com/TACC/Core-Styles'
    inline: true
    important: true
  postcss-replace:
    pattern: ../../fonts/
    data:
      replaceAll: fonts/

src/.../c-button.css

@custom-selector :--disabled :disabled,[disabled];

.c-button {
  display: inline-block;

  box-sizing: border-box;

  border-width: var(--global-border-width--normal);
  border-style: solid;
}

.c-button:not(:--disabled) {
  cursor: pointer; /* WARNING: Opinionated */
}

No `@import`

✓ The @custom-selector is parsed away.

dist/c-button.css

/*! @tacc/core-styles v0.11.0-30-g66400cb+ | MIT | github.com/TACC/Core-Styles */.c-button{border-style:solid;border-width:var(--global-border-width--normal);box-sizing:border-box;display:inline-block}.c-button:not(:is(:disabled,[disabled])){cursor:pointer}

Use `@import`

ⓧ The @custom-selector remains, unparsed.

src/.../core-styles.base.css

/*! core-styles.base.css */
@import url("./components/c-button.css") layer(components);

dist/core-styles.base.css

/*! @tacc/core-styles v0.11.0-30-g66400cb+ | MIT | github.com/TACC/Core-Styles */
/*! core-styles.base.css */@layer components{@custom-selector :--disabled :disabled,[disabled];.c-button{border-style:solid;border-width:var(--global-border-width--normal);box-sizing:border-box;display:inline-block}.c-button:not(:--disabled){cursor:pointer}}

Antonio-Laguna · 2022-12-02T10:12:57Z

@wesleyboar I don't see anything immediately wrong there but I'm not really familiar with layers @romainmenke can you chime in here?

I don't see env being used there though either but I don't think it has anything to do.

PS: Thanks a ton for testing the alpha! ❤️

wesleyboar · 2022-12-02T16:58:47Z

I neglected the postcss-env-function in my "test case". It is active, but you're right, it has nothing to do.

I'll check whether postcss-env-function still works after I can use @layers+@import fix or find workaround.

——— Update ———

I neglected to enable the cascade-layers plugin.¹ After enabling, alpha version, so far, seems to work for my use case.

I have most features disabled, and enable any plugin I want to use, unless I forget, like I had today. ↩

romainmenke · 2022-12-02T18:53:45Z

Investigating the issue reported by @wesleyboar I noticed that the current fix we implemented for the original issue doesn't work at all.

This didn't come up before because at the time of creating that fix it wasn't allowed to nest @layer.

By running cascade-layers before any other plugin we force that plugin to support everything. This includes things like nested css.

The cascade-layers plugin needs to be able to always understand the most modern syntax.
I suggest we rollback the latest changes and try something else :

cascade-layers is always last
all plugins for name defining at rules needs to have a basic understanding of Cascade Layers

We shift the burden from the cascade-layers plugin to a few other plugins.
Those plugins do not need to be capable of the entire Cascade Layers feature. Only just enough to know which declaration has priority if there are naming conflicts.

csstools/postcss-plugins#481 (comment)

romainmenke · 2023-01-24T09:30:06Z

Hi everyone!

We have "embedded" support for cascade layers into these plugins.
This removes all bugs and issues the might result from having multiple PostCSS plugins that need to work together.

Thank you for all the feedback and insights 🙇

romainmenke added plugins/postcss-cascade-layers plugins/postcss-custom-media plugins/postcss-custom-selectors interop labels Jun 16, 2022

romainmenke changed the title ~~custom selector and custom media do not place nice with cascade layers~~ custom selector and custom media do not play nice with cascade layers Jun 25, 2022

wesleyboar mentioned this issue Dec 2, 2022

feat!: ease use of core-styles TACC/Core-Styles#81

Merged

romainmenke mentioned this issue Dec 2, 2022

CSS with extensions not correctly transforming #738

Closed

wesleyboar added a commit to TACC/Core-Styles that referenced this issue Dec 2, 2022

fix(postcss): custom selectors + layers, play nice

4856f85

csstools/postcss-plugins#481 (comment)

romainmenke mentioned this issue Dec 3, 2022

fix cascade layers in combination with nesting and name defining at rules #739

Merged

5 tasks

romainmenke linked a pull request Jan 23, 2023 that will close this issue

postcss-preset-env : v8 #472

Merged

romainmenke closed this as completed in #472 Jan 24, 2023

romainmenke mentioned this issue Sep 11, 2023

Custom media queries and cascade layers issue parcel-bundler/lightningcss#582

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

romainmenke commented Jun 16, 2022

Antonio-Laguna commented Jun 17, 2022

romainmenke commented Jun 17, 2022 •

edited

Loading

mirisuzanne commented Aug 10, 2022

romainmenke commented Aug 10, 2022 •

edited

Loading

dnnsjrng commented Nov 4, 2022 •

edited

Loading

romainmenke commented Nov 4, 2022

dnnsjrng commented Nov 5, 2022

romainmenke commented Nov 14, 2022

wesleyboar commented Dec 2, 2022 •

edited

Loading

Antonio-Laguna commented Dec 2, 2022 •

edited

Loading

wesleyboar commented Dec 2, 2022 •

edited

Loading

Antonio-Laguna commented Dec 2, 2022

wesleyboar commented Dec 2, 2022 •

edited

Loading

romainmenke commented Dec 2, 2022 •

edited

Loading

romainmenke commented Jan 24, 2023

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

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

Comments

romainmenke commented Jun 16, 2022

Antonio-Laguna commented Jun 17, 2022

romainmenke commented Jun 17, 2022 • edited Loading

mirisuzanne commented Aug 10, 2022

romainmenke commented Aug 10, 2022 • edited Loading

dnnsjrng commented Nov 4, 2022 • edited Loading

romainmenke commented Nov 4, 2022

dnnsjrng commented Nov 5, 2022

romainmenke commented Nov 14, 2022

wesleyboar commented Dec 2, 2022 • edited Loading

Antonio-Laguna commented Dec 2, 2022 • edited Loading

wesleyboar commented Dec 2, 2022 • edited Loading

Source & Config

No @import

Use @import

Antonio-Laguna commented Dec 2, 2022

wesleyboar commented Dec 2, 2022 • edited Loading

Footnotes

romainmenke commented Dec 2, 2022 • edited Loading

romainmenke commented Jan 24, 2023

romainmenke commented Jun 17, 2022 •

edited

Loading

romainmenke commented Aug 10, 2022 •

edited

Loading

dnnsjrng commented Nov 4, 2022 •

edited

Loading

wesleyboar commented Dec 2, 2022 •

edited

Loading

Antonio-Laguna commented Dec 2, 2022 •

edited

Loading

wesleyboar commented Dec 2, 2022 •

edited

Loading

No `@import`

Use `@import`

wesleyboar commented Dec 2, 2022 •

edited

Loading

romainmenke commented Dec 2, 2022 •

edited

Loading