The following proposal is meant to address limitations with JavaScript modules that depend on CSS stylesheets such that they are prevented from acting in a fully modular yet performant manner. The web needs modular widgets. With more widgets becoming JavaScript based, in my view, there is not so much of a need for HTML imports (especially if one expresses one’s HTML within JavaScript) as there is for stylesheet imports within the language that can rule them all: JavaScript.
I’d like to see a standard means to indicate stylesheet dependencies within individual JavaScript widget-building files such that these imports are statically analyzable for immediate asynchronous downloading of stylesheets but which blocks HTML rendering (and JavaScript execution) until all such imports occur.
Ideally, these could be interspersed with ES6 Module imports such that:
// module-1.js
importStylesheet 'stylesheet1.css';
import m2 from 'module-2.js';
importStylesheet 'stylesheet3.css';
// module-2.js
importStylesheet 'stylesheet2.css';
…would load the stylesheets in any order but apply them in the cascading order:
- stylesheet1.css
- stylesheet2.css
- stylesheet3.css
Tools like Rollup could strip out these stylesheet importing references to either build a single external CSS file or possibly insert a style tag dynamically with the contents at the beginning of the module, but even without bundling, performance benefits would be there, and web widgets (at least JavaScript-based ones) could finally become fully modular as with ES6 Modules. There’d also be no need for a proliferation of non-standard import directives meant to fill this gap.
(An optional standard for dynamic, parallel (or at least parallelizable-through-promises) run-time stylesheet importing (analogous to the import() proposal) would be nice too, without the extra hassle of a fetch-based solution, and while not having all of the benefits of static loading, it would allow for more choice among widget users about whether to apply stylesheets or not.)
