Introduce CSS Module Script #4898

dandclark · 2019-09-09T20:25:05Z

This change extends the ES Script Modules system to include CSS module scripts. These will allow web developers to load CSS into a component definition in a manner that interacts seamlessly with other module script types.

Explainer document
Discussion thread

This PR includes the integration for the import assertions TC39 proposal. I plan to land that integration as a separate PR (#5883), but those changes are included here as well since CSS module script depends on them.

At least two implementers are interested (and none opposed):
- Chromium: Implemented behind a flag
- Firefox: CSS Module Scripts mozilla/standards-positions#541
Tests are written and can be reviewed and commented upon at:
- https://github.com/web-platform-tests/wpt/tree/master/html/semantics/scripting-1/the-script-element/css-module
Implementation bugs are filed:
- Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=992499
- Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1720570
- Safari: https://bugs.webkit.org/show_bug.cgi?id=227967

/index.html ( diff )
/infrastructure.html ( diff )
/references.html ( diff )
/scripting.html ( diff )
/timers-and-user-prompts.html ( diff )
/webappapis.html ( diff )

domenic

Great start! Some refactoring to do to avoid calling JavaScript-facing constructors/functions, but overall nice and simple.

source

Ms2ger · 2019-09-20T09:02:34Z

What's the relationship between this and #4423?

dandclark · 2019-09-26T22:36:08Z

What's the relationship between this and #4423?

Oh, I hadn't seen #4423. The two PRs are doing almost the same thing in a pretty similar way so if you and @littledan prefer I'm OK with dropping mine and deferring to that one since it came first. :) I'm also happy to keep driving this one if that's easier.

The one difference I see is that #4423 uses CSSStyleSheet.replace() whereas mine uses replaceSync(). replaceSync() is used here because it throws on @imports, which we want to block until we've reached an agreement on which way to handle them.

Although, given the need to work out the security issue raised by Apple, it may still be some time before either can be merged.

Ms2ger · 2019-09-27T11:14:04Z

If you're willing to take over, that's great, and I'll close the other one. I was just wondering if I missed something.

dandclark · 2019-09-27T16:29:20Z

If you're willing to take over, that's great, and I'll close the other one. I was just wondering if I missed something.

Sure, I'll keep moving forward with this one.

This is the final change required for CSS Modules to be utilized by developers. Following the acceptance of this change, if you run chromium with the CSSModules runtime flag, the following is now valid syntax: <script type="module"> import sheet from "./example.css"; </script> CSS Modules Explainer: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md CSS Modules Spec PR: whatwg/html#4898 Bug: 967018 Change-Id: Ifdee5b92259fb7e4e9c8f9aa88e69a98eb55c551

Merge commit 'refs/changes/23/1799923/13' of https://chromium.googlesource.com/chromium/src into user/sasebree/css-modules [SyntheticModules] Implements CSS Modules This is the final change required for CSS Modules to be utilized by developers. Following the acceptance of this change, if you run chromium with the CSSModules runtime flag, the following is now valid syntax: <script type="module"> import sheet from "./example.css"; </script> CSS Modules Explainer: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md CSS Modules Spec PR: whatwg/html#4898 Bug: 967018 Change-Id: Ifdee5b92259fb7e4e9c8f9aa88e69a98eb55c551

This is the final change required for CSS Modules to be utilized by developers. Following the acceptance of this change, if you run chromium with the CSSModules runtime flag, the following is now valid syntax: <script type="module"> import sheet from "./example.css"; </script> CSS Modules Explainer: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md CSS Modules Spec PR: whatwg/html#4898 Bug: 967018 Change-Id: Ifdee5b92259fb7e4e9c8f9aa88e69a98eb55c551

This is the final change required for CSS Modules to be utilized by developers. Following the acceptance of this change, if you run chromium with the CSSModules runtime flag, the following is now valid syntax: <script type="module"> import sheet from "./example.css"; </script> CSS Modules Explainer: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md CSS Modules Spec PR: whatwg/html#4898 Bug: 967018 Change-Id: Ifdee5b92259fb7e4e9c8f9aa88e69a98eb55c551 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1799923 Commit-Queue: Sam Sebree <sasebree@microsoft.com> Reviewed-by: Hiroshige Hayashizaki <hiroshige@chromium.org> Reviewed-by: Kouhei Ueno <kouhei@chromium.org> Reviewed-by: Hiroki Nakagawa <nhiroki@chromium.org> Reviewed-by: Yuki Shiino <yukishiino@chromium.org> Cr-Commit-Position: refs/heads/master@{#724896}

