chore(postcss): replace css-modules-loader-core

Author: skovy

__tests__/__snapshots__/main.test.ts.snap

@@ -9,6 +9,7 @@ export declare const nestedClass: string;
 export declare const nestedStyles: string;
 export declare const number1: string;
 export declare const someStyles: string;
+export declare const whereSelector: string;
 ",
     "path": "../__generated__/__tests__/dummy-styles/alias-prefixes.scss.d.ts",
   },
@@ -19,6 +20,7 @@ export declare const nestedClass: string;
 export declare const number1: string;
 export declare const someClass: string;
 export declare const someStyles: string;
+export declare const whereSelector: string;
 ",
     "path": "../__generated__/__tests__/dummy-styles/aliases.scss.d.ts",
   },
@@ -27,6 +29,7 @@ export declare const someStyles: string;
 export declare const nestedClass: string;
 export declare const number1: string;
 export declare const someStyles: string;
+export declare const whereSelector: string;
 ",
     "path": "../__generated__/__tests__/dummy-styles/complex.scss.d.ts",
   },
@@ -75,6 +78,7 @@ Array [
   nestedStyles: string;
   number1: string;
   someStyles: string;
+  whereSelector: string;
 };
 
 export type ClassNames = keyof Styles;
@@ -93,6 +97,7 @@ export default styles;
   number1: string;
   someClass: string;
   someStyles: string;
+  whereSelector: string;
 };
 
 export type ClassNames = keyof Styles;
@@ -109,6 +114,7 @@ export default styles;
   nestedClass: string;
   number1: string;
   someStyles: string;
+  whereSelector: string;
 };
 
 export type ClassNames = keyof Styles;
@@ -211,6 +217,7 @@ export declare const nestedClass: string;
 export declare const nestedStyles: string;
 export declare const number1: string;
 export declare const someStyles: string;
+export declare const whereSelector: string;
 ",
     "path": "../__generated__/__tests__/dummy-styles/alias-prefixes.scss.d.ts",
   },
@@ -221,6 +228,7 @@ export declare const nestedClass: string;
 export declare const number1: string;
 export declare const someClass: string;
 export declare const someStyles: string;
+export declare const whereSelector: string;
 ",
     "path": "../__generated__/__tests__/dummy-styles/aliases.scss.d.ts",
   },
@@ -229,6 +237,7 @@ export declare const someStyles: string;
 export declare const nestedClass: string;
 export declare const number1: string;
 export declare const someStyles: string;
+export declare const whereSelector: string;
 ",
     "path": "../__generated__/__tests__/dummy-styles/complex.scss.d.ts",
   },
@@ -277,6 +286,7 @@ Array [
   nestedStyles: string;
   number1: string;
   someStyles: string;
+  whereSelector: string;
 };
 
 export type ClassNames = keyof Styles;
@@ -295,6 +305,7 @@ export default styles;
   number1: string;
   someClass: string;
   someStyles: string;
+  whereSelector: string;
 };
 
 export type ClassNames = keyof Styles;
@@ -311,6 +322,7 @@ export default styles;
   nestedClass: string;
   number1: string;
   someStyles: string;
+  whereSelector: string;
 };
 
 export type ClassNames = keyof Styles;

__tests__/dummy-styles/complex.scss

@@ -15,3 +15,7 @@
     border: 1px;
   }
 }
+
+:where(.where-selector) {
+  color: blue;
+}

__tests__/main.test.ts

