Closed Bug 1720570 Opened 4 years ago Closed 1 month ago

Implement CSS module scripts

Categories

(Core :: DOM: CSS Object Model, enhancement)

Product:
Core
Component:
DOM: CSS Object Model
Type:
enhancement

Tracking

()

Status:
RESOLVED FIXED
Milestone:
145 Branch
Tracking Flags:
Tracking Status
relnote-firefox --- nightly+
firefox145 --- fixed

People

(Reporter: daniec, Assigned: dminor)

References

(Depends on 1 open bug, Blocks 4 open bugs)

Details

(Keywords: dev-doc-complete, Whiteboard: [platform-feature])

User Story

web-feature: css-modules

Attachments

(10 files)

Bug 1720570 - Add pref for css module scripts; r=#layout-reviewers!
48 bytes, text/x-phabricator-request
Details | Review
Bug 1720570 - Add ModuleType::CSS; r=allstarschh!
48 bytes, text/x-phabricator-request
Details | Review
Bug 1720570 - Add CreateCssModule; r=allstarschh!
48 bytes, text/x-phabricator-request
Details | Review
Bug 1720570 - Handle css module in GetModuleType; r=allstarschh!
48 bytes, text/x-phabricator-request
Details | Review
Bug 1720570 - Move ModuleTypeAllowed check into ModuleLoaderBase; r=allstarschh!
48 bytes, text/x-phabricator-request
Details | Review
Bug 1720570 - Break out separate method to create constructed stylesheets; r=#layout-reviewers!
48 bytes, text/x-phabricator-request
Details | Review
Bug 1720570 - Add support for css modules in ModuleLoader, WorkerModuleLoader and WorkletModuleLoader; r=allstarschh!,#dom-core!
48 bytes, text/x-phabricator-request
Details | Review
Bug 1720570 - Support fetching css module scripts; r=#dom-core!
48 bytes, text/x-phabricator-request
Details | Review
Bug 1720570 - Use backgroundImage in relative-urls.html; r=#layout-reviewers!
48 bytes, text/x-phabricator-request
Details | Review
Bug 1720570 - Update web-platform test expectations; r=#layout-reviewers!
48 bytes, text/x-phabricator-request
Details | Review

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4544.0 Safari/537.36 Edg/93.0.933.1

Steps to reproduce:

The CSS module scripts feature has been merged into the HTML spec:
https://html.spec.whatwg.org/multipage/webappapis.html#creating-a-css-module-script
https://github.com/whatwg/html/pull/4898

Mozilla standards position (worth prototyping): https://github.com/mozilla/standards-positions/issues/541

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Component: Untriaged → DOM: Core & HTML
Product: Firefox → Core
Severity: -- → N/A
Component: DOM: Core & HTML → DOM: CSS Object Model
See Also: → 1670176

There is another issue here we need to resolve: https://github.com/whatwg/html/issues/7233.

Status: UNCONFIRMED → NEW
Ever confirmed: true
Blocks: 1803683

Now that the import attributes spec has re-advanced to stage 3, will work start on this?

I noticed import with type JSON had been released. Is there any kind of eta of releasing import with type CSS? Being able to import CSS would be a game changer. I know because I wrote my app with it but only tested with chrome like a noob. I had to revert everything to accommodate FF and Safari.

Any luck moving the ball forward on this one? Could really use it.

Assignee: nobody → dminor

How's this going? Having the ability to confidently import CSS across browsers will be huge for browser development.

I've started working on this, the development work should finish this year. It's too soon to tell what Firefox version we'll target for release, we'd normally keep something like this on Nightly for a few versions before shipping it.

How do I hug someone else's comment? Thank you for the update Dan!

This adds a method to create a css module to the modules interface.
Unlike JavaScript or JSON modules, we don't have an ability to parse
CSS inside SpiderMonkey, so this method accepts an already parsed
CSSStyleSheet value from the caller, and wraps it in a module.

CSS Modules are not supported in Workers and Worklets. This adds a
IsModuleTypeAllowed to ModuleLoaderBase so that the subclasses can
decide which modules are allowed.

This breaks out the common code path between creating a CSSStyleSheet
instance directly and creating one from a CSS module into a separate
method so it can be used from both places.

This is to work around Bug 1985880, where Firefox serializes shorthands
without making URIs absolute.

