feat: add new @rsbuild/plugin-typed-css-modules package

e2e/cases/css/css-modules-dom/index.test.ts

@@ -2,6 +2,7 @@ import { join, resolve } from 'node:path';
 import { build, gotoPage } from '@e2e/helper';
 import { expect, test } from '@playwright/test';
 import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules';
 import { fse } from '@rsbuild/shared';
 
 const fixtures = resolve(__dirname);
@@ -12,12 +13,7 @@ test('enableCssModuleTSDeclaration', async () => {
 
   await build({
     cwd: fixtures,
-    plugins: [pluginReact()],
-    rsbuildConfig: {
-      output: {
-        enableCssModuleTSDeclaration: true,
-      },
-    },
+    plugins: [pluginReact(), pluginTypedCSSModules()],
   });
 
   expect(

e2e/cases/css/css-modules-ts-declaration/index.test.ts

@@ -1,6 +1,7 @@
 import { join, resolve } from 'node:path';
 import { build } from '@e2e/helper';
 import { expect, test } from '@playwright/test';
+import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules';
 import { fse } from '@rsbuild/shared';
 
 const fixtures = __dirname;
@@ -18,13 +19,11 @@ test('should generator ts declaration correctly for css modules auto true', asyn
 
   await build({
     cwd: __dirname,
+    plugins: [pluginTypedCSSModules()],
     rsbuildConfig: {
       source: {
         entry: { index: resolve(testDir, 'index.js') },
       },
-      output: {
-        enableCssModuleTSDeclaration: true,
-      },
     },
   });
 
@@ -51,12 +50,12 @@ test('should generator ts declaration correctly for css modules auto function',
 
   await build({
     cwd: __dirname,
+    plugins: [pluginTypedCSSModules()],
     rsbuildConfig: {
       source: {
         entry: { index: resolve(testDir, 'index.js') },
       },
       output: {
-        enableCssModuleTSDeclaration: true,
         cssModules: {
           auto: (path) => {
             return path.endsWith('.less');
@@ -80,12 +79,12 @@ test('should generator ts declaration correctly for css modules auto Regexp', as
 
   await build({
     cwd: __dirname,
+    plugins: [pluginTypedCSSModules()],
     rsbuildConfig: {
       source: {
         entry: { index: resolve(testDir, 'index.js') },
       },
       output: {
-        enableCssModuleTSDeclaration: true,
         cssModules: {
           auto: /\.module\./i,
         },
@@ -107,12 +106,12 @@ test('should generator ts declaration correctly for custom exportLocalsConventio
 
   await build({
     cwd: __dirname,
+    plugins: [pluginTypedCSSModules()],
     rsbuildConfig: {
       source: {
         entry: { index: resolve(testDir, 'index.js') },
       },
       output: {
-        enableCssModuleTSDeclaration: true,
         cssModules: {
           auto: /\.module\./i,
           exportLocalsConvention: 'asIs',

e2e/cases/stylus/index.test.ts

@@ -1,11 +1,31 @@
+import { join, resolve } from 'node:path';
 import { build } from '@e2e/helper';
 import { expect, test } from '@playwright/test';
 import { pluginStylus } from '@rsbuild/plugin-stylus';
+import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules';
+import { fse } from '@rsbuild/shared';
+
+const fixtures = __dirname;
+
+const generatorTempDir = async (testDir: string) => {
+  await fse.emptyDir(testDir);
+  await fse.copy(join(fixtures, 'src'), testDir);
+
+  return () => fse.remove(testDir);
+};
+
+test('should compile stylus correctly with ts declaration', async () => {
+  const testDir = join(fixtures, 'test-temp-src-1');
+  const clear = await generatorTempDir(testDir);
 
-test('should compile stylus correctly', async () => {
   const rsbuild = await build({
     cwd: __dirname,
-    plugins: [pluginStylus()],
+    plugins: [pluginStylus(), pluginTypedCSSModules()],
+    rsbuildConfig: {
+      source: {
+        entry: { index: resolve(testDir, 'index.js') },
+      },
+    },
   });
   const files = await rsbuild.unwrapOutputJSON();
 
@@ -15,4 +35,8 @@ test('should compile stylus correctly', async () => {
   expect(content).toMatch(
     /body{color:#f00;font:14px Arial,sans-serif}\.title-class-\w{6}{font-size:14px}/,
   );
+
+  expect(fse.existsSync(join(testDir, './b.module.styl.d.ts'))).toBeTruthy();
+
+  await clear();
 });

e2e/package.json

@@ -50,6 +50,7 @@
     "@rsbuild/plugin-vue": "workspace:*",
     "@rsbuild/plugin-vue-jsx": "workspace:*",
     "@rsbuild/plugin-vue2": "workspace:*",
+    "@rsbuild/plugin-typed-css-modules": "workspace:*",
     "@rsbuild/plugin-vue2-jsx": "workspace:*",
     "@rsbuild/plugin-yaml": "workspace:*",
     "@rsbuild/shared": "workspace:*",

packages/core/package.json

@@ -76,7 +76,6 @@
     "less-loader": "12.2.0",
     "on-finished": "2.4.1",
     "open": "^8.4.0",
-    "line-diff": "2.1.1",
     "postcss-load-config": "5.1.0",
     "postcss-loader": "8.1.1",
     "postcss-value-parser": "4.2.0",

packages/core/prebundle.config.mjs

@@ -41,10 +41,6 @@ export default {
         picocolors: '@rsbuild/shared/picocolors',
       },
     },
-    {
-      name: 'line-diff',
-      ignoreDts: true,
-    },
     {
       name: 'postcss-value-parser',
       ignoreDts: true,

packages/core/src/config.ts

@@ -145,7 +145,6 @@ const getDefaultOutputConfig = (): NormalizedOutputConfig => ({
     css: false,
   },
   filenameHash: true,
-  enableCssModuleTSDeclaration: false,
   inlineScripts: false,
   inlineStyles: false,
   cssModules: {

packages/core/src/plugins/css.ts

@@ -261,7 +261,6 @@ export async function applyCSSRule({
 
   // 1. Check user config
   const enableExtractCSS = isUseCssExtract(config, target);
-  const enableCSSModuleTS = Boolean(config.output.enableCssModuleTSDeclaration);
 
   // 2. Prepare loader options
   const localIdentName = getCssModuleLocalIdentName(config, isProd);
@@ -306,17 +305,6 @@ export async function applyCSSRule({
         .options(styleLoaderOptions)
         .end();
     }
-
-    // use css-modules-typescript-loader
-    if (enableCSSModuleTS && cssLoaderOptions.modules) {
-      rule
-        .use(CHAIN_ID.USE.CSS_MODULES_TS)
-        .loader(path.resolve(__dirname, '../rspack/cssModulesTypescriptLoader'))
-        .options({
-          modules: cssLoaderOptions.modules,
-        })
-        .end();
-    }
   } else {
     rule
       .use(CHAIN_ID.USE.IGNORE_CSS)

packages/core/tests/__snapshots__/css.test.ts.snap

@@ -1,84 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`plugin-css > should apply custom css-modules-typescript-loader when enableCssModuleTSDeclaration 1`] = `
-{
-  "experiments": {
-    "css": false,
-  },
-  "module": {
-    "rules": [
-      {
-        "resolve": {
-          "preferRelative": true,
-        },
-        "sideEffects": true,
-        "test": /\\\\\\.css\\$/,
-        "use": [
-          {
-            "loader": "<ROOT>/node_modules/<PNPM_INNER>/@rspack/core/dist/builtin-plugin/css-extract/loader.js",
-          },
-          {
-            "loader": "<ROOT>/packages/core/src/rspack/cssModulesTypescriptLoader",
-            "options": {
-              "modules": {
-                "auto": true,
-                "exportLocalsConvention": "camelCase",
-                "localIdentName": "[path][name]__[local]-[hash:base64:6]",
-                "namedExport": false,
-              },
-            },
-          },
-          {
-            "loader": "<ROOT>/packages/core/compiled/css-loader",
-            "options": {
-              "importLoaders": 1,
-              "modules": {
-                "auto": true,
-                "exportLocalsConvention": "camelCase",
-                "localIdentName": "[path][name]__[local]-[hash:base64:6]",
-                "namedExport": false,
-              },
-              "sourceMap": false,
-            },
-          },
-          {
-            "loader": "<ROOT>/packages/core/compiled/postcss-loader",
-            "options": {
-              "postcssOptions": {
-                "config": false,
-                "plugins": [
-                  {
-                    "browsers": [
-                      "chrome >= 87",
-                      "edge >= 88",
-                      "firefox >= 78",
-                      "safari >= 14",
-                    ],
-                    "info": [Function],
-                    "options": {
-                      "flexbox": "no-2009",
-                      "overrideBrowserslist": [
-                        "chrome >= 87",
-                        "edge >= 88",
-                        "firefox >= 78",
-                        "safari >= 14",
-                      ],
-                    },
-                    "postcssPlugin": "autoprefixer",
-                    "prepare": [Function],
-                  },
-                ],
-              },
-              "sourceMap": false,
-            },
-          },
-        ],
-      },
-    ],
-  },
-}
-`;
-
 exports[`plugin-css > should override browserslist of autoprefixer when using output.overrideBrowserslist config 1`] = `
 {
   "experiments": {

packages/core/tests/css.test.ts

@@ -139,19 +139,6 @@ describe('plugin-css', () => {
     const bundlerConfigs = await rsbuild.initConfigs();
     expect(bundlerConfigs[0]).toMatchSnapshot();
   });
-
-  it('should apply custom css-modules-typescript-loader when enableCssModuleTSDeclaration', async () => {
-    const rsbuild = await createStubRsbuild({
-      plugins: [pluginCss()],
-      rsbuildConfig: {
-        output: {
-          enableCssModuleTSDeclaration: true,
-        },
-      },
-    });
-    const bundlerConfigs = await rsbuild.initConfigs();
-    expect(bundlerConfigs[0]).toMatchSnapshot();
-  });
 });
 
 describe('plugin-css injectStyles', () => {

packages/plugin-typed-css-modules/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present Bytedance, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/plugin-typed-css-modules/README.md

@@ -0,0 +1,19 @@
+<p align="center">
+  <a href="https://rsbuild.dev" target="blank"><img src="https://github.com/web-infra-dev/rsbuild/assets/7237365/84abc13e-b620-468f-a90b-dbf28e7e9427" alt="Rsbuild Logo" /></a>
+</p>
+
+# Rsbuild
+
+The Rspack-based build tool. It's fast, out-of-the-box and extensible.
+
+## Documentation
+
+https://rsbuild.dev/
+
+## Contributing
+
+Please read the [Contributing Guide](https://github.com/web-infra-dev/rsbuild/blob/main/CONTRIBUTING.md).
+
+## License
+
+Rsbuild is [MIT licensed](https://github.com/web-infra-dev/rsbuild/blob/main/LICENSE).

packages/plugin-typed-css-modules/modern.config.ts

@@ -0,0 +1,13 @@
+import { moduleTools } from '@modern-js/module-tools';
+import { buildConfigWithMjs } from '../../scripts/modern.base.config';
+
+export default {
+  plugins: [moduleTools()],
+  buildConfig: buildConfigWithMjs.map((config) => {
+    if (config.format === 'cjs') {
+      // add loader to entry
+      config.input = ['src/index.ts', 'src/loader.ts'];
+    }
+    return config;
+  }),
+};