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 pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy