Re: [csswg-drafts] Multiple stylesheets per file (#5629)

Agenda+ to check the group's temperature on this idea (and figure out what spec it would go in).

To sum up:

The problem to solve is bundling stylesheets together. (Particularly for importing in a JS import, but also more generally to consolidate multiple requests into fewer, larger requests.) There are some inconvenient workarounds today (`@import url("data:...");`, a false `@media {...}` rule that you then reparse the contents of yourself, etc), but they suck, and also don't interact nicely with JS imports.

* Add an `@sheet <sheet-name (ident)> {<stylesheet>}` rule, which can contain anything that can go in a top-level sheet. (Except `@charset`, but that's not really a rule anyway, just a weird encoding flag handled before parsing happens.) So for example, `@sheet` can contain `@namespace`, etc.
 * The contents of `@sheet` are treated as an independent stylesheet, as if they were linked in via an `@import url("data:...");`.
 * `@sheet` rules have the same placement restrictions as `@import` - only at the top of a styelsheet.
* `@sheet` is only allowed at the top level of a stylesheet (no nesting in `@media`, etc), and also can't be nested inside of itself.
* If multiple `@sheet` rules have the same name, all but the last is ignored.
* When importing a stylesheet using JS imports, while the overall sheet is the default import (how it works today), all the `@sheet` rules are exposed as separate CSSStyleSheet objects as named exports.

So for example, given a stylesheet like:

```css
@sheet one { .bar {...} }
@sheet two { .baz {...} }
.foo {...}
```

then JS can import the sheet like:

```js
import topLevel, {one, two} from "./combinedSheet.css";
```

Remaining design questions:
* since `@sheet` is meant to emulate an `@import` with a data url, should we let it take the same import restrictions - a MQ, a SQ, a layer? Or is it okay to expect these to be translated into rules inside the `@sheet` wrapping everything?

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


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

Received on Thursday, 26 January 2023 22:05:18 UTC