Fixed CSS extra variable (#1649)

Details are described [here](#1450 (comment)).

I decided to go with the property variant, highlighting custom property declarations as `variable`.

Author: RunDevelopment

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

components/prism-css-extras.min.js

@@ -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"],