CSS Module Scripts

[dandclark]

Description

CSS modules (with import attributes) are a way to import CSS files in JavaScript via the ES module syntax.

Note: Per discussion of the interop team this proposal is split off from #436 to be considered independently of JSON module scripts in proposal selection.
cc @o-t-w.

Specification

https://github.com/tc39/proposal-import-attributes
whatwg/html#4898

Open Issues

whatwg/html#7233
There is an open PR that would close this issue.

Tests

https://wpt.fyi/results/html/semantics/scripting-1/the-script-element?label=master&label=experimental&aligned&q=%28import-attributes%20or%20css%29%20and%20not%20assertions

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

Safari Technology Preview supports import attributes.
WebKit position on CSS module scripts

Chrome Canary is currently updating the import attribute syntax from import assertions.

Gecko standards position on CSS modules

Browser bug reports

Gecko bug for import attributes.
Gecko bug for CSS modules scripts

Developer discussions

Polls & Surveys

No response

Existing Usage

No response

Workarounds

No response

Accessibility Impact

No impact.

Privacy Impact

No impact.

Other

No response

[nairnandu]

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

We wanted to let you know that this proposal was not selected to be part of Interop 2024. This is because we got many more proposals than we could include in this year's project. Note that individual vendors may nevertheless choose to advance work in this area during the forthcoming year. We would welcome this proposal being resubmitted again next year, if necessary.

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

Posted on behalf of the Interop team.