Re: [csswg-drafts] Proposal: CSS @sheet (#11509)

From what I understand, there are arguments against using URL fragments but it hasn't been rejected completely.

The main concern is the MIME type mismatch. It makes sense sense that `page.html#id` is expected to match an element in HTML (rather than a `@sheet`). However, this issue does not apply to `styles.css#sheet`, so I don't think it should be rejected.

`@sheet` solves the problem of bundling multiple stylesheets into a single file, and importing individual sheets as needed (from HTML/CSS/JS, all without any new syntax!).

```html
<link rel="stylesheet" href="/styles.css#sheet1">
```
```css
@import "/styles.css#sheet1";
```
```js
import sheet1 from "/styles.css#sheet1" with { type: "css" };
```

I also agree with the [comment](https://github.com/w3ctag/design-reviews/issues/1000#issuecomment-2433471327) that @robglidden linked to, i.e. the duplication problem should be "addressed at the root, by specifying that these requests MUST be deduplicated". This would make `styles.css#sheet` much more powerful.

---

There was another important point made during the [F2F](https://github.com/w3c/csswg-drafts/issues/11509#issuecomment-2622330858), which I think needs to be considered again:
> <@noamr> Perhaps "importing from inline" and "partially importing from a sheet" don't require the same solution?

Here, `@sheet` with fragment URLs solves the problem of "partially importing from a sheet".

For solving the shadow DOM problem ("importing from inline"), I believe `<link rel="stylesheet" href="#style-element">` would go a long way, without complicating `@sheet`. I'm looking forward to @KurtCattiSchmidt opening a dedicated issue for `href="#style-element"`.

---

There is the advanced DSD use-case where an "inert stylesheet" needs to be emitted into light DOM and imported into shadow DOM. I believe this is at least partially solved by existing and emerging concepts:
1. For external CSS files, preload/prefetch using `<link>`, then set the `media="not all"` attribute (if the styles are not already scoped). This will help with FOUC when you request it later (e.g. from a JS component).
2. For same document, emit inline `<style>` elements with unique IDs. To prevent the styles from having any effect in light DOM, wrap them with `:host`. This could be achieved with a build-time transformation. Then, from within shadow DOM, `<link>` to those style elements using the newly-proposed `href="#style-element"` syntax.
    1. When `@scope` is available, this will become much nicer: Styles wrapped with`@scope (:host)` will only match in shadow DOM, and `:scope` can be used to refer to `:host`.
    2. (Hypothetical) I've seen mentions of `@import` and `<link>` potentially supporting scope (i.e. "importing a stylesheet into a scope"). Maybe `<style>` could have something similar, which would make it even nicer.

For a proper solution for this "inert"/"streaming DSD" use-case, probably a different avenue needs to be explored (e.g.. https://github.com/whatwg/html/issues/10673). `@sheet` seems like it's better at solving the "bundling" use-case; shoehorning it into solving the DSD problem might result in the worst of both worlds.

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


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

Received on Monday, 10 February 2025 23:54:01 UTC