-
Notifications
You must be signed in to change notification settings - Fork 2.6k
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
Conversation
There was a problem hiding this 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.
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 Although, given the need to work out the security issue raised by Apple, it may still be some time before either can be merged. |
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
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
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
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
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
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}
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
…d be used to directly load a CSS module
There was a problem hiding this 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).
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 The simplest spec fix might be to just use the
Could become this:
|
Makes sense to me! And I'm glad to hear we have a test for it.
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 WDYT? |
… to do so in Workers.
I think I prefer your version. I've added it as an early return in "create a CSS module script". |
@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. |
Yay, all merged! @dandclark can you be sure to file WebKit and Gecko bugs and update the OP with links to them appropriately? |
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! |
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:
Done.
Yes, I'd be interested in that. |
Ah, great, thanks for spelling that out. Indeed it was my impression these things were pretty settled as well.
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 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 )