Support single colon in CSS/SCSS/LESS when using pseudo element selector

Fixes highlightjs#3240
zsoltlengyelit · Oct 12, 2021 · 40a95ab · 40a95ab
1 parent 1a258a3
commit 40a95ab
Show file tree

Hide file tree

Showing 8 changed files with 13 additions and 5 deletions.
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/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) {}