diff --git a/components/prism-css-extras.js b/components/prism-css-extras.js
index 254688b4d0..cf06b57a16 100644
--- a/components/prism-css-extras.js
+++ b/components/prism-css-extras.js
@@ -9,11 +9,14 @@ Prism.languages.css.selector = {
 	}
 };
 
-Prism.languages.insertBefore('css', 'function', {
+Prism.languages.insertBefore('css', 'property', {
 	'variable': {
-		pattern: /(var\()[^)]+(?=\))/,
+		pattern: /(^|[^-\w\xA0-\uFFFF])--[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*/i,
 		lookbehind: true
-	},
+	}
+});
+
+Prism.languages.insertBefore('css', 'function', {
 	'operator': {
 		pattern: /(\s)[+\-*\/](?=\s)/,
 		lookbehind: true
diff --git a/components/prism-css-extras.min.js b/components/prism-css-extras.min.js
index 34a2226c36..d04698b231 100644
--- a/components/prism-css-extras.min.js
+++ b/components/prism-css-extras.min.js
@@ -1 +1 @@
-Prism.languages.css.selector={pattern:Prism.languages.css.selector,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+(?:\(.*\))?/,"class":/\.[-:.\w]+/,id:/#[-:.\w]+/,attribute:/\[[^\]]+\]/}},Prism.languages.insertBefore("css","function",{variable:{pattern:/(var\()[^)]+(?=\))/,lookbehind:!0},operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:/#[\da-f]{3,8}/i,entity:/\\[\da-f]{1,8}/i,unit:{pattern:/(\d)(?:%|[a-z]+)/,lookbehind:!0},number:/-?[\d.]+/});
\ No newline at end of file
+Prism.languages.css.selector={pattern:Prism.languages.css.selector,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+(?:\(.*\))?/,"class":/\.[-:.\w]+/,id:/#[-:.\w]+/,attribute:/\[[^\]]+\]/}},Prism.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*/i,lookbehind:!0}}),Prism.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:/#[\da-f]{3,8}/i,entity:/\\[\da-f]{1,8}/i,unit:{pattern:/(\d)(?:%|[a-z]+)/,lookbehind:!0},number:/-?[\d.]+/});
\ No newline at end of file
diff --git a/tests/languages/css!+css-extras/variable_feature.test b/tests/languages/css!+css-extras/variable_feature.test
index d17053aef3..dc089b5f11 100644
--- a/tests/languages/css!+css-extras/variable_feature.test
+++ b/tests/languages/css!+css-extras/variable_feature.test
@@ -1,10 +1,23 @@
+element {
+	--foo: green;
+}
+
 var(--color-primary)
 var(--level-3)
+var(--foo, red)
 calc(100% - var(--margin-size) * 2)
 
 ----------------------------------------------------
 
 [
+	["selector", ["element"]],
+	["punctuation", "{"],
+	["variable", "--foo"],
+	["punctuation", ":"],
+	" green",
+	["punctuation", ";"],
+	["punctuation", "}"],
+
 	["function", "var"],
 	["punctuation", "("],
 	["variable", "--color-primary"],
@@ -15,6 +28,13 @@ calc(100% - var(--margin-size) * 2)
 	["variable", "--level-3"],
 	["punctuation", ")"],
 
+	["function", "var"],
+	["punctuation", "("],
+	["variable", "--foo"],
+	["punctuation", ","],
+	" red",
+	["punctuation", ")"],
+
 	["function", "calc"],
 	["punctuation", "("],
 	["number", "100"],