diff --git a/CHANGELOG.md b/CHANGELOG.md index 1644ac1..a0dad16 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/package.json b/package.json index 2bdecf5..df640b7 100644 --- a/package.json +++ b/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", diff --git a/postcss.config.js b/postcss.config.js index 1016842..42c38be 100644 --- a/postcss.config.js +++ b/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(), ], }; diff --git a/webpack.config.cli.dev.js b/webpack.config.cli.dev.js index 804ea33..baed059 100644 --- a/webpack.config.cli.dev.js +++ b/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: { diff --git a/webpack.config.cli.js b/webpack.config.cli.js index b2f6f2e..858aac9 100644 --- a/webpack.config.cli.js +++ b/webpack.config.cli.js @@ -9,6 +9,5 @@ module.exports = { filename: 'bundle.[name][contenthash].js', chunkFilename: 'chunk.[name][chunkhash].js', publicPath: '/', - clean: true }, }; diff --git a/webpack.config.cli.shared.styles.js b/webpack.config.cli.shared.styles.js index c7b9058..66c5170 100644 --- a/webpack.config.cli.shared.styles.js +++ b/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; diff --git a/webpack.config.service.worker.js b/webpack.config.service.worker.js new file mode 100644 index 0000000..9d6573a --- /dev/null +++ b/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; diff --git a/webpack/build.js b/webpack/build.js index ac5cb8c..3b3db2c 100644 --- a/webpack/build.js +++ b/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); diff --git a/webpack/serve.js b/webpack/serve.js index f3d60d6..c0e3b51 100644 --- a/webpack/serve.js +++ b/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,6 +61,14 @@ 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({ @@ -56,16 +76,11 @@ module.exports = function serve(stripesConfig, options) { 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) {