Adding new ignore option

Author: olliecurtis

packages/react-scripts/CHANGELOG.md

@@ -9,6 +9,7 @@
 - Added experimental support for https://github.com/mzgoddard/hard-source-webpack-plugin/, enabled by `USE_HARD_SOURCE_WEBPACK_PLUGIN=true` environment variable
 - `web` and `ssr` subpaths for each build's output
 - Output build 'status files' (`.build-status`, one for web, one for SSR), which can be watched by a Node.js server to know when builds are in progress or completed.
+- Added `ignoreCssWarnings` config item to allow the ability to supress CSS ordering issues when its safe to allow mixed order when it has not effect on output. https://github.com/webpack-contrib/mini-css-extract-plugin#remove-order-warnings
 
 ## 7.0.5 - 2020-01-10
 

packages/react-scripts/README.md

@@ -30,6 +30,7 @@ npm start
   - `externals`: exposing the Webpack config to modify externals, see [docs](https://webpack.js.org/configuration/externals/).
   - `ssrExternals`: Similar to above, but for `ssr.js` only.
   - `cssModules`: Boolean, true by default.
+  - `ignoreCssWarnings`: Boolean, false by default. Allows the ability to supress CSS ordering issues when its safe to allow mixed order when it has not effect on output, see [docs](https://github.com/webpack-contrib/mini-css-extract-plugin#remove-order-warnings). False by default
 
 ## Releasing a new version of `backpack-react-scripts`
 

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

@@ -51,6 +51,7 @@ const customModuleRegexes = bpkReactScriptsConfig.babelIncludePrefixes
 
 const cssModulesEnabled = bpkReactScriptsConfig.cssModules !== false;
 const crossOriginLoading = bpkReactScriptsConfig.crossOriginLoading || false;
+const supressCssWarnings = bpkReactScriptsConfig.ignoreCssWarnings || false;
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
@@ -714,6 +715,7 @@ module.exports = function(webpackEnv) {
           // both options are optional
           filename: 'static/css/[name].[contenthash:8].css',
           chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+          ignoreOrder: supressCssWarnings,
         }),
       // Generate a manifest file which contains a mapping of all asset filenames
       // to their corresponding output file so that tools can pick it up without

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

@@ -700,6 +700,7 @@ module.exports = function(webpackEnv) {
       //     // filename: 'static/css/[name].[contenthash:8].css',
       //     filename: 'ssr.css',
       //     // chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+      //     // ignoreOrder: true,
       //   }),
       // Generate a manifest file which contains a mapping of all asset filenames
       // to their corresponding output file so that tools can pick it up without

packages/react-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backpack-react-scripts",
-  "version": "7.0.5",
+  "version": "7.1.0-alpha.5e6feadc",
   "description": "Backpack configuration and scripts for Create React App.",
   "repository": "Skyscanner/backpack-react-scripts",
   "license": "MIT",
@@ -47,7 +47,7 @@
     "jest-pnp-resolver": "1.0.2",
     "jest-resolve": "23.6.0",
     "lodash": "^4.17.11",
-    "mini-css-extract-plugin": "0.4.3",
+    "mini-css-extract-plugin": "0.8.0",
     "mkdirp": "^1.0.3",
     "node-sass": "4.12.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",