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

I've jotted down a mental model for this after the F2F.

I think importing scripts and styles should work with in a similar fashion.
- Importing scripts also has the issue of importing from an inline script.
- The `@sheet` proposal is equivalent to importing a specific `export` from a script.
- So, importing a `@sheet` should have a different syntax from importing from a `<style>`. They're orthogonal and can work together.

So starting from the current way to partially import from a script:
```js
// script.js
export const something = "foo";

// importing
import {something} from "script.js"
```

I'd suggest that importing a style from an external style, with `@sheet`, should look something like this:
```css
// sheet.css
@sheet mysheet {
  ...
}

// importing
@import mysheet from "sheet.css";
```

Or
```html
<link rel=stylesheet href="sheet.css" sheet="mysheet">
```

In addition, as a separate issue, we can allow importing a script from an inline script:
```html
<script id="bundle" type="module">
  export const something = "foo";
</script>

<script type="module">
  import {something} from "#bundle";
</script>
```

And extend it to style, allowing the use case of importing a whole inline style into shadow DOM (irrespective of `@sheet`):
```html
<style id="theme">
  * {
    --primary-color: rebeccapurple;
  }
</style>

<my-element>
  <template shadowrootmode=open>
    <style>
      // this imports the entire contents of `<style id=theme>`
      @import "#theme";
    </style>
    <!-- or -->
    <link rel=stylesheet href="#theme">
  </template>
</my-element>
```

Then we can combine the two concepts, and import a subsheet from an inline style:
```html
<style id="bundle">
  @sheet subsheet {
   // actual style
  }
</style>

<my-element>
  <template shadowrootmode=open>
    <style>
      import subsheet from "#bundle";
    </style>
    <!-- or -->
    <link rel=stylesheet href="#bundle" sheet="subsheet">
  </template>
</my-element>
```

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


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

Received on Tuesday, 11 February 2025 08:57:41 UTC