From 66e19f2caf3d1474ec6c68a6a7b139122f4e220a Mon Sep 17 00:00:00 2001 From: Pavinthan Date: Fri, 17 Jan 2020 12:10:40 +0530 Subject: [PATCH 1/5] PostCSS config updated. --- .../template/postcss.config.js | 17 +++++++++++++++++ .../cra-template/template/postcss.config.js | 17 +++++++++++++++++ .../react-scripts/config/webpack.config.js | 18 ++---------------- packages/react-scripts/package.json | 1 - 4 files changed, 36 insertions(+), 17 deletions(-) create mode 100644 packages/cra-template-typescript/template/postcss.config.js create mode 100644 packages/cra-template/template/postcss.config.js diff --git a/packages/cra-template-typescript/template/postcss.config.js b/packages/cra-template-typescript/template/postcss.config.js new file mode 100644 index 00000000000..40578b2b906 --- /dev/null +++ b/packages/cra-template-typescript/template/postcss.config.js @@ -0,0 +1,17 @@ +'use strict'; + +module.exports = { + plugins: [ + require('postcss-flexbugs-fixes'), + require('postcss-preset-env')({ + autoprefixer: { + flexbox: 'no-2009', + }, + stage: 3, + }), + // Adds PostCSS Normalize as the reset css with default options, + // so that it honors browserslist config in package.json + // which in turn let's users customize the target behavior as per their needs. + require('postcss-normalize')(), + ], +}; diff --git a/packages/cra-template/template/postcss.config.js b/packages/cra-template/template/postcss.config.js new file mode 100644 index 00000000000..40578b2b906 --- /dev/null +++ b/packages/cra-template/template/postcss.config.js @@ -0,0 +1,17 @@ +'use strict'; + +module.exports = { + plugins: [ + require('postcss-flexbugs-fixes'), + require('postcss-preset-env')({ + autoprefixer: { + flexbox: 'no-2009', + }, + stage: 3, + }), + // Adds PostCSS Normalize as the reset css with default options, + // so that it honors browserslist config in package.json + // which in turn let's users customize the target behavior as per their needs. + require('postcss-normalize')(), + ], +}; diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index bad4290061b..3d2cfa118e5 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -36,7 +36,6 @@ const typescriptFormatter = require('react-dev-utils/typescriptFormatter'); const eslint = require('eslint'); const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier'); // @remove-on-eject-end -const postcssNormalize = require('postcss-normalize'); const appPackageJson = require(paths.appPackageJson); @@ -110,19 +109,6 @@ module.exports = function(webpackEnv) { // Necessary for external CSS imports to work // https://github.com/facebook/create-react-app/issues/2677 ident: 'postcss', - plugins: () => [ - require('postcss-flexbugs-fixes'), - require('postcss-preset-env')({ - autoprefixer: { - flexbox: 'no-2009', - }, - stage: 3, - }), - // Adds PostCSS Normalize as the reset css with default options, - // so that it honors browserslist config in package.json - // which in turn let's users customize the target behavior as per their needs. - postcssNormalize(), - ], sourceMap: isEnvProduction && shouldUseSourceMap, }, }, @@ -270,8 +256,8 @@ module.exports = function(webpackEnv) { : false, }, cssProcessorPluginOptions: { - preset: ['default', { minifyFontValues: { removeQuotes: false } }] - } + preset: ['default', { minifyFontValues: { removeQuotes: false } }], + }, }), ], // Automatically split vendor and commons diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 18c63e4b154..b8547b5af4b 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -63,7 +63,6 @@ "pnp-webpack-plugin": "1.5.0", "postcss-flexbugs-fixes": "4.1.0", "postcss-loader": "3.0.0", - "postcss-normalize": "8.0.1", "postcss-preset-env": "6.7.0", "postcss-safe-parser": "4.0.1", "react-app-polyfill": "^1.0.5", From 63b598b7fe6289f8e1769e659027328381a00cb3 Mon Sep 17 00:00:00 2001 From: Pavinthan Date: Fri, 17 Jan 2020 12:16:56 +0530 Subject: [PATCH 2/5] Post CSS normalize added back --- packages/react-scripts/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index b8547b5af4b..18c63e4b154 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -63,6 +63,7 @@ "pnp-webpack-plugin": "1.5.0", "postcss-flexbugs-fixes": "4.1.0", "postcss-loader": "3.0.0", + "postcss-normalize": "8.0.1", "postcss-preset-env": "6.7.0", "postcss-safe-parser": "4.0.1", "react-app-polyfill": "^1.0.5", From e0c8032c9470d83a3a6d8f2ac3a8b57b23b61c10 Mon Sep 17 00:00:00 2001 From: Pavinthan Date: Fri, 17 Jan 2020 12:42:20 +0530 Subject: [PATCH 3/5] Kitchensink app fixed. --- .../kitchensink/template/postcss.config.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 packages/react-scripts/fixtures/kitchensink/template/postcss.config.js diff --git a/packages/react-scripts/fixtures/kitchensink/template/postcss.config.js b/packages/react-scripts/fixtures/kitchensink/template/postcss.config.js new file mode 100644 index 00000000000..40578b2b906 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/template/postcss.config.js @@ -0,0 +1,17 @@ +'use strict'; + +module.exports = { + plugins: [ + require('postcss-flexbugs-fixes'), + require('postcss-preset-env')({ + autoprefixer: { + flexbox: 'no-2009', + }, + stage: 3, + }), + // Adds PostCSS Normalize as the reset css with default options, + // so that it honors browserslist config in package.json + // which in turn let's users customize the target behavior as per their needs. + require('postcss-normalize')(), + ], +}; From e51b709ce8ca480273e20f5e9b4d9fd5c5e95415 Mon Sep 17 00:00:00 2001 From: Pavinthan Date: Thu, 27 Feb 2020 01:46:55 +0530 Subject: [PATCH 4/5] default configuration override with config files and update docs --- docusaurus/docs/post-processing-css.md | 2 ++ .../template/postcss.config.js | 17 ---------------- .../cra-template/template/postcss.config.js | 17 ---------------- packages/react-scripts/config/paths.js | 9 +++++++++ .../react-scripts/config/webpack.config.js | 20 +++++++++++++++++++ packages/react-scripts/package.json | 1 + 6 files changed, 32 insertions(+), 34 deletions(-) delete mode 100644 packages/cra-template-typescript/template/postcss.config.js delete mode 100644 packages/cra-template/template/postcss.config.js diff --git a/docusaurus/docs/post-processing-css.md b/docusaurus/docs/post-processing-css.md index 1a456b9f1c5..d0f51703d5a 100644 --- a/docusaurus/docs/post-processing-css.md +++ b/docusaurus/docs/post-processing-css.md @@ -7,6 +7,8 @@ This project setup minifies your CSS and adds vendor prefixes to it automaticall Support for new CSS features like the [`all` property](https://developer.mozilla.org/en-US/docs/Web/CSS/all), [`break` properties](https://www.w3.org/TR/css-break-3/#breaking-controls), [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), and [media query ranges](https://www.w3.org/TR/mediaqueries-4/#range-context) are automatically polyfilled to add support for older browsers. +You can configure PostCSS via `.postcssrc` or any config source supported by [postcss-load-config](https://github.com/michael-ciniawsky/postcss-load-config). + You can customize your target support browsers by adjusting the `browserslist` key in `package.json` according to the [Browserslist specification](https://github.com/browserslist/browserslist#readme). For example, this: diff --git a/packages/cra-template-typescript/template/postcss.config.js b/packages/cra-template-typescript/template/postcss.config.js deleted file mode 100644 index 40578b2b906..00000000000 --- a/packages/cra-template-typescript/template/postcss.config.js +++ /dev/null @@ -1,17 +0,0 @@ -'use strict'; - -module.exports = { - plugins: [ - require('postcss-flexbugs-fixes'), - require('postcss-preset-env')({ - autoprefixer: { - flexbox: 'no-2009', - }, - stage: 3, - }), - // Adds PostCSS Normalize as the reset css with default options, - // so that it honors browserslist config in package.json - // which in turn let's users customize the target behavior as per their needs. - require('postcss-normalize')(), - ], -}; diff --git a/packages/cra-template/template/postcss.config.js b/packages/cra-template/template/postcss.config.js deleted file mode 100644 index 40578b2b906..00000000000 --- a/packages/cra-template/template/postcss.config.js +++ /dev/null @@ -1,17 +0,0 @@ -'use strict'; - -module.exports = { - plugins: [ - require('postcss-flexbugs-fixes'), - require('postcss-preset-env')({ - autoprefixer: { - flexbox: 'no-2009', - }, - stage: 3, - }), - // Adds PostCSS Normalize as the reset css with default options, - // so that it honors browserslist config in package.json - // which in turn let's users customize the target behavior as per their needs. - require('postcss-normalize')(), - ], -}; diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index acaca7f4d48..6b0dea06883 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -11,6 +11,7 @@ const path = require('path'); const fs = require('fs'); const url = require('url'); +const config = require('cosmiconfig'); // Make sure any symlinks in the project folder are resolved: // https://github.com/facebook/create-react-app/issues/637 @@ -73,6 +74,11 @@ const resolveModule = (resolveFn, filePath) => { return resolveFn(`${filePath}.js`); }; +// Resolve config file exist +const resolveConfig = (moduleName, filePath) => { + return config(moduleName).searchSync(filePath); +}; + // config after eject: we're in ./config/ module.exports = { dotenv: resolveApp('.env'), @@ -91,6 +97,7 @@ module.exports = { appNodeModules: resolveApp('node_modules'), publicUrl: getPublicUrl(resolveApp('package.json')), servedPath: getServedPath(resolveApp('package.json')), + postCssConfig: resolveConfig('postcss'), }; // @remove-on-eject-begin @@ -119,6 +126,7 @@ module.exports = { ownNodeModules: resolveOwn('node_modules'), // This is empty on npm 3 appTypeDeclarations: resolveApp('src/react-app-env.d.ts'), ownTypeDeclarations: resolveOwn('lib/react-app.d.ts'), + postCssConfig: resolveConfig('postcss'), }; const ownPackageJson = require('../package.json'); @@ -155,6 +163,7 @@ if ( ownNodeModules: resolveOwn('node_modules'), appTypeDeclarations: resolveOwn(`${templatePath}/src/react-app-env.d.ts`), ownTypeDeclarations: resolveOwn('lib/react-app.d.ts'), + postCssConfig: resolveConfig('postcss', templatePath), }; } // @remove-on-eject-end diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 3d2cfa118e5..79f451492ed 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -52,6 +52,9 @@ const imageInlineSizeLimit = parseInt( // Check if TypeScript is setup const useTypeScript = fs.existsSync(paths.appTsConfig); +// Check if PostCSS config exist +const usePostCss = fs.existsSync(paths.postCssConfig); + // style files regexes const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; @@ -110,6 +113,23 @@ module.exports = function(webpackEnv) { // https://github.com/facebook/create-react-app/issues/2677 ident: 'postcss', sourceMap: isEnvProduction && shouldUseSourceMap, + ...(usePostCss + ? {} + : { + plugins: [ + require('postcss-flexbugs-fixes'), + require('postcss-preset-env')({ + autoprefixer: { + flexbox: 'no-2009', + }, + stage: 3, + }), + // Adds PostCSS Normalize as the reset css with default options, + // so that it honors browserslist config in package.json + // which in turn let's users customize the target behavior as per their needs. + require('postcss-normalize')(), + ], + }), }, }, ].filter(Boolean); diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 18c63e4b154..f95cb6802f1 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -39,6 +39,7 @@ "babel-preset-react-app": "^9.1.0", "camelcase": "^5.3.1", "case-sensitive-paths-webpack-plugin": "2.2.0", + "cosmiconfig": "^6.0.0", "css-loader": "3.3.2", "dotenv": "8.2.0", "dotenv-expand": "5.1.0", From 25f86e41ef707dd4edf3e2cad4fa487e7f8c0ba7 Mon Sep 17 00:00:00 2001 From: Pavinthan Date: Thu, 27 Feb 2020 02:00:48 +0530 Subject: [PATCH 5/5] resolve conflicts --- packages/react-scripts/config/paths.js | 6 ++---- packages/react-scripts/package.json | 3 --- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index a97b63666a8..7ab4f57d837 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -79,8 +79,6 @@ module.exports = { testsSetup: resolveModule(resolveApp, 'src/setupTests'), proxySetup: resolveApp('src/setupProxy.js'), appNodeModules: resolveApp('node_modules'), - publicUrl: getPublicUrl(resolveApp('package.json')), - servedPath: getServedPath(resolveApp('package.json')), publicUrlOrPath, postCssConfig: resolveConfig('postcss'), }; @@ -105,12 +103,12 @@ module.exports = { proxySetup: resolveApp('src/setupProxy.js'), appNodeModules: resolveApp('node_modules'), publicUrlOrPath, + postCssConfig: resolveConfig('postcss'), // These properties only exist before ejecting: ownPath: resolveOwn('.'), ownNodeModules: resolveOwn('node_modules'), // This is empty on npm 3 appTypeDeclarations: resolveApp('src/react-app-env.d.ts'), ownTypeDeclarations: resolveOwn('lib/react-app.d.ts'), - postCssConfig: resolveConfig('postcss'), }; const ownPackageJson = require('../package.json'); @@ -141,12 +139,12 @@ if ( proxySetup: resolveOwn(`${templatePath}/src/setupProxy.js`), appNodeModules: resolveOwn('node_modules'), publicUrlOrPath, + postCssConfig: resolveConfig('postcss', templatePath), // These properties only exist before ejecting: ownPath: resolveOwn('.'), ownNodeModules: resolveOwn('node_modules'), appTypeDeclarations: resolveOwn(`${templatePath}/src/react-app-env.d.ts`), ownTypeDeclarations: resolveOwn('lib/react-app.d.ts'), - postCssConfig: resolveConfig('postcss', templatePath), }; } // @remove-on-eject-end diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index a7232299f4f..a1dba02ffcb 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -38,9 +38,6 @@ "babel-plugin-named-asset-import": "^0.3.6", "babel-preset-react-app": "^9.1.1", "camelcase": "^5.3.1", - "case-sensitive-paths-webpack-plugin": "2.2.0", - "cosmiconfig": "^6.0.0", - "css-loader": "3.3.2", "case-sensitive-paths-webpack-plugin": "2.3.0", "cosmiconfig": "^6.0.0", "css-loader": "3.4.2",