enh(css) add support for hex color alpha channel (#3360) (#3362)

Author: ierehon1905

CHANGES.md

@@ -40,6 +40,7 @@ Grammars:
 - enh(nsis) add new NSIS commands (#3351) [idleberg][]
 - fix(nsis) set `case_insensitive` to `true` (#3351) [idleberg][]
 - fix(css/less/stylus/scss) highlight single-colon psuedo-elements properly (#3240) [zsoltlengyelit][]
+- fix(css) add css hex color alpha support (#3360) [ierehon1905][]
 
 [Austin Schick]: https://github.com/austin-schick
 [Josh Goebel]: https://github.com/joshgoebel
@@ -53,6 +54,7 @@ Grammars:
 [zsoltlengyelit]: github.com/zsoltlengyelit
 [Syb Wartna]:https://github.com/waarissyb
 [idleberg]: https://github.com/idleberg
+[ierehon1905]: https://github.com/ierehon1905
 
 
 ## Version 11.2.0

src/languages/lib/css-shared.js

@@ -7,7 +7,7 @@ export const MODES = (hljs) => {
     BLOCK_COMMENT: hljs.C_BLOCK_COMMENT_MODE,
     HEXCOLOR: {
       scope: 'number',
-      begin: '#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})'
+      begin: /#(([0-9a-fA-F]{3,4})|(([0-9a-fA-F]{2}){3,4}))\b/
     },
     FUNCTION_DISPATCH: {
       className: "built_in",

test/markup/css/hex-colors.expect.txt

@@ -0,0 +1,19 @@
+<span class="hljs-selector-class">.test-short</span> {
+    <span class="hljs-attribute">color</span>: <span class="hljs-number">#abc</span>;
+}
+
+<span class="hljs-selector-class">.test-short-alpha</span> {
+    <span class="hljs-attribute">color</span>: <span class="hljs-number">#abcd</span>;
+}
+
+<span class="hljs-selector-class">.test-long</span> {
+    <span class="hljs-attribute">color</span>: <span class="hljs-number">#aabbcc</span>;
+}
+
+<span class="hljs-selector-class">.test-long-alpha</span> {
+    <span class="hljs-attribute">color</span>: <span class="hljs-number">#aabbccdd</span>;
+}
+
+<span class="hljs-selector-class">.test-invalid</span> {
+    <span class="hljs-attribute">color</span>: #aabbccd;
+}

test/markup/css/hex-colors.txt

@@ -0,0 +1,19 @@
+.test-short {
+    color: #abc;
+}
+
+.test-short-alpha {
+    color: #abcd;
+}
+
+.test-long {
+    color: #aabbcc;
+}
+
+.test-long-alpha {
+    color: #aabbccdd;
+}
+
+.test-invalid {
+    color: #aabbccd;
+}