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/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index 11d81b7f5a7..7ab4f57d837 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -10,7 +10,9 @@ const path = require('path'); const fs = require('fs'); +const url = require('url'); const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath'); +const config = require('cosmiconfig'); // Make sure any symlinks in the project folder are resolved: // https://github.com/facebook/create-react-app/issues/637 @@ -56,6 +58,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'), @@ -73,6 +80,7 @@ module.exports = { proxySetup: resolveApp('src/setupProxy.js'), appNodeModules: resolveApp('node_modules'), publicUrlOrPath, + postCssConfig: resolveConfig('postcss'), }; // @remove-on-eject-begin @@ -95,6 +103,7 @@ 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 @@ -130,6 +139,7 @@ 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'), diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 350d424bdfb..25767ef2e06 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); @@ -53,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$/; @@ -101,20 +103,24 @@ 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, + ...(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/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')(), + ], +}; diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 20ae2ba5bea..a1dba02ffcb 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -39,6 +39,7 @@ "babel-preset-react-app": "^9.1.1", "camelcase": "^5.3.1", "case-sensitive-paths-webpack-plugin": "2.3.0", + "cosmiconfig": "^6.0.0", "css-loader": "3.4.2", "dotenv": "8.2.0", "dotenv-expand": "5.1.0",