From 3d29009977253571a077ce35738ec014843e276d Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Mon, 24 Apr 2023 18:37:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96css=E9=AB=98=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/code/colorful.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/code/colorful.js b/src/code/colorful.js
index 29de7ff..91d2468 100644
--- a/src/code/colorful.js
+++ b/src/code/colorful.js
@@ -195,15 +195,19 @@ export function colorHtml(code) {
 export function colorCss(code) {
   code = code
     .replace(STR, '<cc class="t-str">$1$2$1</cc>')
-    .replace(/(\$[a-zA-Z\d_]+)/g, '<c class="t-var">$1</c>')
+    .replace(/(\$[a-zA-Z\d_\-]+)/g, '<c class="t-var">$1</c>')
     .replace(/(\-\-[a-z\d]+\-[a-z\d]+)/g, '<c class="t-const">$1</c>')
     .replace(
       /:(hover|after|active|last\-child|first\-child|nth\-child)/g,
       '<c class="t-buildin">:$1</c>'
     )
     .replace(
-      /(?=\s)?([ ][\.#])([\w\-]+)/g,
-      '<c class="t-comment">$1</c><c class="t-buildin">$2</c>'
+      /^((?:[ ])*)([\.#])([\w\-]+)/gm,
+      '$1<c class="t-comment">$2</c><c class="t-keyword">$3</c>'
+    )
+    .replace(
+      /:(root|host)/g,
+      '<c class="t-comment">:</c><c class="t-keyword">$1</c>'
     )
     .replace(/([a-zA-Z\-]+):(\s?[^\n]+)/g, (m, k, v) => {
       if (v.trim() !== '(' && !v.endsWith('</cc>;')) {