Support single colon in css/scss/less/stylus when using pseudo elemen…

…t selector Fixes highlightjs#3240
zsoltlengyelit · Oct 12, 2021 · e3dc9d6 · e3dc9d6
1 parent 1a258a3
commit e3dc9d6
Show file tree

Hide file tree

Showing 12 changed files with 20 additions and 6 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -34,6 +34,7 @@ Grammars:
 - enh(scala) add `using` soft keyword (#3330) [Nicolas Stucki][]
 - enh(fsharp) added `f#` alias (#3337) [Bahnschrift][]
 - enh(bash) added gnu core utilities (#3342) [katzeprior][]
+- fix(css/less/stylus/scss) highlight single-colon psuedo-elements properly (#3240) [zsoltlengyelit][]
 
 [Austin Schick]: https://github.com/austin-schick
 [Josh Goebel]: https://github.com/joshgoebel
@@ -44,6 +45,7 @@ Grammars:
 [Bahnschrift]: https://github.com/Bahnschrift
 [Melvyn Laïly]: https://github.com/mlaily
 [katzeprior]: https://github.com/katzeprior
+[zsoltlengyelit]: github.com/zsoltlengyelit
 
 
 ## Version 11.2.0

diff --git a/src/languages/css.js b/src/languages/css.js
@@ -58,7 +58,7 @@ export default function(hljs) {
             begin: ':(' + css.PSEUDO_CLASSES.join('|') + ')'
           },
           {
-            begin: '::(' + css.PSEUDO_ELEMENTS.join('|') + ')'
+            begin: ':(:)?(' + css.PSEUDO_ELEMENTS.join('|') + ')'
           }
         ]
       },

diff --git a/src/languages/less.js b/src/languages/less.js
@@ -199,7 +199,7 @@ export default function(hljs) {
       },
       {
         className: 'selector-pseudo',
-        begin: '::(' + css.PSEUDO_ELEMENTS.join('|') + ')'
+        begin: ':(:)?(' + css.PSEUDO_ELEMENTS.join('|') + ')'
       },
       {
         begin: /\(/,

diff --git a/src/languages/scss.js b/src/languages/scss.js
@@ -55,7 +55,7 @@ export default function(hljs) {
       },
       {
         className: 'selector-pseudo',
-        begin: '::(' + PSEUDO_ELEMENTS.join('|') + ')'
+        begin: ':(:)?(' + PSEUDO_ELEMENTS.join('|') + ')'
       },
       VARIABLE,
       { // pseudo-selector params

diff --git a/src/languages/stylus.js b/src/languages/stylus.js
@@ -96,7 +96,7 @@ export default function(hljs) {
       },
       {
         className: 'selector-pseudo',
-        begin: '&?::(' + css.PSEUDO_ELEMENTS.join('|') + ')' + LOOKAHEAD_TAG_END
+        begin: '&?:(:)?(' + css.PSEUDO_ELEMENTS.join('|') + ')' + LOOKAHEAD_TAG_END
       },
 
       modes.ATTRIBUTE_SELECTOR_MODE,

diff --git a/test/markup/css/pseudo.expect.txt b/test/markup/css/pseudo.expect.txt
@@ -1,5 +1,5 @@
-<span class="hljs-selector-class">.test</span>:before,
-.test:after {
+<span class="hljs-selector-class">.test</span><span class="hljs-selector-pseudo">:before</span>,
+<span class="hljs-selector-class">.test</span><span class="hljs-selector-pseudo">:after</span> {
   <span class="hljs-attribute">color</span>: pink;
   <span class="hljs-attribute">color</span>: red;
 }

diff --git a/test/markup/less/css_consistency.expect.txt b/test/markup/less/css_consistency.expect.txt
@@ -22,7 +22,9 @@
 
 <span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:visited</span> { <span class="hljs-attribute">color</span>: blue; }
 <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">::after</span> { <span class="hljs-attribute">content</span>: <span class="hljs-string">&quot;test&quot;</span>; }
+<span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:after</span> { <span class="hljs-attribute">content</span>: <span class="hljs-string">&quot;test&quot;</span>; }
 <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">::before</span> { <span class="hljs-attribute">content</span>: open-quote; }
+<span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:before</span> { <span class="hljs-attribute">content</span>: open-quote; }
 <span class="hljs-selector-tag">span</span><span class="hljs-selector-pseudo">:nth-child</span>(<span class="hljs-number">33</span>) { <span class="hljs-attribute">color</span>:red; }
 
 <span class="hljs-selector-tag">p</span><span class="hljs-selector-pseudo">:lang</span>(en) {}

diff --git a/test/markup/less/css_consistency.txt b/test/markup/less/css_consistency.txt
@@ -22,7 +22,9 @@ h1, h2, figcaption, aside, main, form, footer {}
 
 a:visited { color: blue; }
 div::after { content: "test"; }
+div:after { content: "test"; }
 div::before { content: open-quote; }
+div:before { content: open-quote; }
 span:nth-child(33) { color:red; }
 
 p:lang(en) {}

diff --git a/test/markup/scss/css_consistency.expect.txt b/test/markup/scss/css_consistency.expect.txt
@@ -22,7 +22,9 @@
 
 <span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:visited</span> { <span class="hljs-attribute">color</span>: blue; }
 <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">::after</span> { <span class="hljs-attribute">content</span>: <span class="hljs-string">&quot;test&quot;</span>; }
+<span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:after</span> { <span class="hljs-attribute">content</span>: <span class="hljs-string">&quot;test&quot;</span>; }
 <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">::before</span> { <span class="hljs-attribute">content</span>: open-quote; }
+<span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:before</span> { <span class="hljs-attribute">content</span>: open-quote; }
 <span class="hljs-selector-tag">span</span><span class="hljs-selector-pseudo">:nth-child</span>(<span class="hljs-number">33</span>) { <span class="hljs-attribute">color</span>:red; }
 
 <span class="hljs-selector-tag">p</span><span class="hljs-selector-pseudo">:lang</span>(en) {}

diff --git a/test/markup/scss/css_consistency.txt b/test/markup/scss/css_consistency.txt
@@ -22,7 +22,9 @@ h1, h2, figcaption, aside, main, form, footer {}
 
 a:visited { color: blue; }
 div::after { content: "test"; }
+div:after { content: "test"; }
 div::before { content: open-quote; }
+div:before { content: open-quote; }
 span:nth-child(33) { color:red; }
 
 p:lang(en) {}

diff --git a/test/markup/stylus/css_consistency.expect.txt b/test/markup/stylus/css_consistency.expect.txt
@@ -22,7 +22,9 @@
 
 <span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:visited</span> { <span class="hljs-attribute">color</span>: blue; }
 <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">::after</span> { <span class="hljs-attribute">content</span>: <span class="hljs-string">&quot;test&quot;</span>; }
+<span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:after</span> { <span class="hljs-attribute">content</span>: <span class="hljs-string">&quot;test&quot;</span>; }
 <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">::before</span> { <span class="hljs-attribute">content</span>: open-quote; }
+<span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:before</span> { <span class="hljs-attribute">content</span>: open-quote; }
 <span class="hljs-selector-tag">span</span><span class="hljs-selector-pseudo">:nth-child</span>(<span class="hljs-number">33</span>) { <span class="hljs-attribute">color</span>:red; }
 
 <span class="hljs-selector-tag">p</span><span class="hljs-selector-pseudo">:lang</span>(en) {}

diff --git a/test/markup/stylus/css_consistency.txt b/test/markup/stylus/css_consistency.txt
@@ -22,7 +22,9 @@ h1, h2, figcaption, aside, main, form, footer {}
 
 a:visited { color: blue; }
 div::after { content: "test"; }
+div:after { content: "test"; }
 div::before { content: open-quote; }
+div:before { content: open-quote; }
 span:nth-child(33) { color:red; }
 
 p:lang(en) {}