vite-awesome-svg-loader 4.0.0 → 4.1.0

package/README.md

@@ -8,7 +8,7 @@ A Vite plugin that:
    1. Source code [data URI](https://en.wikipedia.org/wiki/Data_URI_scheme).
    1. Source code base64.
    1. Source code base64 [data URI](https://en.wikipedia.org/wiki/Data_URI_scheme).
-1. Can preserve line width, i.e. make icons and line art have same line width when scaling.
+1. Can preserve line width, i.e. make images retain line width regardless of the image size.
 1. Can replace colors with `currentColor` or a custom color via configuration (see `replaceColorsList` option).
 1. Will automatically minimize your SVGs using [SVGO](https://github.com/svg/svgo).
 1. Allows you to create SVG sprites using provided integrations.

package/dist.js

@@ -1,5 +1,5 @@
 import p from "debounce";
-import pe from "imurmurhash";
+import f from "imurmurhash";
 
 //#region ../integration-utils/dist/index.mjs
 const g = "svg-symbols", m = "svg-", d = "data-count";
@@ -7,10 +7,10 @@ function b(t, e) {
 	if (typeof window > "u" || t === e) return {};
 	let n = document.getElementById(g);
 	if (n || (n = document.createElementNS("http://www.w3.org/2000/svg", "svg"), n.id = g, n.setAttribute("aria-hidden", "true"), n.setAttribute("style", "position:fixed;top:-99999px;left:-99999px;z-index:0;opacity:0;"), document.body.appendChild(n)), t) {
-		const s = m + new pe(t).result();
+		const s = m + new f(t).result();
 		w(document.getElementById(s));
 	}
-	const i = m + new pe(e).result(), u = document.getElementById(i);
+	const i = m + new f(e).result(), u = document.getElementById(i);
 	if (u) return u.setAttribute(d, l(u) + 1 + ""), {
 		id: i,
 		attrs: h(u)

package/integration-utils.d.cts

@@ -12,7 +12,6 @@ import { SVG_ID, SYMBOL_ID_PREFIX, USAGES_COUNT_ATTR, onSrcUpdate, onUnmount } f
  * 1. CSS properties are in camel case: `minWidth`.
  *
  * @param props `SvgIcon` props
- * @param options Conversion options
  * @returns Style map
  */
 declare function getSvgIconStyle(props: SvgIconStyleProps): Record<string, string>;

package/integration-utils.d.ts

@@ -12,7 +12,6 @@ import { SVG_ID, SYMBOL_ID_PREFIX, USAGES_COUNT_ATTR, onSrcUpdate, onUnmount } f
  * 1. CSS properties are in camel case: `minWidth`.
  *
  * @param props `SvgIcon` props
- * @param options Conversion options
  * @returns Style map
  */
 declare function getSvgIconStyle(props: SvgIconStyleProps): Record<string, string>;

package/loader.cjs

@@ -9,55 +9,71 @@ let svgo_lib_xast_js = require("svgo/lib/xast.js");
 let css_tree = require("css-tree");
 css_tree = require_chunk.__toESM(css_tree);
 
+//#region ../utils/dist/index.mjs
+function a(t) {
+	return Array.isArray(t) ? t : [t];
+}
+
+//#endregion
 //#region ../loader/dist/index.mjs
-function H(e) {
+function X(e) {
 	return e = e.replaceAll("\\", "/"), e.endsWith("/") && (e = e.substring(0, e.length - 1)), e;
 }
-function Q(e) {
-	const t = String.fromCodePoint(...new TextEncoder().encode(e));
-	return btoa(t);
+function Z(e) {
+	const o = String.fromCodePoint(...new TextEncoder().encode(e));
+	return btoa(o);
 }
-function J(e) {
+function ee(e) {
 	return e.replaceAll("`", "\\`");
 }
-function E(e, t, i) {
-	return Z(t) || $(e, i);
+function ge(e) {
+	return se(e.queryValue) || j(e);
 }
-function Z(e) {
+function se(e) {
 	return !!e && e.toLowerCase() !== "false";
 }
-function $(e, t) {
-	const a = [path.default.basename(e), e];
-	for (const o of t) {
-		const u = o instanceof RegExp;
-		for (const n of a) if (u ? o.test(n) : n === o) return !0;
-	}
-	return !1;
+function j(e) {
+	const r = [path.default.basename(e.relativePath), e.relativePath], i = a(e.matchers);
+	return i.length ? i.some((n) => {
+		switch (typeof n) {
+			case "string": return r.some((l) => l === n);
+			case "function": return n({
+				fullPath: e.fullPath,
+				relativePath: e.relativePath
+			});
+		}
+		return r.some((l) => n.test(l));
+	}) : !1;
 }
-function Y(e) {
+function te(e) {
 	return e.replaceAll(/\s+/g, " ").trim();
 }
-function A(e, t, i) {
-	const a = [];
-	if (i) return a;
-	for (const o of t) {
-		if (typeof o == "string") {
-			a.push(Y(o));
+function ve(e) {
+	const o = a(e.selectors), r = [];
+	for (const i of o) {
+		if (typeof i == "string") {
+			r.push(te(i));
 			continue;
 		}
-		if ($(e, o.files)) for (const u of o.selectors) a.push(Y(u));
+		if (j({
+			...e,
+			matchers: i.files
+		})) for (const n of i.selectors) r.push(te(n));
 	}
-	return a;
+	return r;
 }
-const ee = svgo_lib_xast_js.matches;
-function W(e, t) {
-	for (const i of t) if (ee(e, i)) return !0;
+const oe = svgo_lib_xast_js.matches;
+function $(e, o) {
+	for (const r of o) if (oe(e, r)) return !0;
 	return !1;
 }
-function F(e, t) {
-	return e ? t.replacements[e.toLowerCase()] || t.default || e : t.default || "";
+function G(e, o) {
+	return e ? o.replacements[e.toLowerCase()] || o.default || e : o.default || "";
 }
-const me = {
+function Se(e) {
+	return Array.isArray(e?.files);
+}
+const Ce = {
 	circle: !0,
 	ellipse: !0,
 	foreignObject: !0,
@@ -72,73 +88,73 @@ const me = {
 	tspan: !0,
 	use: !0
 };
-function he(e, t) {
-	if (!me[e.name]) return;
-	const i = e.attributes["vector-effect"];
-	i && i !== "non-scaling-stroke" ? console.warn(`"${t}": Element "${e.name}" already contains "vector-effect" property. Please remove it, so it can scale correctly. This element will not be transformed.`) : e.attributes["vector-effect"] = "non-scaling-stroke";
+function ye(e, o) {
+	if (!Ce[e.name]) return;
+	const r = e.attributes["vector-effect"];
+	r && r !== "non-scaling-stroke" ? console.warn(`"${o}": Element "${e.name}" already contains "vector-effect" property. Please remove it, so it can scale correctly. This element will not be transformed.`) : e.attributes["vector-effect"] = "non-scaling-stroke";
 }
-const te = {
+const le = {
 	fill: !0,
 	stroke: !0,
 	"stop-color": !0
-}, M = {
+}, V = {
 	none: !0,
 	transparent: !0,
 	currentColor: !0
-}, de = [
+}, Le = [
 	"url",
 	"source",
 	"source-data-uri",
 	"base64",
 	"base64-data-uri"
 ];
-function X(e, t, i, a = !1) {
+function re(e, o, r, i = !1) {
 	if (!e || typeof e != "string") return "";
-	let o = "stylesheet";
-	a && (e = `{${e}}`, o = "block");
-	const u = !a && i.length;
-	let n = [], f = [], L = !1;
-	const y = css_tree.parse(e, { context: o });
-	return css_tree.walk(y, {
-		visit: u ? void 0 : "Declaration",
-		enter: function(p) {
-			if (p.__SKIP_SVG_LOADER__ || this.rule?.__SKIP_SVG_LOADER__) return;
-			if (u) {
-				if (p.type === "SelectorList") {
-					n = [], f = [], L = !1;
+	let n = "stylesheet";
+	i && (e = `{${e}}`, n = "block");
+	const l = !i && r.length;
+	let c = [], p = [], g = !1;
+	const L = css_tree.parse(e, { context: n });
+	return css_tree.walk(L, {
+		visit: l ? void 0 : "Declaration",
+		enter: function(u) {
+			if (u.__SKIP_SVG_LOADER__ || this.rule?.__SKIP_SVG_LOADER__) return;
+			if (l) {
+				if (u.type === "SelectorList") {
+					c = [], p = [], g = !1;
 					return;
 				}
-				if (p.type === "Selector") {
-					const c = css_tree.generate(p);
-					let h = !1;
-					for (const s of i) if (ee(s, c)) {
-						h = !0, p.__ORIG_COLOR__ = !0;
+				if (u.type === "Selector") {
+					const h = css_tree.generate(u);
+					let s = !1;
+					for (const f of r) if (oe(f, h)) {
+						s = !0, u.__ORIG_COLOR__ = !0;
 						break;
 					}
-					(h ? n : f).push(c);
+					(s ? c : p).push(h);
 					return;
 				}
 			}
-			if (p.type !== "Declaration" || !te[p.property]) return;
-			const R = p.value?.children?.first, l = R?.value || R?.name;
-			if (!(!l || M[l])) {
-				if (u && !L && this.rule?.prelude.type === "SelectorList") {
-					const c = css_tree.clone(this.rule);
-					c.__SKIP_SVG_LOADER__ = !0;
-					const h = new css_tree.List(), s = this.rule.prelude.children;
-					s.forEach((m, d) => {
-						m.__ORIG_COLOR__ && (s.remove(d), h.push(m));
-					}), c.prelude.children = h;
-					const O = this.atrule?.block?.children || this.stylesheet?.children;
-					let k;
-					O?.some((m, d) => m === this.rule ? (k = d, !0) : !1), k ? O?.insertData(c, k) : O?.push(c), L = !0;
+			if (u.type !== "Declaration" || !le[u.property]) return;
+			const b = u.value?.children?.first, x = b?.value || b?.name;
+			if (!(!x || V[x])) {
+				if (l && !g && this.rule?.prelude.type === "SelectorList") {
+					const h = css_tree.clone(this.rule);
+					h.__SKIP_SVG_LOADER__ = !0;
+					const s = new css_tree.List(), f = this.rule.prelude.children;
+					f.forEach((P, R) => {
+						P.__ORIG_COLOR__ && (f.remove(R), s.push(P));
+					}), h.prelude.children = s;
+					const v = this.atrule?.block?.children || this.stylesheet?.children;
+					let a$1;
+					v?.some((P, R) => P === this.rule ? (a$1 = R, !0) : !1), a$1 ? v?.insertData(h, a$1) : v?.push(h), g = !0;
 				}
-				p.value = css_tree.parse(F(css_tree.generate(p.value), t), { context: "value" });
+				u.value = css_tree.parse(G(css_tree.generate(u.value), o), { context: "value" });
 			}
 		}
-	}), css_tree.generate(y);
+	}), css_tree.generate(L);
 }
-const _e = {
+const be = {
 	circle: !0,
 	ellipse: !0,
 	path: !0,
@@ -149,178 +165,189 @@ const _e = {
 	textPath: !0,
 	tref: !0,
 	tspan: !0
-}, re = { ...te };
-delete re.fill;
-function Se(e, t, i, a) {
+}, ie = { ...le };
+delete ie.fill;
+function Pe(e, o, r, i) {
 	if (e.name === "style") {
-		const n = e.children[0], f = X(n?.value, i, a, !1);
-		f && (n.value = f);
+		const c = e.children[0], p = re(c?.value, r, i, !1);
+		p && (c.value = p);
 	} else {
-		const n = X(e.attributes.style, i, a, !0);
-		n && (e.attributes.style = n);
+		const c = re(e.attributes.style, r, i, !0);
+		c && (e.attributes.style = c);
 	}
-	const o = e.name === "svg", u = e.attributes.fill;
-	o && u && (t = !0), (o && t || !o && !t && _e[e.name]) && !M[u] && (e.attributes.fill = F(u, i));
-	for (const n in re) {
-		const f = e.attributes[n];
-		f && !M[f] && (e.attributes[n] = F(f, i));
+	const n = e.name === "svg", l = e.attributes.fill;
+	n && l && (o = !0), (n && o || !n && !o && be[e.name]) && !V[l] && (e.attributes.fill = G(l, r));
+	for (const c in ie) {
+		const p = e.attributes[c];
+		p && !V[p] && (e.attributes[c] = G(p, r));
 	}
-	return t;
+	return o;
 }
-const Ce = {
-	tempDir: ".temp",
-	preserveLineWidthList: [],
-	skipPreserveLineWidthList: [],
-	skipPreserveLineWidthSelectors: [],
-	setCurrentColorList: [],
-	skipSetCurrentColorList: [],
-	skipSetCurrentColorSelectors: [],
-	replaceColorsList: [],
-	skipReplaceColorsList: [],
-	skipReplaceColorsSelectors: [],
-	skipTransformsList: [],
-	skipTransformsSelectors: [],
-	skipFilesList: [],
-	defaultImport: "source",
-	urlImportsInLibraryMode: "source-data-uri"
-};
-function ke(e = {}) {
-	const t = {
-		...Ce,
-		...e
-	};
-	if (t.tempDir = t.tempDir.replaceAll("\\", "/"), t.tempDir.startsWith("/") || t.tempDir.startsWith("./") || t.tempDir.indexOf(":/") !== -1) throw new Error(`"tempDir" option must be in format "path/to/temp/dir",i.e. it shouldn't be an absolute path, or start with "./".It'll be resolved to the project's root by the plugin.`);
-	t.tempDir.endsWith("/") && (t.tempDir = t.tempDir.substring(0, t.tempDir.length - 1)), t.tempDir = "/" + t.tempDir;
-	let i = !1, a = !1, o = "", u = "";
-	const n = e.setCurrentColorList || t.replaceColorsList, f = [], L = [], y = {
-		files: [/.*/],
+function Ae(e = {}) {
+	const { urlImportsInLibraryMode: o = "source-data-uri" } = e;
+	let r = e.tempDir || ".temp";
+	if (r.startsWith("/") || r.startsWith("./") || r.indexOf(":/") !== -1) throw new Error(`"tempDir" option must be in format "path/to/temp/dir",i.e. it shouldn't be an absolute path, or start with "./".It'll be resolved to the project's root by the plugin.`);
+	r.endsWith("/") && (r = r.substring(0, r.length - 1)), r = "/" + r;
+	let i = !1, n = !1, l = "", c = "";
+	const p = a(e.setCurrentColorList || e.replaceColorsList || []), g = [], L = [], u = {
+		files: /.*/,
 		replacements: {},
 		default: ""
 	};
-	let p = !1;
-	for (const l of n) {
-		if (typeof l == "string" || l instanceof RegExp) {
+	let b = !1;
+	const x = (s) => {
+		switch (typeof s) {
+			case "string":
+			case "function": return !0;
+		}
+		return s instanceof RegExp;
+	};
+	for (const s of p) {
+		if (Se(s)) {
+			g.push(s);
+			continue;
+		}
+		if (x(s)) {
 			L.push({
-				files: [l],
+				files: s,
 				replacements: {},
 				default: "currentColor"
 			});
 			continue;
 		}
-		if (l.files instanceof Array) {
-			f.push(l);
-			continue;
-		}
-		for (const c in l) p = !0, y.replacements[c] = l[c];
+		for (const f in s) b = !0, u.replacements[f] = s[f];
 	}
-	const R = [...f, ...L];
-	return p && R.push(y), {
+	const h = [...g, ...L];
+	return b && h.push(u), {
 		name: "vite-awesome-svg-loader",
 		enforce: "pre",
-		config(l, { command: c }) {
-			i = c === "build";
+		config(s, { command: f }) {
+			i = f === "build";
 		},
-		configResolved(l) {
-			a = !!l.build.lib, o = H(l.root), u = H(l.base);
+		configResolved(s) {
+			n = !!s.build.lib, l = X(s.root), c = X(s.base);
 		},
-		configureServer(l) {
-			l.httpServer?.on("close", async () => {
-				i || await (0, node_fs_promises.rm)(o + t.tempDir, {
+		configureServer(s) {
+			s.httpServer?.on("close", async () => {
+				i || await (0, node_fs_promises.rm)(l + r, {
 					force: !0,
 					recursive: !0
 				});
 			});
 		},
-		async load(l) {
-			const h = l.indexOf(".svg");
-			if (h === -1) return null;
-			let s = l.substring(0, h + 4).replaceAll("\\", "/");
-			s.startsWith(o) && (s = s.substring(o.length)), s.startsWith("/") || (s = "/" + s);
-			const k = (l.split("?", 2)[1] || "").split("&"), m = {};
-			for (const r of k) {
-				const [b, D] = r.split("=");
-				m[b.toLowerCase()] = D || "1";
+		async load(s) {
+			const v = s.indexOf(".svg");
+			if (v === -1) return null;
+			let a$1 = s.substring(0, v + 4).replaceAll("\\", "/");
+			a$1.startsWith(l) && (a$1 = a$1.substring(l.length)), a$1.startsWith("/") || (a$1 = "/" + a$1);
+			const R = (s.split("?", 2)[1] || "").split("&"), O = {};
+			for (const t of R) {
+				const [y, D] = t.split("=");
+				O[y.toLowerCase()] = D || "1";
 			}
-			if (E(s, m["skip-awesome-svg-loader"], t.skipFilesList)) return null;
-			const d = E(s, m["skip-transforms"], t.skipTransformsList), I = !d && E(s, m["preserve-line-width"], t.preserveLineWidthList) && !E(s, void 0, t.skipPreserveLineWidthList), G = A(s, t.skipPreserveLineWidthSelectors, !I);
-			let g = !1;
-			const C = {
+			const A = {
+				fullPath: (l.endsWith("/") ? l.substring(l.length) : l) + a$1,
+				relativePath: a$1
+			}, E = (t) => ge({
+				...A,
+				matchers: t.matchers || [],
+				queryValue: O[t.param]
+			}), I = (t) => ve({
+				...A,
+				selectors: t || []
+			});
+			if (E({
+				param: "skip-awesome-svg-loader",
+				matchers: e.skipFilesList
+			})) return null;
+			const w = E({
+				param: "skip-transforms",
+				matchers: e.skipTransformsList
+			}), W = !w && E({
+				param: "preserve-line-width",
+				matchers: e.preserveLineWidthList
+			}) && !E({ matchers: e.skipPreserveLineWidthList }), B = W ? I(e.skipPreserveLineWidthSelectors) : [];
+			let S = !1;
+			const d = {
 				replacements: {},
 				default: void 0
 			};
-			if (!d && !E(s, void 0, e.skipSetCurrentColorList || t.skipReplaceColorsList)) {
-				if (Z(m["set-current-color"])) C.default = "currentColor", g = !0;
-				else for (const r of R) if ($(s, r.files)) {
-					g = !0, C.default === void 0 && r.default !== void 0 && (C.default = r.default);
-					for (const b in r.replacements) C.replacements[b] ||= r.replacements[b];
+			if (!w && !E({ matchers: e.skipSetCurrentColorList || e.skipReplaceColorsList })) {
+				if (se(O["set-current-color"])) d.default = "currentColor", S = !0;
+				else for (const t of h) if (j({
+					...A,
+					matchers: t.files
+				})) {
+					S = !0, d.default === void 0 && t.default !== void 0 && (d.default = t.default);
+					for (const y in t.replacements) d.replacements[y] ||= t.replacements[y];
 				}
 			}
-			C.default ??= "currentColor";
-			const P = A(s, e.skipSetCurrentColorSelectors || t.skipReplaceColorsSelectors, !g), w = A(s, t.skipTransformsSelectors, d), x = [s];
-			for (const r of [
-				G,
-				P,
-				w
-			]) x.push(r.join(","));
-			for (const r of [
-				d,
-				I,
-				g
-			]) x.push(r ? "1" : "0");
-			g && x.push(JSON.stringify(C));
-			const se = new imurmurhash.default(x.join("__")).result(), V = `${path.default.basename(s).split(".")[0]}-${se}`, j = V + ".svg", oe = path.default.dirname(s) + "/" + j, B = o + s;
-			let _ = (await (0, node_fs_promises.readFile)(B)).toString(), q = !1;
-			const z = [], K = V + "__";
-			let U = !1;
-			_ = (0, svgo.optimize)(_, {
+			d.default ??= "currentColor";
+			const N = S ? I(e.skipSetCurrentColorSelectors || e.skipReplaceColorsSelectors) : [], F = w ? [] : I(e.skipTransformsSelectors), T = [a$1];
+			for (const t of [
+				B,
+				N,
+				F
+			]) T.push(t.join(","));
+			for (const t of [
+				w,
+				W,
+				S
+			]) T.push(t ? "1" : "0");
+			S && T.push(JSON.stringify(d));
+			const ne = new imurmurhash.default(T.join("__")).result(), z = `${path.default.basename(a$1).split(".")[0]}-${ne}`, K = z + ".svg", ae = path.default.dirname(a$1) + "/" + K, Q = l + a$1;
+			let m = (await (0, node_fs_promises.readFile)(Q)).toString(), U = !1;
+			const H = [], J = z + "__";
+			let Y = !1;
+			m = (0, svgo.optimize)(m, {
 				multipass: !0,
 				plugins: [{
 					name: "prefixIds",
 					params: {
 						prefixIds: !0,
 						prefixClassNames: !0,
-						prefix: K,
+						prefix: J,
 						delim: ""
 					}
 				}, {
 					name: "awesome-svg-loader",
-					fn: () => U ? null : (U = !0, {
-						root: { enter: (r) => {
-							for (const b of [P, w]) for (const D of b) z.push(...(0, svgo_lib_xast_js.querySelectorAll)(r, D));
+					fn: () => Y ? null : (Y = !0, {
+						root: { enter: (t) => {
+							for (const y of [N, F]) for (const D of y) H.push(...(0, svgo_lib_xast_js.querySelectorAll)(t, D));
 						} },
-						element: { enter: (r) => {
-							W(r, w) || (I && !W(r, G) && he(r, B), g && !W(r, P) && (q = Se(r, q, C, z)));
+						element: { enter: (t) => {
+							$(t, F) || (W && !$(t, B) && ye(t, Q), S && !$(t, N) && (U = Pe(t, U, d, H)));
 						} }
 					})
 				}]
 			}).data;
-			let T = t.defaultImport;
-			for (const r of de) m[r] && (T = r);
-			a && T === "url" && t.urlImportsInLibraryMode !== "emit-files" && (T = t.urlImportsInLibraryMode);
-			const v = (r) => [
-				`export const src = ${r};`,
-				`export const prefix = "${K}"`,
+			let k = e.defaultImport || "source";
+			for (const t of Le) O[t] && (k = t);
+			n && k === "url" && o !== "emit-files" && (k = o);
+			const C = (t) => [
+				`export const src = ${t};`,
+				`export const prefix = "${J}"`,
 				"export default src"
 			].join(`
 `);
-			switch (T) {
-				case "source": return v("`" + J(_) + "`");
-				case "source-data-uri": return v("`data:image/svg+xml," + encodeURIComponent(_) + "`");
-				case "base64": return v("`" + J(Q(_)) + "`");
-				case "base64-data-uri": return v("`data:image/svg+xml;base64," + encodeURIComponent(Q(_)) + "`");
+			switch (k) {
+				case "source": return C("`" + ee(m) + "`");
+				case "source-data-uri": return C("`data:image/svg+xml," + encodeURIComponent(m) + "`");
+				case "base64": return C("`" + ee(Z(m)) + "`");
+				case "base64-data-uri": return C("`data:image/svg+xml;base64," + encodeURIComponent(Z(m)) + "`");
 			}
 			if (!i) {
-				const r = t.tempDir + oe;
-				return await (0, node_fs_promises.writeFile)(o + r, _), v(`"${u + r}"`);
+				const t = r + ae;
+				return await (0, node_fs_promises.writeFile)(l + t, m), C(`"${c + t}"`);
 			}
-			return v(`"__VITE_ASSET__${this.emitFile({
+			return C(`"__VITE_ASSET__${this.emitFile({
 				type: "asset",
-				name: j,
-				source: _
+				name: K,
+				source: m
 			})}__"`);
 		}
 	};
 }
 
 //#endregion
-exports.viteAwesomeSvgLoader = ke;
+exports.viteAwesomeSvgLoader = Ae;