CSS: Added support for the selector function (#2201)

This adds support for CSS 4's selector function. The selectors passed to the function will now be highlighted as such.

Author: RunDevelopment

components/prism-css-extras.js

@@ -1,14 +1,17 @@
 (function (Prism) {
 
+	var string = /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;
+	var selectorInside;
+
 	Prism.languages.css.selector = {
 		pattern: Prism.languages.css.selector,
-		inside: {
+		inside: selectorInside = {
 			'pseudo-element': /:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,
 			'pseudo-class': /:[-\w]+/,
 			'class': /\.[-:.\w]+/,
 			'id': /#[-:.\w]+/,
 			'attribute': {
-				pattern: /\[(?:[^[\]"']|("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1)*\]/,
+				pattern: RegExp('\\[(?:[^[\\]"\']|' + string.source + ')*\\]'),
 				greedy: true,
 				inside: {
 					'punctuation': /^\[|\]$/,
@@ -29,7 +32,7 @@
 						lookbehind: true
 					},
 					'value': [
-						/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+						string,
 						{
 							pattern: /(=\s*)[-\w\xA0-\uFFFF]+(?=\s*$)/,
 							lookbehind: true
@@ -56,6 +59,8 @@
 		}
 	};
 
+	Prism.languages.css['atrule'].inside['selector-function-argument'].inside = selectorInside;
+
 	Prism.languages.insertBefore('css', 'property', {
 		'variable': {
 			pattern: /(^|[^-\w\xA0-\uFFFF])--[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*/i,

components/prism-css-extras.min.js

@@ -7,7 +7,12 @@
 		'atrule': {
 			pattern: /@[\w-]+[\s\S]*?(?:;|(?=\s*\{))/,
 			inside: {
-				'rule': /@[\w-]+/
+				'rule': /^@[\w-]+/,
+				'selector-function-argument': {
+					pattern: /(\bselector\s*\((?!\s*\))\s*)(?:[^()]|\((?:[^()]|\([^()]*\))*\))+?(?=\s*\))/,
+					lookbehind: true,
+					alias: 'selector'
+				}
 				// See rest below
 			}
 		},

components/prism-css.js

@@ -748,7 +748,12 @@ Prism.languages.svg = Prism.languages.markup;
 		'atrule': {
 			pattern: /@[\w-]+[\s\S]*?(?:;|(?=\s*\{))/,
 			inside: {
-				'rule': /@[\w-]+/
+				'rule': /^@[\w-]+/,
+				'selector-function-argument': {
+					pattern: /(\bselector\s*\((?!\s*\))\s*)(?:[^()]|\((?:[^()]|\([^()]*\))*\))+?(?=\s*\))/,
+					lookbehind: true,
+					alias: 'selector'
+				}
 				// See rest below
 			}
 		},

components/prism-css.min.js

@@ -0,0 +1,26 @@
+@supports selector(::-webkit-foo) {
+	/* style to apply when the `::-webkit-foo` selector is actually supported,
+	 * instead of just being parsed as matching nothing because of Selectors 4
+	 * § Appendix B: https://drafts.csswg.org/selectors-4/#compat */
+}
+
+----------------------------------------------------
+
+[
+	["atrule", [
+		["rule", "@supports"],
+		["function", "selector"],
+		["punctuation", "("],
+		["selector-function-argument", [
+			["pseudo-element", "::-webkit-foo"]
+		]],
+		["punctuation", ")"]
+	]],
+	["punctuation", "{"],
+	["comment", "/* style to apply when the `::-webkit-foo` selector is actually supported,\r\n\t * instead of just being parsed as matching nothing because of Selectors 4\r\n\t * § Appendix B: https://drafts.csswg.org/selectors-4/#compat */"],
+	["punctuation", "}"]
+]
+
+----------------------------------------------------
+
+Checks for the selector function in @supports rules.

prism.js

@@ -0,0 +1,24 @@
+@supports selector(::-webkit-foo) {
+	/* style to apply when the `::-webkit-foo` selector is actually supported,
+	 * instead of just being parsed as matching nothing because of Selectors 4
+	 * § Appendix B: https://drafts.csswg.org/selectors-4/#compat */
+}
+
+----------------------------------------------------
+
+[
+	["atrule", [
+		["rule", "@supports"],
+		["function", "selector"],
+		["punctuation", "("],
+		["selector-function-argument", "::-webkit-foo"],
+		["punctuation", ")"]
+	]],
+	["punctuation", "{"],
+	["comment", "/* style to apply when the `::-webkit-foo` selector is actually supported,\r\n\t * instead of just being parsed as matching nothing because of Selectors 4\r\n\t * § Appendix B: https://drafts.csswg.org/selectors-4/#compat */"],
+	["punctuation", "}"]
+]
+
+----------------------------------------------------
+
+Checks for the selector function in @supports rules.