Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce CSS Module Script #4898

Merged
merged 66 commits into from
Jul 14, 2021
Merged

Conversation

dandclark
Copy link
Contributor

@dandclark dandclark commented Sep 9, 2019

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.


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

Copy link
Member

@domenic domenic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

source Outdated Show resolved Hide resolved
source Outdated Show resolved Hide resolved
source Outdated Show resolved Hide resolved
source Outdated Show resolved Hide resolved
@Ms2ger
Copy link
Member

Ms2ger commented Sep 20, 2019

What's the relationship between this and #4423?

@dandclark
Copy link
Contributor Author

dandclark commented Sep 26, 2019

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
Copy link
Member

Ms2ger commented Sep 27, 2019

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
Copy link
Contributor Author

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.

chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Nov 6, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Nov 9, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Nov 11, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Nov 19, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Nov 19, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Nov 21, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Nov 21, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Nov 26, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Nov 26, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Nov 26, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Dec 3, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Dec 10, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Dec 11, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Dec 12, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Dec 13, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Dec 14, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Dec 14, 2019
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
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Dec 14, 2019
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}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Dec 14, 2019
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}
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this pull request Dec 19, 2019
…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
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified that referenced this pull request Dec 20, 2019
…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 Show resolved Hide resolved
Copy link
Member

@domenic domenic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor Author

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
Copy link
Member

domenic commented Jul 13, 2021

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?

@dandclark
Copy link
Contributor Author

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

@dandclark
Copy link
Contributor Author

@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 domenic merged commit 3d45584 into whatwg:main Jul 14, 2021
@domenic
Copy link
Member

domenic commented Jul 14, 2021

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

@domenic
Copy link
Member

domenic commented Jul 14, 2021

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
Copy link
Contributor Author

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:

  1. 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.
  2. 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
Copy link
Member

domenic commented Jul 14, 2021

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.

@dandclark dandclark mentioned this pull request Jul 27, 2021
3 tasks
mjfroman pushed a commit to mjfroman/moz-libwebrtc-third-party that referenced this pull request Oct 14, 2022
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
Ms2ger added a commit to Ms2ger/html that referenced this pull request Oct 20, 2023
Ms2ger added a commit that referenced this pull request Oct 20, 2023
Ms2ger added a commit that referenced this pull request Oct 20, 2023
Ms2ger added a commit that referenced this pull request Oct 23, 2023
annevk pushed a commit that referenced this pull request Oct 30, 2023
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants