Skip to content

Commit

Permalink
Prettier the files
Browse files Browse the repository at this point in the history
  • Loading branch information
olliecurtis committed Oct 10, 2023

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
1 parent bdc77c6 commit 5224fda
Showing 14 changed files with 71 additions and 69 deletions.
28 changes: 14 additions & 14 deletions packages/react-scripts/backpack-addons/README.md
Original file line number Diff line number Diff line change
@@ -2,27 +2,27 @@ Our react scripts fork includes a number of custom configuration items in order

## Features Description

| Feature | Description | Default Value |
|:---|:--|:---|
| **babelIncludePrefixes** | Array of module name prefixes to opt into babel compilation. <br> Default includes **@skyscanner/bpk-, bpk- and saddlebag-** packages by default to be compiled | **[@skyscanner/bpk-, bpk- and saddlebag-]** |
| **sriEnabled** | Determines if Subresource Intergrity is used during build to add an integrity hash for files. <br> The SRI is a security feature to enable browsers to verify the files they fetch are unmodified. <br> If enabled crossOriginLoading value is overriden with anonymous to allow output to have integrity value <br> See [webpack subresource integrity docs](https://github.com/waysact/webpack-subresource-integrity/blob/master/README.md) | **false** (this is currently the default in the future security may want to make it true by default but pending them still trying things about) |
| **crossOriginLoading** | Option to enable cross origin loading of chunks to modify the default webpack behaviour of being false. <br> Docs: https://webpack.js.org/configuration/output/#outputcrossoriginloading | **false** |
| **ignoreCssWarnings** | Provides the ablity to supress CSS ordering warnings when its safe and ordering is not of a concern on the output <br> See [mini css extract plugin docs](https://github.com/webpack-contrib/mini-css-extract-plugin#remove-order-warnings) | **false** - by default we should care about order as it can sometimes have an output impact |
| **cssModules** | Determines if cssModules are being used. <br> If enabled supports css modules and configures css-loader for use <br> If not enabled supports sass modules in the project and configures sass-loader for use | **true** |
| **amdExludes** | Array of module names to be excluded from AMD ([Asynchronous Module Definition](https://webpack.js.org/api/module-methods/#amd)) parsing.<br> lodash included by defeault. | **['lodash']** |
| **externals** | Provides a way of excluding dependencies from the bundles and instead relies on them being available at runtime on the clients environment E.g. React libraries.<br> See https://webpack.js.org/configuration/externals/ | **{}** |
| **ssrExternals** | The same as above `externals` except used for server side rendering only in **ssr.js** | **{}** |
| **enableAutomaticChunking** | Opts into automatic chunking of vender, common and app code.<br> When enabled the **splitChunks** plugin creates vender and common chunks which are split and when provided uses the `venderChunkRegex` to specify what is in each chunk.<br> When enabled **runtimeChunk** plugin creates a separate runtime chunk for projects to enable long term caching. | **false** |
| **vendorsChunkRegex** | Regex for picking what goes into the vendors chunk. Requires enableAutomaticChunking to be enabled.<br> See [cacheGroups](https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkscachegroups) docs for further details. | |
| **sassFunctions** | This function encodes svg content into `base64` when there is a `bpk-icon` in the.scss file. | |
| Feature | Description | Default Value |
| :-------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------- |
| **babelIncludePrefixes** | Array of module name prefixes to opt into babel compilation. <br> Default includes **@skyscanner/bpk-, bpk- and saddlebag-** packages by default to be compiled | **[@skyscanner/bpk-, bpk- and saddlebag-]** |
| **sriEnabled** | Determines if Subresource Intergrity is used during build to add an integrity hash for files. <br> The SRI is a security feature to enable browsers to verify the files they fetch are unmodified. <br> If enabled crossOriginLoading value is overriden with anonymous to allow output to have integrity value <br> See [webpack subresource integrity docs](https://github.com/waysact/webpack-subresource-integrity/blob/master/README.md) | **false** (this is currently the default in the future security may want to make it true by default but pending them still trying things about) |
| **crossOriginLoading** | Option to enable cross origin loading of chunks to modify the default webpack behaviour of being false. <br> Docs: https://webpack.js.org/configuration/output/#outputcrossoriginloading | **false** |
| **ignoreCssWarnings** | Provides the ablity to supress CSS ordering warnings when its safe and ordering is not of a concern on the output <br> See [mini css extract plugin docs](https://github.com/webpack-contrib/mini-css-extract-plugin#remove-order-warnings) | **false** - by default we should care about order as it can sometimes have an output impact |
| **cssModules** | Determines if cssModules are being used. <br> If enabled supports css modules and configures css-loader for use <br> If not enabled supports sass modules in the project and configures sass-loader for use | **true** |
| **amdExludes** | Array of module names to be excluded from AMD ([Asynchronous Module Definition](https://webpack.js.org/api/module-methods/#amd)) parsing.<br> lodash included by defeault. | **['lodash']** |
| **externals** | Provides a way of excluding dependencies from the bundles and instead relies on them being available at runtime on the clients environment E.g. React libraries.<br> See https://webpack.js.org/configuration/externals/ | **{}** |
| **ssrExternals** | The same as above `externals` except used for server side rendering only in **ssr.js** | **{}** |
| **enableAutomaticChunking** | Opts into automatic chunking of vender, common and app code.<br> When enabled the **splitChunks** plugin creates vender and common chunks which are split and when provided uses the `venderChunkRegex` to specify what is in each chunk.<br> When enabled **runtimeChunk** plugin creates a separate runtime chunk for projects to enable long term caching. | **false** |
| **vendorsChunkRegex** | Regex for picking what goes into the vendors chunk. Requires enableAutomaticChunking to be enabled.<br> See [cacheGroups](https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkscachegroups) docs for further details. | |
| **sassFunctions** | This function encodes svg content into `base64` when there is a `bpk-icon` in the.scss file. | |

## How to add new feature

- Add the custom feature to backpack-addons.
- Require features in the file(for example, webpack.config.js) where they are needed.
- For each line of code that is changed, make sure to add a comment `// #backpack-addon {{featureName}}`
- Try to keep the lines of code changed outside of the backpack-addons folder to a minimum
`require(...../backpack-addons/...)` files instead of writing it inline as much as possible.
`require(...../backpack-addons/...)` files instead of writing it inline as much as possible.
- Add a description of the new feature in the table above the current document.

## How to upgrade from the upstream `facebook/create-react-app` repo
8 changes: 4 additions & 4 deletions packages/react-scripts/backpack-addons/amdExcludes.js
Original file line number Diff line number Diff line change
@@ -7,10 +7,10 @@ const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};
module.exports = {
test: new RegExp(
`(^|/)(${(bpkReactScriptsConfig.amdExcludes || [])
.concat('lodash')
.join('|')})(/|.|$)`
.concat('lodash')
.join('|')})(/|.|$)`
),
parser: {
amd: false,
}
};
},
};
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
"use strict";
'use strict';

const paths = require("../config/paths");
const paths = require('../config/paths');
const appPackageJson = require(paths.appPackageJson);
const bpkReactScriptsConfig = appPackageJson["backpack-react-scripts"] || {};
const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};
const customModuleRegexes = bpkReactScriptsConfig.babelIncludePrefixes
? bpkReactScriptsConfig.babelIncludePrefixes.map(
(prefix) => new RegExp(`node_modules[\\/]${prefix}`)
prefix => new RegExp(`node_modules[\\/]${prefix}`)
)
: [];

4 changes: 2 additions & 2 deletions packages/react-scripts/backpack-addons/crossOriginLoading.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
'use strict';

const paths = require("../config/paths");
const paths = require('../config/paths');
const appPackageJson = require(paths.appPackageJson);
const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};
const crossOriginLoading = bpkReactScriptsConfig.crossOriginLoading || false;
const sriEnabled = bpkReactScriptsConfig.sriEnabled || false;

module.exports = {
crossOriginLoading: sriEnabled ? 'anonymous' : crossOriginLoading
crossOriginLoading: sriEnabled ? 'anonymous' : crossOriginLoading,
};
8 changes: 4 additions & 4 deletions packages/react-scripts/backpack-addons/externals.js
Original file line number Diff line number Diff line change
@@ -8,20 +8,20 @@ function externals(isEnvProduction) {
if (!isEnvProduction) {
return {
externals: {},
}
};
}
return {
externals: bpkReactScriptsConfig.externals || {},
}
};
}

function ssrExternals() {
return {
externals: bpkReactScriptsConfig.ssrExternals || [],
}
};
}

module.exports = {
externals,
ssrExternals
ssrExternals,
};
Original file line number Diff line number Diff line change
@@ -6,5 +6,5 @@ const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};
const ignoreCssWarnings = bpkReactScriptsConfig.ignoreCssWarnings || false;

module.exports = {
ignoreOrder: ignoreCssWarnings
ignoreOrder: ignoreCssWarnings,
};
16 changes: 8 additions & 8 deletions packages/react-scripts/backpack-addons/runtimeChunk.js
Original file line number Diff line number Diff line change
@@ -6,17 +6,17 @@ const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};

const runtimeChunk = {
runtimeChunk: bpkReactScriptsConfig.enableAutomaticChunking
? {
name: entrypoint => `runtime-${entrypoint.name}`,
}
: false
}
? {
name: entrypoint => `runtime-${entrypoint.name}`,
}
: false,
};

const ssrRuntimeChunk = {
const ssrRuntimeChunk = {
runtimeChunk: false,
}
};

module.exports = {
runtimeChunk,
ssrRuntimeChunk
ssrRuntimeChunk,
};
6 changes: 3 additions & 3 deletions packages/react-scripts/backpack-addons/sassFunctions.js
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ module.exports = {
const buffer = Buffer.from(str.getValue());

return sass.types.String(buffer.toString('base64'));
}
}
}
},
},
},
};
20 changes: 10 additions & 10 deletions packages/react-scripts/backpack-addons/splitChunks.js
Original file line number Diff line number Diff line change
@@ -15,20 +15,20 @@ const chunksAndGroups = {
: {},
};

module.exports = (isEnvDevelopment) => {
module.exports = isEnvDevelopment => {
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
return {
splitChunks: bpkReactScriptsConfig.enableAutomaticChunking
? isEnvDevelopment
? {
...chunksAndGroups,
}
: {
...chunksAndGroups,
name: false,
}
: {}
? isEnvDevelopment
? {
...chunksAndGroups,
}
: {
...chunksAndGroups,
name: false,
}
: {},
};
};
10 changes: 5 additions & 5 deletions packages/react-scripts/backpack-addons/sriEnabled.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
"use strict";
'use strict';

const { SubresourceIntegrityPlugin } = require("webpack-subresource-integrity");
const paths = require("../config/paths");
const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity');
const paths = require('../config/paths');
const appPackageJson = require(paths.appPackageJson);
const bpkReactScriptsConfig = appPackageJson["backpack-react-scripts"] || {};
const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};
const sriEnabled = bpkReactScriptsConfig.sriEnabled || false;

module.exports = () => {
@@ -15,7 +15,7 @@ module.exports = () => {
sriEnabled &&
new SubresourceIntegrityPlugin({
enabled: true,
hashFuncNames: ["sha384"],
hashFuncNames: ['sha384'],
})
);
};
4 changes: 2 additions & 2 deletions packages/react-scripts/backpack-addons/ssr/isSsr.js
Original file line number Diff line number Diff line change
@@ -5,11 +5,11 @@ const paths = require('../../config/paths');

/**
* In order to build for SSR, need to confirm 3 places
*
*
* 1. `ssrEnabled` is on
* 2. Use `build-ssr` command
* 3. `ssr.js` exists in `src` folder
*
*
*/
const isSsr = () => {
// Ensure `ssrEnabled` is on
2 changes: 1 addition & 1 deletion packages/react-scripts/backpack-addons/ssr/statusFile.js
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ function inProgress(buildPath) {
fs.writeFileSync(statusFilePath(buildPath), 'IN_PROGRESS');
}

exports.init = function(compiler, buildPath) {
exports.init = function (compiler, buildPath) {
mkdirp.sync(buildPath);
inProgress(buildPath);

2 changes: 1 addition & 1 deletion packages/react-scripts/docs/migrating-from-v6-to-v7.md
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@ Like any major release, `backpack-react-scripts@7` contains a few breaking chang

We have decoupled ESLint and Stylelint from this release. This is because the rate at which our configs (`eslint-config-skyscanner` and `stylelint-config-skyscanner`) change is much faster than the underlying functionality of `create-react-app`, causing unecessary churn.

That means that your `npm run lint:js` and `npm run lint:scss` scripts will no longer work if on `eslint-config-skyscanner@^4` or `stylelint-config-skyscanner@^1`.
That means that your `npm run lint:js` and `npm run lint:scss` scripts will no longer work if on `eslint-config-skyscanner@^4` or `stylelint-config-skyscanner@^1`.

If on these older versions of our Skyscanner linting configurations and you do not wish to upgrade in this change you will need to install their peer dependencies. It is however recommended to upgrade to the latest of each, where not only will this not be a problem but you will benefit from the latest linting features and improvements.

Original file line number Diff line number Diff line change
@@ -9,14 +9,16 @@ const createHash = buffer =>
.toString('base64')
.substr(0, 5);

module.exports = projectName => (...args) => {
const localIdent = getCSSModuleLocalIdent(...args);
module.exports =
projectName =>
(...args) => {
const localIdent = getCSSModuleLocalIdent(...args);

// Create an ident based on the file location, class name and Project Name.
// Will be unique across projects
// Format [ file/folder ]_[ localName ]__[ 5 character hash of CRA ident and project name ]
return (
localIdent.substring(0, localIdent.length - 5) +
createHash(localIdent + projectName)
);
};
// Create an ident based on the file location, class name and Project Name.
// Will be unique across projects
// Format [ file/folder ]_[ localName ]__[ 5 character hash of CRA ident and project name ]
return (
localIdent.substring(0, localIdent.length - 5) +
createHash(localIdent + projectName)
);
};

0 comments on commit 5224fda

Please sign in to comment.