[Draft] Breaking changes in Rspack v0.6.0

[ahabhgk]

This thread is used to collect planned breaking changes for Rspack v0.6.0.

[ahabhgk]

Remove builtins.css and replace it with module.generator.css and module.parser.css.

Starting from v0.6.0, Rspack's experiments.css will align with webpack's experiments.css as a target, which means that experiments.css will not support browsers that do not support CSS variables in the future, just like webpack. So, for those projects that need to use configurations that experiments CSS still does not support and require support for older browsers, we recommend using rspack.CssExtractRspackPlugin, which is also a new feature released in v0.6.0.

const config = {
   // ...
-  builtins: {
-    css: {
-      modules: {
-        exportsOnly: true,
-        localIdentName: '[hash]',
-        localsConvention: 'asIs',
-      },
-      namedExport: true,
-    }
-  },
+  module: {
+    generator: {
+      "css/auto": {
+        exportsOnly: true
+        localIdentName: '[hash]',
+        exportsConvention: 'as-is',
+      },
+    },
+    parser: {
+      "css/auto": {
+        namedExport: true,
+      },
+    },
+  },
}

In Rspack v0.6.0, we introduce three new module type of generator options and parser options: css/auto, css, and css/module, these parser options and generator options will only take effect when experiments.css is enabled.

The parser options of css, css/auto, css/module module type both have namedExports, which is used for controlling whether to use ES modules named export for the exports of css. This will replace builtins.css.namedExports.

The generator options of css/auto includes exportsOnly, exportsConvention, and localIdentName, the generator options of css/module includes exportsOnly, exportsConvention, and localIdentName, and the generator options of css includes exportsOnly, and exportsConvention. For migration, exportsOnly will replace builtins.css.modules.exportsOnly, exportsConvention will replace builtins.css.modules.localsConvention, localIdentName will replace builtins.css.modules.localIdentName.

And there are some related breaking changes that you should notice:

1. The value of exportsConvention changed from 'asIs', 'camelCaseOnly'... to 'as-is', 'camel-case-only'... consistent with webpack experiments css.

2. Support using default export, named export, and namespace export at the same time with namedExports: false, before it only support using default export:

   // before v0.6.0 only default export is supported
   import classes from './index.module.css';
   
   // now these are also supported
   // namespace export
   import * as classes from './index.module.css';
   // named export
   import { class1, class2 } from './index.module.css';
   // default export and named export
   import classes, { class1, class2 } from './index.module.css';    

3. The default value of namedExports changed from false to true, this means you need to use namespace import (import * as classes from './style.css') or named import (import { class1 } from './style.css') by default, this will improve the future compatibility with native css modules. And this doesn't means you need to migrate all imports at once, you can disable this by namedExports: false, and since now namedExports: false also support named export and namespace export, you can migrate these imports progressively:

   module.exports = {
     module: {
       parser: {
         css: { namedExports: false },
         "css/auto": { namedExports: false },
         "css/module": { namedExports: false },
       },
     }
   }

4. The default value of localIdentName changed from '[path][name][ext]__[local]' in development mode and [hash] in production mode to [uniqueName]-[id]-[local] in development and production mode, this will have small improvement of the gzip size of css chunks.

5. The default value of exportsOnly changed from false in node or web target to false in web target and true in node target.

6. The default rule of css module type changed from "css" to "css/auto", "css/auto" will automatically parse css files that ends with .module.css or .modules.css as css modules, just like css-loader's modules.auto: true, this will simplify the rule of using less or sass with css modules.

[colinaaa]

How about builtins.css.namedExport? Is it going to be module.parser.css.namedExport?

[ahabhgk]

yes

[ahabhgk]

Remove experiments.rspackFuture.disableApplyEntryLazily

[h-a-n-a]

Upgraded swc_core to 0.90.x. Breaking lower version swc wasm plugins.
#6009

[h-a-n-a]

Remove compiler.build and compiler.rebuild. #6066

[JSerFeng]

Enable experiments.rspackFuture.newTreeshaking by default.

This could slow down your build performance. If you encountered performance issue, you can disable this in development mode by disbling optimization.providedExports