- From: Justin Fagnani via GitHub <sysbot+gh@w3.org>
- Date: Tue, 24 Jan 2023 02:35:58 +0000
- To: public-css-archive@w3.org
It turns out you can emulate this feature by abusing `@supports`.
If there's an unknown supports function, the parsed stylesheet will still contain the rules inside `@supports {...}`. We can invent a function like `sheet(name)` and stash rules in there keyed by the bundled sheet name:
```css
@supports sheet(styles-one.css) {
//...
}
@supports sheet(styles-two.css) {
//...
}
```
Then we can rewrite CSS module script imports from :
```ts
import styles from './styles-one.css' assert {type: 'css'};
```
to:
```ts
import $bundledStyles from './styles-bundle.css' assert {type: 'css'};
import {getBundledSheet} from 'lit/get-bundled-sheet.js';
const styles = getBundledSheet($bundledStyles, 'styles-one.css');
```
where `getBundledSheet` is a utility to grab a set of rules in a `@supports sheet(name)` at-rule and create a new stylesheet out of them.
Proof of concept here: https://lit.dev/playground/#gist=5fab7cc0987e6f1610ba3bd4f432f02c (requires import assertions support to work)
----
@tabatkins adding native support for something like `@sheet` would eliminate the processing and double-parse (bouncing rules though `.cssText` and `insertRule()`). Seems relatively simple (but famous last words). What do you think about adding this?
--
GitHub Notification of comment by justinfagnani
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5629#issuecomment-1401322544 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 24 January 2023 02:36:00 UTC