Support JSON modules and CSS Module Scripts with chrome:// URLs
Categories
(Core :: XPConnect, enhancement)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox151 | --- | fixed |
People
(Reporter: mstriemer, Assigned: dminor)
References
(Blocks 1 open bug)
Details
Attachments
(4 files)
I tried to use a CSS Module Script within one of our Lit web components, the docs for Lit suggest this should be supported.
Updating our moz-button.mjs file to use this however it appears that we're getting JS module parsing instead of CSS since it encounters a syntax error on the first CSS rule:
JavaScript error: chrome://global/content/elements/moz-button.css, line 5: SyntaxError: expected expression, got ':'
Here's the diff I used if it's helpful for testing:
diff --git a/toolkit/content/widgets/moz-button/moz-button.mjs b/toolkit/content/widgets/moz-button/moz-button.mjs
index a675fe6c7c1f..39526862ef9d 100644
--- a/toolkit/content/widgets/moz-button/moz-button.mjs
+++ b/toolkit/content/widgets/moz-button/moz-button.mjs
@@ -4,6 +4,7 @@
import { html, ifDefined, classMap } from "../vendor/lit.all.mjs";
import { MozLitElement } from "../lit-utils.mjs";
+import mozButtonStyles from "./moz-button.css" with { type: "css" };
// eslint-disable-next-line import/no-unassigned-import
import "chrome://global/content/elements/moz-label.mjs";
@@ -139,6 +140,8 @@ class MenuController {
* @fires click - The click event.
*/
export default class MozButton extends MozLitElement {
+ static styles = mozButtonStyles;
+
static shadowRootOptions = {
...MozLitElement.shadowRootOptions,
delegatesFocus: true,
@@ -221,10 +224,6 @@ export default class MozButton extends MozLitElement {
render() {
return html`
- <link
- rel="stylesheet"
- href="chrome://global/content/elements/moz-button.css"
- />
<button
?disabled=${this.disabled || this.parentDisabled}
title=${ifDefined(this.title || this.tooltipText)}
|
Assignee | |
Updated•9 months ago
|
|
|
Assignee | |
Comment 1•9 months ago
|
||
I investigated this and it turns out to be a smallish project rather than a bug fix. Currently, in SyncModuleLoader::StartFetch we fetch and compile JavaScript modules in one step, using mozJSModuleLoader::LoadSingleModuleScript.
To fix this, we should refactor a bit to separate out fetch from compiling, and then add separate support for parsing JSON and CSS modules.
The other thing that is slightly awkward for CSS modules is that this code lives under js, but we need access to StyleSheet to compile css modules. We probably need some kind of host hook to compile CSS modules to avoid directly depending upon StyleSheet in xpconnect.
All of this seems worth doing, but a bit out of scope of the initial CSS module script implementation. I'm going to unassign myself from the bug in case someone has time to get to this before me.
I'm moving this bug to xpconnect, as that is where the relevant code lives.
|
|
Assignee | |
Updated•3 months ago
|
|
|
Assignee | |
Comment 2•3 months ago
|
||
The xpconnect loader code currently uses scripts, and extracts the module
from the script at the end of the loading process. To be able to support
synthetic modules, this refactors the code to use modules internally.
|
|
Assignee | |
Comment 3•3 months ago
|
||
|
|
Assignee | |
Comment 4•3 months ago
|
||
This moves common code for compiling CSS module scripts into a
function, that we can then use in both ModuleLoader and
mozJSModuleLoader.
|
|
Assignee | |
Comment 5•3 months ago
|
||
|
||
Comment 6•3 months ago
|
||
This is slightly related to bug 2020605.
Currently the reusable components and several other modules are imported both with the regular module loader and the sync module loader, sometimes within single global, which can easily result in unexpected state.
And apparently the usage in the comment #0 is also the global: "current" case.
So, the sync module loader is used but the final target is a global with a regular module loader.
While fixing this bug itself would be nice, it would also be better ensuring the problematic use cases don't increase.
Also maybe we should prohibit the use of CSS modules in the system global, given it doesn't make much sense, as the global is not associated with any window or document.
Backed out for causing xpc failures at test_import_attributes.js
Backout link
Push with failures
Failure log(s)
|
|
Assignee | |
Comment 10•3 months ago
|
||
Looks like I need to split worker tests out into a separate test, and then skip that on Android.
|
||
Comment 11•3 months ago
|
||
|
||
Comment 12•3 months ago
|
||
| bugherder | ||
https://hg.mozilla.org/mozilla-central/rev/168004782ea8
https://hg.mozilla.org/mozilla-central/rev/44be6bf6e7c2
https://hg.mozilla.org/mozilla-central/rev/0933ff79da68
https://hg.mozilla.org/mozilla-central/rev/8bce5b56fd95
|
||
Comment 13•3 months ago
|
||
Authored by https://github.com/dminor
https://github.com/mozilla/enterprise-firefox/commit/5379430c8ae112e6ff895dcd219413b0b0f61bee
[enterprise-main] Bug 1989109 - Use modules in SyncModuleLoader and mozJSModuleLoader; r=arai
Authored by https://github.com/dminor
https://github.com/mozilla/enterprise-firefox/commit/4c4288c8f17a1960f92392f91e00fe50d37c6654
[enterprise-main] Bug 1989109 - Support ModuleType::JSON in mozJSModuleLoader; r=arai
Authored by https://github.com/dminor
https://github.com/mozilla/enterprise-firefox/commit/568973b40f3ead853d7678a1d365f4b29d505d85
[enterprise-main] Bug 1989109 - Add common function for compiling CSS module scripts; r=arai
Authored by https://github.com/dminor
https://github.com/mozilla/enterprise-firefox/commit/e69fad3e09611b945df19cd195eb56a2776067cf
[enterprise-main] Bug 1989109 - Support ModuleType::CSS in mozJSModuleLoader; r=arai
Authored by https://github.com/rperta
https://github.com/mozilla/enterprise-firefox/commit/5b8dc731efad00670799cf24a888ed046088db97
[enterprise-main] Revert "Bug 1989109 - Support ModuleType::CSS in mozJSModuleLoader; r=arai" for causin xpc failures at test_import_attributes.js
Authored by https://github.com/dminor
https://github.com/mozilla/enterprise-firefox/commit/a8c08caf2782f11df3630f89d279e6c9eb1b91e1
[enterprise-main] Bug 1989109 - Use modules in SyncModuleLoader and mozJSModuleLoader; r=arai
Authored by https://github.com/dminor
https://github.com/mozilla/enterprise-firefox/commit/e106f4793b1c1383fbdb70d2f66581ca904d3275
[enterprise-main] Bug 1989109 - Support ModuleType::JSON in mozJSModuleLoader; r=arai
Authored by https://github.com/dminor
https://github.com/mozilla/enterprise-firefox/commit/b3257acf0e10a55e87c61b72a702ca29a7630fdc
[enterprise-main] Bug 1989109 - Add common function for compiling CSS module scripts; r=arai
Authored by https://github.com/dminor
https://github.com/mozilla/enterprise-firefox/commit/624fb8736e1cc2bc100b88ec5000d337107dd2a7
[enterprise-main] Bug 1989109 - Support ModuleType::CSS in mozJSModuleLoader; r=arai
|
||
Comment 14•2 months ago
•
|
||
In one of the WebExtensions I maintain, I've just realized that I can now use CSS script modules in my Lit element modules in Nightly, which did not appear to be possible before (is not possible in Release, at least). Is it likely that this bug is the one I should thank for that? If so, we might want to mention this in the release notes for extension developers.
|
|
Assignee | |
Comment 15•2 months ago
|
||
Glad it helped out :) For extensions, there was a separate bug (https://bugzilla.mozilla.org/show_bug.cgi?id=2016369) that I recently fixed.
|
|
||
Comment 16•2 months ago
|
||
Ah, thanks!
Description
•