Merge pull request #23 from yoriiis/feat/updates-2024

Update SVGO and Node.js
yoriiis · Feb 14, 2024 · e38ab4e · e38ab4e
2 parents 137082b + 05b12fa
commit e38ab4e
Show file tree

Hide file tree

Showing 13 changed files with 1,371 additions and 1,138 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18.16.0
+lts/iron
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## 6.0.0
+
+### ⚠️ Breaking changes
+
+- Updates SVGO and Node.js ([#23](https://github.com/yoriiis/svg-chunk-webpack-plugin/pull/23))
+  - Minimum supported `Node.js` version is `18.19.0`
+  - SVGO version 3 (see [SVGO releases](https://github.com/svg/svgo/releases) for breaking changes)
+  - Updates other packages
+
 ## 5.0.0
 
 ### ⚠️ Breaking changes

diff --git a/example/dist/js/home.js b/example/dist/js/home.js
diff --git a/example/dist/js/news.js b/example/dist/js/news.js
diff --git a/example/dist/sprites-preview.html b/example/dist/sprites-preview.html
@@ -75,7 +75,7 @@ <h2 class="spriteItemName">home.svg</h2>
 											<span class="svgItem-name">video</span>
 										</div>
 
-									<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs><linearGradient id="a"><stop offset="5%" stop-color="green"/><stop offset="95%" stop-color="gold"/></linearGradient></defs><symbol id="gradient"><rect fill="url(#a)" width="100%" height="100%"/></symbol><symbol id="smiley-love" viewBox="0 0 48 48"><circle class="st0" cx="24" cy="24" r="24" fill="#fbd971"/><path class="st1" d="M24 41.1c-7.6 0-13.7-6.2-13.7-13.7 0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1 0 6.3 5.1 11.4 11.4 11.4s11.4-5.1 11.4-11.4c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1.2 7.6-5.9 13.7-13.5 13.7z" fill="#d8b11a"/><path d="M14.3 12.2c.5-1.1 1.6-1.9 3-1.9 1.8 0 3.1 1.5 3.2 3.2 0 0 .1.4-.1 1.2-.3 1.1-.9 2-1.7 2.8l-4.4 3.8-4.3-3.8c-.8-.7-1.4-1.7-1.7-2.8-.2-.8-.1-1.2-.1-1.2.2-1.8 1.5-3.2 3.2-3.2 1.4 0 2.4.8 2.9 1.9z" fill="#e64c3c"/><path data-name="Calque 1-2-2" d="M33.6 12.2c.5-1.1 1.6-1.9 3-1.9 1.8 0 3.1 1.5 3.2 3.2 0 0 .1.4-.1 1.2-.3 1.1-.9 2-1.7 2.8l-4.4 3.8-4.3-3.8c-.8-.7-1.4-1.7-1.7-2.8-.2-.8-.1-1.2-.1-1.2.2-1.8 1.5-3.2 3.2-3.2 1.3 0 2.4.8 2.9 1.9z" fill="#e64c3c"/></symbol><symbol id="video" viewBox="0 0 16 16"><path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.3 8.5-4.5 3c-.1 0-.1.1-.2.1s-.2 0-.3-.1c-.2-.1-.3-.3-.3-.5V5c0-.2.1-.4.2-.5.2-.1.3-.1.5 0l4.5 3c.2.1.3.3.3.5s-.1.4-.2.5z" fill="#ff004b"/></symbol></svg>
+									<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs><linearGradient id="fa15a"><stop offset="5%" stop-color="green"/><stop offset="95%" stop-color="gold"/></linearGradient></defs><symbol id="gradient"><rect width="100%" height="100%" fill="url(#fa15a)"/></symbol><symbol id="smiley-love" viewBox="0 0 48 48"><circle cx="24" cy="24" r="24" fill="#fbd971" class="a3948409st0"/><path fill="#d8b11a" d="M24 41.1c-7.6 0-13.7-6.2-13.7-13.7 0-.6.5-1.1 1.1-1.1s1.1.5 1.1 1.1c0 6.3 5.1 11.4 11.4 11.4s11.4-5.1 11.4-11.4c0-.6.5-1.1 1.1-1.1s1.1.5 1.1 1.1c.2 7.6-5.9 13.7-13.5 13.7" class="5abd6418st1"/><path fill="#e64c3c" d="M14.3 12.2c.5-1.1 1.6-1.9 3-1.9 1.8 0 3.1 1.5 3.2 3.2 0 0 .1.4-.1 1.2-.3 1.1-.9 2-1.7 2.8l-4.4 3.8-4.3-3.8c-.8-.7-1.4-1.7-1.7-2.8-.2-.8-.1-1.2-.1-1.2.2-1.8 1.5-3.2 3.2-3.2 1.4 0 2.4.8 2.9 1.9"/><path fill="#e64c3c" d="M33.6 12.2c.5-1.1 1.6-1.9 3-1.9 1.8 0 3.1 1.5 3.2 3.2 0 0 .1.4-.1 1.2-.3 1.1-.9 2-1.7 2.8l-4.4 3.8-4.3-3.8c-.8-.7-1.4-1.7-1.7-2.8-.2-.8-.1-1.2-.1-1.2.2-1.8 1.5-3.2 3.2-3.2 1.3 0 2.4.8 2.9 1.9" data-name="Calque 1-2-2"/></symbol><symbol id="video" viewBox="0 0 16 16"><path fill="#ff004b" d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8m3.3 8.5-4.5 3c-.1 0-.1.1-.2.1s-.2 0-.3-.1c-.2-.1-.3-.3-.3-.5V5c0-.2.1-.4.2-.5.2-.1.3-.1.5 0l4.5 3c.2.1.3.3.3.5s-.1.4-.2.5"/></symbol></svg>
 								</div>
 							</div>
 
@@ -97,7 +97,7 @@ <h2 class="spriteItemName">news.svg</h2>
 											<span class="svgItem-name">smiley-surprised</span>
 										</div>
 
-									<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs/><symbol id="popcorn" viewBox="0 0 32 32"><path d="M15.4 4.5c-2 0-3.6 1.6-3.6 3.6 0 .5.4.9.9.9s.9-.4.9-.9c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8c0 .5.4.9.9.9s.9-.4.9-.9c0-2-1.6-3.6-3.6-3.6z"/><path d="M29.1 9c0-1.3-.9-2.5-2.1-2.8-.4-2.4-2.4-4.2-4.9-4.2-.6 0-1.2.1-1.8.3C19.4.9 17.9 0 16.1 0c-1.8 0-3.3.9-4.2 2.3-.6-.2-1.2-.3-1.8-.3-2.5 0-4.5 1.8-4.9 4.2C4 6.5 3.1 7.7 3.1 9c0 .7.3 1.4.7 1.9-.5.5-.9 1.3-.9 2.1 0 .2 0 .4.1.6l3.2 16C6.4 31 7.7 32 9.1 32h13.8c1.4 0 2.7-1 2.9-2.4l3.2-16c0-.2.1-.4.1-.6 0-.8-.3-1.5-.8-2 .5-.5.8-1.2.8-2zM9 30c-.5 0-.9-.3-1-.8l-3.2-16V13c0-.5.4-1 1-1H9v.1L10 30H9zm6 0h-3v-.1L11 12h4v18zm5 0h-3V12h4l-1 18zm7-16.8-3.2 16c-.1.5-.5.8-1 .8H22l1-17.9V12h3c.6 0 1 .5 1 1v.2zM26 10H6c-.6 0-1-.4-1-1s.4-1 1-1c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7 0-1.7 1.3-3 3-3 .6 0 1.2.2 1.7.5.3.2.6.2.9.1.3-.1.5-.3.6-.6.4-1.2 1.5-2 2.8-2 1.3 0 2.4.8 2.8 2 .1.3.3.5.6.6.3.1.6.1.9-.1.5-.3 1.1-.5 1.7-.5 1.7 0 3 1.3 3 3 0 .3.1.5.3.7.2.2.4.3.7.3.6 0 1 .4 1 1s-.4 1-1 1z"/></symbol><symbol id="smiley-surprised" viewBox="0 0 41 40"><g transform="translate(.216)"><circle cx="20" cy="20" r="20" fill="#ffd93b"/><path d="M40 20c0 11-9 20-20 20-6.3 0-11.9-2.9-15.6-7.4C7.9 35.3 12.2 37 17 37c11 0 20-8.9 20-20 0-4.8-1.7-9.1-4.4-12.6C37.1 8.1 40 13.7 40 20z" fill="#f4c534"/><circle cx="20" cy="31.2" r="3.5" fill="#3e4347"/><path d="M31.3 19.5c0 2.5-2 4.5-4.5 4.5s-4.5-2-4.5-4.5 2-4.5 4.5-4.5 4.5 2 4.5 4.5z" fill="#fff"/><circle cx="26.7" cy="19.5" r="2.1" fill="#3e4347"/><path d="M27.9 19.3c-.2.1-.5 0-.7-.2-.2-.2-.2-.5 0-.7.2-.1.5 0 .7.2.1.3.1.6 0 .7z" fill="#5a5f63"/><path d="M32.4 13.8c.1.7.1 1.5-.1 2.1-.9-2.5-3.4-4-6.1-3.5-1 .2-1.5-1.1-.6-1.6.7-.4 1.4-.7 2.3-.7 2.1 0 4.1 1.6 4.5 3.7z" fill="#e9b02c"/><path d="M8.7 19.5c0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5-2-4.5-4.5-4.5-4.5 2-4.5 4.5z" fill="#fff"/><circle cx="13.3" cy="19.5" r="2.1" fill="#3e4347"/><path d="M12.1 19.3c.2.1.5 0 .7-.2.2-.2.2-.5 0-.7-.2-.1-.5 0-.7.2-.2.3-.1.6 0 .7z" fill="#5a5f63"/><path d="M7.6 13.8c-.1.7-.1 1.5.1 2.1.9-2.5 3.4-4 6.1-3.5 1 .2 1.5-1.1.6-1.6-.7-.4-1.4-.7-2.3-.7-2.1 0-4.1 1.6-4.5 3.7z" fill="#e9b02c"/></g></symbol></svg>
+									<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs/><symbol id="popcorn" viewBox="0 0 32 32"><path d="M15.4 4.5c-2 0-3.6 1.6-3.6 3.6 0 .5.4.9.9.9s.9-.4.9-.9c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8c0 .5.4.9.9.9s.9-.4.9-.9c0-2-1.6-3.6-3.6-3.6"/><path d="M29.1 9c0-1.3-.9-2.5-2.1-2.8-.4-2.4-2.4-4.2-4.9-4.2q-.9 0-1.8.3C19.4.9 17.9 0 16.1 0s-3.3.9-4.2 2.3Q11 2 10.1 2C7.6 2 5.6 3.8 5.2 6.2 4 6.5 3.1 7.7 3.1 9c0 .7.3 1.4.7 1.9-.5.5-.9 1.3-.9 2.1 0 .2 0 .4.1.6l3.2 16C6.4 31 7.7 32 9.1 32h13.8c1.4 0 2.7-1 2.9-2.4l3.2-16c0-.2.1-.4.1-.6 0-.8-.3-1.5-.8-2 .5-.5.8-1.2.8-2M9 30c-.5 0-.9-.3-1-.8l-3.2-16V13c0-.5.4-1 1-1H9v.1L10 30zm6 0h-3v-.1L11 12h4zm5 0h-3V12h4zm7-16.8-3.2 16c-.1.5-.5.8-1 .8H22l1-17.9V12h3c.6 0 1 .5 1 1zM26 10H6c-.6 0-1-.4-1-1s.4-1 1-1c.3 0 .5-.1.7-.3S7 7.3 7 7c0-1.7 1.3-3 3-3 .6 0 1.2.2 1.7.5.3.2.6.2.9.1q.45-.15.6-.6c.4-1.2 1.5-2 2.8-2s2.4.8 2.8 2q.15.45.6.6c.3.1.6.1.9-.1.5-.3 1.1-.5 1.7-.5 1.7 0 3 1.3 3 3 0 .3.1.5.3.7s.4.3.7.3c.6 0 1 .4 1 1s-.4 1-1 1"/></symbol><symbol id="smiley-surprised" viewBox="0 0 41 40"><g transform="translate(.216)"><circle cx="20" cy="20" r="20" fill="#ffd93b"/><path fill="#f4c534" d="M40 20c0 11-9 20-20 20-6.3 0-11.9-2.9-15.6-7.4C7.9 35.3 12.2 37 17 37c11 0 20-8.9 20-20 0-4.8-1.7-9.1-4.4-12.6C37.1 8.1 40 13.7 40 20"/><circle cx="20" cy="31.2" r="3.5" fill="#3e4347"/><path fill="#fff" d="M31.3 19.5c0 2.5-2 4.5-4.5 4.5s-4.5-2-4.5-4.5 2-4.5 4.5-4.5 4.5 2 4.5 4.5"/><circle cx="26.7" cy="19.5" r="2.1" fill="#3e4347"/><path fill="#5a5f63" d="M27.9 19.3c-.2.1-.5 0-.7-.2s-.2-.5 0-.7c.2-.1.5 0 .7.2.1.3.1.6 0 .7"/><path fill="#e9b02c" d="M32.4 13.8c.1.7.1 1.5-.1 2.1-.9-2.5-3.4-4-6.1-3.5-1 .2-1.5-1.1-.6-1.6.7-.4 1.4-.7 2.3-.7 2.1 0 4.1 1.6 4.5 3.7"/><path fill="#fff" d="M8.7 19.5c0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5-2-4.5-4.5-4.5-4.5 2-4.5 4.5"/><circle cx="13.3" cy="19.5" r="2.1" fill="#3e4347"/><path fill="#5a5f63" d="M12.1 19.3c.2.1.5 0 .7-.2s.2-.5 0-.7c-.2-.1-.5 0-.7.2-.2.3-.1.6 0 .7"/><path fill="#e9b02c" d="M7.6 13.8c-.1.7-.1 1.5.1 2.1.9-2.5 3.4-4 6.1-3.5 1 .2 1.5-1.1.6-1.6-.7-.4-1.4-.7-2.3-.7-2.1 0-4.1 1.6-4.5 3.7"/></g></symbol></svg>
 								</div>
 							</div>
 

diff --git a/example/dist/sprites/home.svg b/example/dist/sprites/home.svg
diff --git a/example/dist/sprites/news.svg b/example/dist/sprites/news.svg
diff --git a/example/svgo.config.js b/example/svgo.config.js
@@ -1,3 +1,5 @@
+import crypto from 'crypto';
+
 export default {
 	multipass: true,
 	plugins: [
@@ -14,6 +16,13 @@ export default {
 		},
 		{
 			name: 'convertStyleToAttrs' // Disabled by default since v2.1.0
+		},
+		{
+			name: 'prefixIds',
+			params: {
+				delim: '',
+				prefix: () => crypto.randomBytes(20).toString('hex').slice(0, 4)
+			}
 		}
 	]
 };
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -20,9 +20,9 @@ export default (env, argv) => {
 		watchOptions: {
 			ignored: /node_modules/
 		},
-		cache: {
-			type: 'filesystem'
-		},
+		// cache: {
+		// 	type: 'filesystem'
+		// },
 		devtool: false,
 		output: {
 			path: path.resolve(__dirname, './dist'),