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')
@@ -47,14 +49,29 @@ module.exports = {
  outputImageLocations: 'image-locations.json', // Output locations file name
  outputImageSizes: 'image-sizes.json', // Output sizes file name
  generateDefaultImages: true, // Generate default images
- defaultImageSource: 'src/img/static/default.jpg', // Source image for generation
+ defaultImageSource: 'src/img/static/default.webp', // Source image for generation
  defaultImagesOutputDir: 'dist/images', // Default images output directory
- defaultImageFormat: 'jpg', // Generated image format (jpg, png, webp, avif)
+ defaultImageFormat: 'webp', // Generated image format (jpg, png, webp, avif)
  silence: true, // Suppress console output
  }),
  ]
 
  if (mode === 'production') {
+ plugins.push(
+ new ImageMinimizerPlugin({
+ minimizer: {
+ implementation: ImageMinimizerPlugin.imageminMinify,
+ options: {
+ plugins: [
+ ['gifsicle', { interlaced: true }],
+ ['jpegtran', { progressive: true }],
+ ['optipng', { optimizationLevel: 5 }],
+ ['svgo', svgoconfig],
+ ],
+ },
+ },
+ })
+ )
  plugins.push(
  new BundleAnalyzerPlugin({
  analyzerMode: 'json',

config/svgo.config.js

@@ -1,38 +1,16 @@
 module.exports = {
 	plugins: [
- { cleanupAttrs: true },
- { removeDoctype: true },
- { removeXMLProcInst: true },
- { removeComments: true },
- { removeMetadata: true },
- { removeTitle: true },
- { removeDesc: true },
- { removeUselessDefs: true },
- { removeEditorsNSData: true },
- { removeEmptyAttrs: true },
- { removeHiddenElems: true },
- { removeEmptyText: true },
- { removeEmptyContainers: true },
- { cleanupEnableBackground: true },
- { convertStyleToAttrs: true },
- { convertColors: true },
- { convertPathData: true },
- { convertTransform: true },
- { removeUnknownsAndDefaults: true },
- { removeNonInheritableGroupAttrs: true },
- { removeUselessStrokeAndFill: true },
- { removeUnusedNS: true },
- { cleanupIDs: true },
- { cleanupNumericValues: true },
- { moveElemsAttrsToGroup: true },
- { moveGroupAttrsToElems: true },
- { collapseGroups: true },
- { removeRasterImages: false },
- { mergePaths: true },
- { convertShapeToPath: true },
- { sortAttrs: true },
- { removeDimensions: false },
- { prefixIds: true },
- { removeViewBox: false },
+ {
+ name: 'preset-default',
+ params: {
+ overrides: {
+ // Disable a plugin included by default that you don't want (false)
+ removeViewBox: false,
+ },
+ },
+ },
+ // Plugins that are not in the "preset-default" and that you want to activate
+ 'removeTitle',
+ 'convertStyleToAttrs',
 	],
 }

config/webpack-image-sizes-plugin.js

@@ -41,9 +41,9 @@ class WebpackImageSizesPlugin {
  outputImageLocations: 'image-locations.json',
  outputImageSizes: 'image-sizes.json',
  generateDefaultImages: false,
- defaultImageSource: 'src/img/static/default.jpg',
+ defaultImageSource: 'src/img/static/default.webp',
  defaultImagesOutputDir: 'dist/images',
- defaultImageFormat: 'jpg',
+ defaultImageFormat: 'webp',
  silence: false,
  ...options,
  }
@@ -543,8 +543,7 @@ class WebpackImageSizesPlugin {
 
  this.log(
  'log',
- `🖼️ Processing ${sizeKeys.length} default images (${format.toUpperCase()}) from ${
- this.options.defaultImageSource
+ `🖼️ Processing ${sizeKeys.length} default images (${format.toUpperCase()}) from ${this.options.defaultImageSource
  }`
  )
 

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

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.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

@@ -2678,9 +2678,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