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}` ); } }