Blocks: 1986681
Blocks: 1987143
Pushed by dminor@mozilla.com: https://github.com/mozilla-firefox/firefox/commit/9155521841f9 https://hg.mozilla.org/integration/autoland/rev/fa4a89689760 Add pref for css module scripts; r=layout-reviewers,emilio https://github.com/mozilla-firefox/firefox/commit/e5f62514791c https://hg.mozilla.org/integration/autoland/rev/f590d5c58450 Add ModuleType::CSS; r=allstarschh https://github.com/mozilla-firefox/firefox/commit/cf4c677737de https://hg.mozilla.org/integration/autoland/rev/686f5d460d1a Add CreateCssModule; r=allstarschh https://github.com/mozilla-firefox/firefox/commit/6ff53c0877ed https://hg.mozilla.org/integration/autoland/rev/97af057b4788 Handle css module in GetModuleType; r=allstarschh https://github.com/mozilla-firefox/firefox/commit/b3be3d8fc4fe https://hg.mozilla.org/integration/autoland/rev/4052ddaadfcc Move ModuleTypeAllowed check into ModuleLoaderBase; r=allstarschh https://github.com/mozilla-firefox/firefox/commit/0552b0f555a7 https://hg.mozilla.org/integration/autoland/rev/ff428445ca11 Break out separate method to create constructed stylesheets; r=layout-reviewers,firefox-style-system-reviewers,emilio https://github.com/mozilla-firefox/firefox/commit/1c0eba5a86d1 https://hg.mozilla.org/integration/autoland/rev/54b77ee9a19d Add support for css modules in ModuleLoader, WorkerModuleLoader and WorkletModuleLoader; r=allstarschh,dom-core,emilio,smaug https://github.com/mozilla-firefox/firefox/commit/161decf185d4 https://hg.mozilla.org/integration/autoland/rev/23a9f5550b6e Support fetching css module scripts; r=dom-core,smaug https://github.com/mozilla-firefox/firefox/commit/886bec571a6b https://hg.mozilla.org/integration/autoland/rev/72ffbeefbe64 Use backgroundImage in relative-urls.html; r=layout-reviewers,emilio https://github.com/mozilla-firefox/firefox/commit/0a8f6facf2b4 https://hg.mozilla.org/integration/autoland/rev/914bd91c184d Update web-platform test expectations; r=layout-reviewers,emilio https://github.com/mozilla-firefox/firefox/commit/8267f4ae1433 https://hg.mozilla.org/integration/autoland/rev/46132a8206c4 apply code formatting via Lando
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/54756 for changes under testing/web-platform/tests
Upstream PR merged by moz-wptsync-bot
Flags: needinfo?(dminor)
Pushed by dminor@mozilla.com: https://github.com/mozilla-firefox/firefox/commit/7a9b1fbac062 https://hg.mozilla.org/integration/autoland/rev/58a973a84d4d Add pref for css module scripts; r=layout-reviewers,emilio https://github.com/mozilla-firefox/firefox/commit/ef5e3a71514a https://hg.mozilla.org/integration/autoland/rev/14fcd1c20cfc Add ModuleType::CSS; r=allstarschh https://github.com/mozilla-firefox/firefox/commit/3f20b1d5b74c https://hg.mozilla.org/integration/autoland/rev/1f1a4ac250d2 Add CreateCssModule; r=allstarschh https://github.com/mozilla-firefox/firefox/commit/4b64b94cb100 https://hg.mozilla.org/integration/autoland/rev/7b3bbb010554 Handle css module in GetModuleType; r=allstarschh https://github.com/mozilla-firefox/firefox/commit/040b387d3e6a https://hg.mozilla.org/integration/autoland/rev/09c9063f6546 Move ModuleTypeAllowed check into ModuleLoaderBase; r=allstarschh https://github.com/mozilla-firefox/firefox/commit/2ccebf50bb76 https://hg.mozilla.org/integration/autoland/rev/f3286dc18ea4 Break out separate method to create constructed stylesheets; r=layout-reviewers,firefox-style-system-reviewers,emilio https://github.com/mozilla-firefox/firefox/commit/2eb55b783d07 https://hg.mozilla.org/integration/autoland/rev/3323c49afcfc Add support for css modules in ModuleLoader, WorkerModuleLoader and WorkletModuleLoader; r=allstarschh,dom-core,emilio,smaug https://github.com/mozilla-firefox/firefox/commit/e54b57ec16ba https://hg.mozilla.org/integration/autoland/rev/32aa53c8f8c6 Support fetching css module scripts; r=dom-core,smaug https://github.com/mozilla-firefox/firefox/commit/97ec45d1dbce https://hg.mozilla.org/integration/autoland/rev/162277d2ddc8 Use backgroundImage in relative-urls.html; r=layout-reviewers,emilio https://github.com/mozilla-firefox/firefox/commit/27214f9ae862 https://hg.mozilla.org/integration/autoland/rev/d99002c1632f Update web-platform test expectations; r=layout-reviewers,emilio https://github.com/mozilla-firefox/firefox/commit/ba4e61647555 https://hg.mozilla.org/integration/autoland/rev/7c733e141343 apply code formatting via Lando

