Re: [csswg-drafts] [CSS Import Once] @import-once, or some syntax for importing a stylesheet only once (#6130)

Also just read through most of https://github.com/WICG/webcomponents/issues/759 and if I am reading that correctly there are a lot of voices who want to align JS and CSS dependency graph behavior. But there is also very good info on why they are different. Most notable https://github.com/WICG/webcomponents/issues/759#issuecomment-490685490

----

> What is happening with the layers?

I am assuming you are referring to :

```css
@layer some-lib.some-lib.some-lib {
 h1 {
  text-decoration: underline;
 }
}
```

Where `@layer some-lib.some-lib.some-lib` can be surprising given that you each time only wrote a single `some-lib`.

When writing `@import "foo.css" layer(some-lib)` you are loading "foo.css" and applying all of its contents into a new `some-lib` layer.

Any cascade layers inside the loaded stylesheet would become nested cascade layers.

Do this a few times and you end up with `some-lib.some-lib.some-lib`.

This is surprising when coming at this from a JS module graph mental model but important to keep in mind that cascade layers are a different feature and they do not need to fit that mental model.

They there are different doesn't meant that they aren't useful for conflict resolution between loaded styles.

I don't want to go into too much detail here because there are good docs for cascade layers and they aren't the focus of this thread.

> Can you explain how we end at the cyan result in the layers version?

`pink` is declared in `some-lib.some-lib.some-lib.some-lib` which is a more deeply nested cascade layer than `cyan` which is in `some-lib.some-lib`, so cyan wins out.

But this is a really artificial example and I think that it isn't a good demonstration of the utility of cascade layers. That all the nested cascade layers share the same name part also doesn't help in discussing it :)

> Can you describe the structure of the stylesheets and the layers as they relate to those sheets?

See the first note :)

I think this specific example mainly demonstrates that CSS becomes a mess when you import a complex dependency graph with nested cascade layers while re-using the same name part for each cascade layer. Trying to coherently describe its structure would be very hard.

I want to try to do that, but not sure how helpful that would be to the overal thread :)

-- 
GitHub Notification of comment by romainmenke
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6130#issuecomment-1975380565 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 3 March 2024 22:30:23 UTC