Add optional support for custom postcss plugins

This is accomplished via postcss.config.js, which will be searched for if `plugins` is not specified as an option to `postcss-loader`

Postcss plugins are required to use Tailwind CSS, a popular styling framework which leverages a custom module import syntax.

This overlaps slightly with facebook#8331, but takes a non-breaking change approach.

Author: dustinsoftware

docusaurus/docs/advanced-configuration.md

@@ -27,3 +27,4 @@ You can adjust various development and production settings by setting environmen
 | IMAGE_INLINE_SIZE_LIMIT | 🚫 Ignored  |  ✅ Used   | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | EXTEND_ESLINT           |   ✅ Used   |  ✅ Used   | When set to `true`, ESLint configs that extend `eslint-config-react-app` will be used by `eslint-loader`. Any rules that are set to `"error"` will stop the application from building.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | TSC_COMPILE_ON_ERROR    |   ✅ Used   |  ✅ Used   | When set to `true`, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| POSTCSS_CONFIG_FILE     |   ✅ Used   |  ✅ Used   | When set to `true`, you can use a custom `postcss.config.js` in your project, which allows loading custom plugins such as `postcss-import`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |

packages/react-scripts/config/webpack.config.js

@@ -110,19 +110,23 @@ 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(),
-          ],
+          ...(process.env.POSTCSS_CONFIG_FILE === 'true'
+            ? {}
+            : {
+                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 +274,8 @@ module.exports = function(webpackEnv) {
               : false,
           },
           cssProcessorPluginOptions: {
-              preset: ['default', { minifyFontValues: { removeQuotes: false } }]
-          }
+            preset: ['default', { minifyFontValues: { removeQuotes: false } }],
+          },
         }),
       ],
       // Automatically split vendor and commons