feat(css): handle css variables syntax

CHANGES.md

@@ -4,6 +4,7 @@ Grammars:
 
 - fix(csharp) add missing `catch` keyword (#3251) [Konrad Rudolph][]
 - add additional keywords to csp.js (#3244) [Elijah Conners][]
+- feat(css) handle css variables syntax (#3239) [Thanos Karagiannis][]
 - fix(markdown) Images with empty alt or links with empty text (#3233) [Josh Goebel][]
 - enh(powershell) added `pwsh` alias (#3236) [tebeco][]
 - fix(r) fix bug highlighting examples in doc comments [Konrad Rudolph][]
@@ -24,6 +25,7 @@ Grammars:
 [tebeco]: https://github.com/tebeco
 [Pankaj Patil]: https://github.com/patil2099
 [Benedikt Wilde]: https://github.com/schtandard
+[Thanos Karagiannis]: https://github.com/thanoskrg
 
 
 ## Version 11.0.0

src/languages/css.js

@@ -72,6 +72,7 @@ export default function(hljs) {
       //   end: /\)/,
       //   contains: [ hljs.CSS_NUMBER_MODE ]
       // },
+      modes.CSS_VARIABLE,
       {
         className: 'attribute',
         begin: '\\b(' + css.ATTRIBUTES.join('|') + ')\\b'

src/languages/less.js

@@ -109,6 +109,7 @@ export default function(hljs) {
       {
         begin: /-(webkit|moz|ms|o)-/
       },
+      modes.CSS_VARIABLE,
       {
         className: 'attribute',
         begin: '\\b(' + css.ATTRIBUTES.join('|') + ')\\b',

src/languages/lib/css-shared.js

@@ -30,6 +30,10 @@ export const MODES = (hljs) => {
         '|dpi|dpcm|dppx' +
         ')?',
       relevance: 0
+    },
+    CSS_VARIABLE: {
+      className: "attr",
+      begin: /--[A-Za-z][A-Za-z0-9_-]*/
     }
   };
 };

src/languages/scss.js

@@ -60,6 +60,7 @@ export default function(hljs) {
         end: /\)/,
         contains: [ modes.CSS_NUMBER_MODE ]
       },
+      modes.CSS_VARIABLE,
       {
         className: 'attribute',
         begin: '\\b(' + css.ATTRIBUTES.join('|') + ')\\b'

src/languages/stylus.js

@@ -154,6 +154,9 @@ export default function(hljs) {
         ]
       },
 
+      // css variables
+      modes.CSS_VARIABLE,
+
       // attributes
       //  - only from beginning of line + whitespace
       //  - must have whitespace after it

test/markup/css/css_consistency.expect.txt

@@ -63,3 +63,8 @@
   <span class="hljs-number">50%</span>  { <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">60px</span> <span class="hljs-meta">!important</span>; }
   <span class="hljs-selector-tag">to</span>   { <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">100px</span>; }
 }
+
+<span class="hljs-selector-tag">main</span> {
+  <span class="hljs-attr">--color</span>: red;
+  <span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--color);
+}

test/markup/css/css_consistency.txt

@@ -63,3 +63,8 @@ a[href*="example"] {}
   50%  { margin-top: 60px !important; }
   to   { margin-top: 100px; }
 }
+
+main {
+  --color: red;
+  color: var(--color);
+}

test/markup/css/variables.expect.txt

@@ -0,0 +1,9 @@
+<span class="hljs-selector-tag">body</span> {
+ <span class="hljs-attr">--text-color</span>: red;
+ <span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--text-color);
+}
+
+<span class="hljs-selector-tag">body</span> {
+ <span class="hljs-attr">--textBlue</span>: blue;
+ <span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--textBlue);
+}

test/markup/css/variables.txt

@@ -0,0 +1,9 @@
+body {
+ --text-color: red;
+ color: var(--text-color);
+}
+
+body {
+ --textBlue: blue;
+ color: var(--textBlue);
+}

test/markup/less/css_consistency.expect.txt

@@ -57,3 +57,8 @@
   <span class="hljs-comment">/* src: url(&quot;/fonts/OpenSans-Regular-webfont.woff2&quot;) format(&quot;woff2&quot;),
        url(&quot;/fonts/OpenSans-Regular-webfont.woff&quot;) format(&quot;woff&quot;); */</span>
 }
+
+<span class="hljs-selector-tag">main</span> {
+  <span class="hljs-attr">--color</span>: red;
+  <span class="hljs-attribute">color</span>: var(--color);
+}

test/markup/less/css_consistency.txt

@@ -57,3 +57,8 @@ a[href*="example"] {}
   /* src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); */
 }
+
+main {
+  --color: red;
+  color: var(--color);
+}

test/markup/scss/css_consistency.expect.txt

@@ -57,3 +57,8 @@
   <span class="hljs-comment">/* src: url(&quot;/fonts/OpenSans-Regular-webfont.woff2&quot;) format(&quot;woff2&quot;),
        url(&quot;/fonts/OpenSans-Regular-webfont.woff&quot;) format(&quot;woff&quot;); */</span>
 }
+
+<span class="hljs-selector-tag">main</span> {
+  <span class="hljs-attr">--color</span>: red;
+  <span class="hljs-attribute">color</span>: var(--color);
+}

test/markup/scss/css_consistency.txt

@@ -57,3 +57,8 @@ a[href*="example"] {}
   /* src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); */
 }
+
+main {
+  --color: red;
+  color: var(--color);
+}

test/markup/stylus/css_consistency.expect.txt

@@ -57,3 +57,8 @@
   <span class="hljs-comment">/* src: url(&quot;/fonts/OpenSans-Regular-webfont.woff2&quot;) format(&quot;woff2&quot;),
        url(&quot;/fonts/OpenSans-Regular-webfont.woff&quot;) format(&quot;woff&quot;); */</span>
 }
+
+<span class="hljs-selector-tag">main</span> {
+  <span class="hljs-attr">--color</span>: red;
+  <span class="hljs-attribute">color</span>: var(--color);
+}

test/markup/stylus/css_consistency.txt

@@ -57,3 +57,8 @@ a[href*="example"] {}
   /* src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); */
 }
+
+main {
+  --color: red;
+  color: var(--color);
+}