Stylus: New tokens and other improvements. (#2368)

This adds `color`, `unit`, and `entity` tokens. The `number` and `operator` patterns were also improved.

components/prism-stylus.js

@@ -1,4 +1,14 @@
 (function (Prism) {
+	var unit = {
+		pattern: /(\d)(?:%|[a-z]+)/,
+		lookbehind: true
+	};
+	// 123 -123 .123 -.123 12.3 -12.3
+	var number = {
+		pattern: /(^|[^\w.-])-?\d*\.?\d+/,
+		lookbehind: true
+	};
+
 	var inside = {
 		'comment': {
 			pattern: /(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,
@@ -20,13 +30,27 @@
 			lookbehind: true
 		},
 		'hexcode': /#[\da-f]{3,6}/i,
-		'number': /\b\d+(?:\.\d+)?%?/,
+		'color': [
+			/\b(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)\b/i,
+			{
+				pattern: /\b(?:rgb|hsl)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:rgb|hsl)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,
+				inside: {
+					'unit': unit,
+					'number': number,
+					'function': /[\w-]+(?=\()/,
+					'punctuation': /[(),]/
+				}
+			}
+		],
+		'entity': /\\[\da-f]{1,8}/i,
+		'unit': unit,
 		'boolean': /\b(?:true|false)\b/,
 		'operator': [
 			// We want non-word chars around "-" because it is
 			// accepted in property names.
-			/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.+|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/
+			/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.{2,3}|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/
 		],
+		'number': number,
 		'punctuation': /[{}()\[\];:,]/
 	};
 

tests/languages/stylus+pug/stylus_inclusion.test

@@ -10,7 +10,7 @@
 			["variable", "font-size"],
 			["operator", "="],
 			["number", "14"],
-			"px"
+			["unit", "px"]
 		]]
 	]]
 ]

tests/languages/stylus/func_feature.test

@@ -33,7 +33,7 @@ form input[type=button]
 		["function", "border-radius"],
 		["punctuation", "("],
 		["number", "5"],
-		"px",
+		["unit", "px"],
 		["punctuation", ")"]
 	]],
 	["property-declaration", [

tests/languages/stylus/important_feature.test

@@ -7,7 +7,7 @@ color: red !important
 	["property-declaration", [
 		["property", ["color"]],
 		["punctuation", ":"],
-		" red ",
+		["color",  "red"],
 		["important", "!important"]
 	]],
 	["atrule-declaration", [

tests/languages/stylus/number_feature.test

@@ -18,12 +18,14 @@ bar = 1.5%
 	["property-declaration", [
 		["property", ["width"]],
 		["punctuation", ":"],
-		["number", "23%"]
+		["number", "23"],
+		["unit", "%"]
 	]],
 	["variable-declaration", [
 		["variable", "bar"],
 		["operator", "="],
-		["number", "1.5%"]
+		["number", "1.5"],
+		["unit", "%"]
 	]]
 ]
 

tests/languages/stylus/property-declaration_feature.test

@@ -2,6 +2,7 @@ div
 	width 40px
 	color: red
 	background: blue;
+	animation-name test1, animation4
 
 div {
 background-{foo}: bar;
@@ -21,14 +22,16 @@ comment
 [
 	["selector", ["div"]],
 	["property-declaration", [
-		["property", ["width"]], ["number", "40"], "px"
+		["property", ["width"]], ["number", "40"], ["unit", "px"]
 	]],
 	["property-declaration", [
-		["property", ["color"]], ["punctuation", ":"], " red"
+		["property", ["color"]], ["punctuation", ":"], ["color", "red"]
 	]],
 	["property-declaration", [
-		["property", ["background"]], ["punctuation", ":"], " blue", ["punctuation", ";"]
+		["property", ["background"]], ["punctuation", ":"], ["color", "blue"], ["punctuation", ";"]
 	]],
+	["property-declaration", [
+		["property", ["animation-name"]], " test1", ["punctuation", ","], " animation4"]],
 	["selector", ["div ", ["punctuation", "{"]]],
 	["property-declaration", [
 		["property", [

tests/languages/stylus/selector_feature.test

@@ -22,15 +22,15 @@ color red
 
 [
 	["selector", ["div\r\nspan[foo=bar]"]],
-	["property-declaration", [["property", ["color"]], " red"]],
+	["property-declaration", [["property", ["color"]], ["color", "red"]]],
 	["selector", ["div input", ["punctuation", ","], "\r\ninput:nth-child(2n)"]],
-	["property-declaration", [["property", ["color"]], " red"]],
+	["property-declaration", [["property", ["color"]], ["color", "red"]]],
 	["selector", ["#foo"]],
 	["selector", [".bar::before"]],
-	["property-declaration", [["property", ["color"]], " red"]],
+	["property-declaration", [["property", ["color"]], ["color", "red"]]],
 	["selector", ["#foo"]],
 	["selector", [".bar ", ["punctuation", "{"]]],
-	["property-declaration", [["property", ["color"]], " red"]],
+	["property-declaration", [["property", ["color"]], ["color", "red"]]],
 	["punctuation", "}"],
 	["selector", [
 		["interpolation", [
@@ -41,7 +41,7 @@ color red
 		]],
 		":hover"
 	]],
-	["property-declaration", [["property", ["color"]], " red"]]
+	["property-declaration", [["property", ["color"]], ["color", "red"]]]
 ]
 
 ----------------------------------------------------