fixed css escape chars

CHANGES.md

@@ -19,6 +19,7 @@ Core Grammars:
 - enh(bash) add reserved keywords `time` and `coproc` [Álvaro Mondéjar][]
 - fix(c) - Fixed hex numbers with decimals  [Dxuian]
 - fix(ruby) - fix `|=` operator false positives (as block arguments) [Aboobacker MK]
+- fix(css) - Fixed css escape chars  [Dxuian]
 
 New Grammars:
 

src/languages/css.js

@@ -13,8 +13,9 @@ export default function(hljs) {
   const modes = css.MODES(hljs);
   const VENDOR_PREFIX = { begin: /-(webkit|moz|ms|o)-(?=[a-z])/ };
   const AT_MODIFIERS = "and or not only";
-  const AT_PROPERTY_RE = /@-?\w[\w]*(-\w+)*/; // @-webkit-keyframes
-  const IDENT_RE = '[a-zA-Z-][a-zA-Z0-9_-]*';
+  const AT_PROPERTY_RE = /@-?\b\w[\w-]*\b/; // @-webkit-keyframes
+  const IDENT_RE = /[a-zA-Z-][a-zA-Z0-9_-]*/;
+  const SELECTOR_RE = /[a-zA-Z_-]([a-zA-Z0-9_-]|\\[.$^&+|~=:<>*\[\]@])*/;
   const STRINGS = [
     hljs.APOS_STRING_MODE,
     hljs.QUOTE_STRING_MODE
@@ -37,12 +38,12 @@ export default function(hljs) {
       modes.CSS_NUMBER_MODE,
       {
         className: 'selector-id',
-        begin: /#[A-Za-z0-9_-]+/,
+        begin: regex.concat(/#/, IDENT_RE),
         relevance: 0
       },
       {
         className: 'selector-class',
-        begin: '\\.' + IDENT_RE,
+        begin: regex.concat(/\./, SELECTOR_RE),
         relevance: 0
       },
       modes.ATTRIBUTE_SELECTOR_MODE,

test/markup/css/pseudo-selector.expect.txt

@@ -22,3 +22,57 @@
   <span class="hljs-attribute">font-weight</span>: bold;
   <span class="hljs-attribute">color</span>: brown;
 }
+
+
+<span class="hljs-selector-class">.dark\:hover\:bg-sky-900\:text-white\:border\:rounded\:shadow</span><span class="hljs-selector-pseudo">:hover</span> {
+  <span class="hljs-attr">--tw-bg-opacity</span>: <span class="hljs-number">1</span>;
+  <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">12</span> <span class="hljs-number">74</span> <span class="hljs-number">110</span> / <span class="hljs-built_in">var</span>(--tw-bg-opacity));
+  <span class="hljs-attribute">color</span>: white;
+  <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid white;
+  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">0.5rem</span>;
+  <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">4px</span> <span class="hljs-number">6px</span> -<span class="hljs-number">1px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.1</span>), <span class="hljs-number">0</span> <span class="hljs-number">2px</span> <span class="hljs-number">4px</span> -<span class="hljs-number">1px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.06</span>);
+}
+
+<span class="hljs-selector-class">.class\:name</span> {
+	<span class="hljs-attribute">color</span>: red;
+}
+
+<span class="hljs-selector-class">.class\.name</span> {
+	<span class="hljs-attribute">font-weight</span>: bold;
+}
+
+<span class="hljs-selector-class">.at\@sign</span> {
+	<span class="hljs-attribute">font-family</span>: monospace;
+}
+
+<span class="hljs-selector-class">.aske\$dollar</span> {
+	<span class="hljs-attribute">color</span>: green;
+}
+
+<span class="hljs-selector-class">.caret\^sign</span> {
+	<span class="hljs-attribute">text-transform</span>: uppercase;
+}
+
+<span class="hljs-selector-class">.and\&amp;sign</span> {
+	<span class="hljs-attribute">background-color</span>: yellow;
+}
+
+<span class="hljs-selector-class">.asterisk\*sign</span> {
+	<span class="hljs-attribute">font-size</span>: <span class="hljs-number">1.2em</span>;
+}
+
+<span class="hljs-selector-class">.plus\+sign</span> {
+	<span class="hljs-attribute">letter-spacing</span>: <span class="hljs-number">2px</span>;
+}
+
+<span class="hljs-selector-class">.pipe\|class</span> {
+	<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;
+}
+
+<span class="hljs-selector-class">.tilde\~sign</span> {
+	<span class="hljs-attribute">text-shadow</span>: <span class="hljs-number">1px</span> <span class="hljs-number">1px</span> <span class="hljs-number">2px</span> gray;
+}
+
+<span class="hljs-selector-class">.equals\=sign</span> {
+	<span class="hljs-attribute">text-align</span>: center;
+}

test/markup/css/pseudo-selector.txt

@@ -22,3 +22,57 @@ p::first-letter {
   font-weight: bold;
   color: brown;
 }
+
+
+.dark\:hover\:bg-sky-900\:text-white\:border\:rounded\:shadow:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(12 74 110 / var(--tw-bg-opacity));
+  color: white;
+  border: 1px solid white;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.class\:name {
+	color: red;
+}
+
+.class\.name {
+	font-weight: bold;
+}
+
+.at\@sign {
+	font-family: monospace;
+}
+
+.aske\$dollar {
+	color: green;
+}
+
+.caret\^sign {
+	text-transform: uppercase;
+}
+
+.and\&sign {
+	background-color: yellow;
+}
+
+.asterisk\*sign {
+	font-size: 1.2em;
+}
+
+.plus\+sign {
+	letter-spacing: 2px;
+}
+
+.pipe\|class {
+	border: 1px solid black;
+}
+
+.tilde\~sign {
+	text-shadow: 1px 1px 2px gray;
+}
+
+.equals\=sign {
+	text-align: center;
+}