chore(deps)!: upgrade svgo to v3 (#1440)

* chore(deps)!: upgrade svgo to v3 BREAKING CHANGE: increase the minimum supported node version to v14. * fix(package): allow node 14, 16 and 18 Co-authored-by: Ludovico Fischer <43557+ludofischer@users.noreply.github.com> * fix(test): update svgo output * chore(frameworks): update css * fix(svgo): update to revert skipping library check * chore(deps): update svgo to v3.0.2 --------- Co-authored-by: Ludovico Fischer <43557+ludofischer@users.noreply.github.com> Co-authored-by: Ludovico Fischer <livrerie@gmail.com>
cssnano · Mar 14, 2023 · 4e272f8 · 4e272f8 · richb-hanover · Mar 18, 2023
1 parent 39a2040
commit 4e272f8
Show file tree

Hide file tree

Showing 13 changed files with 78 additions and 58 deletions.
diff --git a/.changeset/calm-eggs-worry.md b/.changeset/calm-eggs-worry.md
@@ -0,0 +1,5 @@
+---
+'postcss-svgo': major
+---
+
+Upgrade dependency svgo to v3 and increase the minimum supported node version to v14.
diff --git a/packages/cssnano-preset-advanced/test/integrations/bootstrap-v4.2.1.css b/packages/cssnano-preset-advanced/test/integrations/bootstrap-v4.2.1.css
diff --git a/packages/cssnano-preset-advanced/test/integrations/gumby-v2.6.4.css b/packages/cssnano-preset-advanced/test/integrations/gumby-v2.6.4.css
diff --git a/packages/cssnano-preset-advanced/test/integrations/uikit-v3.0.3.css b/packages/cssnano-preset-advanced/test/integrations/uikit-v3.0.3.css
diff --git a/packages/cssnano-preset-default/test/integrations/bootstrap-v4.2.1.css b/packages/cssnano-preset-default/test/integrations/bootstrap-v4.2.1.css
diff --git a/packages/cssnano-preset-default/test/integrations/gumby-v2.6.4.css b/packages/cssnano-preset-default/test/integrations/gumby-v2.6.4.css
diff --git a/packages/cssnano-preset-default/test/integrations/uikit-v3.0.3.css b/packages/cssnano-preset-default/test/integrations/uikit-v3.0.3.css
diff --git a/packages/cssnano/test/fixtures.js b/packages/cssnano/test/fixtures.js
@@ -350,7 +350,7 @@ test(
     `.box {
 				background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3ClinearGradient%20id%3D%22gradient%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%220%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23414042%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22url(%23gradient)%22%20%2F%3E%3C%2Fsvg%3E');
 		}`,
-    `.box{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23414042'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23a)' d='M0 0h1v1H0z'/%3E%3C/svg%3E")}`
+    `.box{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1 1'%3E%3ClinearGradient id='a' x1='0%25' x2='100%25' y1='0%25' y2='0%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%23414042'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23a)' d='M0 0h1v1H0z'/%3E%3C/svg%3E")}`
   )
 );
 

