Fix: css @import

package.json

@@ -53,6 +53,7 @@
     "less": "^4.2.0",
     "lodash.camelcase": "^4.3.0",
     "postcss": "^8.4.35",
+    "postcss-import-sync2": "^1.2.0",
     "postcss-load-config": "^3.1.4",
     "postcss-modules-extract-imports": "^3.0.0",
     "postcss-modules-local-by-default": "^4.0.4",
@@ -83,7 +84,6 @@
     "jest": "^29.7.0",
     "jest-environment-node-single-context": "^29.4.0",
     "lint-staged": "^15.2.2",
-    "postcss-import-sync2": "^1.2.0",
     "postcss-nested": "^4.2.3",
     "postcss-preset-env": "^8.5.1",
     "prettier": "^3.2.5",

src/helpers/__tests__/fixtures/fileA.module.css

@@ -0,0 +1,3 @@
+.class1 {
+  color: red;
+}

src/helpers/__tests__/fixtures/fileB.module.css

@@ -0,0 +1,5 @@
+@import './fileA.module.css';
+
+.class2 {
+  color: blue;
+}

src/helpers/__tests__/getDtsSnapshot.test.ts

@@ -129,6 +129,35 @@ describe('helpers / cssSnapshots', () => {
     });
   });
 
+  /**
+   * When fileB.module.css `@import`s fileA.module.css, Vite (and css-loader)
+   * expose classes from both files on the fileB module export. The plugin's
+   * default processor does not inline `@import`, so class1 is missing from
+   * types even though it works at runtime.
+   */
+  describe('with a CSS modules @import of another CSS modules file', () => {
+    const fileName = join(__dirname, 'fixtures', 'fileB.module.css');
+    const css = readFileSync(fileName, 'utf8');
+    const defaultProcessor = getProcessor();
+
+    it('should include classes from both the importing and imported files', () => {
+      const cssExports = getCssExports({
+        css,
+        fileName,
+        logger,
+        options,
+        processor: defaultProcessor,
+        compilerOptions,
+        directory: __dirname,
+      });
+
+      expect(cssExports.classes).toEqual({
+        class1: 'class1',
+        class2: 'class2',
+      });
+    });
+  });
+
   describe('with a custom renderer', () => {
     const fileName = 'exampleFileContents';
     const css = 'exampleFileName';

src/helpers/getProcessor.ts

@@ -1,5 +1,6 @@
 import postcss, { AcceptedPlugin } from 'postcss';
 import Processor from 'postcss/lib/processor';
+import postcssImportSync from 'postcss-import-sync2';
 import postcssLocalByDefault from 'postcss-modules-local-by-default';
 import postcssModulesScope from 'postcss-modules-scope';
 import postcssModulesExtractImports from 'postcss-modules-extract-imports';
@@ -9,6 +10,7 @@ export const getProcessor = (
 ): Processor =>
   postcss([
     ...additionalPlugins,
+    postcssImportSync(),
     postcssLocalByDefault(),
     postcssModulesExtractImports(),
     postcssModulesScope({