SCSS: Highlight variables inside selectors and properties.

PrismJS · Jul 7, 2016 · d6b5c2f · d6b5c2f
1 parent fd09391
commit d6b5c2f
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 8 deletions.
diff --git a/components/prism-scss.js b/components/prism-scss.js
@@ -23,7 +23,8 @@ Prism.languages.scss = Prism.languages.extend('css', {
 		// Initial look-ahead is used to prevent matching of blank selectors
 		pattern: /(?=\S)[^@;\{\}\(\)]?([^@;\{\}\(\)]|&|#\{\$[-_\w]+\})+(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/m,
 		inside: {
-			'placeholder': /%[-_\w]+/
+			'placeholder': /%[-_\w]+/,
+			'variable': /\$[-_\w]+|#\{\$[-_\w]+\}/
 		}
 	}
 });
@@ -38,7 +39,14 @@ Prism.languages.insertBefore('scss', 'atrule', {
 	]
 });
 
-Prism.languages.insertBefore('scss', 'property', {
+Prism.languages.scss.property = {
+	pattern: /(?:[\w-]|\$[-_\w]+|#\{\$[-_\w]+\})+(?=\s*:)/i,
+	inside: {
+		'variable': /\$[-_\w]+|#\{\$[-_\w]+\}/
+	}
+};
+
+Prism.languages.insertBefore('scss', 'important', {
 	// var and interpolated vars
 	'variable': /\$[-_\w]+|#\{\$[-_\w]+\}/
 });

diff --git a/components/prism-scss.min.js b/components/prism-scss.min.js
diff --git a/tests/languages/scss+haml/scss_inclusion.test b/tests/languages/scss+haml/scss_inclusion.test
@@ -16,7 +16,7 @@
 		["filter-name", ":scss"],
 		["selector", ["#main "]],
 		["punctuation", "{"],
-		["property", "width"],
+		["property", ["width"]],
 		["punctuation", ":"],
 		["variable", "$width"],
 		["punctuation", ";"],
@@ -27,7 +27,7 @@
 		["filter-name", ":scss"],
 		["selector", ["#main "]],
 		["punctuation", "{"],
-		["property", "width"],
+		["property", ["width"]],
 		["punctuation", ":"],
 		["variable", "$width"],
 		["punctuation", ";"],

diff --git a/tests/languages/scss/atrule_feature.test b/tests/languages/scss/atrule_feature.test
@@ -6,7 +6,7 @@
 	["atrule", [
 		["rule", "@media"],
 		["punctuation", "("],
-		["property", "min-width"],
+		["property", ["min-width"]],
 		["punctuation", ":"],
 		" 600px",
 		["punctuation", ")"]

diff --git a/tests/languages/scss/property_feature.test b/tests/languages/scss/property_feature.test
@@ -0,0 +1,23 @@
+$bg: background;
+$color: color;
+div {
+	$bg: none;
+	background-#{$color}: blue;
+	#{$bg}-repeat: no-repeat;
+}
+
+----------------------------------------------------
+
+[
+	["property", [["variable", "$bg"]]], ["punctuation", ":"], " background", ["punctuation", ";"],
+	["property", [["variable", "$color"]]], ["punctuation", ":"], " color", ["punctuation", ";"],
+	["selector", ["div "]], ["punctuation", "{"],
+	["property", [["variable", "$bg"]]], ["punctuation", ":"], " none", ["punctuation", ";"],
+	["property", ["background-", ["variable", "#{$color}"]]], ["punctuation", ":"], " blue", ["punctuation", ";"],
+	["property", [["variable", "#{$bg}"], "-repeat"]], ["punctuation", ":"], " no-repeat", ["punctuation", ";"],
+	["punctuation", "}"]
+]
+
+----------------------------------------------------
+
+Checks for properties.
diff --git a/tests/languages/scss/selector_feature.test b/tests/languages/scss/selector_feature.test
@@ -15,7 +15,7 @@ p, div {}
 	["selector", ["&:hover "]], ["punctuation", "{"], ["punctuation", "}"],
 	["selector", ["&-sidebar "]], ["punctuation", "{"], ["punctuation", "}"],
 	["selector", ["#context a", ["placeholder", "%extreme"]]], ["punctuation", "{"], ["punctuation", "}"],
-	["selector", ["#{$selector}:before "]], ["punctuation", "{"], ["punctuation", "}"]
+	["selector", [["variable", "#{$selector}"], ":before "]], ["punctuation", "{"], ["punctuation", "}"]
 ]
 
 ----------------------------------------------------

diff --git a/tests/languages/scss/statement_feature.test b/tests/languages/scss/statement_feature.test
@@ -4,7 +4,7 @@ $foo: "bar" !default;
 ----------------------------------------------------
 
 [
-	["variable", "$foo"],
+	["property", [["variable", "$foo"]]],
 	["punctuation", ":"],
 	["string", "\"bar\""],
 	["statement", "!default"],