@litejs/dom 24.8.0 → 25.1.0

package/README.md

@@ -10,16 +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.  
-[DOM spec](https://dom.spec.whatwg.org/) |
-[Selectors Level 3](http://www.w3.org/TR/selectors/)
+Dependency-free DOM library for handling HTML and CSS files on server-side.
 
 
-Examples
---------
-
 ```javascript
-const { document, DOMParser, XMLSerializer } = require("@litejs/dom");
+// 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");
@@ -30,29 +27,34 @@ 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");
 // [ "<b>hello world</b>" ]
 
 // Use XMLHttpRequest in server side
-const { XMLHttpRequest } = require("@litejs/dom/net.js");
 const xhr = new XMLHttpRequest();
 xhr.open("GET", "https://litejs.com");
 xhr.responseType = "document";
 xhr.onload = function() {
-	const document = xhr.responseXML;
+	const doc = xhr.responseXML;
 	// Work with DOM in familiar way
-	console.log(document.querySelector("title").textContent);
+	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
@@ -61,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,32 +1,262 @@
 
 /*! litejs.com/MIT-LICENSE.txt */
 
+exports.selectorSplit = selectorSplit
 exports.CSSStyleDeclaration = CSSStyleDeclaration
+exports.CSSStyleSheet = CSSStyleSheet
 
-// CSSStyleDeclaration is a single CSS declaration block,
-// accessible via HTMLElement.style for inline styles, document.styleSheets[0].cssRules[0].style, and getComputedStyle()
-function CSSStyleDeclaration(style) {
-	this.cssText = style
+var fs = require("fs")
+, path = require("path")
+, 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(/([ :,])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 + ")")
+, read = (sheet, url, enc = "utf8") => fs.readFileSync(path.resolve(sheet.min.root || "", sheet.baseURI, url), enc)
+, 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)
+	}
 }
-
-CSSStyleDeclaration.prototype = {
-	get cssText() {
-		return Object.keys(this).map(function(key) {
-			return (key === "cssFloat" ? "float:" : hyphenCase(key) + ":") + this[key]
-		}, this).join(";")
+, 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] = 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
+			, 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)); ) {
+				if (m[4]) {
+					if (min && len) style[k = style[len - 1]] = clear(transformValue(m[4].trim(), 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)
+		}
+		function transformValue(cmd, v) {
+			var { DOMParser } = require("./dom.js")
+			if (cmd === "data-uri") {
+				return v.replace(urlRe, function(_, q1, q2, url) {
+					if (q1) return _
+					var ext = url.split(".").pop()
+					, enc = ext === "svg" ? "utf8" : "base64"
+					url = read(sheet, url, enc)
+					if (ext === "svg") {
+						enc = ""
+						ext += "+xml"
+						url = new DOMParser().parseFromString(url, "application/xml").toString(true).replace(/#/g, "%23")
+					}
+					return "url('data:image/" + ext + ";" + enc + "," + url + "')"
+				})
+			}
+			return v
+		}
+	}
+}
+, 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 = clear(text.slice(0, idx).trim())
+			this.style = CSSStyleDeclaration(text.slice(idx + 1).replace(/}\s*/, ""), this)
+		}
+	},
+	import: {
+		get cssText() {
+			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.href = text.split(/['"()]+/)[1]
+			this.text = clear(text.replace(/url\(("|')(.+?)\1\)/g, "'$2'"))
+		}
+	},
+	"}": {
+		get cssText() {
+			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.text = text.slice(idx + 1, -1)
+		}
 	},
-	set cssText(style) {
-		for (var m, re = /(?:^|;)\s*([-a-z]+)\s*:((?:("|')(?:\\.|(?!\3)[^\\])*?\3|[^"';])+)(?=;|$)/ig; (m = re.exec(style)); ) {
-			this[m[1] === "float" ? "cssFloat" : camelCase(m[1])] = m[2].trim()
+	";": {
+		get cssText() {
+			return clear(this.text)
+		},
+		set cssText(text) {
+			this.text = clear(text)
 		}
 	}
 }
 
-function camelCase(str) {
-	return str.replace(/-([a-z])/g, function(_, a) { return a.toUpperCase() })
+function CSSRule(text, parentStyleSheet, atType, parentRule = null) {
+	// Clear comments and trim
+	text = text.trim()
+	var type = text[0] === "@" && text.slice(1, text.indexOf(" ")) || "style"
+	, 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
 }
 
-function hyphenCase(str) {
-	return str.replace(/[A-Z]/g, "-$&").toLowerCase()
+function CSSStyleDeclaration(text, parentRule = null) {
+	var style = new Proxy({__: {}, parentRule}, styleHandler)
+	style.cssText = text
+	return style
 }
 
+function CSSStyleSheet(opts, text = "") {
+	Object.assign(this, opts)
+	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) {
+		this.rules.splice(idx, 1)
+	},
+	insertRule(rule, idx) {
+		this.rules.splice(idx > -1 ? idx : this.rules.length, 0, CSSRule(rule, this))
+	},
+	replaceSync(text) {
+		var qpos, sheet = this
+		sheet.rules = sheet.cssRules = []
+		sheet.warnings = []
+		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(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

@@ -5,7 +5,7 @@ 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
 }
 , numAttrs = "height maxLength minLength size tabIndex width"
-, strAttrs = "accept accesskey autocapitalize autofocus capture class contenteditable crossorigin dir for hidden href id integrity lang name nonce slot spellcheck src title type translate"
+, strAttrs = "accept accesskey autocapitalize autofocus capture class contenteditable crossorigin dir for hidden href id integrity lang name nonce rel slot spellcheck src title type translate"
 , defaultAttrs = {
 	"form method get":1, "input type text":1,
 	"script type text/javascript":1, "style type text/css":1
@@ -13,10 +13,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 = require("./css.js").CSSStyleDeclaration
+, { selectorSplit, CSSStyleDeclaration, CSSStyleSheet } = require("./css.js")
 , selector = require("./selector.js")
 , Node = {
 	ELEMENT_NODE:                1,
@@ -37,9 +40,7 @@ var boolAttrs = {
 		if (this.nodeType === 3 || this.nodeType === 8) this.data = text
 	},
 	get textContent() {
-		return this.nodeType === 3 || this.nodeType === 8 ? this.data : this.childNodes.map(function(child) {
-			return child.textContent
-		}).join("")
+		return this.nodeType === 3 || this.nodeType === 8 ? this.data : this.childNodes.map(node => node.textContent).join("")
 	},
 	set textContent(text) {
 		if (this.nodeType === 3 || this.nodeType === 8) this.data = text
@@ -71,6 +72,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]) {
@@ -85,7 +87,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)) :
@@ -108,26 +110,29 @@ var boolAttrs = {
 		frag.innerHTML = html
 		this.parentNode.replaceChild(frag, this)
 	},
+	get sheet() {
+		return makeSheet(this)
+	},
 	get style() {
-		return this._style || (this._style = new CSSStyleDeclaration(this.getAttribute("style") || ""))
+		return this._style || (this._style = CSSStyleDeclaration(this.getAttribute("style") || ""))
 	},
 	set style(value) {
 		this.style.cssText = value
 	},
-	contains: function (el) {
+	contains(el) {
 		for (; el; el = el.parentNode) if (el === this) return true
 		return false
 	},
-	hasChildNodes: function() {
-		return this.childNodes && this.childNodes.length > 0
+	hasChildNodes() {
+		return !!this.firstChild
 	},
-	getElementById: function(id) {
+	getElementById(id) {
 		return selector.find(this, "#" + id, 1)
 	},
-	appendChild: function(el) {
+	appendChild(el) {
 		return this.insertBefore(el)
 	},
-	insertBefore: function(el, ref) {
+	insertBefore(el, ref) {
 		var node = this
 		, childs = node.childNodes
 
@@ -146,7 +151,7 @@ var boolAttrs = {
 		}
 		return el
 	},
-	removeChild: function(el) {
+	removeChild(el) {
 		var node = this
 		, index = node.childNodes.indexOf(el)
 		if (index === -1) throw Error("NOT_FOUND_ERR")
@@ -155,38 +160,33 @@ var boolAttrs = {
 		el.parentNode = null
 		return el
 	},
-	replaceChild: function(el, ref) {
+	replaceChild(el, ref) {
 		this.insertBefore(el, ref)
 		return this.removeChild(ref)
 	},
-	cloneNode: function(deep) {
+	cloneNode(deep) {
 		var node = this
 		, clone = new node.constructor(node.tagName || node.data)
 		clone.ownerDocument = node.ownerDocument
 
-		if (node.attributes) {
-			node.attributes.names().forEach(function(attr) {
-				clone.setAttribute(attr, node.getAttribute(attr))
-			})
-		}
+		mergeAttributes(node, clone)
 
 		if (deep && node.hasChildNodes()) {
-			node.childNodes.forEach(function(child) {
-				clone.appendChild(child.cloneNode(deep))
-			})
+			node.childNodes.forEach(child => clone.appendChild(child.cloneNode(deep)))
 		}
 		return clone
 	},
-	querySelector: function(sel) {
+	querySelector(sel) {
 		return selector.find(this, sel, 1)
 	},
-	querySelectorAll: function(sel) {
+	querySelectorAll(sel) {
 		return selector.find(this, sel)
 	},
-	toString: function(minify) {
-		return rawTextElements[this.tagName] ? this.textContent : this.childNodes.reduce(function(memo, node) {
-			return memo + node.toString(minify)
-		}, "")
+	toString(min) {
+		return rawTextElements[this.tagName] ? (
+			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("")
 	}
 }
 , Element = {
@@ -203,29 +203,31 @@ var boolAttrs = {
 		return getSibling(this, -1, 1)
 	},
 	replaceChildren: replaceChildren,
-	hasAttribute: function(name) {
+	hasAttribute(name) {
 		return this.attributes.getNamedItem(name) != null
 	},
-	getAttribute: function(name) {
+	getAttribute(name) {
 		var attr = this.attributes.getNamedItem(name)
 		return attr ? attr.value : null
 	},
-	setAttribute: function(name, value) {
+	setAttribute(name, value) {
 		this.attributes.setNamedItem(new Attr(this, name, value))
 	},
-	removeAttribute: function(name) {
+	removeAttribute(name) {
 		this.attributes.removeNamedItem(name)
 	},
-	getElementsByTagName: function(tag) {
+	getElementsByTagName(tag) {
 		return selector.find(this, tag)
 	},
-	getElementsByClassName: function(sel) {
+	getElementsByClassName(sel) {
 		return selector.find(this, "." + sel.replace(/\s+/g, "."))
 	}
 }
 , quotedAttrRe = /[\s"'`=<>]/
 , escRe = /<|&(?=[a-z#])/gi
+, escFn = chr => chr === "<" ? "&lt;" : "&amp;"
 , unescRe = /&[a-z]{1,31};?|&#(x|)([\da-f]+);/ig
+, unescFn = (ent, hex, num) => num ? String.fromCharCode(parseInt(num, hex === "" ? 10 : 16)) : entities[ent] || ent
 , entities = {
 	"&amp;": "&", "&apos;": "'", "&cent;": "¢", "&copy;": "©", "&curren;": "¤",
 	"&deg;": "°", "&euro;": "€", "&gt;": ">", "&lt;": "<", "&nbsp;": " ",
@@ -247,20 +249,12 @@ function addGetter(key) {
 			this.isNum ? function() { return +this.getAttribute(attr) || 0 } :
 			function() { return this.getAttribute(attr) || "" }
 		),
-		set: function(value) {
+		set(value) {
 			this.setAttribute(attr, value)
 		}
 	})
 }
 
-function escFn(chr) {
-	return chr === "<" ? "&lt;" : "&amp;"
-}
-
-function unescFn(ent, hex, num) {
-	return num ? String.fromCharCode(parseInt(num, hex === "" ? 10 : 16)) : entities[ent] || ent
-}
-
 ;["hasAttribute", "getAttribute", "setAttribute", "removeAttribute"].forEach(function(name) {
 	Element[name + "NS"] = function(ns, a, b) {
 		return this[name].call(this, a, b)
@@ -274,16 +268,16 @@ function Attr(node, name, value) {
 }
 
 function NamedNodeMap(node) {
-	Object.defineProperty(this, "length", { get: function() { return this.names().length } })
+	Object.defineProperty(this, "length", { get() { return this.names().length } })
 	Object.defineProperty(this, "ownerElement", { value: node })
 }
 
 NamedNodeMap.prototype = {
-	names: function() {
+	names() {
 		this.getNamedItem("style")
 		return Object.keys(this)
 	},
-	getNamedItem: function(name) {
+	getNamedItem(name) {
 		var loName = name.toLowerCase()
 		, attr = this[loName] || null
 		if (loName === "style" && this.ownerElement._style) {
@@ -292,24 +286,24 @@ NamedNodeMap.prototype = {
 		}
 		return attr
 	},
-	removeNamedItem: function(name) {
+	removeNamedItem(name) {
 		var loName = name.toLowerCase()
 		, attr = this[loName] || null
 		if (loName === "style") delete this.ownerElement._style
 		if (attr !== null) delete this[loName]
 		return attr
 	},
-	setNamedItem: function(attr) {
+	setNamedItem(attr) {
 		var oldAttr = this.getNamedItem(attr.name)
-		if (attr.name === "style") attr.value = new CSSStyleDeclaration(attr.value).cssText
 		this[attr.name] = attr
 		return oldAttr
 	},
-	toString: function(minify) {
+	toString(minify) {
 		var map = this
 		, tagName = map.ownerElement.tagName
 		, isXml = map.ownerElement.ownerDocument.contentType === "application/xml"
-		return map.names().map(function(loName) {
+		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)
@@ -346,19 +340,22 @@ function HTMLElement(tag) {
 
 extendNode(HTMLElement, Element, {
 	nodeType: 1,
-	matches: function(sel) {
+	matches(sel) {
 		return selector.matches(this, sel)
 	},
-	closest: function(sel) {
+	closest(sel) {
 		return selector.closest(this, sel)
 	},
 	namespaceURI: "http://www.w3.org/1999/xhtml",
 	localName: null,
 	tagName: null,
-	toString: function(minify) {
+	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 + ">")
 	}
 })
 
@@ -379,7 +376,7 @@ function Text(data) {
 extendNode(Text, {
 	nodeType: 3,
 	nodeName: "#text",
-	toString: function(minify) {
+	toString(minify) {
 		return (minify ? ("" + this.data).trim() : "" + this.data).replace(escRe, escFn)
 	}
 })
@@ -391,7 +388,7 @@ function Comment(data) {
 extendNode(Comment, {
 	nodeType: 8,
 	nodeName: "#comment",
-	toString: function(minify) {
+	toString(minify) {
 		return minify ? "" : "<!--" + this.data + "-->"
 	}
 })
@@ -402,7 +399,7 @@ function DocumentType(data) {
 
 extendNode(DocumentType, {
 	nodeType: 10,
-	toString: function() {
+	toString() {
 		return "<" + this.data + ">"
 		// var node = document.doctype
 		// return "<!DOCTYPE " + node.name +
@@ -420,6 +417,9 @@ function Document() {
 }
 
 extendNode(Document, Element, {
+	get styleSheets() {
+		return selector.find(this, "style,link[rel=stylesheet][href]").map(el => el.sheet)
+	},
 	get title() {
 		var el = selector.find(this, "title", 1)
 		return el && el.textContent || ""
@@ -442,15 +442,13 @@ extendNode(Document, Element, {
 function DOMParser() {}
 function XMLSerializer() {}
 
-DOMParser.prototype.parseFromString = function(str, mime) {
+DOMParser.prototype.parseFromString = (str, mime) => {
 	var doc = new Document()
 	doc.contentType = mime || "text/html"
 	doc.documentElement.outerHTML = str
 	return doc
 }
-XMLSerializer.prototype.serializeToString = function(doc) {
-	return doc.toString()
-}
+XMLSerializer.prototype.serializeToString = doc => doc.toString()
 
 
 function own(Class) {
@@ -490,8 +488,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/interactive.js

@@ -5,10 +5,10 @@
 
 var DOM = module.exports = require(".")
 , HTMLElementExtra = {
-	focus: function() {
+	focus() {
 		this.ownerDocument.activeElement = this
 	},
-	blur: function() {
+	blur() {
 		this.ownerDocument.activeElement = null
 	}
 }

package/net.js

@@ -1,12 +1,16 @@
-/* global unescape */
 
 /*! litejs.com/MIT-LICENSE.txt */
 
-
 var DOM = require(".")
 , URL = require("url").URL
 , parser = new DOM.DOMParser()
-, dataUrlRe = /^([^;,]*?)(;[^,]+?|),(.*)$/
+, setState = (xhr, state) => {
+	if (xhr.readyState !== state) {
+		xhr.readyState = state
+		if (xhr.onreadystatechange) xhr.onreadystatechange()
+		if (state === xhr.DONE && xhr.onload) xhr.onload()
+	}
+}
 
 exports.XMLHttpRequest = XMLHttpRequest
 exports.defaultHeaders = {
@@ -18,14 +22,6 @@ function XMLHttpRequest() {
 	this._reqHeaders = Object.assign({}, exports.defaultHeaders)
 }
 
-function setState(xhr, state) {
-	if (xhr.readyState !== state) {
-		xhr.readyState = state
-		if (xhr.onreadystatechange) xhr.onreadystatechange()
-		if (state === xhr.DONE && xhr.onload) xhr.onload()
-	}
-}
-
 XMLHttpRequest.prototype = {
 	UNSENT: 0,
 	OPENED: 1,
@@ -49,23 +45,23 @@ XMLHttpRequest.prototype = {
 			parser.parseFromString(xhr.responseText, mime)
 		)
 	},
-	getAllResponseHeaders: function () {
+	getAllResponseHeaders() {
 		var xhr = this
-		return xhr.readyState >= xhr.HEADERS_RECEIVED && Object.keys(xhr._headers).map(function(name) {
-			return name + ": " + xhr._headers[name] + "\r\n"
-		}).join("") || null
+		return xhr.readyState >= xhr.HEADERS_RECEIVED && Object.keys(xhr._headers).map(
+			name => name + ": " + xhr._headers[name] + "\r\n"
+		).join("") || null
 	},
-	getResponseHeader: function (name) {
+	getResponseHeader(name) {
 		var xhr = this
 		return xhr.readyState >= xhr.HEADERS_RECEIVED && xhr._headers[name.toLowerCase()] || null
 	},
-	setRequestHeader: function(name, value) {
+	setRequestHeader(name, value) {
 		this._reqHeaders[name.toLowerCase()] = [name, value]
 	},
-	abort: function() {
+	abort() {
 		throw Error("XMLHttpRequest abort/reuse not implemented")
 	},
-	open: function (method, url, isAsync) {
+	open(method, url, isAsync) {
 		var xhr = this
 		xhr._sync = isAsync === false
 
@@ -77,20 +73,38 @@ XMLHttpRequest.prototype = {
 		xhr.responseURL = url
 		setState(xhr, xhr.OPENED)
 	},
-	send: function (data) {
+	send(data) {
 		var xhr = this
 		, url = new URL(xhr.responseURL, XMLHttpRequest.base)
 		, proto = url.protocol.slice(0, -1)
+		, head = (code, text, headers) => {
+			xhr.status = code
+			xhr.statusText = text
+			xhr._headers = headers
+			setState(xhr, xhr.HEADERS_RECEIVED)
+		}
+		, fillBody = chunk => {
+			xhr.responseText += chunk.toString("utf8")
+			setState(xhr, xhr.LOADING)
+		}
+		, done = err => {
+			if (err) {
+				if (xhr.onerror) xhr.onerror(err)
+				else throw err
+			}
+			else if (xhr._sync) setState(xhr, xhr.DONE)
+			else process.nextTick(setState, xhr, xhr.DONE)
+		}
 
 		if (proto === "http" || proto === "https") {
 			if (xhr._sync) throw Error("XMLHttpRequest sync not implemented")
 			url.method = xhr.method
-			url.headers = Object.keys(xhr._reqHeaders).reduce(function(result, key) {
+			url.headers = Object.keys(xhr._reqHeaders).reduce((result, key) => {
 				var entrie = xhr._reqHeaders[key]
 				result[entrie[0]] = entrie[1]
 				return result
 			}, {})
-			var req = require(proto).request(url, function(res) {
+			var req = require(proto).request(url, res => {
 				head(res.statusCode, res.statusMessage, res.headers)
 				res.on("data", fillBody)
 				res.on("end", done)
@@ -100,7 +114,7 @@ XMLHttpRequest.prototype = {
 			return
 		}
 		if (proto === "data") {
-			var match = dataUrlRe.exec(url.pathname)
+			var match = /^([^;,]*?)(;[^,]+?|),(.*)$/.exec(url.pathname)
 			if (match) {
 				head(200, "OK", { "content-type": match[1] || "text/plain" })
 				fillBody(match[2] ? Buffer.from(match[3], "base64") : unescape(match[3]))
@@ -110,7 +124,7 @@ XMLHttpRequest.prototype = {
 		}
 
 		if (proto === "file") {
-			require("fs").readFile(url, function(err, chunk) {
+			require("fs").readFile(url, (err, chunk) => {
 				if (err) {
 					head(404, "Not Found", {})
 				} else {
@@ -128,25 +142,6 @@ XMLHttpRequest.prototype = {
 		}
 
 		throw Error("Unsuported protocol in: " + url)
-
-		function head(code, text, headers) {
-			xhr.status = code
-			xhr.statusText = text
-			xhr._headers = headers
-			setState(xhr, xhr.HEADERS_RECEIVED)
-		}
-		function fillBody(chunk) {
-			xhr.responseText += chunk.toString("utf8")
-			setState(xhr, xhr.LOADING)
-		}
-		function done(err) {
-			if (err) {
-				if (xhr.onerror) xhr.onerror(err)
-				else throw err
-			}
-			else if (xhr._sync) setState(xhr, xhr.DONE)
-			else process.nextTick(setState, xhr, xhr.DONE)
-		}
 	}
 }
 

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "@litejs/dom",
-  "version": "24.8.0",
+  "version": "25.1.0",
   "description": "A small DOM library for server-side testing, rendering, and handling of HTML files",
   "license": "MIT",
   "author": "Lauri Rooden <lauri@rooden.ee>",
   "keywords": [
     "document",
-    "dom",
-    "html",
+    "DOM",
+    "HTML",
     "DOMParser",
+    "CSSOM",
+    "CSSStyleSheet",
     "XMLHttpRequest",
     "XMLSerializer",
     "litejs"
@@ -18,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": "23.11.1"
+    "@litejs/cli": "25.1.0"
   }
 }