Release/v1.0.11

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-css-modules-vite-plugin",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Read the definition of'vite.config.ts' and resolve the CSS Modules type.",
   "main": "dist/index.js",
   "scripts": {

src/css.ts

@@ -7,36 +7,42 @@ export const parseCss = (
   log: Log,
   file: string,
   fileName: string,
-  config: ResolvedConfig
+  config: ResolvedConfig,
+  dirName: string
 ): string => {
   const options = getPreprocessorOptions(config);
 
-  const finalImporter = [];
+  const finalImporters = [];
   if (options.importer) {
-    Array.isArray(options.importer)
-      ? finalImporter.push(...options.importer)
-      : finalImporter.push(options.importer);
+    const tempImporters = Array.isArray(options.importer)
+      ? [...options.importer]
+      : [options.importer];
+
+    finalImporters.push(
+      ...tempImporters.map((tempImporter) =>
+        replaceDirNameInFunc(log, tempImporter, dirName)
+      )
+    );
   }
 
   log(
-    `getData(file, fileName, options.additionalData):${getData(
+    `getData(file, fileName, options.additionalData): ${getData(
       file,
       fileName,
       options.additionalData
     )}`
   );
-  log(`finalImporter:${finalImporter}`);
-  log(`finalImporter:${typeof finalImporter[0]}`);
+  log(`finalImporter:${finalImporters}`);
 
   const result = sass.renderSync({
     ...options,
     data: getData(file, fileName, options.additionalData),
     file: fileName,
     includePaths: options.includePaths,
-    importer: finalImporter,
+    importer: finalImporters,
   });
 
-  log(`result.css.toString():${result.css.toString()}`);
+  log(`result.css.toString(): ${result.css.toString()}`);
 
   return result.css.toString();
 };
@@ -52,3 +58,14 @@ const getData = (
   }
   return `${additionalData}\n${data}`;
 };
+
+export const replaceDirNameInFunc = (
+  log: Log,
+  importer: Function,
+  currDirName: string
+) => {
+  const replacedFunc = importer.toString().replace("__dirname", currDirName);
+  log(`replacedFunc: ${replacedFunc}`);
+  const func = new Function(`return function ${replacedFunc}`);
+  return func();
+};

src/index.ts

@@ -19,9 +19,9 @@ const factory: ts.server.PluginModuleFactory = (mod: {
       info.project.projectService.logger.info(
         `[ts-css-modules-vite-plugin] "${logText}"`
       );
+    log(`dirName: ${dirName}`);
 
     // resolve vite.config.ts
-    log(`${dirName}`);
     const config: ResolvedConfig | undefined = getViteConfig(log, dirName);
     const { languageService: ls, languageServiceHost: lsh } = info;
 
@@ -40,22 +40,18 @@ const factory: ts.server.PluginModuleFactory = (mod: {
       resolveModuleNames: lsh.resolveModuleNames,
     };
 
-    mod.typescript.createLanguageServiceSourceFile = (
-      fileName,
-      scriptSnapshot,
-      scriptTarget,
-      version,
-      setNodeParents,
-      scriptKind
-    ): ts.SourceFile => {
+    const generateScriptSnapshot = (
+      scriptSnapshot: ts.IScriptSnapshot,
+      fileName: any
+    ) => {
       if (isCSSFile(fileName)) {
         if (config) {
           let css = scriptSnapshot.getText(0, scriptSnapshot.getLength());
           if (fileName.endsWith(".css")) {
           } else {
             try {
-              css = parseCss(log, css, fileName, config);
-              log(`css${css}`);
+              css = parseCss(log, css, fileName, config, dirName);
+              log(`css: ${css}`);
             } catch (e) {
               log(`${e}`);
             }
@@ -65,16 +61,28 @@ const factory: ts.server.PluginModuleFactory = (mod: {
           );
 
           for (const classNameKey of classNameKeys) {
-            log(`classNameKey${classNameKey}`);
+            log(`classNameKey: ${classNameKey}`);
           }
           scriptSnapshot = ts.ScriptSnapshot.fromString(
             formatClassNames(classNameKeys)
           );
         }
       }
+
+      return scriptSnapshot;
+    };
+
+    mod.typescript.createLanguageServiceSourceFile = (
+      fileName,
+      scriptSnapshot,
+      scriptTarget,
+      version,
+      setNodeParents,
+      scriptKind
+    ): ts.SourceFile => {
       return delegate.createLanguageServiceSourceFile(
         fileName,
-        scriptSnapshot,
+        generateScriptSnapshot(scriptSnapshot, fileName),
         scriptTarget,
         version,
         setNodeParents,
@@ -90,34 +98,10 @@ const factory: ts.server.PluginModuleFactory = (mod: {
       aggressiveChecks
     ): ts.SourceFile => {
       const fileName = sourceFile.fileName;
-      if (isCSSFile(fileName)) {
-        if (config) {
-          let css = scriptSnapshot.getText(0, scriptSnapshot.getLength());
-          if (fileName.endsWith(".css")) {
-          } else {
-            try {
-              css = parseCss(log, css, fileName, config);
-              log(`css${css}`);
-            } catch (e) {
-              log(`${e}`);
-            }
-          }
-          const classNameKeys = extractClassNameKeys(
-            postcssJs.objectify(postcss.parse(css))
-          );
-
-          for (const classNameKey of classNameKeys) {
-            log(`classNameKey${classNameKey}`);
-          }
 
-          scriptSnapshot = ts.ScriptSnapshot.fromString(
-            formatClassNames(classNameKeys)
-          );
-        }
-      }
       return delegate.updateLanguageServiceSourceFile(
         sourceFile,
-        scriptSnapshot,
+        generateScriptSnapshot(scriptSnapshot, fileName),
         version,
         textChangeRange,
         aggressiveChecks

src/util.ts

@@ -2,8 +2,3 @@ export const cssLangs = `\\.(css|sass|scss)($|\\?)`;
 export const cssLangReg = new RegExp(cssLangs);
 
 export const isCSSFile = (request: string): boolean => cssLangReg.test(request);
-
-// export const getRelativePath = (
-//   from: string | undefined,
-//   to: string | undefined
-// ) => path.relative(path.dirname(from || ""), path.dirname(to || "")) || "./";