refactoring css loading

[JSerFeng]

Motivation

Webpack

Webpack uses css variable to store css modules data: :export and name mapping.

head{--webpack-webpack-demo-src_bar_js:foo:webpack-demo-_src_index_module_css-foo/bar:webpack-demo-_src_index_module_css-bar/\.\/src\/index\.module\.css,name:webpack-demo-_src_other_module_css-name/\.\/src\/other\.module\.css;}

When loading a css chunk, webpack can get the link tag, get the variable from that tag, and then register module to RuntimeGlobals.moduleFactories

__webpack_require__.m[module] = (exports, module) => {module.exports = exports}

Rspack

Rspack css module has 2 sourceTypes, one is css, the other is js, css source type is consumed by render_manifest hook, used to generate css contents. The js source type is consumed by js modules that will import at runtime.

For example, one css module will become:

.foo_local { color: red; }

__webpack_require__.modules = {
  "index.module.css": (module) => {module.exports = { foo: 'foo_local' }},
  "other.css": (module) => {module.exports = {} }
}

There is a small issue though, when CSS is not needed to be exported, Rspack will still generate an unnecessary JS module that cannot be removed, you can see other.css above, because this part of JS and CSS belong to the same module. If treeshaking removes this module, the CSS will also not be generated.

We don't need the empty js file, it will do nothing but make the bundle size a little larger.

Solution

This implementation is similar to webpack, but webpack uses css variable to store the meta data, which is not allowed in legacy browsers like IE 11.

We want the css module not appear directly in the RuntimeGlobals.moduleFactories, instead we store only the needed css's meta data into some kind of runtime module.

Runtime module

When loading a new async chunk, the async chunk can access and modify runtime modules. We can do like this:

(self["webpackChunkwebpack_demo"] = self["webpackChunkwebpack_demo"] || []).push([["async_chunk_js"],{
/* javascript modules */
}, (__webpack_require__) => {
// we can generate below runtime code at compile time.
__webpack_require__.modules['async.module.css'] = (module) => {
  module.exports = { foo: 'foo_local' };
}
}]);

We have all the information we need for css module name mappings, so we can generate runtime code that inserts needed css modules at compile time. For those modules who don't need exports we can just skip it.

Benefits

This way we can get rid of empty js file for normal css type.