NO_JIRA: Extract and optimise JS Loaders

packages/react-scripts/backpack-addons/cssModules.js

@@ -1,11 +1,11 @@
 'use strict';
 
-// eslint-disable-next-line no-unused-vars
-const postcssNormalize = require('postcss-normalize');
 const paths = require('../config/paths');
 const appPackageJson = require(paths.appPackageJson);
 const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};
 const cssModulesEnabled = bpkReactScriptsConfig.cssModules !== false;
+const noBackpackStylePrefixes =
+  bpkReactScriptsConfig.danger_noBackpackStylePrefixes !== false;
 
 // Backpack node module regexes
 const backpackModulesRegex = /node_modules[\\/]bpk-/;
@@ -22,6 +22,12 @@ const getStyleTestRegexes = regexType => {
 
   switch (regexType) {
     case 'css':
+      if (noBackpackStylePrefixes) {
+        return {
+          and: [cssRegex, () => !cssModulesEnabled],
+        };
+      }
+
       return {
         and: [cssRegex, () => !cssModulesEnabled],
         not: [
@@ -31,6 +37,15 @@ const getStyleTestRegexes = regexType => {
         ],
       };
     case 'cssModule':
+      if (noBackpackStylePrefixes) {
+        return [
+          cssModuleRegex,
+          {
+            and: [cssRegex, () => cssModulesEnabled],
+          },
+        ];
+      }
+
       return [
         cssModuleRegex,
         {
@@ -46,6 +61,12 @@ const getStyleTestRegexes = regexType => {
         },
       ];
     case 'sass':
+      if (noBackpackStylePrefixes) {
+        return {
+          and: [sassRegex, () => !cssModulesEnabled],
+        };
+      }
+
       return {
         and: [sassRegex, () => !cssModulesEnabled],
         not: [
@@ -55,6 +76,15 @@ const getStyleTestRegexes = regexType => {
         ],
       };
     case 'sassModule':
+      if (noBackpackStylePrefixes) {
+        return [
+          sassModuleRegex,
+          {
+            and: [sassRegex, () => cssModulesEnabled],
+          },
+        ];
+      }
+
       return [
         sassModuleRegex,
         {

packages/react-scripts/backpack-addons/useTsChecker.js

@@ -0,0 +1,72 @@
+'use strict';
+
+const ForkTsCheckerWebpackPlugin =
+  process.env.TSC_COMPILE_ON_ERROR === 'true'
+    ? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
+    : require('react-dev-utils/ForkTsCheckerWebpackPlugin');
+
+const paths = require('../config/paths');
+const appPackageJson = require(paths.appPackageJson);
+const resolve = require('resolve');
+const bpkReactScriptsConfig = appPackageJson['backpack-react-scripts'] || {};
+const skipProductionTypeCheck =
+  bpkReactScriptsConfig.skipProductionTypeCheck || false;
+
+const useTsChecker = (
+  isEnvDevelopment,
+  isEnvProduction,
+  shouldUseSourceMap
+) => {
+  if (skipProductionTypeCheck && isEnvProduction) {
+    return;
+  }
+
+  return new ForkTsCheckerWebpackPlugin({
+    async: isEnvDevelopment,
+    typescript: {
+      typescriptPath: resolve.sync('typescript', {
+        basedir: paths.appNodeModules,
+      }),
+      configOverwrite: {
+        compilerOptions: {
+          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+          skipLibCheck: true,
+          inlineSourceMap: false,
+          declarationMap: false,
+          noEmit: true,
+          incremental: true,
+          tsBuildInfoFile: paths.appTsBuildInfoFile,
+        },
+      },
+      context: paths.appPath,
+      diagnosticOptions: {
+        syntactic: true,
+      },
+      mode: 'write-references',
+      // profile: true,
+    },
+    issue: {
+      // This one is specifically to match during CI tests,
+      // as micromatch doesn't match
+      // '../cra-template-typescript/template/src/App.tsx'
+      // otherwise.
+      include: [
+        { file: '../**/src/**/*.{ts,tsx}' },
+        { file: '**/src/**/*.{ts,tsx}' },
+      ],
+      exclude: [
+        { file: '**/src/**/__tests__/**' },
+        { file: '**/src/**/?(*.){spec|test}.*' },
+        { file: '**/src/setupProxy.*' },
+        { file: '**/src/setupTests.*' },
+      ],
+    },
+    logger: {
+      infrastructure: 'silent',
+    },
+  });
+};
+
+module.exports = {
+  useTsChecker,
+};

packages/react-scripts/config/loaders/getAssetLoaders.js

@@ -0,0 +1,69 @@
+'use strict';
+
+const imageInlineSizeLimit = parseInt(
+  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
+);
+
+function getAssetLoaders() {
+  return [
+    // TODO: Merge this config once `image/avif` is in the mime-db
+    // https://github.com/jshttp/mime-db
+    {
+      test: [/\.avif$/],
+      type: 'asset',
+      mimetype: 'image/avif',
+      parser: {
+        dataUrlCondition: {
+          maxSize: imageInlineSizeLimit,
+        },
+      },
+    },
+    {
+      test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+      type: 'asset',
+      parser: {
+        dataUrlCondition: {
+          maxSize: imageInlineSizeLimit,
+        },
+      },
+    },
+    {
+      test: /\.svg$/,
+      use: [
+        {
+          loader: require.resolve('@svgr/webpack'),
+          options: {
+            prettier: false,
+            svgoConfig: {
+              plugins: [
+                {
+                  name: 'preset-default',
+                  params: {
+                    overrides: {
+                      removeViewBox: false,
+                    },
+                  },
+                },
+              ],
+            },
+            titleProp: true,
+            ref: true,
+          },
+        },
+        {
+          loader: require.resolve('file-loader'),
+          options: {
+            name: 'static/media/[name].[contenthash:8].[ext]',
+          },
+        },
+      ],
+      issuer: {
+        and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+      },
+    },
+  ];
+}
+
+module.exports = {
+  getAssetLoaders,
+};

packages/react-scripts/config/loaders/getJSLoaders.js

@@ -0,0 +1,103 @@
+'use strict';
+
+const withIncludedPrefixes = require('../../backpack-addons/babelIncludePrefixes');
+const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
+
+function getJSLoaders(
+  isEnvProduction,
+  isEnvDevelopment,
+  shouldUseReactRefresh,
+  hasJsxRuntime,
+  shouldUseSourceMap
+) {
+  return [
+    // Process application JS with Babel.
+    // The preset includes JSX, Flow, TypeScript, and some ESnext features.
+    {
+      test: /\.(js|mjs|cjs|jsx|ts|tsx)$/,
+      include: withIncludedPrefixes(), // #backpack-addons babelIncludePrefixes
+      loader: require.resolve('babel-loader'),
+      options: {
+        customize: require.resolve('babel-preset-react-app/webpack-overrides'),
+        presets: [
+          [
+            require.resolve('babel-preset-react-app'),
+            {
+              runtime: hasJsxRuntime ? 'automatic' : 'classic',
+            },
+          ],
+        ],
+        // @remove-on-eject-begin
+        babelrc: false,
+        configFile: false,
+        // Make sure we have a unique cache identifier, erring on the
+        // side of caution.
+        // We remove this when the user ejects because the default
+        // is sane and uses Babel options. Instead of options, we use
+        // the react-scripts and babel-preset-react-app versions.
+        cacheIdentifier: getCacheIdentifier(
+          isEnvProduction ? 'production' : isEnvDevelopment && 'development',
+          [
+            'babel-plugin-named-asset-import',
+            'babel-preset-react-app',
+            'react-dev-utils',
+            'react-scripts',
+          ]
+        ),
+        // @remove-on-eject-end
+        plugins: [
+          require.resolve('@loadable/babel-plugin'),
+          isEnvDevelopment &&
+            shouldUseReactRefresh &&
+            require.resolve('react-refresh/babel'),
+        ].filter(Boolean),
+        // This is a feature of `babel-loader` for webpack (not Babel itself).
+        // It enables caching results in ./node_modules/.cache/babel-loader/
+        // directory for faster rebuilds.
+        cacheDirectory: true,
+        // See #6846 for context on why cacheCompression is disabled
+        cacheCompression: false,
+        compact: isEnvProduction,
+      },
+    },
+    {
+      test: /\.(js|mjs|cjs)$/,
+      exclude: [/@babel(?:\/|\\{1,2})runtime/, ...withIncludedPrefixes()],
+      loader: require.resolve('babel-loader'),
+      options: {
+        babelrc: false,
+        configFile: false,
+        compact: false,
+        presets: [
+          [
+            require.resolve('babel-preset-react-app/dependencies'),
+            { helpers: true },
+          ],
+        ],
+        cacheDirectory: true,
+        // See #6846 for context on why cacheCompression is disabled
+        cacheCompression: false,
+        // @remove-on-eject-begin
+        cacheIdentifier: getCacheIdentifier(
+          isEnvProduction ? 'production' : isEnvDevelopment && 'development',
+          [
+            'babel-plugin-named-asset-import',
+            'babel-preset-react-app',
+            'react-dev-utils',
+            'react-scripts',
+          ]
+        ),
+        // @remove-on-eject-end
+        // Babel sourcemaps are needed for debugging into node_modules
+        // code.  Without the options below, debuggers like VSCode
+        // show incorrect code and set breakpoints on the wrong lines.
+        sourceMaps: shouldUseSourceMap,
+        inputSourceMap: shouldUseSourceMap,
+      },
+    },
+  ];
+}
+
+module.exports = {
+  getJSLoaders,
+};