ts-plugin report the import of files where .d.ts exists but .module.css does not exist (#193)

* make ts-plugin report the import of files where .d.ts exists but .module.css does not exist

* add changelog

Author: mizdra

.changeset/grumpy-dogs-divide.md

@@ -0,0 +1,5 @@
+---
+'@css-modules-kit/ts-plugin': patch
+---
+
+fix: make ts-plugin report the import of files where .d.ts exists but .module.css does not exist

packages/ts-plugin/e2e/ignore-generated-files.test.ts

@@ -0,0 +1,49 @@
+import dedent from 'dedent';
+import { expect, test } from 'vitest';
+import { createIFF } from './test-util/fixture.js';
+import { launchTsserver } from './test-util/tsserver.js';
+
+test('report the import of files where .d.ts exists but .module.css does not exist', async () => {
+  const tsserver = launchTsserver();
+  const iff = await createIFF({
+    // `a.module.css` is not exist, and the .d.ts file is exist.
+    // But `'./a.module.css'` should report an error.
+    'index.ts': dedent`
+      import styles from './a.module.css';
+    `,
+    'generated/a.module.css.d.ts': dedent`
+      const styles: {};
+      export default styles;
+    `,
+    'tsconfig.json': dedent`
+      {
+        "compilerOptions": {
+          "rootDirs": [".", "generated"],
+        }
+      }
+    `,
+  });
+  await tsserver.sendUpdateOpen({
+    openFiles: [{ file: iff.paths['index.ts'] }],
+  });
+  const res = await tsserver.sendSemanticDiagnosticsSync({
+    file: iff.paths['index.ts'],
+  });
+  expect(res.body).toMatchInlineSnapshot(`
+    [
+      {
+        "category": "error",
+        "code": 2307,
+        "end": {
+          "line": 1,
+          "offset": 36,
+        },
+        "start": {
+          "line": 1,
+          "offset": 20,
+        },
+        "text": "Cannot find module './a.module.css' or its corresponding type declarations.",
+      },
+    ]
+  `);
+});

packages/ts-plugin/src/index.ts

@@ -33,6 +33,19 @@ const plugin = createLanguageServicePlugin((ts, info) => {
     }
   }
 
+  // tsserver should report a “Cannot find module” error for import statements in CSS Modules that
+  // do not exist. However, if `dtsOutDir` is included in `rootDirs` and old .d.ts files remain
+  // in `dtsOutDir`, the error will not be reported. Therefore, remove `dtsOutDir` from `rootDirs`.
+  const getCompilationSettings = info.languageServiceHost.getCompilationSettings.bind(info.languageServiceHost);
+  info.languageServiceHost.getCompilationSettings = () => {
+    const settings = { ...getCompilationSettings() };
+    if (settings.rootDirs) {
+      // TODO: If the `dtsOutDir` is not in `rootDirs`, warn the user.
+      settings.rootDirs = settings.rootDirs.filter((dir) => dir !== config.dtsOutDir);
+    }
+    return settings;
+  };
+
   const moduleResolutionCache = info.languageServiceHost.getModuleResolutionCache?.();
   const resolver = createResolver(config.compilerOptions, moduleResolutionCache);
   const matchesPattern = createMatchesPattern(config);