Identify CSS units and variables (#1450)

Assume CSS unit is a word or `%` after a number, CSS variable is a word inside `var()`.

`%` is not recognized as a part of number, but the leading `-` is.

When using minus operator in `calc` function, we must type a space in both sides of `-`
(value like `calc(100%-5px)` is wrong), so if we met a pattern like `-[\d.]` in a CSS value
(not in selector, rule or variable), it must be the start of a negative number.

components/prism-css-extras.js

@@ -10,7 +10,19 @@ Prism.languages.css.selector = {
 };
 
 Prism.languages.insertBefore('css', 'function', {
+	'variable': {
+		pattern: /(var\()[^)]+(?=\))/,
+		lookbehind: true
+	},
+	'operator': {
+		pattern: /(\s)[+\-*\/](?=\s)/,
+		lookbehind: true
+	},
 	'hexcode': /#[\da-f]{3,8}/i,
 	'entity': /\\[\da-f]{1,8}/i,
-	'number': /[\d%.]+/
+	'unit': {
+		pattern: /(\d)(?:%|[a-z]+)/,
+		lookbehind: true
+	},
+	'number': /-?[\d.]+/
 });

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

@@ -1,15 +1,15 @@
 42
 3.14159
-42%
-3.14%
+-42
+-3.14
 
 ----------------------------------------------------
 
 [
 	["number", "42"],
 	["number", "3.14159"],
-	["number", "42%"],
-	["number", "3.14%"]
+	["number", "-42"],
+	["number", "-3.14"]
 ]
 
 ----------------------------------------------------

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

@@ -0,0 +1,71 @@
+width: calc(100% + 20px);
+width: calc(100% - 20px);
+width: calc(5px * 2);
+width: calc(10px / 2);
+height: -20px;
+content: 'this - is not an operator';
+
+----------------------------------------------------
+
+[
+	["property", "width"],
+	["punctuation", ":"],
+	["function", "calc"],
+	["punctuation", "("],
+	["number", "100"],
+	["unit", "%"],
+	["operator", "+"],
+	["number", "20"],
+	["unit", "px"],
+	["punctuation", ")"],
+	["punctuation", ";"],
+
+	["property", "width"],
+	["punctuation", ":"],
+	["function", "calc"],
+	["punctuation", "("],
+	["number", "100"],
+	["unit", "%"],
+	["operator", "-"],
+	["number", "20"],
+	["unit", "px"],
+	["punctuation", ")"],
+	["punctuation", ";"],
+
+	["property", "width"],
+	["punctuation", ":"],
+	["function", "calc"],
+	["punctuation", "("],
+	["number", "5"],
+	["unit", "px"],
+	["operator", "*"],
+	["number", "2"],
+	["punctuation", ")"],
+	["punctuation", ";"],
+
+	["property", "width"],
+	["punctuation", ":"],
+	["function", "calc"],
+	["punctuation", "("],
+	["number", "10"],
+	["unit", "px"],
+	["operator", "/"],
+	["number", "2"],
+	["punctuation", ")"],
+	["punctuation", ";"],
+
+	["property", "height"],
+	["punctuation", ":"],
+	["number", "-20"],
+	["unit", "px"],
+	["punctuation", ";"],
+
+	["property", "content"],
+	["punctuation", ":"],
+	["string", "'this - is not an operator'"],
+	["punctuation", ";"]
+]
+
+----------------------------------------------------
+
+Checks for operators.

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

@@ -0,0 +1,21 @@
+100%
+1rem
+500ms
+.5s
+-3px
+-0.618vw
+
+----------------------------------------------------
+
+[
+	["number", "100"], ["unit", "%"],
+	["number", "1"], ["unit", "rem"],
+	["number", "500"], ["unit", "ms"],
+	["number", ".5"], ["unit", "s"],
+	["number", "-3"], ["unit", "px"],
+	["number", "-0.618"], ["unit", "vw"]
+]
+
+----------------------------------------------------
+
+Checks for units.

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

@@ -0,0 +1,34 @@
+var(--color-primary)
+var(--level-3)
+calc(100% - var(--margin-size) * 2)
+
+----------------------------------------------------
+
+[
+	["function", "var"],
+	["punctuation", "("],
+	["variable", "--color-primary"],
+	["punctuation", ")"],
+
+	["function", "var"],
+	["punctuation", "("],
+	["variable", "--level-3"],
+	["punctuation", ")"],
+
+	["function", "calc"],
+	["punctuation", "("],
+	["number", "100"],
+	["unit", "%"],
+	["operator", "-"],
+	["function", "var"],
+	["punctuation", "("],
+	["variable", "--margin-size"],
+	["punctuation", ")"],
+	["operator", "*"],
+	["number", "2"],
+	["punctuation", ")"]
+]
+
+----------------------------------------------------
+
+Checks for variables.