feat: update packages

.eslintignore

@@ -1,5 +1,4 @@
 node_modules/
 vendor/
 assets/js/*.js
-stylelint.config.js
-webpack.mix.js
+stylelint.config.js

.eslintrc.json

@@ -22,12 +22,5 @@
             "experimentalObjectRestSpread": true,
             "jsx": true
         }
-    },
-    "overrides": [
-        {
-          "rules": {
-            "@wordpress/no-unsafe-wp-apis": "off"
-          }
-        }
-      ]
+    }
 }

.gitignore

@@ -7,3 +7,4 @@ languages
 node_modules
 themes
 vendor
+style.css

mix-manifest.json

@@ -4,5 +4,5 @@
     "/assets/js/editor.js": "/assets/js/editor.js?id=bb7cb0b8f7a72df56e10578f15986fe9",
     "/assets/js/editor.asset.php": "/assets/js/editor.asset.php?id=bc71373662a6f32e43df9c4a805e2659",
     "/assets/css/editor.css": "/assets/css/editor.css?id=c1ea4ef1fc05e0d273004be168425e84",
-    "/style.css": "/style.css?id=f9c2733e498e41025d252cf2e54a42cf"
+    "/style.css": "/style.css?id=f685ddd1651b0ab2df504396d276622c"
 }

package.json

@@ -29,29 +29,31 @@
     "theme-zip": "bash ./bin/build-zip.sh"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.22.6",
-    "@babel/preset-react": "^7.22.5",
-    "@wordpress/dependency-extraction-webpack-plugin": "^4.19.0",
-    "@wordpress/eslint-plugin": "^14.9.0",
-    "@wordpress/icons": "^9.27.0",
-    "@wordpress/stylelint-config": "^21.19.0",
+    "@babel/eslint-parser": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@wordpress/dependency-extraction-webpack-plugin": "^4.25.0",
+    "@wordpress/eslint-plugin": "^16.0.0",
+    "@wordpress/icons": "^9.33.0",
+    "@wordpress/stylelint-config": "^21.25.0",
     "bourbon": "^7.3.0",
     "browser-sync": "^2.29.3",
     "browser-sync-webpack-plugin": "^2.3.0",
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.44.0",
-    "imagemin-webpack-plugin": "^2.4.2",
+    "eslint": "^8.50.0",
+    "image-minimizer-webpack-plugin": "^3.8.3",
     "laravel-mix": "^6.0.49",
     "node-wp-i18n": "^1.2.7",
-    "postcss-preset-env": "^9.0.0",
+    "postcss-preset-env": "^9.1.4",
     "prepend-file": "^2.0.1",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.3",
     "prettier-stylelint": "^0.4.2",
-    "sass": "^1.63.6",
+    "sass": "^1.68.0",
     "sass-loader": "^13.3.2",
-    "semantic-release": "^21.0.6",
+    "semantic-release": "^22.0.5",
     "semantic-release-plugin-update-version-in-files": "^1.1.0",
-    "stylelint-order": "^6.0.3"
+    "sharp": "^0.32.6",
+    "stylelint-order": "^6.0.3",
+    "svgo": "^3.0.2"
   }
 }

webpack.mix.js

@@ -10,34 +10,34 @@
 
 // Import required packages.
 const mix = require('laravel-mix');
-const ImageminPlugin = require('imagemin-webpack-plugin').default;
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const packageJson = require('./package.json');
 const prependFile = require('prepend-file');
 const path = require('path');
-const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin');
 
 /*
  * Monitor files for changes and inject your changes into the browser.
  *
  */
 if (process.env.sync) {
-    var bs = require("browser-sync").create();
-
-    bs.init({
-        notify: false,
-        proxy: process.env.MIX_PROXY,
-        port: process.env.MIX_PORT,
-        files: [
-            'assets/**/.js',
-            'assets/**/.css',
-            'patterns/*',
-            'parts/*',
-            'templates/*',
-            'functions.php',
-            '*.css',
-        ]
-    });
+	var bs = require('browser-sync').create();
+
+	bs.init({
+		notify: false,
+		proxy: process.env.MIX_PROXY,
+		port: process.env.MIX_PORT,
+		files: [
+			'assets/**/.js',
+			'assets/**/.css',
+			'patterns/*',
+			'parts/*',
+			'templates/*',
+			'functions.php',
+			'*.css',
+		],
+	});
 }
 
 /*
@@ -46,7 +46,6 @@ if (process.env.sync) {
 
 mix.disableNotifications();
 
-
 /*
  * -----------------------------------------------------------------------------
  * Build Process
@@ -77,8 +76,8 @@ mix.setPublicPath('./');
  * @link https://laravel.com/docs/5.6/mix#url-processing
  */
 mix.options({
-    postCss: [require('postcss-preset-env')()],
-    processCssUrls: false
+	postCss: [require('postcss-preset-env')()],
+	processCssUrls: false,
 });
 
 /*
@@ -102,13 +101,9 @@ mix.version();
  *
  * @link https://laravel.com/docs/5.6/mix#working-with-scripts
  */
