diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 07c0a3adf..529f5cace 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/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: { diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 9582ee731..fcf2ac1d6 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/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( { diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 01bb852f5..5e1a92a14 100644 --- a/packages/react-scripts/package.json +++ b/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", diff --git a/packages/react-scripts/template/src/App.module.css b/packages/react-scripts/template/src/App.module.css new file mode 100644 index 000000000..174f7cce2 --- /dev/null +++ b/packages/react-scripts/template/src/App.module.css @@ -0,0 +1,3 @@ +.red { + color: red; +} \ No newline at end of file diff --git a/packages/react-scripts/template/src/App.module.css.d.ts b/packages/react-scripts/template/src/App.module.css.d.ts new file mode 100644 index 000000000..5453d838f --- /dev/null +++ b/packages/react-scripts/template/src/App.module.css.d.ts @@ -0,0 +1 @@ +export const red: string; \ No newline at end of file diff --git a/packages/react-scripts/template/src/App.tsx b/packages/react-scripts/template/src/App.tsx index a8de509cd..1d60ddb85 100644 --- a/packages/react-scripts/template/src/App.tsx +++ b/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 {
logo -

Welcome to React

+

Welcome to React

To get started, edit src/App.tsx and save to reload. diff --git a/packages/react-scripts/template/tsconfig.json b/packages/react-scripts/template/tsconfig.json index 859735414..c57194c64 100644 --- a/packages/react-scripts/template/tsconfig.json +++ b/packages/react-scripts/template/tsconfig.json @@ -5,6 +5,7 @@ "target": "es5", "lib": ["es6", "dom"], "sourceMap": true, + "experimentalDecorators": true, "allowJs": true, "jsx": "react", "moduleResolution": "node", @@ -12,11 +13,10 @@ "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noImplicitThis": true, - "noImplicitAny": true, - "strictNullChecks": true, + "noImplicitAny": false, + "strictNullChecks": false, "suppressImplicitAnyIndexErrors": true, - "noUnusedLocals": true - }, + "noUnusedLocals": false }, "exclude": [ "node_modules", "build", diff --git a/packages/react-scripts/template/tslint.json b/packages/react-scripts/template/tslint.json index eb5d66a02..84eadb7d4 100644 --- a/packages/react-scripts/template/tslint.json +++ b/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" ] } -} +} \ No newline at end of file