From 122f9081d263edfedad12d2e237f952a889df249 Mon Sep 17 00:00:00 2001
From: Josh Goebel <me@joshgoebel.com>
Date: Tue, 31 Aug 2021 21:43:13 -0400
Subject: [PATCH] fix(css/scss) single-colon psuedo-elements no longer break
 highlighting

---
 CHANGES.md                                        |  2 ++
 src/languages/css.js                              |  4 ++--
 src/languages/scss.js                             |  4 ++--
 test/markup/cpp/function-like-keywords.expect.txt |  1 +
 test/markup/css/pseudo.expect.txt                 | 11 +++++++++++
 test/markup/css/pseudo.txt                        | 11 +++++++++++
 test/markup/scss/default.expect.txt               |  2 +-
 7 files changed, 30 insertions(+), 5 deletions(-)
 create mode 100644 test/markup/css/pseudo.expect.txt
 create mode 100644 test/markup/css/pseudo.txt

diff --git a/CHANGES.md b/CHANGES.md
index 4eee005021..3265bb54b7 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -6,6 +6,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][]
 - fix(python) added support for unicode identifiers (#3280) [Austin Schick][]
 - enh(css/less/stylus/scss) improve consistency of function dispatch (#3301) [Josh Goebel][]
 - enh(css/less/stylus/scss) detect block comments more fully (#3301) [Josh Goebel][]
diff --git a/src/languages/css.js b/src/languages/css.js
index c40d2cab6c..b41a2adf3c 100644
--- a/src/languages/css.js
+++ b/src/languages/css.js
@@ -75,8 +75,8 @@ export default function(hljs) {
       },
       // attribute values
       {
-        begin: ':',
-        end: '[;}]',
+        begin: /:/,
+        end: /[;}{]/,
         contains: [
           modes.BLOCK_COMMENT,
           modes.HEXCOLOR,
diff --git a/src/languages/scss.js b/src/languages/scss.js
index 9fe75c1a26..87a07cc4d4 100644
--- a/src/languages/scss.js
+++ b/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,
diff --git a/test/markup/cpp/function-like-keywords.expect.txt b/test/markup/cpp/function-like-keywords.expect.txt
index f58427e223..b92e365765 100644
--- a/test/markup/cpp/function-like-keywords.expect.txt
+++ b/test/markup/cpp/function-like-keywords.expect.txt
@@ -1,3 +1,4 @@
+
 <span class="hljs-keyword">if</span> (ch) {}
 
 <span class="hljs-keyword">switch</span> (ch) {}
diff --git a/test/markup/css/pseudo.expect.txt b/test/markup/css/pseudo.expect.txt
new file mode 100644
index 0000000000..1ea40bb2ab
--- /dev/null
+++ b/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;
+}
diff --git a/test/markup/css/pseudo.txt b/test/markup/css/pseudo.txt
new file mode 100644
index 0000000000..fed60c0359
--- /dev/null
+++ b/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;
+}
diff --git a/test/markup/scss/default.expect.txt b/test/markup/scss/default.expect.txt
index a1e34b82ae..19e5443bff 100644
--- a/test/markup/scss/default.expect.txt
+++ b/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>;