@@ -60,7 +60,7 @@ describeAllImplementations((implementation) => {
 
       expect(fs.writeFileSync).toBeCalledWith(
         `${expectedDirname}/complex.scss.d.ts`,
-        "export declare const nestedAnother: string;\nexport declare const nestedClass: string;\nexport declare const number1: string;\nexport declare const someStyles: string;\n"
+        "export declare const nestedAnother: string;\nexport declare const nestedClass: string;\nexport declare const number1: string;\nexport declare const someStyles: string;\nexport declare const whereSelector: string;\n"
       );
       expect(fs.writeFileSync).toBeCalledWith(
         `${expectedDirname}/style.scss.d.ts`,
@@ -101,7 +101,7 @@ describeAllImplementations((implementation) => {
 
       expect(fs.writeFileSync).toBeCalledWith(
         `${expectedDirname}/complex.scss.d.ts`,
-        "export declare const nestedAnother: string;\nexport declare const nestedClass: string;\nexport declare const number1: string;\nexport declare const someStyles: string;\n"
+        "export declare const nestedAnother: string;\nexport declare const nestedClass: string;\nexport declare const number1: string;\nexport declare const someStyles: string;\nexport declare const whereSelector: string;\n"
       );
 
       // Files that should match the ignore pattern.

__tests__/sass/file-to-class-names.test.ts

@@ -14,6 +14,7 @@ describeAllImplementations((implementation) => {
         "nestedClass",
         "number1",
         "someStyles",
+        "whereSelector",
       ]);
     });
 
@@ -32,6 +33,7 @@ describeAllImplementations((implementation) => {
           "nested-class",
           "number-1",
           "some-styles",
+          "where-selector",
         ]);
       });
 
@@ -49,6 +51,7 @@ describeAllImplementations((implementation) => {
           "nested-class",
           "number-1",
           "some-styles",
+          "where-selector",
         ]);
       });
 
@@ -66,6 +69,7 @@ describeAllImplementations((implementation) => {
           "nested_class",
           "number_1",
           "some_styles",
+          "where_selector",
         ]);
       });
 
@@ -115,6 +119,9 @@ describeAllImplementations((implementation) => {
           "some_styles",
           "some-styles",
           "someStyles",
+          "where_selector",
+          "where-selector",
+          "whereSelector",
         ]);
       });
 
@@ -136,6 +143,8 @@ describeAllImplementations((implementation) => {
           "number-1",
           "some_styles",
           "some-styles",
+          "where_selector",
+          "where-selector",
         ]);
       });
 
@@ -153,6 +162,7 @@ describeAllImplementations((implementation) => {
           "nested_class",
           "number_1",
           "some_styles",
+          "where_selector",
         ]);
       });
     });
@@ -177,6 +187,7 @@ describeAllImplementations((implementation) => {
           "number1",
           "someClass",
           "someStyles",
+          "whereSelector",
         ]);
       });
     });
@@ -203,6 +214,7 @@ describeAllImplementations((implementation) => {
           "nestedStyles",
           "number1",
           "someStyles",
+          "whereSelector",
         ]);
       });
     });

lib/sass/file-to-class-names.ts

@@ -75,9 +75,7 @@ export const fileToClassNames = async (
     importer: customImporters({ aliases, aliasPrefixes, importer }),
   });
 
-  const { exportTokens } = await sourceToClassNames(result.css);
-
-  const classNames = Object.keys(exportTokens);
+  const classNames = await sourceToClassNames(result.css, file);
   const transformers = nameFormats.map((item) => transformersMap[item]);
   const transformedClassNames = new Set<ClassName>([]);
   classNames.forEach((className: ClassName) => {

lib/sass/source-to-class-names.ts

@@ -1,9 +1,20 @@
-import Core, { Source } from "css-modules-loader-core";
+import postcss from "postcss";
+import PostcssModulesPlugin from "postcss-modules";
 
-const core = new Core();
-
-export const sourceToClassNames = (source: Source) => {
-  return core.load(source, undefined, undefined, noOpPathFetcher);
+/**
+ * Converts a CSS source string to a list of exports (class names, keyframes, etc.)
+ */
+export const sourceToClassNames = async (
+  source: { toString(): string },
+  file: string
+) => {
+  let result: Record<string, string> = {};
+  await postcss([
+    PostcssModulesPlugin({
+      getJSON: (_, json) => {
+        result = json;
+      },
+    }),
+  ]).process(source, { from: file });
+  return Object.keys(result);
 };
-
-const noOpPathFetcher = () => Promise.resolve({});