[NO JIRA]: Add ignoreCssWarnings option

packages/react-scripts/CHANGELOG.md

@@ -1,5 +1,9 @@
 # `backpack-react-scripts` Change Log
 
+## 9.2.0
+
+- 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
+
 ## 9.1.3
 
 - Fixed an issue where webpack paths in SSR were not being utilised.

packages/react-scripts/README.md

@@ -32,3 +32,4 @@ npm start
   - `cssModules`: Boolean, true by default.
   - `sriEnabled`: Sets if SRI is to be used during build to add integrity hash for files, see [docs](https://github.com/waysact/webpack-subresource-integrity/blob/master/README.md).
     - **Note** if this is enabled, `crossOriginLoading` value is overriden with `anonymous` in order for it to output with the integrity value.
+  - `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

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

@@ -66,6 +66,7 @@ const customModuleRegexes = bpkReactScriptsConfig.babelIncludePrefixes
 const cssModulesEnabled = bpkReactScriptsConfig.cssModules !== false;
 const crossOriginLoading = bpkReactScriptsConfig.crossOriginLoading || false;
 const sriEnabled = bpkReactScriptsConfig.sriEnabled || 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';
@@ -910,6 +911,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 an asset manifest file with the following content:
       // - "files" key: Mapping of all asset filenames to their corresponding

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

@@ -66,6 +66,7 @@ const customModuleRegexes = bpkReactScriptsConfig.babelIncludePrefixes
 const cssModulesEnabled = bpkReactScriptsConfig.cssModules !== false;
 // const crossOriginLoading = bpkReactScriptsConfig.crossOriginLoading || false;
 // const sriEnabled = bpkReactScriptsConfig.sriEnabled || 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';
@@ -913,6 +914,7 @@ module.exports = function (webpackEnv) {
           // filename: 'static/css/[name].[contenthash:8].css',
           filename: 'ssr.css',
           // chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+          // ignoreOrder: supressCssWarnings,
         }),
       // Generate an asset manifest file with the following content:
       // - "files" key: Mapping of all asset filenames to their corresponding

packages/react-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-react-scripts",
-  "version": "9.1.3",
+  "version": "9.2.0",
   "description": "Backpack configuration and scripts for Create React App.",
   "repository": {
     "type": "git",