Add WebP support and update dependencies

.github/workflows/node.js.yml

@@ -20,10 +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@v1
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: yarn set version berry
+        cache: yarn
     - run: yarn
     - run: yarn build

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',
 			}),

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,22 +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 }],
-						],
-					},
-				},
-			}),
 			new TerserPlugin({
 				parallel: true,
 				terserOptions: {

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: {

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',

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",

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);
 		}
 	}
 }

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;

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"