…s, a=testonly Automatic update from web-platform-tests [SyntheticModules] Implements CSS Modules This is the final change required for CSS Modules to be utilized by developers. Following the acceptance of this change, if you run chromium with the CSSModules runtime flag, the following is now valid syntax: <script type="module"> import sheet from "./example.css"; </script> CSS Modules Explainer: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md CSS Modules Spec PR: whatwg/html#4898 Bug: 967018 Change-Id: Ifdee5b92259fb7e4e9c8f9aa88e69a98eb55c551 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1799923 Commit-Queue: Sam Sebree <sasebree@microsoft.com> Reviewed-by: Hiroshige Hayashizaki <hiroshige@chromium.org> Reviewed-by: Kouhei Ueno <kouhei@chromium.org> Reviewed-by: Hiroki Nakagawa <nhiroki@chromium.org> Reviewed-by: Yuki Shiino <yukishiino@chromium.org> Cr-Commit-Position: refs/heads/master@{#724896} -- wpt-commits: 6fbd872e9ac5fe60e32946bc9b318be6eeada123 wpt-pr: 20012

…s, a=testonly Automatic update from web-platform-tests [SyntheticModules] Implements CSS Modules This is the final change required for CSS Modules to be utilized by developers. Following the acceptance of this change, if you run chromium with the CSSModules runtime flag, the following is now valid syntax: <script type="module"> import sheet from "./example.css"; </script> CSS Modules Explainer: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md CSS Modules Spec PR: whatwg/html#4898 Bug: 967018 Change-Id: Ifdee5b92259fb7e4e9c8f9aa88e69a98eb55c551 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1799923 Commit-Queue: Sam Sebree <sasebreemicrosoft.com> Reviewed-by: Hiroshige Hayashizaki <hiroshigechromium.org> Reviewed-by: Kouhei Ueno <kouheichromium.org> Reviewed-by: Hiroki Nakagawa <nhirokichromium.org> Reviewed-by: Yuki Shiino <yukishiinochromium.org> Cr-Commit-Position: refs/heads/master{#724896} -- wpt-commits: 6fbd872e9ac5fe60e32946bc9b318be6eeada123 wpt-pr: 20012 UltraBlame original commit: 8c5b203f0fad559c872cc96687daa54cda3803bb

source

…d be used to directly load a CSS module

domenic

Oh, dang, I think I found something. This attempts to create CSSStyleSheet objects unconditionally, right? Even in workers? But those objects aren't exposed in workers.

What is the intended behavior in workers? I think that needs a spec (and maybe tests).

dandclark · 2021-07-13T17:38:09Z

Yes, seems like that's a bug in the PR.

My thinking is that the behavior in a Worker should be basically the same as it is now without the CSS module scripts feature. The import's MIME type check should fail when it sees text/css, even if type: "css" was asserted. We do have a test for this, validating that a Worker attempting to load a CSS module fails to do so: https://github.com/web-platform-tests/wpt/blob/master/html/semantics/scripting-1/the-script-element/css-module/css-module-worker-test.html

The simplest spec fix might be to just use the destination parameter in "fetch a single module script" to prevent us from trying to create a CSS module in a Worker. This step (line 90788):

If the MIME type essence of MIME type is text/css and module type is "css", then set module script to the result of creating a CSS module script given source text and module map settings object.

Could become this:

If the MIME type essence of MIME type is text/css, module type is "css", and destination is "script", then set module script to the result of creating a CSS module script given source text and module map settings object.

domenic · 2021-07-13T17:43:27Z

My thinking is that the behavior in a Worker should be basically the same as it is now without the CSS module scripts feature.

Makes sense to me! And I'm glad to hear we have a test for it.

The simplest spec fix might be to just use the destination parameter in "fetch a single module script" to prevent us from trying to create a CSS module in a Worker. This step (line 90788):

