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

Does this feature open up the path to _real_ "CSS modules"?

Right now, all CSS imports are side-effectful, but `@sheet` could make it possible to split the "import" vs "apply" parts into two steps.

1. Import:
    ```css
    @import "foo.css" sheets(A, B);
    ```
2. Apply (in any order desired):
    ```css
    @sheet B;
    @sheet A;
    ```

Also it would be useful to be able to rename sheets when importing. I think this functionality is essential for any module-like system.

```css
@import "foo.css" sheets(A as X, B as Y);

@sheet X;
@sheet Y;
```

---

Lastly — and this might be far-fetched — maybe there should be some reserved sheet names that have special meaning. For example, `@sheet inherit;` could be used to reference host context stylesheets from within a shadow-root.

```html
<head>
  <style>
    @sheet A {…}
    @sheet B {…}
  </style>
</head>

<div>
  <template shadowrootmode="open">
    <style type="module">
      @sheet inherit.A;
      @sheet inherit.B;
      /* or just @sheet inherit; */
    </style>
  </template>
</div>
```

---

Regardless of the specific ideas and syntaxes I illustrated, I think we should all be thinking about how to make CSS (and HTML) better and more useful on its own, even when JS is not involved.


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


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

Received on Saturday, 23 March 2024 19:28:44 UTC