Merge branch 'master' into zakabot-add-asset-html-webpack-plugin

CHANGELOG.md

@@ -1,6 +1,13 @@
 # Change history for stripes-webpack
 
-## 5.0.0 IN PROGRESS
+## 5.1.0 IN PROGRESS
+
+* Add an entry point for stripes-core's service worker. Refs STRWEB-99.
+* Pass micro-stripes-config to service worker at build-time. Refs STRWEB-102.
+* Add postcss-plugin for relative color syntax support for Firefox. Refs STRWEB-103.
+
+## [5.0.0](https://github.com/folio-org/stripes-webpack/tree/v5.0.0) (2023-10-11)
+[Full Changelog](https://github.com/folio-org/stripes-webpack/compare/v4.2.0...v5.0.0)
 
 * Upgrade `css-minimizer-webpack-plugin` to `v4`. Refs STRWEB-72.
 * Remove `babel-plugin-lodash`. Refs STRWEB-73.
@@ -17,6 +24,9 @@
 * Lock `esbuild-loader` to `~3.0.0` to avoid problematic `3.1` release. Refs STRWEB-94.
 * Switch to asset modules configuration in stripes webpack (removes file-loader, url-loader deps). Refs STRWEB-77.
 * Remove SVGO-dependencies. Replaced by SVGR for loading STCOM SVG's as react-components. Refs STRWEB-77.
+* Bump `@svgr/webpack` from `7.0.0` to `8.1.0`.
+* Bump `babel-loader` from `^8.0.0` to `^9.1.3`.
+* Omit CSS alias cruft, leaving `config.resolve.extenssions` alone. Refs STRWEB-90, STRWEB-85.
 
 ## [4.2.0](https://github.com/folio-org/stripes-webpack/tree/v4.2.0) (2023-01-30)
 [Full Changelog](https://github.com/folio-org/stripes-webpack/compare/v4.1.2...v4.2.0)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@folio/stripes-webpack",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "The webpack config for stripes",
   "license": "Apache-2.0",
   "publishConfig": {
@@ -29,11 +29,12 @@
     "@babel/preset-typescript": "^7.7.7",
     "@babel/register": "^7.0.0",
     "@cerner/duplicate-package-checker-webpack-plugin": "~2.1.0",
+    "@csstools/postcss-relative-color-syntax": "^2.0.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
-    "@svgr/webpack": "^7.0.0",
+    "@svgr/webpack": "^8.1.0",
     "add-asset-html-webpack-plugin": "^6.0.0",
     "autoprefixer": "^10.4.13",
-    "babel-loader": "^8.0.0",
+    "babel-loader": "^9.1.3",
     "babel-plugin-remove-jsx-attributes": "^0.0.2",
     "buffer": "^6.0.3",
     "commander": "^2.9.0",

postcss.config.js

@@ -7,7 +7,7 @@ const postCssNesting = require('postcss-nesting');
 const postCssCustomMedia = require('postcss-custom-media');
 const postCssMediaMinMax = require('postcss-media-minmax');
 const postCssColorFunction = require('postcss-color-function');
-
+const postCssRelativeColorSyntax = require('@csstools/postcss-relative-color-syntax');
 const { generateStripesAlias, tryResolve } = require('./webpack/module-paths');
 
 const locateCssVariables = () => {
@@ -34,6 +34,7 @@ module.exports = {
     postCssNesting(),
     postCssCustomMedia(),
     postCssMediaMinMax(),
+    postCssRelativeColorSyntax(),
     postCssColorFunction(),
   ],
 };

webpack.config.cli.dev.js

@@ -22,6 +22,7 @@ const buildConfig = (stripesConfig) => {
 
   const base = buildBaseConfig(allModulePaths);
   const devConfig = Object.assign({}, base, cli, {
+    name: 'development',
     devtool: 'inline-source-map',
     mode: 'development',
     cache: {

webpack.config.cli.js

@@ -9,6 +9,5 @@ module.exports = {
     filename: 'bundle.[name][contenthash].js',
     chunkFilename: 'chunk.[name][chunkhash].js',
     publicPath: '/',
-    clean: true
   },
 };

webpack.config.cli.shared.styles.js

@@ -12,8 +12,6 @@ module.exports = (config, context) => {
       "stcom-interactionStyles": getSharedStyles("lib/sharedStyles/interactionStyles"),
       "stcom-variables": getSharedStyles("lib/variables"),
     };
-
-    config.resolve.extensions.push('css');
   }
 
   return config;

webpack.config.service.worker.js

@@ -0,0 +1,44 @@
+const path = require('path');
+const VirtualModulesPlugin = require('webpack-virtual-modules');
+
+const buildConfig = (stripesConfig) => {
+  const { okapi } = stripesConfig;
+  const virtualModules = new VirtualModulesPlugin({
+    'node_modules/micro-stripes-config.js': `module.exports = { okapiUrl: '${okapi.url}', okapiTenant: '${okapi.tenant}' };`,
+  });
+
+  const config = {
+    name: 'service-worker',
+    mode: 'development',
+    target: 'web',
+    entry: {
+      'service-worker': {
+        import: '@folio/stripes-core/src/service-worker.js',
+        filename: 'service-worker.js',
+      }
+    },
+    plugins: [
+      virtualModules
+    ],
+    output: {
+      path: path.join(__dirname, 'dist'),
+      filename: 'service-worker.js',
+      publicPath: '/',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          loader: 'esbuild-loader',
+          options: {
+            target: 'es2015'
+          }
+        },
+      ]
+    }
+  };
+
+  return config;
+}
+
+module.exports = buildConfig;

webpack/build.js

@@ -6,13 +6,27 @@ const applyWebpackOverrides = require('./apply-webpack-overrides');
 const logger = require('./logger')();
 const buildConfig = require('../webpack.config.cli.prod');
 const sharedStylesConfig = require('../webpack.config.cli.shared.styles');
-
+const buildServiceWorkerConfig = require('../webpack.config.service.worker');
 const platformModulePath = path.join(path.resolve(), 'node_modules');
 
 module.exports = function build(stripesConfig, options) {
   return new Promise((resolve, reject) => {
     logger.log('starting build...');
 
+    // service worker config
+    const serviceWorkerConfig = buildServiceWorkerConfig(stripesConfig);
+    // repoint the service-worker's output.path value so it emits
+    // into options.outputPath
+    if (options.outputPath) {
+      serviceWorkerConfig.output.path = path.resolve(options.outputPath);
+    }
+    // override the default mode; given we are building, assume production
+    serviceWorkerConfig.mode = 'production';
+    // update resolve/resolveLoader in order to find the micro-stripes-config
+    // virtual module configured by buildServiceWorkerConfig()
+    serviceWorkerConfig.resolve = { modules: ['node_modules', platformModulePath] };
+    serviceWorkerConfig.resolveLoader = { modules: ['node_modules', platformModulePath] };
+
     let config = buildConfig(stripesConfig);
 
     config = sharedStylesConfig(config, {});
@@ -73,9 +87,13 @@ module.exports = function build(stripesConfig, options) {
     config = applyWebpackOverrides(options.webpackOverrides, config);
 
     logger.log('assign final webpack config', config);
-    const compiler = webpack(config);
-    compiler.run((err, stats) => {
+
+    webpack([config,serviceWorkerConfig], (err, stats) => {
       if (err) {
+        console.error(err.stack || err);
+        if (err.details) {
+          console.error(err.details);
+        }
         reject(err);
       } else {
         resolve(stats);

webpack/serve.js

@@ -9,6 +9,7 @@ const applyWebpackOverrides = require('./apply-webpack-overrides');
 const logger = require('./logger')();
 const buildConfig = require('../webpack.config.cli.dev');
 const sharedStylesConfig = require('../webpack.config.cli.shared.styles');
+const buildServiceWorkerConfig = require('../webpack.config.service.worker');
 
 const cwd = path.resolve();
 const platformModulePath = path.join(cwd, 'node_modules');
@@ -23,7 +24,16 @@ module.exports = function serve(stripesConfig, options) {
   return new Promise((resolve) => {
     logger.log('starting serve...');
     const app = express();
+
+    // service worker config
+    // update resolve/resolveLoader in order to find the micro-stripes-config
+    // virtual module configured by buildServiceWorkerConfig()
+    const serviceWorkerConfig = buildServiceWorkerConfig(stripesConfig);
+    serviceWorkerConfig.resolve = { modules: ['node_modules', platformModulePath, coreModulePath] };
+    serviceWorkerConfig.resolveLoader = { modules: ['node_modules', platformModulePath, coreModulePath] };
+
     let config = buildConfig(stripesConfig);
+
     config = sharedStylesConfig(config, {});
 
     config.plugins.push(new StripesWebpackPlugin({ stripesConfig }));
@@ -39,8 +49,10 @@ module.exports = function serve(stripesConfig, options) {
     config = applyWebpackOverrides(options.webpackOverrides, config);
 
     logger.log('assign final webpack config', config);
-    const compiler = webpack(config);
-    compiler.hooks.done.tap('StripesCoreServe', stats => resolve(stats));
+    const compiler = webpack([serviceWorkerConfig, config]);
+    const [swCompiler, stripesCompiler] = compiler.compilers;
+
+    stripesCompiler.hooks.done.tap('StripesCoreServe', stats => resolve(stats));
 
     const port = options.port || process.env.STRIPES_PORT || 3000;
     const host = options.host || process.env.STRIPES_HOST || 'localhost';
@@ -49,23 +61,26 @@ module.exports = function serve(stripesConfig, options) {
 
     app.use(staticFileMiddleware);
 
+    // To handle rewrites without the dot rule, we should include the static middleware twice
+    // https://github.com/bripkens/connect-history-api-fallback/blob/master/examples/static-files-and-index-rewrite
+    app.use(staticFileMiddleware);
+
+    app.use(webpackDevMiddleware(swCompiler, {
+      publicPath: serviceWorkerConfig.output.publicPath,
+    }));
+
     // Process index rewrite before webpack-dev-middleware
     // to respond with webpack's dist copy of index.html
     app.use(connectHistoryApiFallback({
       disableDotRule: true,
       htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
     }));
 
-    // To handle rewrites without the dot rule, we should include the static middleware twice
-    // https://github.com/bripkens/connect-history-api-fallback/blob/master/examples/static-files-and-index-rewrite
-    app.use(staticFileMiddleware);
-
-    app.use(webpackDevMiddleware(compiler, {
-      stats: 'errors-only',
+    app.use(webpackDevMiddleware(stripesCompiler, {
       publicPath: config.output.publicPath,
     }));
 
-    app.use(webpackHotMiddleware(compiler));
+    app.use(webpackHotMiddleware(stripesCompiler));
 
     app.listen(port, host, (err) => {
       if (err) {