Interesting! I feel a bit unsure about using destination in such a way, but I see that the algorithm already switches on it for some fetching stuff, so maybe it's fine. An alternate approach might be to check if CSSStyleSheet is exposed in module map settings object's Realm, either in that step, or as an early-return-null in "create a CSS module script".

WDYT?

… to do so in Workers.

dandclark · 2021-07-13T18:17:01Z

I think I prefer your version. I've added it as an early return in "create a CSS module script".

dandclark · 2021-07-14T16:03:01Z

@domenic Friendly ping -- when you get a chance please let me know if the fix for the Worker issue looks good to you. It would be great to ship this soon but I'd like to have this PR in a good state first.

domenic · 2021-07-14T18:40:46Z

Yay, all merged! @dandclark can you be sure to file WebKit and Gecko bugs and update the OP with links to them appropriately?

domenic · 2021-07-14T18:48:21Z

Also let us know if you have any interest in writing a post for https://blog.whatwg.org/ about this work; it's been five years since https://blog.whatwg.org/js-modules and people might enjoy an update diving into how this work was spread across multiple standards bodies and proposals, and what's coming up next with JSON and maybe HTML modules!

dandclark · 2021-07-14T21:18:29Z

Thanks @domenic!

I actually wasn't expecting that we'd complete the merge quite yet since @annevk had a concern here about adding another import assertions host hook that I don't think we'd formally resolved yet. That said I think it's fine because:

The addition of the host hook has been discussed twice now in TC39, most recently last night (I still need to update the issue thread). At this point I think it's very unlikely that the host hook would be added due to concerns from non-web EcmaScript hosts.
Even if the host hook were added and we need to update the HTML integration, I don't think it would be a breaking change for implementors. The web is always going to fail on unknown module types anyway. The host hook was more about whether we should make non-web hosts do so as well.

Yay, all merged! @dandclark can you be sure to file WebKit and Gecko bugs and update the OP with links to them appropriately?

Done.

Also let us know if you have any interest in writing a post for https://blog.whatwg.org/ about this work; it's been five years since https://blog.whatwg.org/js-modules and people might enjoy an update diving into how this work was spread across multiple standards bodies and proposals, and what's coming up next with JSON and maybe HTML modules!

Yes, I'd be interested in that.

domenic · 2021-07-14T21:34:04Z

I actually wasn't expecting that we'd complete the merge quite yet since @annevk had a concern here about adding another import assertions host hook that I don't think we'd formally resolved yet. That said I think it's fine because:

Ah, great, thanks for spelling that out. Indeed it was my impression these things were pretty settled as well.

Yes, I'd be interested in that.

Awesome! I'll reach out to you over email with some details on getting set up with an account etc.

Enable CSS module scripts by default. I2S blink-dev thread: https://groups.google.com/a/chromium.org/g/blink-dev/c/iT0bQjzD04k HTML Spec PR: whatwg/html#4898 Bug: 992499 Change-Id: I618ec0579cfd4e652306d0da539335878adfa53d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2957354 Reviewed-by: Domenic Denicola <domenic@chromium.org> Reviewed-by: Yoav Weiss <yoavweiss@chromium.org> Commit-Queue: Dan Clark <daniec@microsoft.com> Cr-Commit-Position: refs/heads/master@{#902075} NOKEYCHECK=True GitOrigin-RevId: 39e0478a21b609d55a131427ce256061bf69a426