-mix
-    .js([
-        `${devPath}/js/index.js`
-    ], `${distPath}/js/main.js`)
-    .js([
-        `${devPath}/js/editor.js`
-    ], `${distPath}/js/editor.js`).react();
+mix.js([`${devPath}/js/index.js`], `${distPath}/js/main.js`)
+	.js([`${devPath}/js/editor.js`], `${distPath}/js/editor.js`)
+	.react();
 
 /*
  * Compile CSS. Mix supports Sass, Less, Stylus, and plain CSS, and has functions
@@ -120,51 +115,59 @@ mix
  */
 
 // Sass configuration.
-var sassConfig = {
-    sassOptions: {
-        outputStyle: 'compressed',
-        indentType: 'tab',
-        indentWidth: 1
-    }
+const sassConfig = {
+	sassOptions: {
+		outputStyle: 'compressed',
+		indentType: 'tab',
+		indentWidth: 1,
+	},
 };
 
 // Compile SASS/CSS.
-mix
-    .sass(`${devPath}/scss/style.scss`, `./style.css`, sassConfig).options({
-        postCss: [
-            require('cssnano')({
-                preset: ['default', {
-                    discardComments: {
-                        removeAll: true,
-                    },
-                }]
-            })
-        ]
-    }).then(async (stats) => {
-        // Generate blank stylesheet.
-        const banner = [
-            '/*',
-            ' * Theme Name: ' + packageJson.theme.name,
-            ' * Theme URI: ' + packageJson.theme.uri,
-            ' * Author: ' + packageJson.author,
-            ' * Author URI: ' + packageJson.theme.authoruri,
-            ' * Description: ' + packageJson.description,
-            ' * Version: ' + packageJson.version,
-            ' * License: ' + packageJson.license,
-            ' * Text Domain: ' + packageJson.name,
-            ' * Domain Path: ' + packageJson.theme.domainpath,
-            ' */\n\n',
-        ].join('\n');
-
-        await prependFile('style.css', banner);
-
-        if (process.env.sync) {
-            bs.reload("*.css");
-        }
-
-        console.log('\x1b[34m', '\nstyle.css banner generated.');
-    })
-    .sass(`${devPath}/scss/editor.scss`, `${distPath}/css/editor.css`, sassConfig);
+mix.sass(`${devPath}/scss/style.scss`, `./style.css`, sassConfig)
+	.options({
+		postCss: [
+			require('cssnano')({
+				preset: [
+					'default',
+					{
+						discardComments: {
+							removeAll: true,
+						},
+					},
+				],
+			}),
+		],
+	})
+	.then(async (stats) => {
+		// Generate blank stylesheet.
+		const banner = [
+			'/*',
+			' * Theme Name: ' + packageJson.theme.name,
+			' * Theme URI: ' + packageJson.theme.uri,
+			' * Author: ' + packageJson.author,
+			' * Author URI: ' + packageJson.theme.authoruri,
+			' * Description: ' + packageJson.description,
+			' * Version: ' + packageJson.version,
+			' * License: ' + packageJson.license,
+			' * Text Domain: ' + packageJson.name,
+			' * Domain Path: ' + packageJson.theme.domainpath,
+			' */\n\n',
+		].join('\n');
+
+		await prependFile('style.css', banner);
+
+		if (process.env.sync) {
+			bs.reload('*.css');
+		}
+
+		console.log('\x1b[34m', '\nstyle.css banner generated.');
+	})
+	.sass(
+		`${devPath}/scss/editor.scss`,
+		`${distPath}/css/editor.css`,
+		sassConfig
+	);
 
 /*
  * Add custom Webpack configuration.
@@ -177,37 +180,50 @@ mix
  * @link https://webpack.js.org/configuration/
  */
 mix.webpackConfig({
-    stats: 'minimal',
-    devtool: process.env.NODE_ENV === 'production' ? false : 'eval',
-    performance: { hints: false },
-    externals: { jquery: 'jQuery' },
-    plugins: [
-        new DependencyExtractionWebpackPlugin(),
-        // @link https://github.com/webpack-contrib/copy-webpack-plugin
-        new CopyWebpackPlugin({
-            patterns: [
-                { from: `${devPath}/img`, to: `${distPath}/img` },
-                { from: `${devPath}/svg`, to: `${distPath}/svg` },
-                { from: `${devPath}/fonts`, to: `${distPath}/fonts` }
-            ],
-        }),
-        // @link https://github.com/Klathmon/imagemin-webpack-plugin
-        new ImageminPlugin({
-            test: /\.(jpe?g|png|gif|svg)$/i,
-            disable: process.env.NODE_ENV !== 'production',
-            optipng: { optimizationLevel: 3 },
-            gifsicle: { optimizationLevel: 3 },
-            pngquant: {
-                quality: '65-90',
-                speed: 4
-            },
-            svgo: {
-                plugins: [
-                    { cleanupIDs: false },
-                    { removeViewBox: false },
-                    { removeUnknownsAndDefaults: false }
-                ]
-            }
-        })
-    ]
-});
+	stats: 'minimal',
+	devtool: process.env.NODE_ENV === 'production' ? false : 'eval',
+	performance: { hints: false },
+	externals: { jquery: 'jQuery' },
+	plugins: [
+		new DependencyExtractionWebpackPlugin(),
+		// @link https://github.com/webpack-contrib/copy-webpack-plugin
+		new CopyWebpackPlugin({
+			patterns: [
+				{ from: `${devPath}/img`, to: `${distPath}/img` },
+				{ from: `${devPath}/svg`, to: `${distPath}/svg` },
+				{ from: `${devPath}/fonts`, to: `${distPath}/fonts` },
+			],
+		}),
+		// @link https://github.com/webpack-contrib/image-minimizer-webpack-plugin
+		new ImageMinimizerPlugin({
+			test: /\.(jpe?g|png|gif)$/i,
+			minimizer: {
+				implementation: ImageMinimizerPlugin.sharpMinify,
+				options: {
+					encodeOptions: {
+						// Your options for `sharp`
+						// https://sharp.pixelplumbing.com/api-output
+					},
+				},
+			},
+		}),
+		new ImageMinimizerPlugin({
+			test: /\.svg$/i,
+			minimizer: {
+				implementation: ImageMinimizerPlugin.svgoMinify,
+				options: {
+					encodeOptions: {
+						multipass: true,
+						plugins: [
+							'cleanupIds',
+							'cleanupEnableBackground',
+							'convertStyleToAttrs',
+							'preset-default',
+							'removeAttrs',
+						],
+					},
+				},
+			},
+		}),
+	],
+});