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