This was introduced in 3d45584 (whatwg#4898).

This was introduced in 3d45584 (#4898).

In particular: * Give script's settings object an ID and data-x. * Note that a script's fetch options can be null. * Correct miscount in definition of 'script'. This was introduced in 3d45584 (#4898). * Fix typos in HostLoadImportedModule. Fixes #9867 and closes #9888.

dandclark mentioned this pull request Sep 10, 2019

2019 TPAC F2F WICG/webcomponents#826

Closed

domenic requested changes Sep 13, 2019

View reviewed changes

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

annevk mentioned this pull request Sep 28, 2019

[WIP] Add style sheet module scripts #4423

Closed

justinfagnani mentioned this pull request Oct 1, 2019

Change 'CSS Modules' name to avoid webdev confusion WICG/webcomponents#843

Closed

chromium-wpt-export-bot mentioned this pull request Nov 6, 2019

[SyntheticModules] Implements CSS Modules web-platform-tests/wpt#20012

Merged

Minor fixes, mostly spacing and quotes

f5f884d

domenic reviewed Jul 12, 2021

View reviewed changes

source Show resolved Hide resolved

Update paragraph that incorrectly stated that <script src='...'> coul…

0f3b259

…d be used to directly load a CSS module

domenic approved these changes Jul 13, 2021

View reviewed changes

domenic requested changes Jul 13, 2021

View reviewed changes

Add early-return in 'create a CSS module script' so that we don't try…

44085ad

… to do so in Workers.

Tweaks

a879a84

domenic approved these changes Jul 14, 2021

View reviewed changes

domenic merged commit 3d45584 into whatwg:main Jul 14, 2021

dandclark mentioned this pull request Jul 27, 2021

Reland JSON module scripts #5658

Merged

3 tasks

dandclark mentioned this pull request Nov 19, 2021

Prevent modules from being imported with a type: 'javascript' assertion #7350

Merged

foolip mentioned this pull request Oct 17, 2022

CSS Module Scripts web-platform-tests/interop#206

Closed

uasan mentioned this pull request Oct 20, 2022

CSS module scripts WebKit/standards-positions#77

Closed

Ms2ger added a commit to Ms2ger/html that referenced this pull request Oct 20, 2023

Editorial: correct miscount in definition of 'script'

d2c8193

This was introduced in 3d45584 (whatwg#4898).

Ms2ger added a commit that referenced this pull request Oct 20, 2023

Editorial: correct miscount in definition of 'script'

f7a2f62

This was introduced in 3d45584 (#4898).

Ms2ger added a commit that referenced this pull request Oct 20, 2023

Editorial: correct miscount in definition of 'script'

cffa6da

This was introduced in 3d45584 (#4898).

Ms2ger added a commit that referenced this pull request Oct 23, 2023

Editorial: correct miscount in definition of 'script'

f911319

This was introduced in 3d45584 (#4898).

dandclark mentioned this pull request Oct 26, 2023

CSS Module Scripts web-platform-tests/interop#597

Closed

3 tasks

jogibear9988 mentioned this pull request Nov 22, 2023

Support also css files for use with import attributes microsoft/TypeScript#56507

Closed

benceszenassy mentioned this pull request May 1, 2024

Carbon v11 carbon-design-system/carbon-components-vue#1587

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Introduce CSS Module Script #4898

Introduce CSS Module Script #4898

dandclark commented Sep 9, 2019 •

edited

Loading

domenic left a comment

Ms2ger commented Sep 20, 2019

dandclark commented Sep 26, 2019 •

edited

Loading

Ms2ger commented Sep 27, 2019

dandclark commented Sep 27, 2019

domenic left a comment

dandclark commented Jul 13, 2021

domenic commented Jul 13, 2021

dandclark commented Jul 13, 2021

dandclark commented Jul 14, 2021

domenic commented Jul 14, 2021 •

edited

Loading

domenic commented Jul 14, 2021

dandclark commented Jul 14, 2021

domenic commented Jul 14, 2021

Introduce CSS Module Script #4898

Introduce CSS Module Script #4898

Conversation

dandclark commented Sep 9, 2019 • edited Loading

domenic left a comment

Choose a reason for hiding this comment

Ms2ger commented Sep 20, 2019

dandclark commented Sep 26, 2019 • edited Loading

Ms2ger commented Sep 27, 2019

dandclark commented Sep 27, 2019

domenic left a comment

Choose a reason for hiding this comment

dandclark commented Jul 13, 2021

domenic commented Jul 13, 2021

dandclark commented Jul 13, 2021

dandclark commented Jul 14, 2021

domenic commented Jul 14, 2021 • edited Loading

domenic commented Jul 14, 2021

dandclark commented Jul 14, 2021

domenic commented Jul 14, 2021

dandclark commented Sep 9, 2019 •

edited

Loading

dandclark commented Sep 26, 2019 •

edited

Loading

domenic commented Jul 14, 2021 •

edited

Loading