refactor: change type resolution

Author: activeguild

src/extract.ts

@@ -1,22 +1,38 @@
+import type { CSSJSObj, GetParseCaseFunction } from "./type";
+import { collectionToObj } from "./util";
+
+const importRe = new RegExp(/^(@import)/);
+const keySeparatorRe = new RegExp(/(?=[\s.:[\]><+,()])/g);
+
 export const extractClassNameKeys = (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  obj: Record<string, any>
+  obj: CSSJSObj,
+  toParseCase: GetParseCaseFunction,
+  parentKey?: string
 ): Map<string, boolean> => {
   return Object.entries(obj).reduce<Map<string, boolean>>(
     (curr, [key, value]) => {
-      const reg = new RegExp(/^(@media)/g);
-      if (reg.test(key)) return curr;
-      const splittedKeys = key.split(/(?=[\s.:[\]><+,()])/g);
-      for (const splittedKey of splittedKeys) {
-        if (splittedKey.startsWith(".")) {
-          curr.set(splittedKey.replace(".", "").trim(), true);
+      if (importRe.test(key)) return curr;
+      const splitKeys = key.split(keySeparatorRe);
+      for (const splitKey of splitKeys) {
+        if (parentKey === ":export" || splitKey.startsWith(".")) {
+          if (toParseCase) {
+            curr.set(toParseCase(splitKey.replace(".", "").trim()), true);
+          } else {
+            curr.set(splitKey.replace(".", "").trim(), true);
+          }
         }
       }
 
       if (typeof value === "object" && Object.keys(value).length > 0) {
-        const map = extractClassNameKeys(value);
+        const valueToExtract = Array.isArray(value)
+          ? collectionToObj(value)
+          : value;
+        const map = extractClassNameKeys(valueToExtract, toParseCase, key);
+
         for (const key of map.keys()) {
-          if (key.startsWith(".")) {
+          if (toParseCase) {
+            curr.set(toParseCase(key), true);
+          } else {
             curr.set(key, true);
           }
         }

src/format.ts

@@ -1,6 +1,6 @@
 export const formatClassNames = (classNameKeys: Map<string, boolean>) => {
   let exportTypes = "";
-  const exportStyle = "export default classNames;";
+  const exportStyle = "export = classNames;";
   for (const classNameKey of classNameKeys.keys()) {
     exportTypes = `${exportTypes}\n${formatExportType(classNameKey)}`;
   }

src/index.ts

@@ -7,7 +7,7 @@ import { getViteConfig } from "./config";
 import { parseCss } from "./css";
 import { extractClassNameKeys } from "./extract";
 import { formatClassNames } from "./format";
-import { getPluginOptions } from "./options";
+import { getParseCase, getPluginOptions } from "./options";
 import { isCSSFile } from "./util";
 
 const factory: ts.server.PluginModuleFactory = (mod: {
@@ -60,8 +60,10 @@ const factory: ts.server.PluginModuleFactory = (mod: {
               log(`${e}`);
             }
           }
+          const toParseCase = getParseCase(config);
           const classNameKeys = extractClassNameKeys(
-            postcssJs.objectify(postcss.parse(css))
+            postcssJs.objectify(postcss.parse(css)),
+            toParseCase
           );
 
           for (const classNameKey of classNameKeys) {

src/options.ts

@@ -1,11 +1,37 @@
 import type { ResolvedConfig } from "vite";
-import type { Log, Options } from "./type";
+import type { GetParseCaseFunction, Log, Options } from "./type";
+import { toCamelCase, toDashCase } from "./util";
 
 export const getPluginOptions = (log: Log, config: any): Options => {
   log(`config: ${JSON.stringify(config)}`);
   return { root: config.root || "./" };
 };
 
+export const getParseCase = (config: ResolvedConfig): GetParseCaseFunction => {
+  if (
+    !config.css ||
+    !config.css.modules ||
+    !config.css.modules.localsConvention
+  ) {
+    return;
+  }
+
+  const { localsConvention } = config.css.modules;
+
+  if (
+    localsConvention === "camelCase" ||
+    localsConvention === "camelCaseOnly"
+  ) {
+    return toCamelCase;
+  } else if (
+    localsConvention === "dashes" ||
+    localsConvention === "dashesOnly"
+  ) {
+    return toDashCase;
+  }
+  return;
+};
+
 export const getPreprocessorOptions = (config: ResolvedConfig) => {
   let additionalData, includePaths, importer;
 

src/type.ts

@@ -7,3 +7,10 @@ export type AdditionalData =
   | ((source: string, filename: string) => string);
 
 export type Log = (logText: string) => void;
+
+export type CSSJSObj = Record<
+  string,
+  string | Record<string, string> | Record<string, Record<string, string>>[]
+>;
+
+export type GetParseCaseFunction = ((target: string) => string) | undefined;

src/util.ts

@@ -2,3 +2,21 @@ export const cssLangs = `\\.(css|sass|scss)($|\\?)`;
 export const cssLangReg = new RegExp(cssLangs);
 
 export const isCSSFile = (request: string): boolean => cssLangReg.test(request);
+
+export const toDashCase = (target: string) =>
+  target
+    .replace(/[-_ /~ . ][A-z0-9]/g, (v) => {
+      return "-" + v.slice(1);
+    })
+    .toLowerCase();
+
+export const toCamelCase = (target: string) =>
+  target
+    .replace(/^[A-Z]/, (m) => m.toLowerCase())
+    .replace(/[-_ ./~ ]+([A-z0-9])/g, (m, $1) => $1.toUpperCase());
+
+export const collectionToObj = <V>(collection: Record<string, V>[]) => {
+  return collection.reduce((acc, item): Record<string, V> => {
+    return { ...acc, ...item };
+  }, {});
+};