@litejs/dom 24.12.0 → 25.1.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 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,154 @@
 
 /*! litejs.com/MIT-LICENSE.txt */
 
+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")
+, 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 + ")")
+, 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)
+	}
+}
+, 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) 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 = 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 +163,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 +178,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 +202,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

@@ -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, CSSStyleSheet } = require("./css.js")
+, { selectorSplit, CSSStyleDeclaration, CSSStyleSheet } = require("./css.js")
 , selector = require("./selector.js")
 , Node = {
 	ELEMENT_NODE:                1,
@@ -69,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]) {
@@ -83,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)) :
@@ -107,10 +111,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") || ""))
@@ -168,9 +169,7 @@ var boolAttrs = {
 		, 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)))
-		}
+		mergeAttributes(node, clone)
 
 		if (deep && node.hasChildNodes()) {
 			node.childNodes.forEach(child => clone.appendChild(child.cloneNode(deep)))
@@ -185,7 +184,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("")
 	}
@@ -296,7 +295,6 @@ NamedNodeMap.prototype = {
 	},
 	setNamedItem(attr) {
 		var oldAttr = this.getNamedItem(attr.name)
-		if (attr.name === "style") attr.value = CSSStyleDeclaration(attr.value).cssText
 		this[attr.name] = attr
 		return oldAttr
 	},
@@ -305,6 +303,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)
@@ -352,8 +351,11 @@ extendNode(HTMLElement, Element, {
 	tagName: null,
 	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 + ">")
 	}
 })
 
@@ -486,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litejs/dom",
-  "version": "24.12.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>",
@@ -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"
   }
 }