gulp-stacksvg 1.0.6 → 2.0.0

package/README.md

@@ -5,7 +5,7 @@
 [![NPM version][npm-image]][npm-url]
 [![Vulnerabilities count][vulnerabilities-image]][vulnerabilities-url]
 
-Combine svg icon files into one with stack method.
+Combine SVG icon files into one with the stack method.
 
 ## Installation
 
@@ -15,7 +15,7 @@ npm install gulp-stacksvg --save-dev
 
 ## Usage
 
-The following script will combine all svg sources into single svg file with stack method.
+The following script will combine all SVG sources into a single SVG file with stack method.
 
 ```js
 import { stacksvg } from "gulp-stacksvg"
@@ -30,7 +30,7 @@ function makeStack () {
 }
 ```
 
-### Avalable options
+### Available options
 
 | Option      | Description                                                                          | Default     |
 |-------------|--------------------------------------------------------------------------------------|-------------|
@@ -61,10 +61,10 @@ We can use the stack in all four possible ways:
 
 This method was first mentioned in a Simurai [article](https://simurai.com/blog/2012/04/02/svg-stacks) on April 2, 2012. But even it uses unnecessarily complex code transformations.
 
-This can be done much easier. In general, the stack is arranged almost like a symbol sprite, but without changing the icon tag (it remain the `svg` tag, as in the original icon files) and with the addition of a tiny bit of style.
+This can be done much easier. In general, the stack is arranged almost like a symbol sprite, but without changing the icon tag (it remains the `svg` tag, as in the original icon files) and with the addition of a tiny bit of style.
 
 ```xml
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg">
 
 	<style>:root svg:not(:target) { display: none }</style>
 ```
@@ -103,8 +103,6 @@ The magic is in the stack inner style, which shows only the fragment requested b
 :root svg:not(:target) { display: none }
 ```
 
-It shows only the fragment that is requested by its link.
-
 And now the icons from the external sprite are available in the styles <img width="16" height="16" title="heart" src="https://raw.githubusercontent.com/firefoxic/gulp-stacksvg/main/test/stack.svg#heart-red" alt="heart">
 
 ```html
@@ -144,6 +142,12 @@ And now the icons from the external sprite are available in the styles <img widt
 
 For an icon inserted via `mask`, simply change the `background`. Moreover, unlike `use`, you can draw anything in the background under the mask, for example, a gradient.
 
+## Useful links
+
+- [Changelog](CHANGELOG.md)
+- [License](LICENSE)
+- [SVG sprites: old-school, modern, unknown, and forgotten](https://pepelsbey.dev/articles/svg-sprites/#forgotten-stacks) by [Vadim Makeev](https://mastodon.social/@pepelsbey)
+
 [test-url]: https://github.com/firefoxic/gulp-stacksvg/actions
 [test-image]: https://github.com/firefoxic/gulp-stacksvg/actions/workflows/test.yml/badge.svg?branch=main
 

package/index.js

@@ -1,7 +1,7 @@
 import { parse } from "node-html-parser"
 import { basename, extname, sep } from "path"
 import { Transform } from "stream"
-import fancyLog from "fancy-log"
+import { createHmac } from "crypto"
 import PluginError from "plugin-error"
 import Vinyl from "vinyl"
 
@@ -15,12 +15,14 @@ const excessAttrs = [
 	`y`
 ]
 
+const xlink = `http://www.w3.org/1999/xlink`
+
 export function stacksvg ({ output = `stack.svg`, separator = `_`, spacer = `-` } = {}) {
 
 	let isEmpty = true
 	const ids = {}
-	const namespaces = {}
-	const stack = parse(`<svg xmlns="http://www.w3.org/2000/svg"><style>:root svg:not(:target){display:none}</style></svg>`)
+	const namespaces = new Map([[`http://www.w3.org/2000/svg`, `xmlns`]])
+	const stack = parse(`<svg><style>:root svg:not(:target){display:none}</style></svg>`)
 	const rootSvg = stack.querySelector(`svg`)
 	const stream = new Transform({ objectMode: true })
 
@@ -34,7 +36,8 @@ export function stacksvg ({ output = `stack.svg`, separator = `_`, spacer = `-`
 			return cb()
 		}
 
-		const icon = parse(file.contents.toString()).querySelector(`svg`)
+		const iconDom = parse(file.contents.toString()).removeWhitespace()
+		const iconSvg = iconDom.querySelector(`svg`)
 
 		isEmpty = false
 
@@ -48,24 +51,24 @@ export function stacksvg ({ output = `stack.svg`, separator = `_`, spacer = `-`
 		}
 
 		ids[iconId] = true
-		icon.setAttribute(`id`, iconId)
+		iconSvg.setAttribute(`id`, iconId)
 
-		const viewBoxAttr = icon.getAttribute(`viewBox`)
-		const widthAttr = icon.getAttribute(`width`)?.replace(/[^0-9]/g, ``)
-		const heightAttr = icon.getAttribute(`height`)?.replace(/[^0-9]/g, ``)
+		const viewBoxAttr = iconSvg.getAttribute(`viewBox`)
+		const widthAttr = iconSvg.getAttribute(`width`)?.replace(/[^0-9]/g, ``)
+		const heightAttr = iconSvg.getAttribute(`height`)?.replace(/[^0-9]/g, ``)
 
 		if (!viewBoxAttr && widthAttr && heightAttr) {
-			icon.setAttribute(`viewBox`, `0 0 ${widthAttr} ${heightAttr}`)
+			iconSvg.setAttribute(`viewBox`, `0 0 ${widthAttr} ${heightAttr}`)
 		}
 
-		excessAttrs.forEach((attr) => icon.removeAttribute(attr))
-		icon.querySelectorAll(`[id]`).forEach(changeInnerId)
+		excessAttrs.forEach((attr) => iconSvg.removeAttribute(attr))
+		iconSvg.querySelectorAll(`[id]`).forEach(changeInnerId)
 
 		function changeInnerId (targetElem, suffix) {
 			let oldId = targetElem.id
 			let newId = `${iconId}_${suffix}`
 			targetElem.setAttribute(`id`, newId)
-			icon.querySelectorAll(`*`).forEach(updateUsingId)
+			iconSvg.querySelectorAll(`*`).forEach(updateUsingId)
 
 			function updateUsingId (elem) {
 				if (~elem.rawAttrs.search(`#${oldId}`)) {
@@ -77,31 +80,46 @@ export function stacksvg ({ output = `stack.svg`, separator = `_`, spacer = `-`
 			}
 		}
 
-		const attrs = icon._attrs
+		const attrs = iconSvg._attrs
 
 		for (let attrName in attrs) {
 			if (attrName.startsWith(`xmlns`)) {
-				const storedNs = namespaces[attrName]
-				const attrNs = attrs[attrName]
-
-				if (storedNs !== undefined) {
-					if (storedNs !== attrNs) {
-						fancyLog.info(`${attrName} namespace appeared multiple times with different value. Keeping the first one : "${storedNs}".\nEach namespace must be unique across files.`)
+				let nsId = attrs[attrName]
+				let oldNsAlias = attrName.slice(6)
+				let newNsAlias = oldNsAlias
+				if (namespaces.has(nsId)) {
+					if (namespaces.get(nsId) !== attrName) {
+						newNsAlias = namespaces.get(nsId).slice(6)
+						changeNsAlias(iconDom, oldNsAlias, newNsAlias)
 					}
+				} else if (nsId === xlink) {
+					newNsAlias = ``
+					changeNsAlias(iconDom, oldNsAlias, newNsAlias)
 				} else {
-					for (let nsName in namespaces) {
-						if (namespaces[nsName] === attrNs) {
-							fancyLog.info(`Same namespace value under different names : ${nsName} and ${attrName}.\nKeeping both.`)
+					for (let ns of namespaces.values()) {
+						if (ns === attrName) {
+							newNsAlias = `${oldNsAlias}${getHash(nsId)}`
+							changeNsAlias(iconDom, oldNsAlias, newNsAlias)
+							break
 						}
 					}
-					namespaces[attrName] = attrNs
+					iconDom.querySelectorAll(`*`).some((elem) => {
+						if (
+							elem.rawTagName.startsWith(`${newNsAlias}:`)
+							||
+							Object.keys(elem._attrs).some((attr) => attr.startsWith(`${newNsAlias}:`))
+						) {
+							namespaces.set(nsId, `xmlns:${newNsAlias}`)
+							return true
+						}
+					})
 				}
 
-				icon.removeAttribute(attrName)
+				iconSvg.removeAttribute(attrName)
 			}
 		}
 
-		rootSvg.appendChild(icon)
+		rootSvg.appendChild(iconSvg)
 		cb()
 	}
 
@@ -110,8 +128,8 @@ export function stacksvg ({ output = `stack.svg`, separator = `_`, spacer = `-`
 			return cb()
 		}
 
-		for (let nsName in namespaces) {
-			rootSvg.setAttribute(nsName, namespaces[nsName])
+		for (let [nsId, nsAttr] of namespaces) {
+			rootSvg.setAttribute(nsAttr, nsId)
 		}
 
 		output = output.endsWith(`.svg`) ? output : `${output}.svg`
@@ -127,3 +145,25 @@ export function stacksvg ({ output = `stack.svg`, separator = `_`, spacer = `-`
 
 	return stream
 }
+
+function changeNsAlias (elems, oldAlias, newAlias) {
+	elems.querySelectorAll(`*`).forEach((elem) => {
+		let prefix = newAlias === `` ? `` : `${newAlias}:`
+		if (elem.rawTagName.startsWith(`${oldAlias}:`)) {
+			elem.rawTagName = `${prefix}${elem.rawTagName.slice((oldAlias.length + 1))}`
+		}
+		for (let name of Object.keys(elem._attrs)) {
+			if (name.startsWith(`${oldAlias}:`)) {
+				elem.setAttribute(`${prefix}${name.slice((oldAlias.length + 1))}`, elem._attrs[name])
+				elem.removeAttribute(name)
+			}
+		}
+	})
+}
+
+function getHash (str) {
+	return createHmac(`sha1`, `xmlns`)
+		.update(str)
+		.digest(`hex`)
+		.slice(0, 7)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gulp-stacksvg",
-	"version": "1.0.6",
+	"version": "2.0.0",
 	"type": "module",
 	"description": "Combine svg files into one with stack method",
 	"main": "index.js",
@@ -29,19 +29,19 @@
 	},
 	"homepage": "https://github.com/firefoxic/gulp-stacksvg",
 	"dependencies": {
-		"fancy-log": "^2.0.0",
-		"node-html-parser": "^6.1.1",
-		"plugin-error": "^2.0.0",
+		"node-html-parser": "^6.1.4",
+		"plugin-error": "^2.0.1",
 		"vinyl": "^3.0.0"
 	},
 	"devDependencies": {
-		"eslint": "^8.26.0",
+		"eslint": "^8.30.0",
+		"fancy-log": "^2.0.0",
 		"finalhandler": "^1.2.0",
 		"gulp": "^4.0.2",
-		"mocha": "^10.1.0",
-		"puppeteer": "^19.2.0",
+		"mocha": "^10.2.0",
+		"puppeteer": "^19.4.1",
 		"serve-static": "^1.15.0",
-		"sinon": "^14.0.1"
+		"sinon": "^15.0.1"
 	},
 	"engines": {
 		"node": ">=16"