Add typescript-plugin-css-modules

packages/react-scripts/package.json

@@ -66,6 +66,7 @@
     "sass-loader": "7.1.0",
     "style-loader": "0.23.0",
     "terser-webpack-plugin": "1.1.0",
+    "typescript-plugin-css-modules": "1.0.4",
     "url-loader": "1.1.1",
     "webpack": "4.19.1",
     "webpack-dev-server": "3.1.9",

packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js

@@ -13,6 +13,7 @@ const fs = require('fs');
 const resolve = require('resolve');
 const path = require('path');
 const paths = require('../../config/paths');
+const pkgJson = require('../../package.json');
 const os = require('os');
 const immer = require('react-dev-utils/immer').produce;
 const globby = require('react-dev-utils/globby').sync;
@@ -37,6 +38,16 @@ function verifyNoTypeScript() {
   return true;
 }
 
+function hasCSSModules() {
+  const cssModuleFiles = globby('**/*.module.(c|sa|sc)ss', {
+    cwd: paths.appSrc,
+  });
+  if (cssModuleFiles.length > 0) {
+    return true;
+  }
+  return false;
+}
+
 function verifyTypeScriptSetup() {
   let firstTimeSetup = false;
 
@@ -130,6 +141,15 @@ function verifyTypeScriptSetup() {
     paths: { value: undefined, reason: 'aliased imports are not supported' },
   };
 
+  if (hasCSSModules()) {
+    // We don't install this to the user's project. Instead it's a dependency
+    // of `react-scripts`. TypeScript won't fail or throw errors if the plugin
+    // isn't found.
+    compilerOptions.plugins = {
+      suggested: [{ name: 'typescript-plugin-css-modules' }],
+    };
+  }
+
   const formatDiagnosticHost = {
     getCanonicalFileName: fileName => fileName,
     getCurrentDirectory: ts.sys.getCurrentDirectory,
@@ -252,7 +272,7 @@ function verifyTypeScriptSetup() {
   if (!fs.existsSync(paths.appTypeDeclarations)) {
     fs.writeFileSync(
       paths.appTypeDeclarations,
-      `/// <reference types="react-scripts" />${os.EOL}`
+      `/// <reference types="${pkgJson.name}" />${os.EOL}`
     );
   }
 }