[NO JIRA]: Backport updates

Author: olliecurtis

packages/react-scripts/CHANGELOG.md

@@ -1,5 +1,9 @@
 # `backpack-react-scripts` Change Log
 
+## 8.0.6
+
+- BACKPORT: Updated webpack paths to include the new `@skyscanner/bpk` foundations packages.
+
 ## 8.0.4
 
 - Updated `bpk-mixins` to latest version `20.1.5`
@@ -11,7 +15,8 @@
 - Downgraded `sass-loader` to `7.3.1` due to issues with `node-sass` and functional changes to options.
 
 Rebased onto `upstream/master` v3.4.4 (6c009edface3ed63d0c7046f088c675a63c82fdb)
-  - Update `resolve-url-loader` to `3.1.2` to resolve security vunerability
+
+- Update `resolve-url-loader` to `3.1.2` to resolve security vunerability
 
 ## 8.0.2
 

packages/react-scripts/README.md

@@ -23,7 +23,7 @@ npm start
 - **`css.html` & `js.html`**: New files in the `build/` output folder. These are html partials that include `<script />` and `<link />` references to the various static assets output by webpack. Useful if automatic chunking is turned on and you don't want to worry about order.
 - A bunch of configuration options via `"backpack-react-scripts"` field in `package.json`:
   - `crossOriginLoading`: Modify the default behaviour, see [docs](https://webpack.js.org/configuration/output/#output-crossoriginloading).
-  - `babelIncludePrefixes`: An array of module name prefixes to opt into babel compilation. Includes `["bpk-", "saddlebag-"]` by default.
+  - `babelIncludePrefixes`: An array of module name prefixes to opt into babel compilation. Includes `["@skyscanner/bpk-", "bpk-", "saddlebag-"]` by default.
   - `enableAutomaticChunking`: Boolean, opt in to automatic chunking of vendor, common and app code.
   - `vendorsChunkRegex`: String, Regex for picking what goes into the `vendors` chunk. See `cacheGroups` in webpack docs. Dependent on `enableAutomaticChunking` being enabled
   - `amdExcludes`: Array of module names to exclude from AMD parsing. Incldues `["lodash"]` by default.

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

@@ -76,6 +76,7 @@ const sassModuleRegex = /\.module\.(scss|sass)$/;
 // Backpack / saddlebag node module regexes
 const backpackModulesRegex = /node_modules[\\/]bpk-/;
 const saddlebagModulesRegex = /node_modules[\\/]saddlebag-/;
+const scopedBackpackModulesRegex = /node_modules[\\/]@skyscanner[\\/]bpk-/;
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
@@ -440,6 +441,7 @@ module.exports = function(webpackEnv) {
                 paths.appSrc,
                 backpackModulesRegex,
                 saddlebagModulesRegex,
+                scopedBackpackModulesRegex,
                 ...customModuleRegexes,
               ],
               loader: require.resolve('babel-loader'),
@@ -539,7 +541,7 @@ module.exports = function(webpackEnv) {
             {
               test: {
                 and: [cssRegex, () => !cssModulesEnabled],
-                exclude: [backpackModulesRegex],
+                exclude: [backpackModulesRegex, scopedBackpackModulesRegex],
               },
               exclude: cssModuleRegex,
               use: getStyleLoaders({
@@ -561,7 +563,11 @@ module.exports = function(webpackEnv) {
                   and: [cssRegex, () => cssModulesEnabled],
                 },
                 {
-                  and: [cssRegex, backpackModulesRegex],
+                  and: [
+                    cssRegex,
+                    backpackModulesRegex,
+                    scopedBackpackModulesRegex,
+                  ],
                 },
               ],
               use: getStyleLoaders({
@@ -578,7 +584,7 @@ module.exports = function(webpackEnv) {
             {
               test: {
                 and: [sassRegex, () => !cssModulesEnabled],
-                exclude: [backpackModulesRegex],
+                exclude: [backpackModulesRegex, scopedBackpackModulesRegex],
               },
               exclude: sassModuleRegex,
               use: getStyleLoaders(
@@ -606,7 +612,11 @@ module.exports = function(webpackEnv) {
                   and: [sassRegex, () => cssModulesEnabled],
                 },
                 {
-                  and: [sassRegex, backpackModulesRegex],
+                  and: [
+                    sassRegex,
+                    backpackModulesRegex,
+                    scopedBackpackModulesRegex,
+                  ],
                 },
               ],
               use: getStyleLoaders(

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

@@ -73,6 +73,7 @@ const sassModuleRegex = /\.module\.(scss|sass)$/;
 // Backpack / saddlebag node module regexes
 const backpackModulesRegex = /node_modules[\\/]bpk-/;
 const saddlebagModulesRegex = /node_modules[\\/]saddlebag-/;
+const scopedBackpackModulesRegex = /node_modules[\\/]@skyscanner[\\/]bpk-/;
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
@@ -417,6 +418,7 @@ module.exports = function(webpackEnv) {
                 paths.appSrc,
                 backpackModulesRegex,
                 saddlebagModulesRegex,
+                scopedBackpackModulesRegex,
                 ...customModuleRegexes,
               ],
               loader: require.resolve('babel-loader'),
@@ -516,7 +518,7 @@ module.exports = function(webpackEnv) {
             {
               test: {
                 and: [cssRegex, () => !cssModulesEnabled],
-                exclude: [backpackModulesRegex],
+                exclude: [backpackModulesRegex, scopedBackpackModulesRegex],
               },
               exclude: cssModuleRegex,
               use: getStyleLoaders({
@@ -538,7 +540,11 @@ module.exports = function(webpackEnv) {
                   and: [cssRegex, () => cssModulesEnabled],
                 },
                 {
-                  and: [cssRegex, backpackModulesRegex],
+                  and: [
+                    cssRegex,
+                    backpackModulesRegex,
+                    scopedBackpackModulesRegex,
+                  ],
                 },
               ],
               use: getStyleLoaders({
@@ -555,7 +561,7 @@ module.exports = function(webpackEnv) {
             {
               test: {
                 and: [sassRegex, () => !cssModulesEnabled],
-                exclude: [backpackModulesRegex],
+                exclude: [backpackModulesRegex, scopedBackpackModulesRegex],
               },
               exclude: sassModuleRegex,
               use: getStyleLoaders(
@@ -583,7 +589,11 @@ module.exports = function(webpackEnv) {
                   and: [sassRegex, () => cssModulesEnabled],
                 },
                 {
-                  and: [sassRegex, backpackModulesRegex],
+                  and: [
+                    sassRegex,
+                    backpackModulesRegex,
+                    scopedBackpackModulesRegex,
+                  ],
                 },
               ],
               use: getStyleLoaders(

packages/react-scripts/package.json

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

packages/react-scripts/scripts/utils/createJestConfig.js

@@ -16,6 +16,7 @@ const pkgJson = require(paths.appPackageJson);
 const bpkReactScriptsConfig = pkgJson['backpack-react-scripts'] || {};
 
 const includePrefixes = bpkReactScriptsConfig.babelIncludePrefixes || [];
+includePrefixes.unshift('@skyscanner/bpk-');
 includePrefixes.unshift('bpk-');
 includePrefixes.unshift('saddlebag-');