feat: basic implementation

Author: chenjiahan

biome.json

@@ -25,7 +25,10 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "off"
+      }
     }
   }
 }

package.json

@@ -14,7 +14,9 @@
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
@@ -36,6 +38,7 @@
     "@playwright/test": "^1.44.1",
     "@rsbuild/core": "^0.7.10",
     "@types/node": "^20.14.1",
+    "line-diff": "2.1.1",
     "nano-staged": "^0.8.0",
     "playwright": "^1.44.1",
     "simple-git-hooks": "^2.11.1",

pnpm-lock.yaml

@@ -1,16 +1,56 @@
-import type { RsbuildPlugin } from '@rsbuild/core';
+import path from 'node:path';
+import type { CSSLoaderOptions, RsbuildPlugin } from '@rsbuild/core';
 
-export type pluginTypedCSSModulesOptions = {
-  foo?: string;
-  bar?: boolean;
-};
+export const PLUGIN_TYPED_CSS_MODULES_NAME = 'rsbuild:typed-css-modules';
 
-export const pluginTypedCSSModules = (
-  options: pluginTypedCSSModulesOptions = {},
-): RsbuildPlugin => ({
-  name: 'plugin-example',
+export const pluginTypedCSSModules = (): RsbuildPlugin => ({
+  name: PLUGIN_TYPED_CSS_MODULES_NAME,
 
-  setup() {
-    console.log('Hello Rsbuild!', options);
+  setup(api) {
+    api.modifyBundlerChain({
+      order: 'post',
+      handler: async (chain, { target, CHAIN_ID }) => {
+        if (target === 'web') {
+          const ruleIds = [
+            CHAIN_ID.RULE.CSS,
+            CHAIN_ID.RULE.SASS,
+            CHAIN_ID.RULE.LESS,
+            CHAIN_ID.RULE.STYLUS,
+          ];
+
+          for (const ruleId of ruleIds) {
+            if (!chain.module.rules.has(ruleId)) {
+              continue;
+            }
+
+            const rule = chain.module.rule(ruleId);
+
+            if (!rule.uses.has(CHAIN_ID.USE.CSS)) {
+              continue;
+            }
+
+            const cssLoaderOptions: CSSLoaderOptions = rule
+              .use(CHAIN_ID.USE.CSS)
+              .get('options');
+
+            if (
+              !cssLoaderOptions.modules ||
+              (typeof cssLoaderOptions.modules === 'object' &&
+                cssLoaderOptions.modules.auto === false)
+            ) {
+              continue;
+            }
+
+            rule
+              .use(CHAIN_ID.USE.CSS_MODULES_TS)
+              .loader(path.resolve(__dirname, './loader.cjs'))
+              .options({
+                modules: cssLoaderOptions.modules,
+              })
+              .before(CHAIN_ID.USE.CSS);
+          }
+        }
+      },
+    });
   },
 });