CSS modules: How to replace css-loader with the other minimizers CssMinimizerPlugin for CSS modules?

[nyngwang]

I know that css-loader has already provided the functionality for enabling CSS Modules by default, and that Lightning CSS also provides an option for enabling CSS Modules. So now I wondering whether there will be some overlapping that might be redundant (fortunately) or problematic (unfortunately) when I concatenate the first two loaders together like this, where they both can enable CSS Modules functionality:

module: {
  rules: [
    {
      test: /.s?css$/,
      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
    },
  ],
},

1. Does it make a difference between using Lightning CSS or css-loader to enable CSS Modules features?
2. If it does, how do I change the above settings to enable CSS Modules by Lightning CSS instead of css-loader without redundant work being done?

Thanks!

[alexander-akait]

You need to create a loader and use Lightning CSS there, it is impossible to use Lightning CSS modules in CssMinimizerPlugin

[nyngwang]

IMPORTANT NOTE: This is NOT correct.

Just for confirmation, do you mean that the following method is incorrect?

1. From the docs of css-minimizer-webpack-plugin, they say Lightning CSS is supported. And it's possible to pass some minimizerOptions to it.

   module.exports = {
   
     optimization: {
       minimize: true,
       minimizer: [
         new CssMinimizerPlugin({
           minify: CssMinimizerPlugin.lightningCssMinify,
           minimizerOptions: {
             // This line.
           },
         }),
       ],
     },
   };

2. From the docs of Lightning CSS, we can pass cssModules: true as an option for the transform method it provides. So I'm checking about whether this is correct:

   module.exports = {
   
     optimization: {
       minimize: true,
       minimizer: [
         new CssMinimizerPlugin({
           minify: CssMinimizerPlugin.lightningCssMinify,
           minimizerOptions: {
             cssModules: true,
           },
         }),
       ],
     },
   };

3. What I don't understand is whether css-loader is still needed in with the settings of step 2. We can turn CSS Modules off like this by the docs of it:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: false, // set it to false to let Lightning CSS deal with the task?
        },
      },
    ],
  },
};

Sorry that I have no files to test now so the post. Need confirmation.

[alexander-akait]

You can use that, but it will not work as you expected, yeah, Lightning CSS make you CSS code like CSS modules, but if you want to use classes in your JS files, it will not work, you need to create an own loader, we don't have official Lightning CSS loader for CSS modules, so you need to create it yourself

[nyngwang]

To @alexander-akait: Thanks for your help, I just found that my assumption is wrong. The cssModules: true has no effect at all. The output class strings by css-loader didn't change when I set cssModules: true. Sorry for being wordy, I just deleted my previous comments and let me close this thread.