Backed out for causing build bustages

Flags: needinfo?(dminor)
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/54790 for changes under testing/web-platform/tests
Upstream PR merged by moz-wptsync-bot

Looks like the problem was a missing include: https://treeherder.mozilla.org/jobs?repo=try&revision=f9bcb9b943eb6d3ac0e295d0a9e8905f01423738.

Flags: needinfo?(dminor)
Pushed by dminor@mozilla.com: https://github.com/mozilla-firefox/firefox/commit/139007abe344 https://hg.mozilla.org/integration/autoland/rev/138d730d914a Add pref for css module scripts; r=layout-reviewers,emilio https://github.com/mozilla-firefox/firefox/commit/c85b0d2636a7 https://hg.mozilla.org/integration/autoland/rev/b38b4d946d5d Add ModuleType::CSS; r=allstarschh https://github.com/mozilla-firefox/firefox/commit/e364738192a4 https://hg.mozilla.org/integration/autoland/rev/4a9b27f40488 Add CreateCssModule; r=allstarschh https://github.com/mozilla-firefox/firefox/commit/4ea2f77d8865 https://hg.mozilla.org/integration/autoland/rev/2c2adfa50a41 Handle css module in GetModuleType; r=allstarschh https://github.com/mozilla-firefox/firefox/commit/bec9f73c5c66 https://hg.mozilla.org/integration/autoland/rev/696bd3e935ca Move ModuleTypeAllowed check into ModuleLoaderBase; r=allstarschh https://github.com/mozilla-firefox/firefox/commit/b63f5fa7b51a https://hg.mozilla.org/integration/autoland/rev/0bc3830fe30b Break out separate method to create constructed stylesheets; r=layout-reviewers,firefox-style-system-reviewers,emilio https://github.com/mozilla-firefox/firefox/commit/3fe727e5ed73 https://hg.mozilla.org/integration/autoland/rev/dcf87eee4c34 Add support for css modules in ModuleLoader, WorkerModuleLoader and WorkletModuleLoader; r=allstarschh,dom-core,emilio,smaug https://github.com/mozilla-firefox/firefox/commit/1fb38a129356 https://hg.mozilla.org/integration/autoland/rev/a418506339ed Support fetching css module scripts; r=dom-core,smaug https://github.com/mozilla-firefox/firefox/commit/72660e818b92 https://hg.mozilla.org/integration/autoland/rev/2ffe161bfa6e Use backgroundImage in relative-urls.html; r=layout-reviewers,emilio https://github.com/mozilla-firefox/firefox/commit/7eb48bd4a6d1 https://hg.mozilla.org/integration/autoland/rev/03006e9098c3 Update web-platform test expectations; r=layout-reviewers,emilio https://github.com/mozilla-firefox/firefox/commit/40c808e8362d https://hg.mozilla.org/integration/autoland/rev/43215867b9c2 apply code formatting via Lando

Dan, is that something we should mention in our 145 nightly release notes? Thanks

Flags: needinfo?(dminor)

Release Note Request (optional, but appreciated)
[Why is this notable]: Support in Nightly for CSS Module scripts, a feature which has been present in Chromium for a few years, with developer interest.
[Affects Firefox for Android]: Yes.
[Suggested wording]: Support has been added for CSS module scripts in Firefox Nightly, disabled by default using the preference "layout.css.module-scripts.enabled". CSS module scripts allow for CSS scripts to imported like ECMAScript modules using import attributes.
[Links (documentation, blog post, etc)]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with, although that doesn't mention css module scripts yet.

relnote-firefox: --- → ?
Flags: needinfo?(dminor)
See Also: → https://github.com/web-platform-tests/interop/issues/1056
Whiteboard: [platform-feature]
User Story: (updated)
Blocks: 1989109
Depends on: 1991143

Note added as Nightly-only with this wording:

Starting with Firefox 145, support has been added for CSS module scripts, disabled by default using the preference layout.css.module-scripts.enabled. CSS module scripts allow for CSS scripts to be imported like ECMAScript modules using import attributes.

Thanks

relnote-firefox: ? → nightly+
QA Whiteboard: [qa-triage-done-c146/b145]

FF145 MDN docs work for this can be tracked in https://github.com/mdn/content/issues/41503

Keywords: dev-doc-needed → dev-doc-complete
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: