CSS modules with Typings

packages/react-scripts/config/webpack.config.dev.js

@@ -179,12 +179,17 @@ module.exports = {
             test: /\.css$/,
             use: [
               require.resolve('style-loader'),
-              {
-                loader: require.resolve('css-loader'),
-                options: {
-                  importLoaders: 1,
-                },
-              },
+              ({ resource }) => (
+                {
+                  loader: require.resolve('typings-for-css-modules-loader'),
+                  options: {
+                    importLoaders: 1,
+                    modules: /\.module\.css$/.test(resource),
+                    localIdentName: '[path][name]__[local]',
+                    namedExport: true,
+                    camelCase: true,
+                  },
+                }),
               {
                 loader: require.resolve('postcss-loader'),
                 options: {

packages/react-scripts/config/webpack.config.prod.js

@@ -173,6 +173,52 @@ module.exports = {
             include: paths.appSrc,
             loader: require.resolve('ts-loader')
           },
+          {
+            test: /\.module\.css$/,
+            loader: ExtractTextPlugin.extract(
+              Object.assign(
+                {
+                  use: [
+                    {
+                      loader: require.resolve('typings-for-css-modules-loader'),
+                      options: {
+                        importLoaders: 1,
+                        minimize: true,
+                        modules: true,
+                        namedExport: true,
+                        camelCase: true,
+                        localIdentName: '[path][name]__[local]',
+                        sourceMap: shouldUseSourceMap,
+                      },
+                    },
+                    {
+                      loader: require.resolve('postcss-loader'),
+                      options: {
+                        // Necessary for external CSS imports to work
+                        // https://github.com/facebookincubator/create-react-app/issues/2677
+                        ident: 'postcss',
+                        plugins: () => [
+                          require('postcss-flexbugs-fixes'),
+                          autoprefixer({
+                            browsers: [
+                              '>1%',
+                              'last 4 versions',
+                              'Firefox ESR',
+                              'not ie < 9', // React doesn't support IE8 anyway
+                            ],
+                            flexbox: 'no-2009',
+                          }),
+                        ],
+                      },
+                    },
+                  ],
+                },
+                extractTextPluginOptions
+              )
+            ),
+            // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
+          },
+
           // The notation here is somewhat confusing.
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.
@@ -187,6 +233,7 @@ module.exports = {
           // in the main CSS file.
           {
             test: /\.css$/,
+            exclude: /\.module\.css$/,
             loader: ExtractTextPlugin.extract(
               Object.assign(
                 {

packages/react-scripts/package.json

@@ -1,14 +1,14 @@
 {
-  "name": "react-scripts-ts",
-  "version": "2.8.0",
+  "name": "react-scripts-ts-cm",
+  "version": "2.8.5",
   "description": "Configuration and scripts for Create React App.",
-  "repository": "wmonk/create-react-app",
+  "repository": "tomaash/create-react-app-typescript",
   "license": "BSD-3-Clause",
   "engines": {
     "node": ">=6"
   },
   "bugs": {
-    "url": "https://github.com/wmonk/create-react-app/issues"
+    "url": "https://github.com/tomaash/create-react-app-typescript/issues"
   },
   "files": [
     "bin",
@@ -24,6 +24,7 @@
     "autoprefixer": "7.1.2",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
+    "typings-for-css-modules-loader": "1.7.0",
     "css-loader": "0.28.4",
     "dotenv": "4.0.0",
     "extract-text-webpack-plugin": "3.0.0",

packages/react-scripts/template/src/App.module.css

@@ -0,0 +1,3 @@
+.red {
+  color: red;
+}

packages/react-scripts/template/src/App.module.css.d.ts

@@ -0,0 +1 @@
+export const red: string;

packages/react-scripts/template/src/App.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import './App.css';
+import * as style from './App.module.css';
 
 const logo = require('./logo.svg');
 
@@ -9,7 +10,7 @@ class App extends React.Component {
       <div className="App">
         <div className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
+          <h2 className={style.red}>Welcome to React</h2>
         </div>
         <p className="App-intro">
           To get started, edit <code>src/App.tsx</code> and save to reload.

packages/react-scripts/template/tsconfig.json

@@ -5,18 +5,18 @@
     "target": "es5",
     "lib": ["es6", "dom"],
     "sourceMap": true,
+    "experimentalDecorators": true,
     "allowJs": true,
     "jsx": "react",
     "moduleResolution": "node",
     "rootDir": "src",
     "forceConsistentCasingInFileNames": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
+    "noImplicitAny": false,
+    "strictNullChecks": false,
     "suppressImplicitAnyIndexErrors": true,
-    "noUnusedLocals": true
-  },
+    "noUnusedLocals": false  },
   "exclude": [
     "node_modules",
     "build",

packages/react-scripts/template/tslint.json

@@ -1,5 +1,7 @@
 {
-    "extends": ["tslint-react"],
+    "extends": [
+        "tslint-react"
+    ],
     "rules": {
         "align": [
             true,
@@ -13,27 +15,38 @@
             true,
             "check-space"
         ],
-        "curly": true,
+        "curly": false,
         "eofline": false,
         "forin": true,
-        "indent": [ true, "spaces" ],
-        "interface-name": [true, "never-prefix"],
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": [
+            true,
+            "never-prefix"
+        ],
         "jsdoc-format": true,
         "jsx-no-lambda": false,
+        "jsx-wrap-multiline": false,
         "jsx-no-multiline-js": false,
+        "jsx-alignment": false,
         "label-position": true,
-        "max-line-length": [ true, 120 ],
+        "max-line-length": [
+            true,
+            120
+        ],
         "member-ordering": [
             true,
             "public-before-private",
             "static-before-instance",
             "variables-before-functions"
         ],
-        "no-any": true,
+        "no-any": false,
         "no-arg": true,
         "no-bitwise": true,
         "no-console": [
-            true,
+            false,
             "log",
             "error",
             "debug",
@@ -61,14 +74,24 @@
             "check-open-brace",
             "check-whitespace"
         ],
-        "quotemark": [true, "single", "jsx-double"],
+        "quotemark": [
+            true,
+            "single",
+            "jsx-double"
+        ],
         "radix": true,
-        "semicolon": [true, "always"],
+        "semicolon": [
+            false,
+            "always"
+        ],
         "switch-default": true,
-
-        "trailing-comma": [false],
-
-        "triple-equals": [ true, "allow-null-check" ],
+        "trailing-comma": [
+            false
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
         "typedef": [
             true,
             "parameter",
@@ -84,7 +107,13 @@
                 "variable-declaration": "nospace"
             }
         ],
-        "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore", "allow-pascal-case"],
+        "variable-name": [
+            true,
+            "ban-keywords",
+            "check-format",
+            "allow-leading-underscore",
+            "allow-pascal-case"
+        ],
         "whitespace": [
             true,
             "check-branch",
@@ -96,4 +125,4 @@
             "check-typecast"
         ]
     }
-}
+}