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 {
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