diff --git a/packages/postcss-svgo/package.json b/packages/postcss-svgo/package.json
@@ -28,16 +28,15 @@
   "repository": "cssnano/cssnano",
   "dependencies": {
     "postcss-value-parser": "^4.2.0",
-    "svgo": "^2.7.0"
+    "svgo": "^3.0.2"
   },
   "bugs": {
     "url": "https://github.com/cssnano/cssnano/issues"
   },
   "engines": {
-    "node": "^10 || ^12 || >=14.0"
+    "node": "^14 || ^16 || >= 18"
   },
   "devDependencies": {
-    "@types/svgo": "^2.6.2",
     "postcss": "^8.2.15"
   },
   "peerDependencies": {

diff --git a/packages/postcss-svgo/src/index.js b/packages/postcss-svgo/src/index.js
@@ -43,12 +43,9 @@ function minifySVG(input, opts) {
   svg = svg.replace(escapedQuotes, '$1="$2"');
 
   const result = optimize(svg, opts);
-  if (result.error) {
-    throw new Error(result.error);
-  }
 
   return {
-    result: /** @type {import('svgo').OptimizedSvg}*/ (result).data,
+    result: /** @type {import('svgo').Output}*/ (result).data,
     isUriEncoded,
   };
 }
@@ -117,7 +114,7 @@ function minify(decl, opts, postcssResult) {
 
   decl.value = minified.toString();
 }
-/** @typedef {{encode?: boolean, plugins?: object[]} & import('svgo').OptimizeOptions} Options */
+/** @typedef {{encode?: boolean, plugins?: object[]} & import('svgo').Config} Options */
 /**
  * @type {import('postcss').PluginCreator<Options>}
  * @param {Options} opts

diff --git a/packages/postcss-svgo/test/index.js b/packages/postcss-svgo/test/index.js
@@ -128,7 +128,7 @@ test(
   'should not throw when decoding a svg',
   processCSS(
     "h1{-webkit-mask-box-image: url(\"data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>\") 50% 56% 46% 42%;}",
-    'h1{-webkit-mask-box-image: url(\'data:image/svg+xml;charset=utf-8,<svg height="35" viewBox="0 0 96 70" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M84 35c1 7-5 37-42 35C5 72-1 42 0 35-1 28 5-2 42 0c37-2 43 28 42 35z"/></svg>\') 50% 56% 46% 42%;}'
+    'h1{-webkit-mask-box-image: url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><path d="M84 35c1 7-5 37-42 35C5 72-1 42 0 35-1 28 5-2 42 0c37-2 43 28 42 35z"/></svg>\') 50% 56% 46% 42%;}'
   )
 );
 
@@ -154,15 +154,15 @@ test(
   'should not fail on "malformed" svgs',
   processCSS(
     "h1{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><line stroke-width='2' stroke='rgb(255,0,0)' x1='0' y1='100%' x2='100%' y2='0'></line></svg>\")}",
-    'h1{background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><line stroke-width="2" stroke="red" y1="100%" x2="100%"/></svg>\')}'
+    'h1{background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><line x2="100%" y1="100%" stroke="red" stroke-width="2"/></svg>\')}'
   )
 );
 
 test(
   'should encode "malformed" svgs',
   processCSS(
     "h1{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><line stroke-width='2' stroke='rgb(255,0,0)' x1='0' y1='100%' x2='100%' y2='0'></line></svg>\")}",
-    "h1{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cline stroke-width='2' stroke='red' y1='100%25' x2='100%25'/%3E%3C/svg%3E\")}",
+    "h1{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cline x2='100%25' y1='100%25' stroke='red' stroke-width='2'/%3E%3C/svg%3E\")}",
     { encode: true }
   )
 );
@@ -276,7 +276,7 @@ test(
   'should encode hashes',
   processCSS(
     `h1{background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="32" viewBox="0 0 1200 320"> <path d="M137.189 140V17.17h-36.676L73.871 31.832z" fill="rgb(102,51,153)"/></svg>');}`,
-    `h1{background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="32" viewBox="0 0 1200 320"><path d="M137.189 140V17.17h-36.676L73.871 31.832z" fill="%23639"/></svg>');}`
+    `h1{background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="32" viewBox="0 0 1200 320"><path fill="%23639" d="M137.189 140V17.17h-36.676L73.871 31.832z"/></svg>');}`
   )
 );
 

diff --git a/packages/postcss-svgo/types/index.d.ts b/packages/postcss-svgo/types/index.d.ts
@@ -1,5 +1,5 @@
 export = pluginCreator;
-/** @typedef {{encode?: boolean, plugins?: object[]} & import('svgo').OptimizeOptions} Options */
+/** @typedef {{encode?: boolean, plugins?: object[]} & import('svgo').Config} Options */
 /**
  * @type {import('postcss').PluginCreator<Options>}
  * @param {Options} opts
@@ -12,6 +12,6 @@ declare namespace pluginCreator {
 type Options = {
     encode?: boolean;
     plugins?: object[];
-} & import('svgo').OptimizeOptions;
+} & import('svgo').Config;
 declare var postcss: true;
 import { encode } from "./lib/url";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml