@litejs/dom 24.12.0 → 25.5.0

package/README.md

@@ -10,13 +10,13 @@
 LiteJS DOM – [![Coverage][1]][2] [![Size][3]][4] [![Buy Me A Tea][5]][6]
 ==========
 
-Dependency-free DOM library for handling HTML files on server-side.
+Dependency-free DOM library for handling HTML, XML and CSS files on server-side.
 
 
 ```javascript
-import { document, DOMParser, XMLSerializer } from "@litejs/dom";
-import { XMLHttpRequest } from "@litejs/dom/net.js";
 // const { document } = require("@litejs/dom");
+import { document, CSSStyleSheet, DOMParser, XMLSerializer } from "@litejs/dom";
+import { XMLHttpRequest } from "@litejs/dom/net.js";
 
 // Build DOM manually
 const el = document.createElement("h1");
@@ -27,13 +27,13 @@ const fragment = document.createDocumentFragment();
 fragment.appendChild(document.createTextNode("hello"));
 el.appendChild(fragment);
 
-// Replace the DOM tree with parsed HTML
+// Replace the DOM tree with HTML
 el.innerHTML = "<b>hello world</b>";
-el.toString();
+console.log(el.toString());
 // <h1 id="123" class="large"><b>hello world</b></h1>
 
-// minify output
-el.toString(true);
+// Minify HTML
+console.log(el.toString(true));
 // <h1 id=123 class=large><b>hello world</b></h1>
 
 el.querySelectorAll("b");
@@ -49,6 +49,12 @@ xhr.onload = function() {
 	console.log(doc.querySelector("title").textContent);
 }
 xhr.send();
+
+// Minify CSS
+const sheet = new CSSStyleSheet({ min: { color: true } })
+sheet.replaceSync(".a { color: hsl(0 0% 100%) }")
+console.log(sheet.toString())
+// .a{color:#fff}
 ```
 
 ## Contributing
