Sass: Fixed issues with CSS Extras (#2994)

components.json

@@ -1117,6 +1117,7 @@
 		"sass": {
 			"title": "Sass (Sass)",
 			"require": "css",
+			"optional": "css-extras",
 			"owner": "Golmote"
 		},
 		"scss": {

components/prism-css-extras.js

@@ -76,7 +76,7 @@
 	});
 
 	var unit = {
-		pattern: /(\b\d+)(?:%|[a-z]+\b)/,
+		pattern: /(\b\d+)(?:%|[a-z]+(?![\w-]))/,
 		lookbehind: true
 	};
 	// 123 -123 .123 -.123 12.3 -12.3
@@ -97,7 +97,10 @@
 			alias: 'color'
 		},
 		'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: /(^|[^\w-])(?: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)(?![\w-])/i,
+				lookbehind: true
+			},
 			{
 				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: {

components/prism-sass.js

@@ -3,7 +3,8 @@
 		// Sass comments don't need to be closed, only indented
 		'comment': {
 			pattern: /^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t].+)*/m,
-			lookbehind: true
+			lookbehind: true,
+			greedy: true
 		}
 	});
 
@@ -12,6 +13,7 @@
 		'atrule-line': {
 			// Includes support for = and + shortcuts
 			pattern: /^(?:[ \t]*)[@+=].+/m,
+			greedy: true,
 			inside: {
 				'atrule': /(?:@[\w-]+|[+=])/m
 			}
@@ -33,6 +35,7 @@
 		// We want to consume the whole line
 		'variable-line': {
 			pattern: /^[ \t]*\$.+/m,
+			greedy: true,
 			inside: {
 				'punctuation': /:/,
 				'variable': variable,
@@ -42,6 +45,7 @@
 		// We want to consume the whole line
 		'property-line': {
 			pattern: /^[ \t]*(?:[^:\s]+ *:.*|:[^:\s].*)/m,
+			greedy: true,
 			inside: {
 				'property': [
 					/[^:\s]+(?=\s*:)/,
@@ -64,8 +68,9 @@
 	// what's left should be selectors
 	Prism.languages.insertBefore('sass', 'punctuation', {
 		'selector': {
-			pattern: /([ \t]*)\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*)*/,
-			lookbehind: true
+			pattern: /^([ \t]*)\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*)*/m,
+			lookbehind: true,
+			greedy: true
 		}
 	});
 

tests/languages/css+css-extras+sass/issue2992.test

@@ -0,0 +1,31 @@
+.lucidagrande-normal-black-14px
+  color: var(--black)
+  font-family: var(--font-family-lucidagrande)
+  font-size: var(--font-size-m)
+  --foo: black
+
+----------------------------------------------------
+
+[
+	["selector", ".lucidagrande-normal-black-14px"],
+	["property-line", [
+		["property", "color"],
+		["punctuation", ":"],
+		" var(--black)"
+	]],
+	["property-line", [
+		["property", "font-family"],
+		["punctuation", ":"],
+		" var(--font-family-lucidagrande)"
+	]],
+	["property-line", [
+		["property", "font-size"],
+		["punctuation", ":"],
+		" var(--font-size-m)"
+	]],
+	["property-line", [
+		["property", "--foo"],
+		["punctuation", ":"],
+		" black"
+	]]
+]