Fully support scss, scss modules, css modules

Author: mayank1513

lib/esbuild-plugin-react18-css-example/src/declaration.d.ts

@@ -1 +1,2 @@
 declare module "*.module.css";
+declare module "*.module.scss";

…lugin-react18-css-example/src/global.css …ugin-react18-css-example/src/global.scsslib/esbuild-plugin-react18-css-example/src/global.css renamed to lib/esbuild-plugin-react18-css-example/src/global.scss lib/esbuild-plugin-react18-css-example/src/global.css renamed to lib/esbuild-plugin-react18-css-example/src/global.scss

@@ -1,3 +1,6 @@
+::placeholder {
+  color: gray;
+}
 .fork {
   position: fixed;
   display: flex;
@@ -19,6 +22,7 @@
   text-decoration: none;
   z-index: 10000;
 }
+
 .fork:hover {
   filter: drop-shadow(0 0 5px var(--sc));
 }

lib/esbuild-plugin-react18-css-example/src/server/fork-me/fork-me.module.css

@@ -26,12 +26,14 @@
   "dependencies": {
     "autoprefixer": "^10.4.18",
     "postcss": "^8.4.35",
-    "postcss-modules": "^6.0.0"
+    "postcss-modules": "^6.0.0",
+    "sass": "^1.72.0"
   },
   "peerDependencies": {
-    "autoprefixer": "^10.4.18",
-    "postcss": "^8.4.35",
-    "postcss-modules": "^6.0.0"
+    "autoprefixer": "10",
+    "postcss": "8",
+    "postcss-modules": "6",
+    "sass": "1"
   },
   "devDependencies": {
     "@types/node": "^20.11.22",

lib/esbuild-plugin-react18-css/package.json

@@ -1,66 +1,107 @@
-import { Plugin } from "esbuild";
+import { Plugin, PluginBuild } from "esbuild";
 import fs from "node:fs";
 import path from "node:path";
 import postcss from "postcss";
 import postcssModules from "postcss-modules";
 import autoPrefixer from "autoprefixer";
+import { compile } from "sass";
 
-const cssModulePlugin: () => Plugin = () => ({
-  name: "esbuild-plugin-react18-css-" + uuid(),
-  setup(build): void {
-    build.onResolve({ filter: /\.module\.css$/, namespace: "file" }, args => ({
-      path: `${args.path}#css-module`,
-      namespace: "css-module",
-      pluginData: {
-        pathDir: path.join(args.resolveDir, args.path),
-      },
-    }));
-    build.onLoad({ filter: /#css-module$/, namespace: "css-module" }, async args => {
-      const { pluginData } = args as {
-        pluginData: { pathDir: string };
-      };
+const uuid = () => (Date.now() * Math.random()).toString(36).slice(0, 8);
+
+interface CSSModulePluginOptions {
+  generateScopedName?: string | ((name: string, filename: string, css: string) => string);
+  skipAutoPrefixer?: boolean;
+}
+
+function applyAutoPrefixer(build: PluginBuild, options: CSSModulePluginOptions, write?: boolean) {
+  build.onEnd(async result => {
+    if (!options.skipAutoPrefixer) {
+      for (const f of result.outputFiles?.filter(f => f.path.match(/\.css$/)) || []) {
+        const { css } = await postcss([autoPrefixer]).process(f.text, { from: f.path });
+        f.contents = new TextEncoder().encode(css);
+      }
+    }
+
+    /** assume true if undefined */
+    if (write === undefined || write) {
+      result.outputFiles?.forEach(file => {
+        fs.mkdirSync(path.dirname(file.path), { recursive: true });
+        fs.writeFileSync(file.path, file.contents);
+      });
+    }
+  });
+}
 
-      const source = fs.readFileSync(pluginData.pathDir, "utf8");
+function handleScss(build: PluginBuild) {
+  build.onLoad({ filter: /\.scss$/, namespace: "file" }, args => ({
+    contents: compile(args.path).css,
+    loader: "css",
+  }));
+}
 
-      let cssModule = {};
-      const result = await postcss([
-        postcssModules({
-          getJSON(_, json) {
-            cssModule = json;
-          },
-          generateScopedName: "[name]__[local]",
-        }),
-        autoPrefixer,
-      ]).process(source, { from: pluginData.pathDir });
+function handleModules(
+  build: PluginBuild,
+  { generateScopedName }: CSSModulePluginOptions,
+  type: "css" | "scss" = "css",
+) {
+  const namespace = `${type}-module`;
+  const filter = new RegExp(`\\.module\\.${type}$`);
+  build.onResolve({ filter, namespace: "file" }, args => ({
+    path: `${args.path}#${namespace}`,
+    namespace,
+    pluginData: {
+      pathDir: path.join(args.resolveDir, args.path),
+    },
+  }));
 
-      return {
-        pluginData: { css: result.css },
-        contents: `import "${pluginData.pathDir}"; export default ${JSON.stringify(cssModule)}`,
-      };
-    });
+  build.onLoad({ filter: new RegExp(`#${namespace}$`), namespace }, async args => {
+    const { pluginData } = args as {
+      pluginData: { pathDir: string };
+    };
 
-    /** apply auto-prefixer to css */
+    const source = compile(pluginData.pathDir).css;
 
-    build.onLoad({ filter: /\.css$/, namespace: "file" }, async args => {
-      const source = fs.readFileSync(args.path, "utf8");
-      const result = await postcss([autoPrefixer]).process(source, { from: args.path });
-      console.log("CSS ------------------------------------ ", result.css);
-      return { contents: result.css, loader: "css" };
-    });
+    let cssModule = {};
+    const result = await postcss([
+      postcssModules({
+        getJSON(_, json) {
+          cssModule = json;
+        },
+        generateScopedName,
+      }),
+    ]).process(source, { from: pluginData.pathDir });
 
-    build.onResolve({ filter: /\.module\.css$/, namespace: "css-module" }, args => ({
-      path: path.join(args.resolveDir, args.path, "#css-module-data"),
-      namespace: "css-module",
-      pluginData: args.pluginData as { css: string },
-    }));
+    return {
+      pluginData: { css: result.css },
+      contents: `import "${pluginData.pathDir}"; export default ${JSON.stringify(cssModule)}`,
+    };
+  });
 
-    build.onLoad({ filter: /#css-module-data$/, namespace: "css-module" }, args => ({
-      contents: (args.pluginData as { css: string }).css,
-      loader: "css",
-    }));
+  build.onResolve({ filter, namespace }, args => ({
+    path: path.join(args.resolveDir, args.path, `#${namespace}-data`),
+    namespace,
+    pluginData: args.pluginData as { css: string },
+  }));
+
+  build.onLoad({ filter: new RegExp(`#${namespace}-data$`), namespace }, args => ({
+    contents: (args.pluginData as { css: string }).css,
+    loader: "css",
+  }));
+}
+
+const cssPlugin: (options: CSSModulePluginOptions) => Plugin = (options = {}) => ({
+  name: "esbuild-plugin-react18-css-" + uuid(),
+  setup(build): void {
+    const write = build.initialOptions.write;
+    if (!options.generateScopedName) {
+      options.generateScopedName = (name, filename) =>
+        `${path.basename(filename).split(".")[0]}__${name}`;
+    }
+    handleModules(build, options);
+    handleModules(build, options, "scss");
+    handleScss(build);
+    applyAutoPrefixer(build, options, write);
   },
 });
 
-const uuid = () => (Date.now() * Math.random()).toString(36).slice(0, 8);
-
-export = cssModulePlugin;
+export = cssPlugin;