fix: css modules invalid class mapping

src/index.ts

@@ -1,6 +1,7 @@
 import { Plugin } from "esbuild";
 import { Plugin as PostCSSPlugin } from "postcss";
 import { ensureDir, readFile, writeFile } from "fs-extra";
+import { TextDecoder } from "util";
 import {
   SassException,
   Result as SassResult,
@@ -12,7 +13,6 @@ import postcss from "postcss";
 import postcssModules from "postcss-modules";
 import less from "less";
 import stylus from "stylus";
-import { TextDecoder } from "util";
 
 interface PostCSSPluginOptions {
   plugins: PostCSSPlugin[];
@@ -27,6 +27,11 @@ interface CSSModule {
   };
 }
 
+interface ModulePath {
+  originalPath: string;
+  temporaryPath: string;
+}
+
 const postCSSPlugin = ({
   plugins = [],
   modules = true,
@@ -36,7 +41,33 @@ const postCSSPlugin = ({
   setup(build) {
     // get a temporary path where we can save compiled CSS
     const tmpDirPath = tmp.dirSync().name,
-      modulesMap: CSSModule[] = [];
+      modulesMap: CSSModule[] = [],
+      pathMap: ModulePath[] = [];
+
+    // parse css modules with postcss-modules
+    if (modules !== false) {
+      plugins.unshift(
+        postcssModules({
+          ...(typeof modules !== "boolean" ? modules : {}),
+          getJSON(filepath, json, outpath) {
+            const tmpFilePath = pathMap.find(
+              ({ originalPath }) => originalPath === filepath
+            ).temporaryPath;
+
+            modulesMap.push({
+              path: tmpFilePath,
+              map: json
+            });
+
+            if (
+              typeof modules !== "boolean" &&
+              typeof modules.getJSON === "function"
+            )
+              return modules.getJSON(filepath, json, outpath);
+          }
+        })
+      );
+    }
 
     build.onResolve(
       { filter: /.\.(css|sass|scss|less|styl)$/, namespace: "file" },
@@ -57,30 +88,15 @@ const postCSSPlugin = ({
 
         await ensureDir(tmpDir);
 
+        // add to path map so that postcss-modules can parse it after resolved
+        pathMap.push({
+          originalPath: sourceFullPath,
+          temporaryPath: tmpFilePath
+        });
+
         const fileContent = await readFile(sourceFullPath);
         let css = sourceExt === ".css" ? fileContent : "";
 
-        // parse css modules with postcss-modules
-        if (modules !== false && isModule) {
-          plugins.unshift(
-            postcssModules({
-              ...(typeof modules !== "boolean" ? modules : {}),
-              getJSON(filepath, json, outpath) {
-                modulesMap.push({
-                  path: tmpFilePath,
-                  map: json
-                });
-
-                if (
-                  typeof modules !== "boolean" &&
-                  typeof modules.getJSON === "function"
-                )
-                  return modules.getJSON(filepath, json, outpath);
-              }
-            })
-          );
-        }
-
         // parse files with preprocessors
         if (sourceExt === ".sass" || sourceExt === ".scss")
           css = (await renderSass({ file: sourceFullPath })).css.toString();
@@ -119,8 +135,6 @@ const postCSSPlugin = ({
         const mod = modulesMap.find(({ path }) => path === args.path),
           resolveDir = path.dirname(args.path);
 
-        console.log(mod);
-
         return {
           resolveDir,
           contents: `import "${args.path.replace(

test/styles/example.module.css

@@ -1,3 +1,11 @@
 .TestModule {
   align-items: center;
 }
+
+.TestModuleAnother {
+  justify-content: space-between;
+}
+
+.TextModuleLast {
+  width: 100vw;
+}

test/styles/example.module.less

@@ -0,0 +1,5 @@
+@text: left;
+
+.TestLessModule {
+  text-align: @text;
+}

test/tests/modules.ts

@@ -1,4 +1,5 @@
 import styles from "../styles/example.module.sass";
 import styles2 from "../styles/example.module.css";
+import styles3 from "../styles/example.module.less";
 
-console.log(styles, styles2);
+console.log(styles, styles2, styles3);