CSS Module Scripts

[Westbrook]

Description

CSS Module Scripts allow JavaScript modules to import style sheets. They can then be applied to a document or shadow root using adoptedStyleSheets in the same way as constructible style sheets.

Not currently available cross browser (Safari) effecting adoption.

Rationale

• CSS modules will allow styles to be loaded in component definitions without adding <style> or elements that need to be created in each element instance.
• Authors today often use inlined CSS strings in JS modules, but many of them want to move the CSS into separate .css files.
• Without CSS-in-JS it's difficult to ensure that CSS is loaded before the component is defined and rendered. CSS module scripts provide the same ordering guarantee.
• Component authors may need to import a resource that is only available as an external .css file, and don't have control over the resource to wrap it in a JS module.

Specification

https://github.com/tc39/proposal-import-assertions

Tests

tc39/test262@18834b2

[gsnedders]

Specification

https://github.com/tc39/proposal-import-assertions

The integration for CSS modules is defined in HTML, too, IIRC.

Tests

tc39/test262@18834b2

These all just appear to be the general import assertions tests, nothing specifically about CSS modules?

[Westbrook]

Yep, while CSS is spec'd and agreed to, I'm not sure any tests have been added for it, specifically.

[jogibear9988]

And the Safari Bug for this:
https://bugs.webkit.org/show_bug.cgi?id=227967

[jogibear9988]

I think in Firefox they are also not yet ready:
https://bugzilla.mozilla.org/show_bug.cgi?id=1720570

[foolip]

Looks like the HTML part was defined in whatwg/html#4898 and is spread across the spec.

[foolip]

Tests are here:
https://wpt.fyi/results/html/semantics/scripting-1/the-script-element/css-module?label=experimental&label=master&aligned

[annevk]

This is part of #236 in a way and I have the same concern here with whatwg/html#7233 not being sorted. I'd really like to have clarity around CSP first.

[emilio]

It'd also be good to know whether they are intended to be de-duplicated etc, see WICG/webcomponents#870 etc.

[foolip]

In the MDN short survey on APIs & JavaScript, "Web Components (custom elements, Shadow DOM, etc.)" was the most popular choice by a fairly wide margin, selected by ~39% of survey takers.

Web Components was split into many granular proposals, and the survey results don't tell us which aspects web developers want the most, but it's fair to say that something about Web Components is important. (I'm posting this comment on each of the split proposals.)

[nairnandu]

Thank you for proposing CSS Module Scripts for inclusion in Interop 2023.

We wanted to let you know that this proposal was not selected to be part of Interop this year. As discussed in the issue comments, there are still open spec questions around CSP. To make progress on this area in the future it will first be necessary to ensure that the feature has a clear specification in a standards track document. We would be happy to see the proposal submitted for a future round of Interop once these spec questions are resolved.

For an overview of our process, see the proposal selection summary. Thank you again for contributing to Interop 2023!

Posted on behalf of the Interop team.