fix(css/scss) single-colon psuedo-elements no longer break highlighti…

…ng (#3321)

CHANGES.md

@@ -12,6 +12,8 @@ Parser:
 
 Grammars:
 
+- fix(css) single-colon psuedo-elements no longer break highlighting (#3240) [Josh Goebel][]
+- fix(scss) single-colon psuedo-elements no longer break highlighting (#3240) [Josh Goebel][]
 - enh(fsharp) rewrite most of the grammar, with many improvements [Melvyn Laïly][]
 - enh(go) better type highlighting, add `error` type [Josh Goebel][]
 - fix(js/ts) regex inside `SUBST` is no longer highlighted [Josh Goebel][]

src/languages/css.js

@@ -75,8 +75,8 @@ export default function(hljs) {
       },
       // attribute values
       {
-        begin: ':',
-        end: '[;}]',
+        begin: /:/,
+        end: /[;}{]/,
         contains: [
           modes.BLOCK_COMMENT,
           modes.HEXCOLOR,

src/languages/scss.js

@@ -72,8 +72,8 @@ export default function(hljs) {
         begin: '\\b(whitespace|wait|w-resize|visible|vertical-text|vertical-ideographic|uppercase|upper-roman|upper-alpha|underline|transparent|top|thin|thick|text|text-top|text-bottom|tb-rl|table-header-group|table-footer-group|sw-resize|super|strict|static|square|solid|small-caps|separate|se-resize|scroll|s-resize|rtl|row-resize|ridge|right|repeat|repeat-y|repeat-x|relative|progress|pointer|overline|outside|outset|oblique|nowrap|not-allowed|normal|none|nw-resize|no-repeat|no-drop|newspaper|ne-resize|n-resize|move|middle|medium|ltr|lr-tb|lowercase|lower-roman|lower-alpha|loose|list-item|line|line-through|line-edge|lighter|left|keep-all|justify|italic|inter-word|inter-ideograph|inside|inset|inline|inline-block|inherit|inactive|ideograph-space|ideograph-parenthesis|ideograph-numeric|ideograph-alpha|horizontal|hidden|help|hand|groove|fixed|ellipsis|e-resize|double|dotted|distribute|distribute-space|distribute-letter|distribute-all-lines|disc|disabled|default|decimal|dashed|crosshair|collapse|col-resize|circle|char|center|capitalize|break-word|break-all|bottom|both|bolder|bold|block|bidi-override|below|baseline|auto|always|all-scroll|absolute|table|table-cell)\\b'
       },
       {
-        begin: ':',
-        end: ';',
+        begin: /:/,
+        end: /[;}{]/,
         contains: [
           modes.BLOCK_COMMENT,
           VARIABLE,

test/markup/css/pseudo.expect.txt

@@ -0,0 +1,11 @@
+<span class="hljs-selector-class">.test</span>:before,
+.test:after {
+  <span class="hljs-attribute">color</span>: pink;
+  <span class="hljs-attribute">color</span>: red;
+}
+
+<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;
+}

test/markup/css/pseudo.txt

@@ -0,0 +1,11 @@
+.test:before,
+.test:after {
+  color: pink;
+  color: red;
+}
+
+.test::before,
+.test::after {
+  color: pink;
+  color: red;
+}

test/markup/scss/default.expect.txt

@@ -40,7 +40,7 @@
 <span class="hljs-selector-tag">ul</span> {
     <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
     <span class="hljs-attribute">padding</span>: {
-        left: <span class="hljs-number">5px</span>; <span class="hljs-attribute">right</span>: <span class="hljs-number">5px</span>;
+        <span class="hljs-attribute">left</span>: <span class="hljs-number">5px</span>; <span class="hljs-attribute">right</span>: <span class="hljs-number">5px</span>;
     }
   <span class="hljs-selector-tag">li</span> {
       <span class="hljs-attribute">float</span>: left; <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">10px</span>;