CSS module scripts

[uasan]

Request for position on an emerging web specification

Implement CSS module scripts

• WebKittens who can provide input:

Information about the spec

• Spec Title: CSS module scripts
• Spec URL: https://html.spec.whatwg.org/multipage/webappapis.html#creating-a-css-module-script
• GitHub repository: Introduce CSS Module Script whatwg/html#4898
• Issue Tracker (if not the repository's issue tracker):
• Explainer (if not README.md in the repository): https://github.com/WICG/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md

Design reviews and vendor positions

• TAG Design Review:
• Mozilla standards-positions issue:

Bugs tracking this feature

• WebKit Bugzilla: https://bugs.webkit.org/show_bug.cgi?id=227967
• Radar:

Anything else we need to know

The CSS module scripts feature has been merged into the HTML spec.

[annevk]

Adding concerns: integration due to whatwg/html#7233 still existing.

[uasan]

The importance of this implementation lies in the fact that now it is impossible to make a polyfill, because importing { type: "css" } causes a syntax error, this means that you need to respond different JS source code on the server depending on the browser

[annevk]

Note that as per references in #128 the underlying syntax is likely to change here.

[clshortfuse]

From a developer perspective I'm transcompiling imports into a constructable CSSStyleSheet for Firefox.

On Safari (non TP), I put it into a HTMLStyleSheet and pass the child CSSStyleSheet that's still attached. Before adding a CSSStyleSheet to a ShadowDOM (Web Components), the CSSStyleSheet is inspected and the parent HTMLStyleSheet gets cloned. I imagine if/when constructable CSSStyleSheets is out ot TP, I'll be able to reduce some code, but still would need transcompilation.

I hope it gets implemented, but not entirely important for production since we package imports before deployment. For development, we'd have 0 transcompile which means we can work directly against files on the drive instead of minified (FormAssociated is/was our only polyfill). That can be rather useful for live-editing styles within the browser (easier than source maps). We do not expect to move back to SCSS, or author CSS within JS.