@@ -57,7 +63,7 @@ Follow [Coding Style Guide](https://github.com/litejs/litejs/wiki/Style-Guide),
 run tests `npm install; npm test`.
 
 
-> Copyright (c) 2014-2024 Lauri Rooden &lt;lauri@rooden.ee&gt;  
+> Copyright (c) 2014-2025 Lauri Rooden &lt;lauri@rooden.ee&gt;  
 [MIT License](https://litejs.com/MIT-LICENSE.txt) |
 [GitHub repo](https://github.com/litejs/dom) |
 [npm package](https://npmjs.org/package/@litejs/dom) |

package/css.js

@@ -1,74 +1,162 @@
 
 /*! litejs.com/MIT-LICENSE.txt */
 
+"use strict"
+
+exports.selectorSplit = selectorSplit
 exports.CSSStyleDeclaration = CSSStyleDeclaration
 exports.CSSStyleSheet = CSSStyleSheet
 
-var clearFn = (_, q, str) => q ? (q == "\"" && str.indexOf("'") == -1 ? "'" + str + "'" : _) :
-	_.trim().replace(/[\t\n]/g, " ")
+var fs = require("fs")
+, path = require("path")
+, read = (sheet, url, enc = "utf8") => fs.readFileSync(path.resolve(sheet.min.root || "", sheet.baseURI, url).split(/[+#]/)[0], enc)
+, plugins = exports.plugins = {
+	"data-uri": function(sheet, v) {
+		var { DOMParser } = require("./dom.js")
+		return v.replace(urlRe, function(_, q1, q2, url) {
+			if (q1) return _
+			var frag = url.split("#").pop()
+			, ext = url.split(/[?#]/)[0].split(".").pop()
+			, enc = ext === "svg" ? "utf8" : "base64"
+			url = read(sheet, url, enc)
+			if (ext === "svg") {
+				url = new DOMParser().parseFromString(url, "application/xml")
+				if (frag && (frag = url.getElementById(frag))) {
+					frag.removeAttribute("id")
+					url.documentElement.childNodes = frag.tagName === "g" ? frag.childNodes : [ frag ]
+				}
+				url = url.toString(true).replace(/#/g, "%23")
+				enc = ""
+				ext += "+xml"
+			}
+			return "url('data:image/" + ext + ";" + enc + "," + url + "')"
+		})
+	}
+}
+, urlRe = /(["']).*?\1|url\((['"]?)(?!\/|data:|https?:)(.*?)\2\)/g
+, clearFn = (_, q, str, c) =>
+	q ? (q = str.indexOf("'") == -1 ? "'" : "\"", q + str.replace(q === "'" ? /\\(")/g : /\\(')/g, "$1")) + q :
+	c ? "" :
+	_.replace(/[\t\n]+/g, " ")
 	.replace(/ *([,;{}>~+\/]) */g, "$1")
-	.replace(/^ +|;(?=})/g, "")
+	.replace(/;(?=})/g, "")
 	.replace(/: +/g, ":")
-, clear = s => s.replace(/(["'])((?:\\\1|.)*?)\1|[^"']+/g, clearFn).replace(/url\(("|')([^'"()\s]+)\1\)/g, "url($2)")
+	.replace(/([ :,])0\.([0-9])/g, "$1.$2")
+, clear = s => s
+	.replace(/("|')((?:\\\1|[^\1])*?)\1|\s*(\/)\*(?:[^*]|\*(?!\/))*\*\/\s*|(?:[^"'\/]|\/(?!\*))+/g, clearFn)
+	.replace(/(["']).*?\1|url\(("|')([^'"()\s]+)\2\)/g, (m,q1,q2,u) => q1 ? m : "url(" + u + ")")
+, toRgb = {
+	rgb(r, g, b) {
+		var f = n => ((n | 0) + 256).toString(16).slice(1)
+		return f(r) + f(g) + f(b)
+	},
+	hsl(h, s, l) {
+		l /= 100
+		s /= 100 / (l < 0.5 ? l : 1 - l)
+		function f(n) {
+			n = (n + h / 30) % 12
+			return (0 | 256.5 + (255 * (l - s * (n < 2 || n > 10 ? -1 : n < 4 ? n - 3 : n > 8 ? 9 - n : 1)))).toString(16).slice(1)
+		}
+		return f(0) + f(8) + f(4)
+	}
+}
+, toRgba = (rgbHex, alpha) => ("rgba(" + rgbHex.replace(/../g, x => parseInt(x, 16)+",") + alpha + ")").replace("0.", ".")
+, colorRe = /\b(rgb|hsl)a?\s*\(\s*(\d+)(?:deg)?[\s,]+(\d+)[\s,%]+(\d+)%?(?:[\s,\/]+(0?\.?\d+)(%?))?\s*\)/g
+, colorFn = (_, name, a, b, c, d, p) => (_ = toRgb[name](a, b, c), (p ? d/=100 : d) < 1 ? toRgba(_, d) : "#" + _.replace(/(\w)\1(\w)\2(\w)\3/, "$1$2$3"))
 , styleHandler = {
 	get(style, prop) {
 		if (prop === "cssText") {
+			var min = style.parentRule && style.parentRule.parentStyleSheet.min
 			for (var out = [], i = style.length; i--; ) {
-				out[i] = style[i] + ":" + (style.__[i] || style[style[i]])
+				out[i] = joinProp(style[i], style.__[i] || style[style[i]])
 			}
 			return out.join(";")
 		}
 		return style[prop] || ""
+		function joinProp(name, value) {
+			if (min && min.color) value = value.replace(colorRe, colorFn)
+			return name + ":" + value
+		}
 	},
 	set(style, prop, val) {
 		if (prop === "cssText") {
 			var m, k
-			, re = /(?:^|;)\s*([-a-z]+)\s*:((?:("|')(?:\\.|(?!\3)[^\\])*?\3|[^"';])+)(?=;|$)/ig
+			, sheet = style.parentRule && style.parentRule.parentStyleSheet
+			, min = sheet && sheet.min
+			, re = /([*_]?[-a-z]+)\s*:((?:("|')(?:\\.|(?!\3)[^\\])*?\3|[^"';])+)|\/\*!?((?:[^*]|\*(?!\/))*)\*\//ig
 			, len = 0
 			, lastIdx = {}
 			for (; (m = re.exec(val)); ) {
-				k = m[1]
-				if (lastIdx[k] >= 0) style.__[lastIdx[k]] = style[k]
-				style[style[lastIdx[k] = len++] = k] = style[
-					k === "float" ? "cssFloat" : k.replace(/-([a-z])/g, (_, a) => a.toUpperCase())
-				] = clear(m[2])
+				if (m[4]) {
+					if (min && len && plugins[m[4] = m[4].trim()]) style[k = style[len - 1]] = clear(plugins[m[4]](sheet, style[k]))
+					continue
+				} else {
+					k = m[1]
+					if (lastIdx[k] >= 0) style.__[lastIdx[k]] = style[k]
+					style[style[lastIdx[k] = len++] = k] = style[
+						k === "float" ? "cssFloat" : k.replace(/-([a-z])/g, (_, a) => a.toUpperCase())
+					] = clear(m[2]).trim()
+				}
 			}
 			style.length = len
 		} else {
 			if (!style[prop]) style[style.length++] = prop
 			style[prop] = style[prop === "cssFloat" ? "float" : prop.replace(/[A-Z]/g, "-$&").toLowerCase()] = clear(val)
 		}
+		return true
 	}
 }
 , ruleTypes = {
 	style: {
+		type: 1,
 		get cssText() {
 			return this.style.length > 0 ? this.selectorText + "{" + this.style.cssText + "}" : ""
 		},
 		set cssText(text) {
 			var idx = text.indexOf("{")
-			this.selectorText = text.slice(0, idx).trim()
+			this.selectorText = clear(text.slice(0, idx).trim())
 			this.style = CSSStyleDeclaration(text.slice(idx + 1).replace(/}\s*/, ""), this)
 		}
 	},
 	import: {
 		get cssText() {
-			return clear(this.text)
+			var sheet = this.parentStyleSheet
+			, min = sheet.min
+			, text = this.text
+			, urlFn = (m,q1,q2,u) => q1 ? m : "url('" + path.join(text.baseURI, u) + "')"
+			if (min && min.import) {
+				text = new CSSStyleSheet({
+					parentStyleSheet: sheet,
+					href: this.href,
+					min
+				}, read(sheet, this.href))
+				if (sheet.baseURI !== text.baseURI) {
+					text.rules.forEach(rule => {
+						if (rule.type === 1) for (let style = rule.style, i = style.length; i--; ) {
+							if (urlRe.test(style[style[i]])) style[style[i]] = style[style[i]].replace(urlRe, urlFn)
+						}
+					})
+				}
+				text += ""
+			}
+			return text
 		},
 		set cssText(text) {
-			this.text = clear(text)
+			this.href = text.split(/['"()]+/)[1]
+			this.text = clear(text.replace(/url\(("|')(.+?)\1\)/g, "'$2'"))
 		}
 	},
 	"}": {
 		get cssText() {
-			var body = "" + this.style
-			return body.length > 0 ? this.mediaText + "{\n" + body + "\n}" : ""
+			var style = new CSSStyleSheet({})
+			style.replaceSync(this.text)
+			var body = "" + style
+			return body.length > 0 ? this.mediaText + "{" + body + "}" : ""
 		},
 		set cssText(text) {
 			var idx = text.indexOf("{")
 			this.mediaText = clear(text.slice(0, idx).trim())
-			this.style = new CSSStyleSheet({})
-			this.style.replaceSync(text.slice(idx + 1, -1))
+			this.text = text.slice(idx + 1, -1)
 		}
 	},
 	";": {
@@ -83,12 +171,12 @@ var clearFn = (_, q, str) => q ? (q == "\"" && str.indexOf("'") == -1 ? "'" + st
 
 function CSSRule(text, parentStyleSheet, atType, parentRule = null) {
 	// Clear comments and trim
-	text = text.replace(/^\s+|\/\*[^*]*\*+([^/*][^*]*\*+)*\/|\s+$/g, "")
+	text = text.trim()
 	var type = text[0] === "@" && text.slice(1, text.indexOf(" ")) || "style"
-	, rule = Object.create(ruleTypes[type] || ruleTypes[type === "font-face" || type === "counter-style" ? "style" : atType])
-	rule.cssText = text
+	, rule = Object.create(ruleTypes[type] || ruleTypes[type === "page" || type === "font-face" || type === "counter-style" ? "style" : atType])
 	rule.parentStyleSheet = parentStyleSheet
 	rule.parentRule = parentRule
+	rule.cssText = rule.type === 1 ? text : text.replace(/\/\*(?:[^*]|\*(?!\/))*\*\//g, "")
 	return rule
 }
 
@@ -98,12 +186,21 @@ function CSSStyleDeclaration(text, parentRule = null) {
 	return style
 }
 
-function CSSStyleSheet(opts) {
+function CSSStyleSheet(opts, text = "") {
 	Object.assign(this, opts)
-	this.replaceSync(this.ownerNode ? this.ownerNode.textContent : "")
+	if (opts && opts.href) {
+		this.baseURI = path.join(
+			(opts.parentStyleSheet || opts.ownerNode && opts.ownerNode.ownerDocument).baseURI || "",
+			opts.href,
+			".."
+		)
+	}
+	this.replaceSync(text)
 }
 
 CSSStyleSheet.prototype = {
+	baseURI: "",
+	root: "",
 	disabled: false,
 	type: "text/css",
 	deleteRule(idx) {
@@ -113,24 +210,61 @@ CSSStyleSheet.prototype = {
 		this.rules.splice(idx > -1 ? idx : this.rules.length, 0, CSSRule(rule, this))
 	},
 	replaceSync(text) {
-		var m
-		, sheet = this
-		, re = /((?:("|')(?:\\.|(?!\2)[^\\])*?\2|[^"'}{;])+)|./ig
-		, block = 0
-		, pos = 0
+		var qpos, sheet = this
 		sheet.rules = sheet.cssRules = []
 		sheet.warnings = []
-		for (; (m = re.exec(text)); ) {
-			if (m[0] === "{") {
-				block++
-			} else if (m[0] === ";" && block === 0 || m[0] === "}" && --block < 1) {
-				sheet.rules.push(CSSRule(text.slice(pos, pos = re.lastIndex), sheet, m[0]))
+		for (var char, inQuote, depth = 0, start = 0, pos = 0, len = text.length; pos < len; pos++) {
+			char = text[pos]
+			if (char === "\\" && inQuote !== "/") {
+				pos++
+			} else if (inQuote) {
+				if (char === inQuote) {
+					if (char !== "/" || text[pos - 1] === "*") {
+						if (char === "/" && depth < 1) {
+							// Remove root level comments
+							text = text.slice(0, qpos) + text.slice(pos + 1)
+							pos = qpos - 1
+							len = text.length
+						}
+						inQuote = ""
+					}
+				}
+			} else if (char === "'" || char === "\"" || char === "/" && text[pos+1] === "*") {
+				inQuote = char
+				qpos = pos
+			} else if (char === "{") {
+				depth++
+			} else if (char === "}" && --depth < 1 || char === ";" && depth < 1) {
+				if (depth < 0) throw "Invalid css"
+				sheet.rules.push(CSSRule(text.slice(start, start = pos + 1), sheet, char))
 			}
 		}
 	},
-	toString() {
+	toString(min) {
+		if (min) this.min = min
 		return this.rules.map(rule => rule.cssText).filter(Boolean).join("\n")
 	}
 }
 
+function selectorSplit(text) {
+	for (var char, inQuote, depth = 0, start = 0, pos = 0, len = text.length, out = []; pos < len; ) {
+		char = text[pos++]
+		if (char === "\\") {
+			pos++
+		} else if (inQuote) {
+			if (char === inQuote) inQuote = ""
+		} else if (char === "'" || char === "\"") {
+			inQuote = char
+		} else if (char === "(" || char === "[") {
+			depth++
+		} else if (char === ")" || char === "]") {
+			depth--
+		} else if (char === "," && depth === 0) {
+			out.push(text.slice(start, (start = pos) - 1).trim())
+		}
+	}
+	out.push(text.slice(start).trim())
+	return out
+}
+
 

package/dom.js

@@ -1,6 +1,8 @@
 
 /*! litejs.com/MIT-LICENSE.txt */
 
+"use strict"
+
 var boolAttrs = {
 	async:1, autoplay:1, loop:1, checked:1, defer:1, disabled:1, muted:1, multiple:1, nomodule:1, playsinline:1, readonly:1, required:1, selected:1
 }
@@ -13,10 +15,13 @@ var boolAttrs = {
 , voidElements = {
 	AREA:1, BASE:1, BR:1, COL:1, EMBED:1, HR:1, IMG:1, INPUT:1, KEYGEN:1, LINK:1, MENUITEM:1, META:1, PARAM:1, SOURCE:1, TRACK:1, WBR:1
 }
+, svgVoidElements = {
+	circle:1, ellipse:1, image:1, line:1, path:1, polygon:1, polyline:1, rect:1, stop:1, use:1,
+}
 , rawTextElements = { SCRIPT: /<(?=\/script)/i, STYLE: /<(?=\/style)/i }
 , rawTextEscape = { SCRIPT: /<(?=\/script|!--)/ig, STYLE: /<(?=\/style|!--)/ig }
 , hasOwn = voidElements.hasOwnProperty
-, { CSSStyleDeclaration, CSSStyleSheet } = require("./css.js")
+, { selectorSplit, CSSStyleDeclaration, CSSStyleSheet } = require("./css.js")
 , selector = require("./selector.js")
 , Node = {
 	ELEMENT_NODE:                1,
@@ -41,9 +46,12 @@ var boolAttrs = {
 	},
 	set textContent(text) {
 		if (this.nodeType === 3 || this.nodeType === 8) this.data = text
-		else replaceChildren.call(this, this.ownerDocument.createTextNode(
-			rawTextEscape[this.tagName] ? text.replace(rawTextEscape[this.tagName], "<\\") : text
-		))
+		else {
+			removeChilds(this)
+			this.appendChild(this.ownerDocument.createTextNode(
+				rawTextEscape[this.tagName] ? text.replace(rawTextEscape[this.tagName], "<\\") : text
+			))
+		}
 	},
 	get firstChild() {
 		return this.childNodes && this.childNodes[0] || null
@@ -69,6 +77,7 @@ var boolAttrs = {
 		, attrRe = /([^=\s]+)(?:\s*=\s*(("|')((?:\\\3|[\s\S])*?)\3|[^\s"'`=<>]+)|)/g
 		, frag = doc.createDocumentFragment()
 		, tree = frag
+		, voidEl = doc.documentElement.tagName === "svg" ? svgVoidElements : voidElements
 
 		for (; (m = tagRe.exec(html)); ) {
 			if (m[4]) {
@@ -83,7 +92,7 @@ var boolAttrs = {
 					for (text = ""; (m = tagRe.exec(html)) && !re.test(m[0]); text += m[3] || m[0]);
 					child.textContent = text.replace(unescRe, unescFn)
 					if (!m) break
-				} else if (!voidElements[child.tagName] && !m[8]) tree = child
+				} else if (!voidEl[child.tagName] && !m[8]) tree = child
 			} else {
 				tree.appendChild(
 					m[2] ? doc.createComment(m[2].replace(unescRe, unescFn)) :
@@ -92,7 +101,8 @@ var boolAttrs = {
 				)
 			}
 		}
-		replaceChildren.call(node, frag)
+		removeChilds(node)
+		node.appendChild(frag)
 
 		function setAttr(_, name, value, q, qvalue) {
 			child.setAttribute(name, (q ? qvalue : value || "").replace(unescRe, unescFn))
@@ -107,10 +117,7 @@ var boolAttrs = {
 		this.parentNode.replaceChild(frag, this)
 	},
 	get sheet() {
-		if (this.tagName === "STYLE" || this.tagName === "LINK" && this.rel === "stylesheet" && this.href) return new CSSStyleSheet({
-			href: this.href,
-			ownerNode: this
-		})
+		return makeSheet(this)
 	},
 	get style() {
 		return this._style || (this._style = CSSStyleDeclaration(this.getAttribute("style") || ""))
@@ -118,6 +125,21 @@ var boolAttrs = {
 	set style(value) {
 		this.style.cssText = value
 	},
+	appendChild(el) {
+		return this.insertBefore(el)
+	},
+	cloneNode(deep) {
+		var node = this
+		, clone = new node.constructor(node.tagName || node.data)
+		clone.ownerDocument = node.ownerDocument
+
+		mergeAttributes(node, clone)
+
+		if (deep && node.hasChildNodes()) {
+			node.childNodes.forEach(child => clone.appendChild(child.cloneNode(deep)))
+		}
+		return clone
+	},
 	contains(el) {
 		for (; el; el = el.parentNode) if (el === this) return true
 		return false
@@ -125,12 +147,6 @@ var boolAttrs = {
 	hasChildNodes() {
 		return !!this.firstChild
 	},
-	getElementById(id) {
-		return selector.find(this, "#" + id, 1)
-	},
-	appendChild(el) {
-		return this.insertBefore(el)
-	},
 	insertBefore(el, ref) {
 		var node = this
 		, childs = node.childNodes
@@ -163,20 +179,6 @@ var boolAttrs = {
 		this.insertBefore(el, ref)
 		return this.removeChild(ref)
 	},
-	cloneNode(deep) {
-		var node = this
-		, clone = new node.constructor(node.tagName || node.data)
-		clone.ownerDocument = node.ownerDocument
-
-		if (node.attributes) {
-			node.attributes.names().forEach(attr => clone.setAttribute(attr, node.getAttribute(attr)))
-		}
-
-		if (deep && node.hasChildNodes()) {
-			node.childNodes.forEach(child => clone.appendChild(child.cloneNode(deep)))
-		}
-		return clone
-	},
 	querySelector(sel) {
 		return selector.find(this, sel, 1)
 	},
@@ -185,7 +187,7 @@ var boolAttrs = {
 	},
 	toString(min) {
 		return rawTextElements[this.tagName] ? (
-			this.tagName === "STYLE" && (min === true || min && min.css) ? "\n" + this.sheet.toString(min.css || true) + "\n" :
+			this.tagName === "STYLE" && (min === true || min && min.css) ? "\n" + makeSheet(this, min.css || true) + "\n" :
 			this.textContent
 		) : this.childNodes.map(node => node.toString(min)).join("")
 	}
@@ -203,7 +205,10 @@ var boolAttrs = {
 	get previousElementSibling() {
 		return getSibling(this, -1, 1)
 	},
-	replaceChildren: replaceChildren,
+	replaceChildren() {
+		removeChilds(this)
+		for (var i = 0, l = arguments.length; i < l; ) this.insertBefore(arguments[i++])
+	},
 	hasAttribute(name) {
 		return this.attributes.getNamedItem(name) != null
 	},
@@ -236,18 +241,18 @@ var boolAttrs = {
 	"&sect;": "§", "&sup2;": "²", "&sup3;": "³", "&yen;": "¥"
 }
 
-Object.keys(boolAttrs).forEach(addGetter, { isBool: true, readonly: "readOnly" })
-numAttrs.split(" ").forEach(addGetter, { isNum: true })
-strAttrs.split(" ").forEach(addGetter, { "for": "htmlFor", "class": "className" })
+Object.keys(boolAttrs).forEach(key => addGetter(key, { isBool: true, readonly: "readOnly" }))
+numAttrs.split(" ").forEach(key => addGetter(key, { isNum: true }))
+strAttrs.split(" ").forEach(key => addGetter(key, { "for": "htmlFor", "class": "className" }))
 
-function addGetter(key) {
+function addGetter(key, opts) {
 	var attr = key.toLowerCase()
-	Object.defineProperty(Element, this[key] || key, {
+	Object.defineProperty(Element, opts[key] || key, {
 		configurable: true,
 		enumerable: true,
 		get: (
-			this.isBool ? function() { return this.hasAttribute(attr) } :
-			this.isNum ? function() { return +this.getAttribute(attr) || 0 } :
+			opts.isBool ? function() { return this.hasAttribute(attr) } :
+			opts.isNum ? function() { return +this.getAttribute(attr) || 0 } :
 			function() { return this.getAttribute(attr) || "" }
 		),
 		set(value) {
@@ -264,7 +269,7 @@ function addGetter(key) {
 
 function Attr(node, name, value) {
 	this.ownerElement = node
-	this.name = name.toLowerCase()
+	this.name = name
 	this.value = "" + value
 }
 
@@ -296,8 +301,7 @@ NamedNodeMap.prototype = {
 	},
 	setNamedItem(attr) {
 		var oldAttr = this.getNamedItem(attr.name)
-		if (attr.name === "style") attr.value = CSSStyleDeclaration(attr.value).cssText
-		this[attr.name] = attr
+		this[attr.name.toLowerCase()] = attr
 		return oldAttr
 	},
 	toString(minify) {
@@ -305,6 +309,7 @@ NamedNodeMap.prototype = {
 		, tagName = map.ownerElement.tagName
 		, isXml = map.ownerElement.ownerDocument.contentType === "application/xml"
 		return map.names().map(loName => {
+			if (loName === "style" && minify && map.ownerElement.style) { /* Access to style makes _style */ }
 			var attr = map.getNamedItem(loName)
 			, name = attr.name
 			, value = attr.value.replace(escRe, escFn)
@@ -316,6 +321,7 @@ NamedNodeMap.prototype = {
 					if (!quotedAttrRe.test(value)) return name + "=" + value
 					if (value.split("\"").length > value.split("'").length) return name + "='" + value.replace(/'/g, "&#39;") + "'"
 				}
+				name = loName
 			}
 			return name + "=\"" + value.replace(/"/g, "&quot;") + "\""
 		}).filter(Boolean).join(" ")
@@ -340,20 +346,29 @@ function HTMLElement(tag) {
 }
 
 extendNode(HTMLElement, Element, {
+	localName: null,
+	namespaceURI: "http://www.w3.org/1999/xhtml",
 	nodeType: 1,
-	matches(sel) {
-		return selector.matches(this, sel)
+	tagName: null,
+	blur() {
+		this.ownerDocument.activeElement = null
 	},
 	closest(sel) {
 		return selector.closest(this, sel)
 	},
-	namespaceURI: "http://www.w3.org/1999/xhtml",
-	localName: null,
-	tagName: null,
+	focus() {
+		this.ownerDocument.activeElement = this
+	},
+	matches(sel) {
+		return selector.matches(this, sel)
+	},
 	toString(minify) {
 		var attrs = this.attributes.toString(minify)
-		return "<" + this.localName + (attrs ? " " + attrs + (attrs.slice(-1) === "/" ? " >" : ">") : ">") +
-		(voidElements[this.tagName] ? "" : Node.toString.call(this, minify) + "</" + this.localName + ">")
+		, isXml = this.ownerDocument.contentType === "application/xml"
+		, voidEl = this.ownerDocument.documentElement.tagName === "svg" ? svgVoidElements : voidElements
+		return "<" + this.localName +
+			(attrs ? " " + (attrs.slice(-1) === "/" ? attrs + " " : attrs) : "") +
+			(voidEl[this.tagName] ? (isXml ? "/>" : ">") : ">" + Node.toString.call(this, minify) + "</" + this.localName + ">")
 	}
 })
 
@@ -434,7 +449,10 @@ extendNode(Document, Element, {
 	createTextNode: own(Text),
 	createComment: own(Comment),
 	createDocumentType: own(DocumentType), //Should be document.implementation.createDocumentType(name, publicId, systemId)
-	createDocumentFragment: own(DocumentFragment)
+	createDocumentFragment: own(DocumentFragment),
+	getElementById(id) {
+		return selector.find(this, "#" + id, 1)
+	}
 })
 
 function DOMParser() {}
@@ -468,9 +486,9 @@ function extendNode(obj, extras) {
 	obj.prototype.constructor = obj
 }
 
-function replaceChildren() {
-	for (var arr = this.childNodes, i = 0, l = arr.length; i < l; ) arr[i++].parentNode = null
-	for (i = arr.length = 0, l = arguments.length; i < l; ) this.insertBefore(arguments[i++])
+function removeChilds(node) {
+	node.childNodes.forEach(child => child.parentNode = null)
+	node.childNodes.length = 0
 }
 
 function getElement(childs, index, step, type) {
@@ -486,8 +504,26 @@ function getSibling(node, step, type) {
 	return type > 0 ? getElement(silbings, index + step, step, type) : silbings && silbings[index + step] || null
 }
 
+function makeSheet(el, min) {
+	if (el.tagName === "STYLE" || el.tagName === "LINK" && el.rel === "stylesheet" && el.href) return new CSSStyleSheet({
+		href: el.href,
+		ownerNode: el,
+		min
+	}, el.tagName === "STYLE" && el.textContent)
+}
+
+function mergeAttributes(source, target) {
+	if (source && target && source.attributes) {
+		source.attributes.names().forEach(attr => target.setAttribute(attr, source.getAttribute(attr)))
+	}
+}
+
 exports.document = new Document()
 exports.entities = entities
+exports.mergeAttributes = mergeAttributes
+exports.selectorSplit = selectorSplit
+exports.CSSStyleDeclaration = CSSStyleDeclaration
+exports.CSSStyleSheet = CSSStyleSheet
 exports.DOMParser = DOMParser
 exports.Document = Document
 exports.DocumentFragment = DocumentFragment

package/net.js

@@ -1,6 +1,8 @@
 
 /*! litejs.com/MIT-LICENSE.txt */
 
+"use strict"
+
 var DOM = require(".")
 , URL = require("url").URL
 , parser = new DOM.DOMParser()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litejs/dom",
-  "version": "24.12.0",
+  "version": "25.5.0",
   "description": "A small DOM library for server-side testing, rendering, and handling of HTML files",
   "license": "MIT",
   "author": "Lauri Rooden <lauri@rooden.ee>",
@@ -20,11 +20,10 @@
     "*.js"
   ],
   "scripts": {
-    "lint": "npx jshint -c .github/jshint.json *.js",
-    "test": "lj t test/*.js"
+    "test": "lj t"
   },
   "repository": "github:litejs/dom",
   "devDependencies": {
-    "@litejs/cli": "24.10.0"
+    "@litejs/cli": "25.1.0"
   }
 }

package/selector.js

@@ -1,7 +1,7 @@
 
-
 /*! litejs.com/MIT-LICENSE.txt */
 
+"use strict"
 
 !function(exports) {
 	var selectorCache = {

package/interactive.js

@@ -1,18 +0,0 @@
-
-
-/*! litejs.com/MIT-LICENSE.txt */
-
-
-var DOM = module.exports = require(".")
-, HTMLElementExtra = {
-	focus() {
-		this.ownerDocument.activeElement = this
-	},
-	blur() {
-		this.ownerDocument.activeElement = null
-	}
-}
-
-Object.assign(DOM.HTMLElement.prototype, HTMLElementExtra)
-
-