Proposal: CSS @sheet

[KurtCattiSchmidt]

Link to explainer

CSS @sheet is a mechanism for bundling multiple CSS stylesheets into one .css file. There are numerous practical advantages to bundling multiple CSS sheets into one file, including reduced network requests and potentially increased compression ratios.

@sheet is an at-block with an identifier:

style.css:

@sheet sheet1 {
 ...
}

Sheets defined via @sheet can be referenced via fragment identifiers in URL's that match the @sheet identifier:

<link rel="stylesheet" href="style.css#sheet1">

This was discussed in the CSSWG call on 2023-04-05 as well as this discussion.

We propose expanding this definition to include @sheet definitions at the document level, which can similarly be referenced via a local fragment:

<style>
@sheet sheet1 {
 ...
}
</style>
<link rel="stylesheet" href="#sheet1">

Much like anchor fragments, Shadow DOM nodes can access @sheet definitions from their parent scope:

<style>
@sheet foo {
  div {
    color: red;
  }
}
</style>
<template shadowrootmode="open">
  <link rel="stylesheet" href="#foo" />
  <span>I'm in the shadow DOM</span>
</template>

More details and examples can be found in the explainer link above. I would welcome any comments/suggestions/additional use cases, either in this thread or as issues in the MSEdgeExplainers repo: New issue

[jyasskin]

FWIW, a fragment pointing into an HTML file seems like the wrong way to refer to @sheet declarations inside inline CSS inside that HTML file. Specifically, fragment resolution in URLs depends on the MIME type of the resource (https://html.spec.whatwg.org/multipage/browsing-the-web.html#the-indicated-part-of-the-document, https://www.rfc-editor.org/rfc/rfc8820#name-uri-fragment-identifiers). Inside an HTML document, fragments point to the element with a matching 'id' or <a name> attribute, or the text identified by https://wicg.github.io/scroll-to-text-fragment/#invoking-text-directives. That won't find an @sheet.

You could consider extending the fragment syntax again to allow it to explicitly navigate into inline CSS, but I feel like a new attribute might be a better way to do this, as discussed in w3ctag/design-reviews#1000 (comment).

[andruud]

Will there be a restriction on where @sheet is allowed? Only top-level, and before @import?