@tomasvn/svgstore 3.1.3 → 3.1.4

package/.github/workflows/publish.yml

@@ -0,0 +1,21 @@
+name: Publish Package to npmjs
+on:
+    release:
+        types: [published]
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            id-token: write
+        steps:
+            - uses: actions/checkout@v4
+            # Setup .npmrc file to publish to npm
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '20.x'
+                  registry-url: 'https://registry.npmjs.org'
+            - run: npm ci
+            - run: npm publish --provenance --access public
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/CHANGELOG.md

@@ -1,14 +1,23 @@
 # Changelog
 
+# 3.1.4
+
+    - Closes [#36][https://github.com/svgstore/svgstore/issues/36]
+    - Fix failing test
+
 # 3.1.0
+
     - implements [PR #33](https://github.com/svgstore/svgstore/pull/33) from original work
 
 # 3.1.1
+
     - parsing of `linearGradient` elements
 
 # 3.1.2
+
     - update readme file
 
 # 3.1.3
+
     - add safe clean `def` util
-    - passing `opts`, `cleanDefs: true` would break `linearGradient`
+    - passing `opts`, `cleanDefs: true` would break `linearGradient`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomasvn/svgstore",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "description": "Combines mulitple svg files into one.",
   "scripts": {
     "lint": "npx eslint --fix \"{src,test}/**/*.js\" && npx prettier --write \"{src,test}/**/*.js\"",

package/src/svgstore.js

@@ -134,32 +134,33 @@ function svgstore(options) {
 					var elem = child(_elem);
 					var oldDefId = elem.attr('id');
 					var newDefId = id + '_' + oldDefId;
+					var oldHref = '#' + oldDefId;
+					var newHref = '#' + newDefId;
+					var oldUrl = 'url(' + oldHref + ')';
+					var newUrl = 'url(' + newHref + ')';
 					elem.attr('id', newDefId);
 
-					/* process use tags */
-					child('use').each(function (i, use) {
-						var hrefLink = '#' + oldDefId;
-						var checkableProperties = ['xlink:href', 'href'];
-						var foundProperty;
-						for (var j = 0; j < checkableProperties.length; j++) {
-							var currentProperty = checkableProperties[j];
-							if (child(use).prop(currentProperty) === hrefLink) {
-								foundProperty = currentProperty;
-								break;
+					child('*').each(function (i, refElem) {
+						var ref = child(refElem);
+						var attrs = refElem.attribs || {};
+						Object.keys(attrs).forEach(function (attr) {
+							var originalValue = attrs[attr];
+							var value = originalValue;
+							if (typeof value !== 'string') return;
+
+							if (
+								(attr === 'href' || attr === 'xlink:href') &&
+								value === oldHref
+							) {
+								value = newHref;
+							}
+
+							if (value.indexOf(oldUrl) !== -1) {
+								value = value.split(oldUrl).join(newUrl);
 							}
-						}
-						if (!foundProperty) {
-							return;
-						}
-						child(use).attr(foundProperty, '#' + newDefId);
-					});
 
-					/* process fill attributes */
-					child('[fill="url(#' + oldDefId + ')"]').each(function (
-						i,
-						use
-					) {
-						child(use).attr('fill', 'url(#' + newDefId + ')');
+							if (value !== originalValue) ref.attr(attr, value);
+						});
 					});
 				});
 			}

package/src/utils/safe-clean-defs.js

@@ -1,7 +1,6 @@
 function safeCleanDefsAttrs(attrs) {
 	if (attrs === true) {
-		// Default to removing 'style' only outside of defs, but skip inside defs
-		return [];
+		return ['style'];
 	}
 	if (!Array.isArray(attrs)) return [];
 	// Exclude 'style' to preserve gradient stops and fills

package/test/svgstore.js

@@ -231,6 +231,71 @@ test('should rename defs id', async (t) => {
 	t.strictEqual(store.toString(), expected);
 });
 
+test('should update all references to renamed defs ids', async (t) => {
+	const svg =
+		'<svg><defs>' +
+		'<linearGradient id="paint0"/>' +
+		'<linearGradient id="paint1" href="#paint0"/>' +
+		'<clipPath id="clip0"/>' +
+		'<mask id="mask0"/>' +
+		'<filter id="filter0"/>' +
+		'<marker id="marker0"/>' +
+		'</defs>' +
+		'<g clip-path="url(#clip0)" mask="url(#mask0)" filter="url(#filter0)" ' +
+		'marker-start="url(#marker0)" marker-mid="url(#marker0)" ' +
+		'marker-end="url(#marker0)">' +
+		'<path fill="url(#paint0)" stroke="url(#paint0)" ' +
+		'style="fill:url(#paint0);stroke:url(#paint0)"/>' +
+		'</g></svg>';
+	const output = svgstore({ inline: true, renameDefs: true })
+		.add('icon', svg)
+		.toString();
+
+	[
+		'href="#icon_paint0"',
+		'clip-path="url(#icon_clip0)"',
+		'mask="url(#icon_mask0)"',
+		'filter="url(#icon_filter0)"',
+		'marker-start="url(#icon_marker0)"',
+		'marker-mid="url(#icon_marker0)"',
+		'marker-end="url(#icon_marker0)"',
+		'fill="url(#icon_paint0)"',
+		'stroke="url(#icon_paint0)"',
+		'style="fill:url(#icon_paint0);stroke:url(#icon_paint0)"',
+	].forEach((reference) => {
+		t.ok(output.includes(reference), `expected output to include ${reference}`);
+	});
+});
+
+test('should match the renameDefs issue reproduction', async (t) => {
+	const icon =
+		'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">' +
+		'<g clip-path="url(#clip0)"><path d="M0 12h24" stroke="url(#paint0)" stroke-width="4"/></g>' +
+		'<defs>' +
+		'<linearGradient id="paint0" x2="24" gradientUnits="userSpaceOnUse">' +
+		'<stop stop-color="red"/><stop offset="1" stop-color="blue"/>' +
+		'</linearGradient>' +
+		'<clipPath id="clip0"><rect width="12" height="24"/></clipPath>' +
+		'</defs></svg>';
+
+	const output = svgstore({ renameDefs: true })
+		.add('icon', icon)
+		.toString({ inline: true });
+
+	const expected =
+		'<svg><defs>' +
+		'<linearGradient id="icon_paint0" x2="24" gradientUnits="userSpaceOnUse">' +
+		'<stop stop-color="red"/><stop offset="1" stop-color="blue"/>' +
+		'</linearGradient>' +
+		'<clipPath id="icon_clip0"><rect width="12" height="24"/></clipPath>' +
+		'</defs>' +
+		'<symbol id="icon" viewBox="0 0 24 24">' +
+		'<g clip-path="url(#icon_clip0)"><path d="M0 12h24" stroke="url(#icon_paint0)" stroke-width="4"/></g>' +
+		'</symbol></svg>';
+
+	t.strictEqual(output, expected);
+});
+
 test('should add <view/> and <use/> to enable SVG Fragment Identifiers', async (t) => {
 	const store = svgstore({ fragmentIdentifier: (id) => `view-${id}` })
 		.add('foo', doctype + FIXTURE_SVGS.foo.replace('<svg', svgNs.slice(0, -1)))