@litejs/dom 25.12.0 → 26.2.0

package/README.md

@@ -51,9 +51,10 @@ xhr.onload = function() {
 xhr.send();
 
 // Minify CSS
-const sheet = new CSSStyleSheet({ min: { color: true } })
+import { CSS } from "@litejs/dom/css.js";
+const sheet = new CSSStyleSheet()
 sheet.replaceSync(".a { color: hsl(0 0% 100%) }")
-console.log(sheet.toString())
+console.log(CSS.minify(sheet, { color: true }))
 // .a{color:#fff}
 ```
 

package/css.js

@@ -6,18 +6,69 @@
 exports.CSSStyleDeclaration = CSSStyleDeclaration
 exports.CSSStyleSheet = CSSStyleSheet
 
-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)
+/* c8 ignore next */
+var URL = global.URL || require("url").URL
+, varRe = /var\((--[^,)]+)(?:,([^)]+))?\)/g
+, CSS = exports.CSS = {
+	escape(sel) {
+		return ("" + sel).replace(/[^a-zA-Z0-9_\u00A0-\uFFFF-]/g, "\\$&").replace(/^(-?)([0-9])/, "$1\\3$2 ")
+	},
+	minify(sheet, opts) {
+		var rules = sheet.cssRules || sheet.rules
+		, root = opts && opts.root || ""
+		, vars = opts && opts.var ? {} : null
+		, varFn = vars && function(_, n) { return vars[n] || _ }
+		return Array.prototype.map.call(rules, rule => {
+			if (vars && rule.selectorText === ":root") {
+				if (rule.style) for (var i = 0; i < rule.style.length; i++) {
+					var n = rule.style[i]
+					if (n.slice(0, 2) === "--") vars[n] = rule.style[n].replace(varRe, varFn)
+				}
+				return ""
+			}
+			// Handle @import inlining
+			if (opts && opts.import && rule.href) {
+				var imported = new CSSStyleSheet({
+					href: rule.href,
+					parentStyleSheet: sheet
+				}, read(root, rule.href, sheet.baseURI))
+				, urlFn = (m,q1,q2,u) => q1 ? m : "url('" + new URL(u, toUrl(imported.baseURI)).pathname.slice(1) + "')"
+				if (sheet.baseURI !== imported.baseURI) {
+					updateImportUrls(imported, urlFn)
+				}
+				return CSS.minify(imported, opts)
+			}
+
+			// Handle plugins on style rules
+			if (rule.style && rule.style._plugins) {
+				for (var style = rule.style, j = 0; j < style._plugins.length; j++) {
+					var idx = style._plugins[j][0]
+					, pn = style._plugins[j][1]
+					, k = style[idx]
+					style[k] = clear(plugins[pn](root, sheet.baseURI, style[k]))
+				}
+			}
+
+			var text = clear(rule.cssText)
+			if (!text || /\{\s*\}$/.test(text)) return ""
+			if (vars) text = text.replace(varRe, (_, v, fb) => vars[v] || fb || _)
+			if (opts && opts.color) text = text.replace(colorRe, colorFn)
+			if (opts && opts.url) text = text.replace(urlRe, (m, q1, q2, u) => q1 ? m : "url(" + opts.url(u) + ")")
+			return text
+		}).filter(Boolean).join("\n")
+	}
+}
+, toUrl = (dir) => new URL((dir || ".").replace(/\/+$/, "") + "/", "file:///").href
+, read = (root, url, baseURI, enc = "utf8") => require("fs").readFileSync(new URL(url, new URL((baseURI || ".") + "/", new URL((root || ".").replace(/\/+$/, "") + "/", "file:///" + process.cwd() + "/"))).pathname.split(/[+#]/)[0], enc)
 , plugins = exports.plugins = {
-	"data-uri": function(sheet, v) {
+	"data-uri": function(root, baseURI, v) {
 		var { DOMParser } = require("./dom.js")
 		return v.replace(urlRe, function(_, q1, q2, url) {
 			if (q1) return _
 			var frag = url.split("#")[1]
 			, ext = url.split(/[?#]/)[0].split(".").pop()
 			, enc = ext === "svg" ? "utf8" : "base64"
-			url = read(sheet, url, enc)
+			url = read(root, url, baseURI, enc)
 			if (ext === "svg") {
 				url = new DOMParser().parseFromString(url, "application/xml")
 				if (frag && (frag = url.getElementById(frag))) {
@@ -37,12 +88,12 @@ var fs = require("fs")
 	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, "$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])*?)\1|\s*(\/)\*(?:[^*]|\*(?!\/))*\*\/\s*|(?:[^"'\/]|\/(?!\*))+/g, clearFn)
 	.replace(/(["']).*?\1|url\(("|')([^'"()\s]+)\2\)/g, (m,q1,q2,u) => q1 ? m : "url(" + u + ")")
 , hex = n => (0 | +n + 256.5).toString(16).slice(1)
 , toRgb = {
@@ -63,29 +114,25 @@ var fs = require("fs")
 , 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]])
+			for (var out = [], name, value, i = style.length; i--; ) {
+				name = style[i]
+				value = style.__[i] || style[name]
+				out[i] = name + ":" + value
 			}
 			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 = {}
+			, _plugins = []
 			for (; (m = re.exec(val)); ) {
 				if (m[4]) {
-					if (min && len && plugins[m[4] = m[4].trim()]) style[k = style[len - 1]] = clear(plugins[m[4]](sheet, style[k]))
+					if (len && plugins[m[4] = m[4].trim()]) _plugins.push([len - 1, m[4]])
 				} else {
 					k = m[1]
 					if (lastIdx[k] >= 0) style.__[lastIdx[k]] = style[k]
@@ -95,6 +142,7 @@ var fs = require("fs")
 				}
 			}
 			style.length = len
+			if (_plugins.length) style._plugins = _plugins
 		} else {
 			if (!style[prop]) style[style.length++] = prop
 			style[prop] = style[prop === "cssFloat" ? "float" : prop.replace(/[A-Z]/g, "-$&").toLowerCase()] = clear(val)
@@ -116,26 +164,7 @@ var fs = require("fs")
 	},
 	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
+			return this.text
 		},
 		set cssText(text) {
 			this.href = text.split(/['"()]+/)[1]
@@ -144,9 +173,7 @@ var fs = require("fs")
 	},
 	"}": {
 		get cssText() {
-			var style = new CSSStyleSheet({})
-			style.replaceSync(this.text)
-			var body = "" + style
+			var body = "" + new CSSStyleSheet({}, this.text)
 			return body.length > 0 ? this.mediaText + "{" + body + "}" : ""
 		},
 		set cssText(text) {
@@ -185,18 +212,31 @@ function CSSStyleDeclaration(text, parentRule = null) {
 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.baseURI = new URL(".", new URL(opts.href, toUrl(
+			(opts.parentStyleSheet || opts.ownerNode && opts.ownerNode.ownerDocument).baseURI || ""
+		))).pathname.slice(1).replace(/\/$/, "")
 	}
 	this.replaceSync(text)
 }
 
+function updateImportUrls(sheet, urlFn) {
+	sheet.rules.forEach(rule => {
+		if (rule.type === 1) {
+			for (let style = rule.style, val, i = style.length; i--; ) {
+				val = style[style[i]]
+				if (urlRe.test(val)) style[style[i]] = val.replace(urlRe, urlFn)
+			}
+		} else if (rule.mediaText != null && rule.text != null) {
+			var nested = new CSSStyleSheet({})
+			nested.replaceSync(rule.text)
+			updateImportUrls(nested, urlFn)
+			rule.text = nested.toString()
+		}
+	})
+}
+
 CSSStyleSheet.prototype = {
 	baseURI: "",
-	root: "",
 	disabled: false,
 	type: "text/css",
 	deleteRule(idx) {
@@ -237,8 +277,7 @@ CSSStyleSheet.prototype = {
 		}
 		if (depth > 0) throw Error("Unclosed block")
 	},
-	toString(min) {
-		if (min) this.min = min
+	toString() {
 		return this.rules.map(rule => rule.cssText).filter(Boolean).join("\n")
 	}
 }

package/dom.js

@@ -4,9 +4,10 @@
 "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
+	async:1, autoplay:1, loop:1, checked:2, defer:1, disabled:1, muted:1, multiple:1, nomodule:1, playsinline:1, readonly:1, required:1, selected:2
 }
-, numAttrs = "height maxLength minLength size tabIndex width"
+, numAttrs = "height size tabIndex width"
+, numAttrsNeg = "maxLength minLength"
 , 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,
@@ -21,9 +22,8 @@ var boolAttrs = {
 , rawTextElements = { SCRIPT: /<(?=\/script)/i, STYLE: /<(?=\/style)/i }
 , rawTextEscape = { SCRIPT: /<(?=\/script|!--)/ig, STYLE: /<(?=\/style|!--)/ig }
 , hasOwn = voidElements.hasOwnProperty
-, { CSSStyleDeclaration, CSSStyleSheet } = require("./css.js")
+, { CSS, CSSStyleDeclaration, CSSStyleSheet } = require("./css.js")
 , selector = require("./selector.js")
-, cssEscape = sel => ("" + sel).replace(/[^a-zA-Z0-9_\u00A0-\uFFFF-]/g, "\\$&").replace(/^(-?)([0-9])/, "$1\\3$2 ")
 , Node = {
 	ELEMENT_NODE:                1,
 	TEXT_NODE:                   3,
@@ -140,8 +140,8 @@ var boolAttrs = {
 		var node = this
 		if (node === other) return 0
 		if (node.getRootNode() !== other.getRootNode()) return Node.DOCUMENT_POSITION_DISCONNECTED
-		if (node.contains(other)) return Node.DOCUMENT_POSITION_CONTAINS
-		if (other.contains(node)) return Node.DOCUMENT_POSITION_CONTAINED_BY
+		if (node.contains(other)) return Node.DOCUMENT_POSITION_CONTAINED_BY | Node.DOCUMENT_POSITION_FOLLOWING
+		if (other.contains(node)) return Node.DOCUMENT_POSITION_CONTAINS | Node.DOCUMENT_POSITION_PRECEDING
 
 		for (; node; node = node.nextSibling || node.parentNode && node.parentNode.nextSibling) {
 			if (node === other) return Node.DOCUMENT_POSITION_FOLLOWING
@@ -199,7 +199,7 @@ var boolAttrs = {
 	},
 	toString(min) {
 		return rawTextElements[this.tagName] ? (
-			this.tagName === "STYLE" && (min === true || min && min.css) ? "\n" + makeSheet(this, min.css || true) + "\n" :
+			this.tagName === "STYLE" && (min === true || min && min.css) ? "\n" + CSS.minify(makeSheet(this), typeof min.css === "object" ? min.css : null) + "\n" :
 			this.textContent
 		) : this.childNodes.map(node => node.toString(min)).join("")
 	},
@@ -277,8 +277,9 @@ var boolAttrs = {
 	"&sect;": "§", "&sup2;": "²", "&sup3;": "³", "&yen;": "¥"
 }
 
-Object.keys(boolAttrs).forEach(key => addGetter(key, { isBool: true, readonly: "readOnly" }))
+Object.keys(boolAttrs).forEach(key => addGetter(key, { isBool: true, isDirty: boolAttrs[key] > 1, readonly: "readOnly" }))
 numAttrs.split(" ").forEach(key => addGetter(key, { isNum: true }))
+numAttrsNeg.split(" ").forEach(key => addGetter(key, { isNum: true, numDefault: -1 }))
 strAttrs.split(" ").forEach(key => addGetter(key, { "for": "htmlFor", "class": "className" }))
 
 function addGetter(key, opts) {
@@ -287,19 +288,28 @@ function addGetter(key, opts) {
 		configurable: true,
 		enumerable: true,
 		get: (
+			opts.isDirty ? function() { return "_" + attr in this ? this["_" + attr] : this.hasAttribute(attr) } :
 			opts.isBool ? function() { return this.hasAttribute(attr) } :
-			opts.isNum ? function() { return +this.getAttribute(attr) || 0 } :
+			opts.isNum ? function() { var v = this.getAttribute(attr); return v != null ? (+v || 0) : (opts.numDefault || 0) } :
 			function() { return this.getAttribute(attr) || "" }
 		),
 		set(value) {
-			this.setAttribute(attr, value)
+			if (opts.isDirty) this["_" + attr] = !!value
+			else if (opts.isBool && !value) this.removeAttribute(attr)
+			else this.setAttribute(attr, value)
 		}
 	})
 }
 
 ;["hasAttribute", "getAttribute", "setAttribute", "removeAttribute"].forEach(name => {
 	Element[name + "NS"] = function(ns, a, b) {
-		return this[name].call(this, a, b)
+		if (name !== "setAttribute" && ns) {
+			var lo = (":" + a).toLowerCase()
+			for (var key in this.attributes) {
+				if (key.endsWith(lo)) return this[name](key)
+			}
+		}
+		return this[name](a, b)
 	}
 })
 
@@ -310,8 +320,10 @@ function Attr(node, name, value) {
 }
 
 function NamedNodeMap(node) {
-	Object.defineProperty(this, "length", { get() { return this.names().length } })
-	Object.defineProperty(this, "ownerElement", { value: node })
+	Object.defineProperties(this, {
+		length: { get() { return this.names().length } },
+		ownerElement: { value: node }
+	})
 }
 
 NamedNodeMap.prototype = {
@@ -390,7 +402,7 @@ extendNode(HTMLElement, Element, {
 		return makeSheet(this)
 	},
 	blur() {
-		this.ownerDocument.activeElement = null
+		this.ownerDocument.activeElement = this.ownerDocument.body || null
 	},
 	closest(sel) {
 		return selector.closest(this, sel)
@@ -422,7 +434,7 @@ function ElementNS(namespace, tag) {
 ElementNS.prototype = HTMLElement.prototype
 
 function Text(data) {
-	this.data = data
+	this.data = "" + data
 }
 
 extendNode(Text, {
@@ -453,11 +465,6 @@ extendNode(DocumentType, {
 	nodeType: 10,
 	toString() {
 		return "<" + this.data + ">"
-		// var node = document.doctype
-		// return "<!DOCTYPE " + node.name +
-		// 	(node.publicId ? ' PUBLIC "' + node.publicId + '"' : '') +
-		// 	(!node.publicId && node.systemId ? ' SYSTEM' : '') +
-		// 	(node.systemId ? ' "' + node.systemId + '"' : '') + '>'
 	}
 })
 
@@ -517,11 +524,8 @@ function own(Class) {
 
 function extendNode(obj, extras) {
 	obj.prototype = Object.create(Node)
-	for (var descriptor, key, i = 1; (extras = arguments[i++]); ) {
-		for (key in extras) {
-			descriptor = Object.getOwnPropertyDescriptor(extras, key)
-			Object.defineProperty(obj.prototype, key, descriptor)
-		}
+	for (var i = 1; (extras = arguments[i++]); ) {
+		Object.defineProperties(obj.prototype, Object.getOwnPropertyDescriptors(extras))
 	}
 	obj.prototype.constructor = obj
 }
@@ -531,9 +535,9 @@ function removeChilds(node) {
 	node.childNodes.length = 0
 }
 
-function getElement(childs, index, step, type) {
+function getElement(childs, index, step) {
 	if (childs && index > -1) for (; childs[index]; index += step) {
-		if (childs[index].nodeType === type) return childs[index]
+		if (childs[index].nodeType === 1) return childs[index]
 	}
 	return null
 }
@@ -541,14 +545,13 @@ function getElement(childs, index, step, type) {
 function getSibling(node, step, type) {
 	var silbings = node.parentNode && node.parentNode.childNodes
 	, index = silbings ? silbings.indexOf(node) : -1
-	return type > 0 ? getElement(silbings, index + step, step, type) : silbings && silbings[index + step] || null
+	return type ? getElement(silbings, index + step, step) : silbings && silbings[index + step] || null
 }
 
-function makeSheet(el, min) {
+function makeSheet(el) {
 	if (el.tagName === "STYLE" || el.tagName === "LINK" && el.rel === "stylesheet" && el.href) return new CSSStyleSheet({
 		href: el.href,
-		ownerNode: el,
-		min
+		ownerNode: el
 	}, el.tagName === "STYLE" && el.textContent)
 }
 
@@ -562,7 +565,7 @@ exports.document = new Document()
 exports.entities = entities
 exports.mergeAttributes = mergeAttributes
 exports.selectorSplit = selector.selectorSplit
-exports.cssEscape = cssEscape
+exports.CSS = CSS
 exports.CSSStyleDeclaration = CSSStyleDeclaration
 exports.CSSStyleSheet = CSSStyleSheet
 exports.DOMParser = DOMParser

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litejs/dom",
-  "version": "25.12.0",
+  "version": "26.2.0",
   "description": "A small DOM library for server-side testing, rendering, and handling of HTML files",
   "license": "MIT",
   "author": "Lauri Rooden <lauri@rooden.ee>",

package/selector.js

@@ -6,9 +6,7 @@
 exports.find = find
 exports.selectorSplit = selectorSplit
 
-var selectorCache = {
-	"": () => {}
-}
+var selectorCache = {}
 , selectorRe = /([.#:[])([-\w]+)(?:\(((?:[^()]|\([^)]+\))+?)\)|([~^$*|]?)=(("|')(?:\\.|[^\\])*?\6|[-\w]+))?]?/g
 , selectorLastRe = /([\s>+~]*)(?:("|')(?:\\.|[^\\])*?\2|\((?:[^()]|\([^()]+\))+?\)|~=|[^'"()\s>+~])+$/
 , selectorMap = exports.selectorMap = {
@@ -41,7 +39,7 @@ var selectorCache = {
 	"": "c(_.parentNode,v)"
 }
 , closest = exports.closest = walk.bind(exports, "parentNode", 1)
-, matches = exports.matches = (el, sel) => !!selectorFn(sel)(el)
+, matches = exports.matches = (el, sel) => !!(sel && selectorFn(sel)(el))
 , next = exports.next = (el, sel) => walk("nextSibling", 1, el.nextSibling, sel)
 , prev = exports.prev = (el, sel) => walk("previousSibling", 1, el.previousSibling, sel)
 
@@ -49,8 +47,8 @@ var selectorCache = {
 selectorMap["nth-last-child"] = selectorMap["nth-child"].replace("1+", "v.length-")
 
 function selectorFn(str) {
-	if (str != null && typeof str !== "string") throw Error("Invalid selector")
-	return selectorCache[str || ""] ||
+	if (!str || typeof str !== "string") throw Error("Invalid selector")
+	return selectorCache[str] ||
 	(selectorCache[str] = Function("m,c,n,p", "return (_,v,a,b)=>" +
 		selectorSplit(str).map(sel => {
 			var relation, from
@@ -61,6 +59,7 @@ function selectorFn(str) {
 				return ""
 			})
 			, tag = sel.slice(from).replace(selectorRe, (_, op, key, subSel, fn, val, quotation) => {
+				if (key[0] == + key[0]) throw Error("Invalid selector")
 				rules.push(
 					"((v='" +
 					(subSel || (quotation ? val.slice(1, -1) : val) || "").replace(/[\\']/g, "\\$&") +

package/types/index.d.ts

@@ -188,4 +188,7 @@ export const document: Document
 export const entities: Record<string, string>
 export function mergeAttributes(source: HTMLElement | null, target: HTMLElement | null): void
 export function selectorSplit(selector: string): string[]
-export function cssEscape(selector: string | number): string
+export const CSS: {
+	escape(selector: string | number): string
+	minify(sheet: CSSStyleSheet, min?: { color?: boolean }): string
+}