Rewrite dynamic imports so they automatically load their CSS dependencies using JS chunk -> CSS chunk dependency information from
modular-css. Avoid the dreaded FOUC automatically without having to manually juggle CSS files & JS chunks.
const module = await import"./expensive-styled-module.js";
const module = await Promiseallimport"./expensive-styled-module.js";
> npm i @modular-css/rollup-rewriter
⚠ Limitations ⚠
This plugin does not yet do everything for you instantly and perfectly. Maybe someday! Here's a list of current limitations:
- Only supports some of the rollup output
- Doesn't dynamically add the
loaderoption into the module so it can be inlined or extracted by rollup.
- It's just injected at the top of the module scope, so you can't depend on packaging yet. Can't be injected earlier because the full module dependency tree & chunks must be known first.
- Probably easier to ensure it's available globally and only use
- Doesn't allow for adjusting URLs to add a CDN-prefix or anything else.
- This would be straightforward, just not implemented yet. A PR would be very welcome!
const bundle = await;
;;input : "./index.js"output :dest : "./gen/bundle.js"format : "umd"plugins :;
loader option can be set if you want the plugin to inject a reference to a CSS loader that returns a promise (I like
lazyload-css). This loader must be available statically, so this option is most useful in
esm mode where it can be loaded via
The name of the promise-returning function that will be used to load CSS. The function will be passed the path to the CSS file and is expected to return a promise that resolves once the file is loaded.
loadfn option is required.
When enabled will cause the plugin to output more information about the processing as it occurs.