feat: add support for processing multiple CSS rules (#27)

Author: chenjiahan

src/index.ts

@@ -13,13 +13,21 @@ export const pluginTypedCSSModules = (): RsbuildPlugin => ({
       order: 'post',
       handler: async (chain, { target, CHAIN_ID }) => {
         if (target === 'web') {
-          const ruleIds = [
+          const ruleIds: string[] = [
             CHAIN_ID.RULE.CSS,
             CHAIN_ID.RULE.SASS,
             CHAIN_ID.RULE.LESS,
             CHAIN_ID.RULE.STYLUS,
           ];
 
+          for (const ruleId of ruleIds) {
+            let index = 1;
+            while (chain.module.rules.has(`${ruleId}-${index}`)) {
+              ruleIds.push(`${ruleId}-${index}`);
+              index++;
+            }
+          }
+
           for (const ruleId of ruleIds) {
             if (!chain.module.rules.has(ruleId)) {
               continue;

test/multiple-rules/index.test.ts

@@ -0,0 +1,103 @@
+import fs from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { expect, test } from '@playwright/test';
+import { createRsbuild } from '@rsbuild/core';
+import { pluginLess } from '@rsbuild/plugin-less';
+import { pluginSass } from '@rsbuild/plugin-sass';
+import { pluginTypedCSSModules } from '../../dist';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const generatorTempDir = async (testDir: string) => {
+  fs.rmSync(testDir, { recursive: true, force: true });
+  await fs.promises.cp(join(__dirname, 'src'), testDir, { recursive: true });
+
+  return () => fs.promises.rm(testDir, { force: true, recursive: true });
+};
+
+test('generator TS declaration for multiple Less or Sass plugins', async () => {
+  const testDir = join(__dirname, 'test-temp-src-1');
+  const clear = await generatorTempDir(testDir);
+
+  const rsbuild = await createRsbuild({
+    cwd: __dirname,
+    rsbuildConfig: {
+      plugins: [
+        pluginSass({
+          include: [/a\.module/],
+        }),
+        pluginSass({
+          include: [/b\.module/],
+        }),
+        pluginLess({
+          include: [/c\.module/],
+        }),
+        pluginLess({
+          include: [/d\.module/],
+        }),
+        pluginTypedCSSModules(),
+      ],
+      source: {
+        entry: { index: resolve(testDir, 'index.js') },
+      },
+    },
+  });
+
+  await rsbuild.build();
+
+  expect(fs.existsSync(join(testDir, './a.module.scss.d.ts'))).toBeTruthy();
+  expect(fs.existsSync(join(testDir, './b.module.scss.d.ts'))).toBeTruthy();
+  expect(fs.existsSync(join(testDir, './c.module.less.d.ts'))).toBeTruthy();
+  expect(fs.existsSync(join(testDir, './d.module.less.d.ts'))).toBeTruthy();
+
+  const aContent = fs.readFileSync(join(testDir, './a.module.scss.d.ts'), {
+    encoding: 'utf-8',
+  });
+  expect(aContent).toEqual(`// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  a: string;
+}
+declare const cssExports: CssExports;
+export default cssExports;
+`);
+
+  const bContent = fs.readFileSync(join(testDir, './b.module.scss.d.ts'), {
+    encoding: 'utf-8',
+  });
+  expect(bContent).toEqual(`// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  b: string;
+}
+declare const cssExports: CssExports;
+export default cssExports;
+`);
+
+  const cContent = fs.readFileSync(join(testDir, './c.module.less.d.ts'), {
+    encoding: 'utf-8',
+  });
+  expect(cContent).toEqual(`// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  c: string;
+}
+declare const cssExports: CssExports;
+export default cssExports;
+`);
+
+  const dContent = fs.readFileSync(join(testDir, './d.module.less.d.ts'), {
+    encoding: 'utf-8',
+  });
+  expect(dContent).toEqual(`// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  d: string;
+}
+declare const cssExports: CssExports;
+export default cssExports;
+`);
+
+  await clear();
+});

test/multiple-rules/src/a.module.scss

@@ -0,0 +1,3 @@
+.a {
+  font-size: 14px;
+}

test/multiple-rules/src/b.module.scss

@@ -0,0 +1,3 @@
+.b {
+  font-size: 14px;
+}

test/multiple-rules/src/c.module.less

@@ -0,0 +1,3 @@
+.c {
+  color: yellow;
+}

test/multiple-rules/src/d.module.less

@@ -0,0 +1,3 @@
+.d {
+  color: yellow;
+}

test/multiple-rules/src/index.js

@@ -0,0 +1,4 @@
+import './a.module.scss';
+import './b.module.scss';
+import './c.module.less';
+import './d.module.less';