diff --git a/CHANGES.md b/CHANGES.md
index a5eb85b1b1..ce69cd52a0 100644
--- a/CHANGES.md
+++ b/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
diff --git a/src/languages/css.js b/src/languages/css.js
index 5927c9920b..cd74457086 100644
--- a/src/languages/css.js
+++ b/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'
diff --git a/src/languages/less.js b/src/languages/less.js
index e441f80ff0..c98492ee16 100644
--- a/src/languages/less.js
+++ 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',
diff --git a/src/languages/lib/css-shared.js b/src/languages/lib/css-shared.js
index d59ddff617..9145033f8d 100644
--- a/src/languages/lib/css-shared.js
+++ 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_-]*/
}
};
};
diff --git a/src/languages/scss.js b/src/languages/scss.js
index 56c0da6145..244e8505c3 100644
--- a/src/languages/scss.js
+++ b/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'
diff --git a/src/languages/stylus.js b/src/languages/stylus.js
index 7152938c6a..d329dc41e1 100644
--- a/src/languages/stylus.js
+++ 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
diff --git a/test/markup/css/css_consistency.expect.txt b/test/markup/css/css_consistency.expect.txt
index 0f36f5e4f3..31ee17b143 100644
--- a/test/markup/css/css_consistency.expect.txt
+++ b/test/markup/css/css_consistency.expect.txt
@@ -63,3 +63,8 @@
50% { margin-top: 60px !important; }
to { margin-top: 100px; }
}
+
+main {
+ --color: red;
+ color: var(--color);
+}
diff --git a/test/markup/css/css_consistency.txt b/test/markup/css/css_consistency.txt
index e09f2cad3a..1dc3879b73 100644
--- a/test/markup/css/css_consistency.txt
+++ b/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);
+}
diff --git a/test/markup/css/variables.expect.txt b/test/markup/css/variables.expect.txt
new file mode 100644
index 0000000000..f3f52a3eb6
--- /dev/null
+++ b/test/markup/css/variables.expect.txt
@@ -0,0 +1,9 @@
+body {
+ --text-color: red;
+ color: var(--text-color);
+}
+
+body {
+ --textBlue: blue;
+ color: var(--textBlue);
+}
diff --git a/test/markup/css/variables.txt b/test/markup/css/variables.txt
new file mode 100644
index 0000000000..745a14ec90
--- /dev/null
+++ b/test/markup/css/variables.txt
@@ -0,0 +1,9 @@
+body {
+ --text-color: red;
+ color: var(--text-color);
+}
+
+body {
+ --textBlue: blue;
+ color: var(--textBlue);
+}
diff --git a/test/markup/less/css_consistency.expect.txt b/test/markup/less/css_consistency.expect.txt
index 8007197491..e60d0c8dfb 100644
--- a/test/markup/less/css_consistency.expect.txt
+++ b/test/markup/less/css_consistency.expect.txt
@@ -57,3 +57,8 @@
}
+
+main {
+ --color: red;
+ color: var(--color);
+}
diff --git a/test/markup/less/css_consistency.txt b/test/markup/less/css_consistency.txt
index 365b3c135c..26ed3b079e 100644
--- a/test/markup/less/css_consistency.txt
+++ b/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);
+}
diff --git a/test/markup/scss/css_consistency.expect.txt b/test/markup/scss/css_consistency.expect.txt
index 8007197491..e60d0c8dfb 100644
--- a/test/markup/scss/css_consistency.expect.txt
+++ b/test/markup/scss/css_consistency.expect.txt
@@ -57,3 +57,8 @@
}
+
+main {
+ --color: red;
+ color: var(--color);
+}
diff --git a/test/markup/scss/css_consistency.txt b/test/markup/scss/css_consistency.txt
index 365b3c135c..26ed3b079e 100644
--- a/test/markup/scss/css_consistency.txt
+++ b/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);
+}
diff --git a/test/markup/stylus/css_consistency.expect.txt b/test/markup/stylus/css_consistency.expect.txt
index 8007197491..e60d0c8dfb 100644
--- a/test/markup/stylus/css_consistency.expect.txt
+++ b/test/markup/stylus/css_consistency.expect.txt
@@ -57,3 +57,8 @@
}
+
+main {
+ --color: red;
+ color: var(--color);
+}
diff --git a/test/markup/stylus/css_consistency.txt b/test/markup/stylus/css_consistency.txt
index 365b3c135c..26ed3b079e 100644
--- a/test/markup/stylus/css_consistency.txt
+++ b/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);
+}