feat(cssModules): update css modules when global style file change

Author: iamcco

src/documents.ts

@@ -4,11 +4,17 @@ import path from 'path';
 import { getCssModulesNames } from './postcss';
 import * as Uri from 'vscode-uri';
 import { setting } from './setting';
+import { cssExtName } from './constant';
 
 class CssModules {
   globalClassNames = new Map<string, Record<string, [number, number][]>>();
   classNames = new Map<string, Record<string, [number, number][]>>();
 
+  async resolvesGlobalClassName(filePath: string, code: string) {
+    const res = await getCssModulesNames(filePath, code);
+    this.globalClassNames.set(filePath, res);
+  }
+
   async resolvesGlobalClassNames() {
     const resolveStyleByFilePath = async (parentDir: string, filePath: string) => {
       const absPath = path.join(parentDir, filePath);
@@ -23,7 +29,7 @@ class CssModules {
             await resolveStyleByFilePath(absPath, filePath);
           }
         }
-      } else if (st.isFile() && /\.(css|less|scss)$/.test(absPath)) {
+      } else if (st.isFile() && cssExtName.test(absPath)) {
         const res = await getCssModulesNames(absPath, readFileSync(absPath, { encoding: 'utf-8' }));
         this.globalClassNames.set(absPath, res);
       }

src/index.ts

@@ -105,7 +105,15 @@ documents.onDidChangeContent((change) => {
   }
 
   if (cssExtName.test(extname)) {
-    cssModules.resolveClassNames(Uri.URI.parse(change.document.uri).fsPath, change.document.getText());
+    const fsPath = Uri.URI.parse(change.document.uri).fsPath;
+
+    // locale file
+    cssModules.resolveClassNames(fsPath, change.document.getText());
+
+    // global file
+    if (cssModules.globalClassNames.has(fsPath)) {
+      cssModules.resolvesGlobalClassName(fsPath, change.document.getText());
+    }
   }
 });
 

src/postcss.ts

@@ -1,4 +1,4 @@
-import postcss from 'postcss';
+import postcss, { Result } from 'postcss';
 import postLess from 'postcss-less';
 import postScss from 'postcss-scss';
 import postModules from 'postcss-modules';
@@ -20,17 +20,27 @@ export const getCssModulesNames = async (
   let json: Record<string, string> = {};
   const syntax = getSyntax(filePath);
 
-  const res = await postcss([
-    postModules({
-      getJSON(_cssFilename, outputJson) {
-        json = outputJson;
-      },
-    }),
-  ]).process(code, {
-    map: false,
-    from: filePath,
-    syntax,
-  });
+  let res: Result | undefined;
+
+  try {
+    res = await postcss([
+      postModules({
+        getJSON(_cssFilename, outputJson) {
+          json = outputJson;
+        },
+      }),
+    ]).process(code, {
+      map: false,
+      from: filePath,
+      syntax,
+    });
+  } catch (error) {
+    //
+  }
+
+  if (!res) {
+    return {};
+  }
 
   const valueKey: Record<
     string,