Add REACT_APP_INJECT_STYLES to allow injecting generated styles into window variable

CHANGELOG-FRONTIER.md

@@ -1,3 +1,7 @@
+## 8.9.0
+
+- Add options for injecting scripts and styles (for hf-inj-react)
+
 ## 8.8.3
 
 - Add photos/apiHelper endpoint to proxy list

packages/react-scripts/config/InjectEntrypointsPlugin.js

@@ -0,0 +1,32 @@
+'use strict';
+const { getCompilerHooks } = require('webpack-manifest-plugin');
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+class InjectEntrypointsPlugin {
+  constructor(options) {
+    this.options = options;
+  }
+
+  apply(compiler) {
+	const {afterEmit} = getCompilerHooks(compiler)
+
+	afterEmit.tap('InjectEntrypointsPlugin', (manifest) => {
+		const outputPath = path.join(
+			compiler.options.context,
+			'build-hf',
+			this.options.outputFile
+		);
+
+		fs.mkdirSync(path.dirname(outputPath));
+
+		fs.writeFileSync(outputPath,
+			JSON.stringify(
+				manifest.entrypoints.map((entry) => paths.publicUrlOrPath + entry)),
+				'utf8');
+			})
+  }
+}
+
+module.exports = InjectEntrypointsPlugin;

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

@@ -60,6 +60,7 @@ console.log(`In webpack.config from @fs/react-scripts version ${reactScriptsVers
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier')
 // @remove-on-eject-end
 const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash')
+const InjectEntrypointsPlugin = require('./InjectEntrypointsPlugin.js')
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'
@@ -140,8 +141,17 @@ module.exports = function (webpackEnv) {
   // common function to get style loaders
   const getStyleLoaders = (cssOptions, preProcessor) => {
     const loaders = [
-      isEnvDevelopment && require.resolve('style-loader'),
-      isEnvProduction && {
+      (isEnvDevelopment || process.env.INJECT_STYLES === 'true') && {
+        loader: require.resolve('style-loader'),
+        options: process.env.INJECT_STYLES === 'true' ? {
+          injectType: 'singletonStyleTag',
+          insert: function addToWindowObject(element) {
+            const _window = typeof window !== 'undefined' ? window : {}
+            _window['hfBundleStyles'] = element
+          }
+        } : {},
+      },
+      (isEnvProduction && !process.env.INJECT_STYLES) && {
         loader: MiniCssExtractPlugin.loader,
         // css is located in `static/css`, use '../../' to locate index.html folder
         // in production `paths.publicUrlOrPath` can be a relative path
@@ -731,7 +741,7 @@ module.exports = function (webpackEnv) {
       // a plugin that prints an error when you attempt to do this.
       // See https://github.com/facebook/create-react-app/issues/240
       isEnvDevelopment && new CaseSensitivePathsPlugin(),
-      isEnvProduction &&
+      (isEnvProduction && process.env.INJECT_STYLES !== 'true') &&
         new MiniCssExtractPlugin({
           // Options similar to the same options in webpackOptions.output
           // both options are optional
@@ -762,6 +772,11 @@ module.exports = function (webpackEnv) {
           }
         },
       }),
+      // Inject the manifest entrypoint file names into the outputFile
+      process.env.INJECT_SCRIPTS === 'true' &&
+      new InjectEntrypointsPlugin({
+        outputFile: 'hf-inj-react-scripts.json',
+      }),
       // Moment.js is an extremely popular library that bundles large locale files
       // by default due to how webpack interprets its code. This is a practical
       // solution that requires the user to opt into importing specific locales.

packages/react-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fs/react-scripts",
-  "version": "8.8.4",
+  "version": "8.9.0",
   "upstreamVersion": "5.0.1",
   "description": "Configuration and scripts for Create React App.",
   "repository": {