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

justinfagnani has just created a new issue for https://github.com/w3c/csswg-drafts:

== Multiple stylesheets per file ==
With [Cascading Stylesheet Module scripts](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md) on the horizon we will soon have the ability to import CSSStyleSheets directly into JS, like so:

```js
import sheet from './styles.css' assert {type: 'css' };
```
## Problem

The semantics here are fine for unbundled apps, but bundling becomes tricky. If you have two .css files in an app, you can't just combine them. ie:

```js
import sheet1 from './styles1.css' assert {type: 'css' };
import sheet2 from './styles2.css' assert {type: 'css' };
```

Is not compatible with:

```js
import sheet from './styles1and2.css' assert {type: 'css' };
```

The current workaround is to compile CSS into JS modules, which defeats some of the performance benefit of having the browser directly load and parse CSS.

Web Bundles _might_ solve this problem generically for multiple file types, though its future on multiple browsers seems unclear right now.

## Proposal: `@sheet`

To fix this and allow bundling of CSS, could we introduce an at-rule that contains an entire style sheet as its contents?

For example, there could be a `@sheet` rule which allows files to contain named stylesheets:

styles1and2.css:
```css
@sheet sheet1 {
  :host {
    display: block;
    background: red;
  }
}

@sheet sheet2 {
  p {
    color: blue;
  }
}
```

These could be imported separately from JS:

```js
import {sheet1, sheet1} from './styles1and2.css' assert {type: 'css' };
```

And also be available on the main style sheet:

```js
import styles, {sheet1, sheet1} from './styles1and2.css' assert {type: 'css' };
styles.sheet1 === sheet1;
```

## Relation to existing approaches

The proposal is most obviously relevant to code that manages CSSStyleSheets in JS - ie, users of [Constructible StyleSheets](https://wicg.github.io/construct-stylesheets/) and the API currently named adoptedStyleSheets.

It would also be useful as a bridge to userland CSS loaders that do bundling and scoping via selector rewriting. By standardizing bundling, scoping could be done with client-side utilities:

```js
import {sheet1, sheet1} from './styles.css' assert {type: 'css' };

// doesn't yet exist, but a utility that re-writes class selectors and returns
// an object with a .sheet property and properties for each class
import {scopeSheet} from 'css-module-utilities';

const scopedSheet1 = scopeSheet(sheet1);
const scopedSheet2 = scopeSheet(sheet2);

document.adoptedStyleSheets.push(scopedSheet1.sheet, scopedSheet2.sheet);

document.append(`<div class="${scopedSheet1.fooClass}"></div>`);
document.append(`<div class="${scopedSheet2.barClass}"></div>`);
```


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5629 using your GitHub account


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

Received on Friday, 16 October 2020 18:46:10 UTC