added support for nested pseudo classes

:not and :has

Author: sokra

README.md

@@ -5,7 +5,7 @@ Parses and stringifies CSS selectors.
 ``` js
 import Tokenizer from "css-selector-tokenizer";
 
-let input = "a#content.active > div::first-line [data-content], a:visited";
+let input = "a#content.active > div::first-line [data-content], a:not(:visited)";
 
 Tokenizer.parse(input); // === expected
 let expected = {
@@ -28,7 +28,14 @@ let expected = {
       type: "selector",
       nodes: [
         { type: "element", name: "a" },
-        { type: "pseudo-class", name: "visited" }
+        { type: "nested-pseudo-class", name: "not", nodes: [
+          {
+            type: "selector",
+            nodes: [
+              { type: "pseudo-class", name: "visited" }
+            ]
+          }
+        ] }
       ],
       before: " "
     }

lib/parse.js

@@ -30,6 +30,40 @@ function pseudoClassStartMatch(match, name) {
 	return "inBrackets";
 }
 
+function nestedPseudoClassStartMatch(match, name, after) {
+	var newSelector = {
+		type: "selector",
+		nodes: []
+	};
+	var newToken = {
+		type: "nested-pseudo-class",
+		name: name,
+		nodes: [newSelector]
+	};
+	if(after) {
+		newSelector.before = after;
+	}
+	this.selector.nodes.push(newToken);
+	this.stack.push(this.root);
+	this.root = newToken;
+	this.selector = newSelector;
+}
+
+function nestedEnd(match, before) {
+	if(this.stack.length > 0) {
+		if(before) {
+			this.selector.after = before;
+		}
+		this.root = this.stack.pop();
+		this.selector = this.root.nodes[this.root.nodes.length - 1];
+	} else {
+		this.selector.nodes.push({
+			type: "invalid",
+			value: match
+		});
+	}
+}
+
 function operatorMatch(match, before, operator, after) {
 	var token = {
 		type: "operator",
@@ -51,10 +85,25 @@ function spacingMatch(match) {
 	});
 }
 
-function allMatch() {
-	this.selector.nodes.push({
-		type: "all"
-	});
+function elementMatch(match, namespace, name) {
+	var newToken = {
+		type: "element",
+		name: name
+	};
+	if(namespace) {
+		newToken.namespace = namespace.substr(0, namespace.length - 1);
+	}
+	this.selector.nodes.push(newToken);
+}
+
+function universalMatch(match, namespace) {
+	var newToken = {
+		type: "universal"
+	};
+	if(namespace) {
+		newToken.namespace = namespace.substr(0, namespace.length - 1);
+	}
+	this.selector.nodes.push(newToken);
 }
 
 function attributeMatch(match, content) {
@@ -108,12 +157,16 @@ var parser = new Parser({
 		"/\\*([\\s\\S]*?)\\*/": commentMatch,
 		"\\.([A-Za-z_\\-0-9]+)": typeMatch("class"),
 		"#([A-Za-z_\\-0-9]+)": typeMatch("id"),
+		":(not|has)\\((\\s*)": nestedPseudoClassStartMatch,
 		":([A-Za-z_\\-0-9]+)\\(": pseudoClassStartMatch,
 		":([A-Za-z_\\-0-9]+)": typeMatch("pseudo-class"),
 		"::([A-Za-z_\\-0-9]+)": typeMatch("pseudo-element"),
-		"([A-Za-z_\\-0-9]+)": typeMatch("element"),
+		"(\\*\\|)([A-Za-z_\\-0-9]+)": elementMatch,
+		"(\\*\\|)\\*": universalMatch,
+		"([A-Za-z_\\-0-9]*\\|)?\\*": universalMatch,
+		"([A-Za-z_\\-0-9]*\\|)?([A-Za-z_\\-0-9]+)": elementMatch,
 		"\\[([^\\]]+)\\]": attributeMatch,
-		"\\*": allMatch,
+		"(\\s*)\\)": nestedEnd,
 		"(\\s*)([>+~])(\\s*)": operatorMatch,
 		"(\\s*),(\\s*)": nextSelectorMatch,
 		"\\s+$": irrelevantSpacingEndMatch,
@@ -136,16 +189,18 @@ function parse(str) {
 		type: "selector",
 		nodes: []
 	};
-	var result = parser.parse("selector", str, {
-		root: {
-			type: "selectors",
-			nodes: [
-				selectorNode
-			]
-		},
+	var rootNode = {
+		type: "selectors",
+		nodes: [
+			selectorNode
+		]
+	};
+	parser.parse("selector", str, {
+		stack: [],
+		root: rootNode,
 		selector: selectorNode
 	});
-	return result.root;
+	return rootNode;
 }
 
 module.exports = parse;

lib/stringify.js

@@ -9,7 +9,7 @@ function stringifyWithoutBeforeAfter(tree) {
 	case "selector":
 		return tree.nodes.map(stringify).join("");
 	case "element":
-		return tree.name;
+		return (typeof tree.namespace === "string" ? tree.namespace + "|" : "") + tree.name;
 	case "class":
 		return "." + tree.name;
 	case "id":
@@ -20,14 +20,18 @@ function stringifyWithoutBeforeAfter(tree) {
 		return tree.value;
 	case "pseudo-class":
 		return ":" + tree.name + (typeof tree.content === "string" ? "(" + tree.content + ")" : "");
+	case "nested-pseudo-class":
+		return ":" + tree.name + "(" + tree.nodes.map(stringify).join(",") + ")";
 	case "pseudo-element":
 		return "::" + tree.name;
-	case "all":
-		return "*";
+	case "universal":
+		return (typeof tree.namespace === "string" ? tree.namespace + "|" : "") + "*";
 	case "operator":
 		return tree.operator;
 	case "comment":
 		return "/*" + tree.content + "*/";
+	case "invalid":
+		return tree.value;
 	}
 }
 

test/test-cases.js

@@ -20,6 +20,27 @@ module.exports = {
 		])
 	],
 
+	"element with namespace": [
+		"foo|h1",
+		singleSelector([
+			{ type: "element", name: "h1", namespace: "foo" }
+		])
+	],
+
+	"element with any namespace": [
+		"*|h1",
+		singleSelector([
+			{ type: "element", name: "h1", namespace: "*" }
+		])
+	],
+
+	"element without namespace": [
+		"|h1",
+		singleSelector([
+			{ type: "element", name: "h1", namespace: "" }
+		])
+	],
+
 	"class name": [
 		".className",
 		singleSelector([
@@ -42,9 +63,23 @@ module.exports = {
 	],
 
 	"pseudo class with content": [
+		":abc(.className)",
+		singleSelector([
+			{ type: "pseudo-class", name: "abc", content: ".className" }
+		])
+	],
+
+	"nested pseudo class with content": [
 		":not(.className)",
 		singleSelector([
-			{ type: "pseudo-class", name: "not", content: ".className" }
+			{ type: "nested-pseudo-class", name: "not", nodes: [
+				{
+					type: "selector",
+					nodes: [
+						{ type: "class", name: "className" }
+					]
+				}
+			] }
 		])
 	],
 
@@ -55,10 +90,31 @@ module.exports = {
 		])
 	],
 
-	"all": [
+	"universal": [
 		"*",
 		singleSelector([
-			{ type: "all" }
+			{ type: "universal" }
+		])
+	],
+
+	"universal with namespace": [
+		"foo|*",
+		singleSelector([
+			{ type: "universal", namespace: "foo" }
+		])
+	],
+
+	"universal with any namespace": [
+		"*|*",
+		singleSelector([
+			{ type: "universal", namespace: "*" }
+		])
+	],
+
+	"universal without namespace": [
+		"|*",
+		singleSelector([
+			{ type: "universal", namespace: "" }
 		])
 	],
 
@@ -157,5 +213,38 @@ module.exports = {
 		singleSelector([
 			{ type: "pseudo-class", name: "import", content: "\"./module.css\"" }
 		])
+	],
+
+	"nested pseudo class with multiple selectors": [
+		":has( h1, h2 )",
+		singleSelector([
+			{ type: "nested-pseudo-class", name: "has", nodes: [
+				{
+					type: "selector",
+					nodes: [
+						{ type: "element", name: "h1" }
+					],
+					before: " "
+				},
+				{
+					type: "selector",
+					nodes: [
+						{ type: "element", name: "h2" }
+					],
+					before: " ",
+					after: " "
+				}
+			] }
+		])
+	],
+
+	"invalid nesting": [
+		"a ) b",
+		singleSelector([
+			{ type: "element", name: "a" },
+			{ type: "invalid", value: " )" },
+			{ type: "spacing", value: " " },
+			{ type: "element", name: "b" }
+		])
 	]
 };