improve minification

Kaciras · Feb 19, 2022 · c5e0bea · c5e0bea
1 parent 3cf72cf
commit c5e0bea
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/index.ts b/index.ts
@@ -58,17 +58,6 @@ const essential: Plugin[] = [
 	"removeXMLProcInst",
 ];
 
-const minifyPreset: Plugin = {
-	name: "preset-default",
-	params: {
-		overrides: {
-			// Don't remove ID, as it may be referenced from outside.
-			cleanupIDs: false,
-			removeViewBox: false,
-		},
-	},
-};
-
 export interface PluginOptions {
 
 	/**
@@ -172,17 +161,34 @@ export default function (options: VueSVGOptions = {}): VitePlugin {
 				minify = mode === "production",
 			} = preset;
 
-			if (extractStyles) {
-				plugins.push(extractCSS(styles));
-			}
+			const overrides: Record<string, boolean> =  {
+				// Don't remove ID, as it may be referenced from outside.
+				cleanupIDs: false,
+				removeViewBox: false,
+			};
+
 			if (responsive) {
 				plugins.push(responsivePlugin);
 			}
 			if (minify) {
-				plugins.push(minifyPreset);
+				plugins.push({
+					name: "preset-default",
+					params: { overrides },
+				});
 			} else {
 				plugins.push(...essential);
 			}
+
+			if (extractStyles) {
+				overrides.inlineStyles = false;
+				plugins.push(extractCSS(styles));
+			}
+
+			if (minify) {
+				// Move it after extractCSS.
+				overrides.removeUselessDefs = false;
+				plugins.push("removeUselessDefs");
+			}
 		},
 
 		/**

diff --git a/test/__snapshots__/index.spec.ts.snap b/test/__snapshots__/index.spec.ts.snap
@@ -1,15 +1,15 @@
 // Vitest Snapshot v1
 
-exports[`should change attributes 1`] = `"<template><svg xmlns=\\"http://www.w3.org/2000/svg\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\"><path id=\\"rect\\" d=\\"M0 0h10v10H0z\\"/></svg></template><style scoped>#rect { fill: blue; }.st0 { width: 100px; }</style>"`;
+exports[`should change attributes 1`] = `"<template><svg xmlns=\\"http://www.w3.org/2000/svg\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\"><path id=\\"rect\\" d=\\"M0 0h10v10H0z\\"/></svg></template><style scoped>#rect{fill:#00f}.st0{width:100px}</style>"`;
 
 exports[`should change stroke attribute 1`] = `"<template><svg id=\\"layer_1\\" data-name=\\"layer 1\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 92.01 92.55\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\"><path d=\\"m90.02 66.22-31.11-.97-18.43 25.08-8.69-29.89-29.55-9.78 25.74-17.5.17-31.13 24.6 19.07 29.65-9.45-10.54 29.28 18.16 25.29z\\"/></svg></template>"`;
 
-exports[`should extract styles 1`] = `"<template><svg xmlns=\\"http://www.w3.org/2000/svg\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\"><path id=\\"rect\\" d=\\"M0 0h10v10H0z\\"/></svg></template><style scoped>#rect { fill: blue; }.st0 { width: 100px; }</style>"`;
+exports[`should extract styles 1`] = `"<template><svg xmlns=\\"http://www.w3.org/2000/svg\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\"><path id=\\"rect\\" d=\\"M0 0h10v10H0z\\"/></svg></template><style scoped>#rect{fill:#00f}.st0{width:100px}</style>"`;
 
 exports[`should not minify on dev mode 1`] = `"<template><svg id=\\"layer_1\\" data-name=\\"layer 1\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 92.01 92.55\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\"><title>Untitled-1</title><polygon points=\\"90.02 66.22 58.91 65.25 40.48 90.33 31.79 60.44 2.24 50.66 27.98 33.16 28.15 2.03 52.75 21.1 82.4 11.65 71.86 40.93 90.02 66.22\\"/></svg></template>"`;
 
 exports[`should remove processing instruction in dev 1`] = `"<template><svg xmlns=\\"http://www.w3.org/2000/svg\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\"><path d=\\"M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z\\"/></svg></template>"`;
 
 exports[`should remove processing instruction in prod 1`] = `"<template><svg xmlns=\\"http://www.w3.org/2000/svg\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\"><path d=\\"M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z\\"/></svg></template>"`;
 
-exports[`should work with @vitejs/plugin-vue 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"4396\\" data-v-3495077e><path id=\\"rect\\" d=\\"M0 0h10v10H0z\\" data-v-3495077e></path></svg>"`;
+exports[`should work with @vitejs/plugin-vue 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"4396\\" data-v-568416c4><path id=\\"rect\\" d=\\"M0 0h10v10H0z\\" data-v-568416c4></path></svg>"`;