CSS Extras: Renamed attr-{name,value} tokens and added tokens for c…

…ombinators and selector lists (#2373)
PrismJS · May 8, 2020 · e523f5d · e523f5d
1 parent 8a72830
commit e523f5d
Show file tree

Hide file tree

Showing 6 changed files with 219 additions and 181 deletions.
diff --git a/components/prism-css-extras.js b/components/prism-css-extras.js
@@ -27,11 +27,11 @@
 							'punctuation': /\|$/
 						}
 					},
-					'attribute': {
+					'attr-name': {
 						pattern: /^(\s*)[-\w\xA0-\uFFFF]+/,
 						lookbehind: true
 					},
-					'value': [
+					'attr-value': [
 						string,
 						{
 							pattern: /(=\s*)[-\w\xA0-\uFFFF]+(?=\s*$)/,
@@ -55,7 +55,13 @@
 					lookbehind: true
 				}
 			],
-			'punctuation': /[()]/
+			'combinator': />|\+|~|\|\|/,
+
+			// the `tag` token has been existed and removed.
+			// because we can't find a perfect tokenize to match it.
+			// if you want to add it, please read https://github.com/PrismJS/prism/pull/2373 first.
+
+			'punctuation': /[(),]/,
 		}
 	};
 

diff --git a/components/prism-css-extras.min.js b/components/prism-css-extras.min.js
diff --git a/tests/languages/css!+css-extras/selector_attribute_feature.test b/tests/languages/css!+css-extras/selector_attribute_feature.test
@@ -28,7 +28,7 @@
 	["selector", [
 		["attribute", [
 			["punctuation", "["],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["punctuation", "]"]
 		]]
 	]],
@@ -38,9 +38,9 @@
 	["selector", [
 		["attribute", [
 			["punctuation", "["],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["operator", "="],
-			["value", "val"],
+			["attr-value", "val"],
 			["punctuation", "]"]
 		]]
 	]],
@@ -50,9 +50,9 @@
 	["selector", [
 		["attribute", [
 			["punctuation", "["],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["operator", "="],
-			["value", "\"val\""],
+			["attr-value", "\"val\""],
 			["punctuation", "]"]
 		]]
 	]],
@@ -62,9 +62,9 @@
 	["selector", [
 		["attribute", [
 			["punctuation", "["],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["operator", "="],
-			["value", "'val'"],
+			["attr-value", "'val'"],
 			["punctuation", "]"]
 		]]
 	]],
@@ -74,9 +74,9 @@
 	["selector", [
 		["attribute", [
 			["punctuation", "["],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["operator", "|="],
-			["value", "val"],
+			["attr-value", "val"],
 			["punctuation", "]"]
 		]]
 	]],
@@ -86,9 +86,9 @@
 	["selector", [
 		["attribute", [
 			["punctuation", "["],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["operator", "~="],
-			["value", "val"],
+			["attr-value", "val"],
 			["punctuation", "]"]
 		]]
 	]],
@@ -98,9 +98,9 @@
 	["selector", [
 		["attribute", [
 			["punctuation", "["],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["operator", "|="],
-			["value", "val"],
+			["attr-value", "val"],
 			["punctuation", "]"]
 		]]
 	]],
@@ -110,9 +110,9 @@
 	["selector", [
 		["attribute", [
 			["punctuation", "["],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["operator", "^="],
-			["value", "val"],
+			["attr-value", "val"],
 			["punctuation", "]"]
 		]]
 	]],
@@ -122,9 +122,9 @@
 	["selector", [
 		["attribute", [
 			["punctuation", "["],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["operator", "$="],
-			["value", "val"],
+			["attr-value", "val"],
 			["punctuation", "]"]
 		]]
 	]],
@@ -134,9 +134,9 @@
 	["selector", [
 		["attribute", [
 			["punctuation", "["],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["operator", "*="],
-			["value", "val"],
+			["attr-value", "val"],
 			["punctuation", "]"]
 		]]
 	]],
@@ -150,7 +150,7 @@
 				"foo",
 				["punctuation", "|"]
 			]],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["punctuation", "]"]
 		]],
 		["attribute", [
@@ -159,15 +159,15 @@
 				"*",
 				["punctuation", "|"]
 			]],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["punctuation", "]"]
 		]],
 		["attribute", [
 			["punctuation", "["],
 			["namespace", [
 				["punctuation", "|"]
 			]],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["punctuation", "]"]
 		]]
 	]],
@@ -181,9 +181,9 @@
 				"foo",
 				["punctuation", "|"]
 			]],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["operator", "|="],
-			["value", "val"],
+			["attr-value", "val"],
 			["punctuation", "]"]
 		]]
 	]],
@@ -193,9 +193,9 @@
 	["selector", [
 		["attribute", [
 			["punctuation", "["],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["operator", "="],
-			["value", "val"],
+			["attr-value", "val"],
 			["case-sensitivity", "i"],
 			["punctuation", "]"]
 		]]
@@ -206,9 +206,9 @@
 	["selector", [
 		["attribute", [
 			["punctuation", "["],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["operator", "="],
-			["value", "\"val\""],
+			["attr-value", "\"val\""],
 			["case-sensitivity", "S"],
 			["punctuation", "]"]
 		]]
@@ -219,7 +219,7 @@
 	["selector", [
 		["attribute", [
 			["punctuation", "["],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["punctuation", "]"]
 		]]
 	]],
@@ -229,9 +229,9 @@
 	["selector", [
 		["attribute", [
 			["punctuation", "["],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["operator", "="],
-			["value", "val"],
+			["attr-value", "val"],
 			["punctuation", "]"]
 		]]
 	]],
@@ -241,9 +241,9 @@
 	["selector", [
 		["attribute", [
 			["punctuation", "["],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["operator", "="],
-			["value", "val"],
+			["attr-value", "val"],
 			["case-sensitivity", "i"],
 			["punctuation", "]"]
 		]]
@@ -254,9 +254,9 @@
 	["selector", [
 		["attribute", [
 			["punctuation", "["],
-			["attribute", "attr"],
+			["attr-name", "attr"],
 			["operator", "="],
-			["value", "\"i#m :not(a.class)\""],
+			["attr-value", "\"i#m :not(a.class)\""],
 			["punctuation", "]"]
 		]]
 	]],

diff --git a/tests/languages/css!+css-extras/selector_feature.test b/tests/languages/css!+css-extras/selector_feature.test
@@ -7,6 +7,14 @@ foo#bar {
 
 #foo > .bar:hover:after {
 
+span,
+div {
+
+div > p,
+.css-li ~ .css-li,
+.previous-selector + .selector,
+.selected || td {
+
 ----------------------------------------------------
 
 [
@@ -32,10 +40,34 @@ foo#bar {
 
 	["selector", [
 		["id", "#foo"],
-		" > ",
+		["combinator", ">"],
 		["class", ".bar"],
 		["pseudo-class", ":hover"],
 		["pseudo-element", ":after"]
+	]], ["punctuation", "{"],
+
+	["selector", [
+		"span",
+		["punctuation", ","],
+		"\r\ndiv"
+	]], ["punctuation", "{"],
+
+	["selector", [
+		"div ",
+		["combinator", ">"],
+		" p",
+		["punctuation", ","],
+		["class", ".css-li"],
+		["combinator", "~"],
+		["class", ".css-li"],
+		["punctuation", ","],
+		["class", ".previous-selector"],
+		["combinator", "+"],
+		["class", ".selector"],
+		["punctuation", ","],
+		["class", ".selected"],
+		["combinator", "||"],
+		" td"
 	]], ["punctuation", "{"]
 ]