CSS extras: Highlighting for pseudo class arguments (#1650)

This adds highlighting for pseudo class arguments, selector punctuation, and n-th expressions.

components/prism-css-extras.js

@@ -2,7 +2,7 @@ Prism.languages.css.selector = {
 	pattern: Prism.languages.css.selector,
 	inside: {
 		'pseudo-element': /:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,
-		'pseudo-class': /:[-\w]+(?:\(.*\))?/,
+		'pseudo-class': /:[-\w]+/,
 		'class': /\.[-:.\w]+/,
 		'id': /#[-:.\w]+/,
 		'attribute': {
@@ -35,7 +35,16 @@ Prism.languages.css.selector = {
 				],
 				'operator': /[|~*^$]?=/
 			}
-		}
+		},
+		'n-th': {
+			pattern: /(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,
+			lookbehind: true,
+			inside: {
+				'number': /[\dn]+/,
+				'operator': /[+-]/
+			}
+		},
+		'punctuation': /[()]/
 	}
 };
 

tests/languages/css!+css-extras/selector_feature.test

@@ -1,13 +1,11 @@
 foo:after {
 foo::first-letter {
 
-foo:nth-child(2n+1) {
-
 foo.bar {
 
 foo#bar {
 
-#foo > .bar:not(baz):after {
+#foo > .bar:hover:after {
 
 ----------------------------------------------------
 
@@ -22,11 +20,6 @@ foo#bar {
 		["pseudo-element", "::first-letter"]
 	]], ["punctuation", "{"],
 
-	["selector", [
-		"foo",
-		["pseudo-class", ":nth-child(2n+1)"]
-	]], ["punctuation", "{"],
-
 	["selector", [
 		"foo",
 		["class", ".bar"]
@@ -41,11 +34,11 @@ foo#bar {
 		["id", "#foo"],
 		" > ",
 		["class", ".bar"],
-		["pseudo-class", ":not(baz)"],
+		["pseudo-class", ":hover"],
 		["pseudo-element", ":after"]
 	]], ["punctuation", "{"]
 ]
 
 ----------------------------------------------------
 
-Checks for pseudo-elements, pseudo-classes, classes and ids inside selectors.
+Checks for pseudo-elements, pseudo-classes, classes and ids inside selectors.

tests/languages/css!+css-extras/selector_n-th_feature.test

@@ -0,0 +1,62 @@
+:nth-child(2n+1) {}
+:nth-child(+2n - 1) {}
+:nth-child(2n) {}
+:nth-child(+5) {}
+
+----------------------------------------------------
+
+[
+	["selector", [
+		["pseudo-class", ":nth-child"],
+		["punctuation", "("],
+		["n-th", [
+			["number", "2n"],
+			["operator", "+"],
+			["number", "1"]
+		]],
+		["punctuation", ")"]
+	]],
+	["punctuation", "{"],
+	["punctuation", "}"],
+
+	["selector", [
+		["pseudo-class", ":nth-child"],
+		["punctuation", "("],
+		["n-th", [
+			["operator", "+"],
+			["number", "2n"],
+			["operator", "-"],
+			["number", "1"]
+		]],
+		["punctuation", ")"]
+	]],
+	["punctuation", "{"],
+	["punctuation", "}"],
+
+	["selector", [
+		["pseudo-class", ":nth-child"],
+		["punctuation", "("],
+		["n-th", [
+			["number", "2n"]
+		]],
+		["punctuation", ")"]
+	]],
+	["punctuation", "{"],
+	["punctuation", "}"],
+
+	["selector", [
+		["pseudo-class", ":nth-child"],
+		["punctuation", "("],
+		["n-th", [
+			["operator", "+"],
+			["number", "5"]
+		]],
+		["punctuation", ")"]
+	]],
+	["punctuation", "{"],
+	["punctuation", "}"]
+]
+
+----------------------------------------------------
+
+Checks for n-th expressions.

tests/languages/css!+css-extras/selector_pseudo-class_feature.test

@@ -0,0 +1,59 @@
+foo:hover {}
+
+:lang(en) {}
+
+.bar:not(baz:hover):not(.foo) {}
+
+:where(p:not(.class)) {}
+
+----------------------------------------------------
+
+[
+	["selector", [
+		"foo",
+		["pseudo-class", ":hover"]
+	]],
+	["punctuation", "{"],
+	["punctuation", "}"],
+
+	["selector", [
+		["pseudo-class", ":lang"],
+		["punctuation", "("],
+		"en",
+		["punctuation", ")"]
+	]],
+	["punctuation", "{"],
+	["punctuation", "}"],
+
+	["selector", [
+		["class", ".bar"],
+		["pseudo-class", ":not"],
+		["punctuation", "("],
+		"baz",
+		["pseudo-class", ":hover"],
+		["punctuation", ")"],
+		["pseudo-class", ":not"],
+		["punctuation", "("],
+		["class", ".foo"],
+		["punctuation", ")"]
+	]],
+	["punctuation", "{"],
+	["punctuation", "}"],
+
+	["selector", [
+		["pseudo-class", ":where"],
+		["punctuation", "("],
+		"p",
+		["pseudo-class", ":not"],
+		["punctuation", "("],
+		["class", ".class"],
+		["punctuation", ")"],
+		["punctuation", ")"]
+	]],
+	["punctuation", "{"],
+	["punctuation", "}"]
+]
+
+----------------------------------------------------
+
+Checks for pseudo-classes inside selectors.