Optimize TypeScript Support for CSS Modules

src/fishkit/npm.ts

@@ -62,6 +62,33 @@ export const installWithNpmClient = ({
   }
 };
 
+export const installSpecifiedDepsWithNpmClient = ({
+  npmClient,
+  cwd,
+  pkg,
+  flags,
+}: {
+  npmClient: NpmClient;
+  cwd?: string;
+  pkg: string;
+  flags?: string[];
+}): void => {
+  const { NODE_ENV: _, ...env } = process.env;
+
+  const flag = flags ?? [];
+  const args = npmClient === 'yarn' ? ['add', pkg, ...flag] : ['install', pkg, ...flag];
+
+  const npm = spawnSync(npmClient, args, {
+    stdio: 'inherit',
+    cwd,
+    env,
+  });
+
+  if (npm.error) {
+    throw npm.error;
+  }
+};
+
 type Dependencies = Record<string, string>;
 
 interface PackageJson {
@@ -128,7 +155,32 @@ export class PackageManager {
 
       const npmClient = getNpmClient({ cwd: this.cwd });
       await installWithNpmClient({
+        npmClient
+      });
+
+      console.info(`Dependencies installed with ${npmClient}`);
+    } catch (error) {
+      throw new Error(`Failed to install dependencies: ${error}`);
+    }
+  }
+
+  public installSpecifiedDeps({
+    pkg,
+    isDev,
+    cwd,
+  }: {
+    pkg: string;
+    isDev?: boolean;
+    cwd?: string;
+  }): void {
+    try {
+      const npmClient = getNpmClient({ cwd: this.cwd });
+
+      installSpecifiedDepsWithNpmClient({
         npmClient,
+        cwd,
+        pkg,
+        flags: isDev ? ['-D'] : [],
       });
 
       console.info(`Dependencies installed with ${npmClient}`);

src/sync/write_types.ts

@@ -4,6 +4,7 @@ import path from 'pathe';
 import { FRAMEWORK_NAME } from '../constants';
 import { writeFileSync } from './fs';
 import type { SyncOptions } from './sync';
+import { PackageManager } from '../fishkit/npm';
 
 function checkTsconfig(content: string) {
   const json = JSON5.parse(content);
@@ -13,6 +14,15 @@ function checkTsconfig(content: string) {
   }
 }
 
+function installTypescriptPluginCssModules(context: { cwd: string }) {
+  const pm = new PackageManager({ cwd: context.cwd });
+
+  pm.installSpecifiedDeps({
+    pkg: 'typescript-plugin-css-modules@^5.1.0',
+    isDev: true,
+  });
+}
+
 export function generatePathsFromAlias(
   targetDir: string,
   alias: [string, string][],
@@ -46,7 +56,7 @@ export function generatePathsFromAlias(
   return paths;
 }
 
-export function writeTypes({ context }: SyncOptions) {
+export async function writeTypes({ context }: SyncOptions) {
   const {
     paths: { tmpPath },
     cwd,
@@ -57,6 +67,8 @@ export function writeTypes({ context }: SyncOptions) {
   const userTsconfigPath = path.join(cwd, 'tsconfig.json');
   checkTsconfig(fs.readFileSync(userTsconfigPath, 'utf-8'));
 
+  installTypescriptPluginCssModules(context);
+
   const tsconfigPath = path.join(tmpPath, 'tsconfig.json');
   const paths = generatePathsFromAlias(tmpPath, config.alias || []);
   const tsconfig = {
@@ -72,6 +84,7 @@ export function writeTypes({ context }: SyncOptions) {
       noEmit: true,
       strictNullChecks: true,
       target: 'esnext',
+      plugins: [{ name: 'typescript-plugin-css-modules' }],
     },
     include: [
       'client.tsx',