diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index dfef220b781..46fc92f3876 100644
--- a/packages/react-scripts/package.json
+++ b/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",
diff --git a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js
index 8dd5cdcc69a..23a0914528e 100644
--- a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js
+++ b/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,
- `/// ${os.EOL}`
+ `/// ${os.EOL}`
);
}
}