From f57f75914007e1c3833726141b9b4908976bcf10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= Date: Fri, 24 Apr 2026 10:59:59 +0200 Subject: [PATCH 1/4] Add WebP support and update dependencies - Added imagemin-webp to package.json and updated yarn.lock. - Configured WebP generation in webpack.common.js. - Updated SCSS files to support WebP images. - Removed obsolete logo SVG file. --- config/webpack.common.js | 9 +++++ package.json | 1 + src/img/static/logo-beapi.svg | 1 - src/scss/02-tools/_m-background-static.scss | 6 +-- src/scss/login.scss | 3 +- yarn.lock | 45 ++++++++++++++++++--- 6 files changed, 54 insertions(+), 11 deletions(-) delete mode 100644 src/img/static/logo-beapi.svg diff --git a/config/webpack.common.js b/config/webpack.common.js index 1e12ba68..acc3f6ef 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -29,6 +29,15 @@ module.exports = { ], }, }, + generator: [ + { + preset: 'webp', + implementation: ImageMinimizerPlugin.imageminGenerate, + options: { + plugins: ['imagemin-webp'], + }, + }, + ], }), new TerserPlugin({ parallel: true, diff --git a/package.json b/package.json index bab325c0..94ca3486 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "imagemin-jpegtran": "^7.0.0", "imagemin-optipng": "^8.0.0", "imagemin-svgo": "^10.0.1", + "imagemin-webp": "^8.0.0", "mini-css-extract-plugin": "^1.5.0", "postcss": "^8.4.24", "postcss-import": "^15.1.0", diff --git a/src/img/static/logo-beapi.svg b/src/img/static/logo-beapi.svg deleted file mode 100644 index 5cf0fca4..00000000 --- a/src/img/static/logo-beapi.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/scss/02-tools/_m-background-static.scss b/src/scss/02-tools/_m-background-static.scss index 0da1447e..99be8bba 100644 --- a/src/scss/02-tools/_m-background-static.scss +++ b/src/scss/02-tools/_m-background-static.scss @@ -13,15 +13,15 @@ * */ -@mixin background-static($filename, $retina: true, $position: center center, $size: auto 100%, $type: "png" ) { - background-image: url(../img/static/#{$filename}.#{$type}); +@mixin background-static($filename, $retina: true, $position: center center, $size: auto 100%, $type: "png") { + background-image: url(../img/static/#{$filename}.#{$type}?as=webp); background-repeat: no-repeat; background-position: $position; background-size: $size; @if ($retina) { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { - background-image: url(../img/static/#{$filename}@2x.#{$type}); + background-image: url(../img/static/#{$filename}@2x.#{$type}?as=webp); } } } diff --git a/src/scss/login.scss b/src/scss/login.scss index ad1fdd5f..6a69ad0e 100644 --- a/src/scss/login.scss +++ b/src/scss/login.scss @@ -1,7 +1,7 @@ // SCSS variables to customise the login page styles // The CSS file generated in dist/ by webpack is called automatically thanks to the WP Login Page mu-plugin present in the WP Skeleton. -$login-logo-path: "../../src/img/static/logo.jpg"; +$login-logo-path: "../../src/img/static/logo.jpg?as=webp"; $login-logo-size: 312px 43px; $login-logo-height: 60px; $login-body-bg-color: #666; @@ -16,6 +16,7 @@ $login-btn-hover-bg-color: #222; html, body { + &::before, &::after { display: none; diff --git a/yarn.lock b/yarn.lock index ff870edd..dd941a9a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2280,6 +2280,7 @@ __metadata: imagemin-jpegtran: "npm:^7.0.0" imagemin-optipng: "npm:^8.0.0" imagemin-svgo: "npm:^10.0.1" + imagemin-webp: "npm:^8.0.0" lazysizes: "npm:^5.3.2" mini-css-extract-plugin: "npm:^1.5.0" oneloop.js: "npm:^5.2.1" @@ -2363,7 +2364,7 @@ __metadata: languageName: node linkType: hard -"bin-wrapper@npm:^4.0.0": +"bin-wrapper@npm:^4.0.0, bin-wrapper@npm:^4.0.1": version: 4.1.0 resolution: "bin-wrapper@npm:4.1.0" dependencies: @@ -2678,9 +2679,9 @@ __metadata: linkType: hard "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702": - version: 1.0.30001712 - resolution: "caniuse-lite@npm:1.0.30001712" - checksum: 10/1831ac3260b9657c5a0236d21c02bea6a6b88fd67a451a0ff166d27da17c95ab398c5721e08aeb24f766bced1d38f562f07c8de84e91a10a065808e83835e89e + version: 1.0.30001790 + resolution: "caniuse-lite@npm:1.0.30001790" + checksum: 10/2625ba0b9c2648d14b4b02daf2fe7013d4efe087a45b034f40849c97077d435dbc610b47a34d3d6360cd62b7972864ae16978955205b7b8f7397303ba793e0ed languageName: node linkType: hard @@ -3383,6 +3384,18 @@ __metadata: languageName: node linkType: hard +"cwebp-bin@npm:^8.0.0": + version: 8.0.0 + resolution: "cwebp-bin@npm:8.0.0" + dependencies: + bin-build: "npm:^3.0.0" + bin-wrapper: "npm:^4.0.1" + bin: + cwebp: cli.js + checksum: 10/cdf14da37bcc225a5ec577955ad32dfc97469f574af37520030d4da8858e74b9433e8dca5f892041f88f8e19554cdbdc94851afde1e0f22271308f0dd270e767 + languageName: node + linkType: hard + "data-view-buffer@npm:^1.0.2": version: 1.0.2 resolution: "data-view-buffer@npm:1.0.2" @@ -4461,7 +4474,7 @@ __metadata: languageName: node linkType: hard -"exec-buffer@npm:^3.0.0": +"exec-buffer@npm:^3.0.0, exec-buffer@npm:^3.2.0": version: 3.2.0 resolution: "exec-buffer@npm:3.2.0" dependencies: @@ -4728,7 +4741,7 @@ __metadata: languageName: node linkType: hard -"file-type@npm:^10.4.0": +"file-type@npm:^10.4.0, file-type@npm:^10.5.0": version: 10.11.0 resolution: "file-type@npm:10.11.0" checksum: 10/787ab64574316dbd423eccbadac2876879c5d2f1d24309948debdaf1dfbd0f5f25f881a716f44d294090bf435407f6938da41c833895c888a78127113337a608 @@ -5779,6 +5792,17 @@ __metadata: languageName: node linkType: hard +"imagemin-webp@npm:^8.0.0": + version: 8.0.0 + resolution: "imagemin-webp@npm:8.0.0" + dependencies: + cwebp-bin: "npm:^8.0.0" + exec-buffer: "npm:^3.2.0" + is-cwebp-readable: "npm:^3.0.0" + checksum: 10/707404df20f346b83b5651bc99017c2f272f400b87238ed64236a0dce112dd9c5d77d10ab365af6356e6ce33afd6a2d79fe534c82a8717ea746d9bc6f70b6804 + languageName: node + linkType: hard + "imagemin@npm:^8.0.1": version: 8.0.1 resolution: "imagemin@npm:8.0.1" @@ -6021,6 +6045,15 @@ __metadata: languageName: node linkType: hard +"is-cwebp-readable@npm:^3.0.0": + version: 3.0.0 + resolution: "is-cwebp-readable@npm:3.0.0" + dependencies: + file-type: "npm:^10.5.0" + checksum: 10/768ae017586ba2fb0831d3cc9cfb4cd56c9580b71684ea5584cf61910597c5fe91a419490ed85422424c6339fe9c327df3643c3496145134d4d0385fb479b591 + languageName: node + linkType: hard + "is-data-descriptor@npm:^1.0.1": version: 1.0.1 resolution: "is-data-descriptor@npm:1.0.1" From db240d6df2ac84cb78313859294859b382724385 Mon Sep 17 00:00:00 2001 From: Milan Ricoul Date: Fri, 24 Apr 2026 11:21:23 +0200 Subject: [PATCH 2/4] ci: use Corepack for Yarn 4.5.0 instead of latest Berry MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace yarn set version berry with corepack enable to match packageManager and avoid lockfile v8→v9 migration blocked in PRs. Upgrade actions/setup-node to v4 with yarn cache. --- .github/workflows/node.js.yml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index d09be165..f49f41dc 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -21,9 +21,11 @@ jobs: steps: - uses: actions/checkout@v4 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v1 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} - - run: yarn set version berry + cache: yarn + - name: Enable Corepack + run: corepack enable - run: yarn - run: yarn build From 50732ce4872d744a78a909e84254617b1d076342 Mon Sep 17 00:00:00 2001 From: mricoul Date: Fri, 24 Apr 2026 15:38:46 +0200 Subject: [PATCH 3/4] ci(node.js): change order of tasks --- .github/workflows/node.js.yml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index f49f41dc..4783470a 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -20,12 +20,14 @@ jobs: steps: - uses: actions/checkout@v4 + - name: Enable Corepack + # Must run before setup-node's yarn cache: resolves Yarn from packageManager, not v1. + # See: https://github.com/actions/setup-node/issues/1027 + run: corepack enable - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} cache: yarn - - name: Enable Corepack - run: corepack enable - run: yarn - run: yarn build From 56120c3c93bce3b85f29907340cb0b17c19b057d Mon Sep 17 00:00:00 2001 From: Milan Ricoul Date: Fri, 24 Apr 2026 16:19:10 +0200 Subject: [PATCH 4/4] fix(webpack): register WebP imagemin in plugins for dev, avoid duplicate instance Move ImageMinimizerPlugin to plugins (generator + optional prod minifier) so ?as=webp works when minimization is off. Remove it from optimization.minimizer to keep a single instance and avoid asset name conflicts. Minor shorthand for mode in dev/prod config. --- config/plugins.js | 33 +++++++++++++++++++++++++++++++++ config/webpack.common.js | 27 --------------------------- config/webpack.dev.js | 2 +- config/webpack.prod.js | 2 +- 4 files changed, 35 insertions(+), 29 deletions(-) diff --git a/config/plugins.js b/config/plugins.js index dd5858ee..17e125dc 100644 --- a/config/plugins.js +++ b/config/plugins.js @@ -1,4 +1,6 @@ const path = require('path') +const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin') +const svgoconfig = require('./svgo.config') const { CleanWebpackPlugin } = require('clean-webpack-plugin') const { WebpackManifestPlugin } = require('webpack-manifest-plugin') const ESLintPlugin = require('eslint-webpack-plugin') @@ -15,7 +17,38 @@ const SpriteHashPlugin = require('./webpack-sprite-hash-plugin') module.exports = { get: function (mode) { + const isProduction = mode === 'production' + // A single instance: `optimization.minimizer` is only `apply()`'d when `minimize: true` + // (see webpack `WebpackOptionsApply.js`), so WebP `?as=webp` must live on the main + // `plugins` list to work with `yarn start` / dev. Image minify runs on `processAssets` + // from this same plugin in production only (keeps dev watch fast). + const imageMinimizerOptions = { + loader: true, + generator: [ + { + preset: 'webp', + implementation: ImageMinimizerPlugin.imageminGenerate, + options: { + plugins: ['imagemin-webp'], + }, + }, + ], + } + if (isProduction) { + imageMinimizerOptions.minimizer = { + implementation: ImageMinimizerPlugin.imageminMinify, + options: { + plugins: [ + ['gifsicle', { interlaced: true }], + ['jpegtran', { progressive: true }], + ['optipng', { optimizationLevel: 5 }], + ['svgo', { svgoconfig }], + ], + }, + } + } const plugins = [ + new ImageMinimizerPlugin(imageMinimizerOptions), new WebpackThemeJsonPlugin({ watch: mode !== 'production', }), diff --git a/config/webpack.common.js b/config/webpack.common.js index acc3f6ef..c3886ef4 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -1,8 +1,6 @@ const path = require('path') const entries = require('./entries') -const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin') const TerserPlugin = require('terser-webpack-plugin') -const svgoconfig = require('./svgo.config') module.exports = { entry: entries, @@ -14,31 +12,6 @@ module.exports = { }, optimization: { minimizer: [ - new ImageMinimizerPlugin({ - minimizer: { - implementation: ImageMinimizerPlugin.imageminMinify, - options: { - // Lossless optimization with custom option - // Feel free to experiment with options for better result for you - plugins: [ - ['gifsicle', { interlaced: true }], - ['jpegtran', { progressive: true }], - ['optipng', { optimizationLevel: 5 }], - // Svgo configuration here https://github.com/svg/svgo#configuratio - ['svgo', { svgoconfig }], - ], - }, - }, - generator: [ - { - preset: 'webp', - implementation: ImageMinimizerPlugin.imageminGenerate, - options: { - plugins: ['imagemin-webp'], - }, - }, - ], - }), new TerserPlugin({ parallel: true, terserOptions: { diff --git a/config/webpack.dev.js b/config/webpack.dev.js index 834f8892..fef55411 100644 --- a/config/webpack.dev.js +++ b/config/webpack.dev.js @@ -6,7 +6,7 @@ const loaders = require('./loaders') const mode = 'development' module.exports = merge(common, { - mode: mode, + mode, stats: 'errors-only', devtool: 'inline-source-map', devServer: { diff --git a/config/webpack.prod.js b/config/webpack.prod.js index 4c0cd0fd..ec3c1ea3 100644 --- a/config/webpack.prod.js +++ b/config/webpack.prod.js @@ -5,7 +5,7 @@ const loaders = require('./loaders') const mode = 'production' module.exports = merge(common, { - mode: mode, + mode, stats: 'minimal', output: { filename: '[name]-min.js',