support highlighting important and function values

html_resources/main.css

@@ -96,12 +96,14 @@ pre > div{
 .pseudo{ color: silver }
 .id{ color: rgb(240, 148, 138) }
 .class{ color: skyblue }
-.attribute{ color: rgb(210,120,190) }  
+.attribute{ color: rgb(120,230,170) }  
 .atrule{ color: lime }
 .atvalue{ color: lightblue }
 .property{ color: palegoldenrod }
 .value{ color: skyblue }
 .curly{ color: magenta }
+.function{ color: silver }
+.important-tag{ color: orange }
 
 @keyframes showDelayed{ from{ visibility: hidden } to{ visibility: visibile }}
 

html_resources/selector.js

@@ -273,9 +273,8 @@ const Highlighter = new(function(){
       }
       let n = document.createElement("span");
       
-      
-      if(type==="selector"){
-        
+      switch(type){
+        case "selector":
           let parts = token.split(/([\.#:\[]\w[\w-_"'=\]]*|\s\w[\w-_"'=\]]*)/);
         
           for(let part of parts){
@@ -296,9 +295,8 @@ const Highlighter = new(function(){
                 n.append(part);
             }
           }
-        
-        
-      } else if(type === "comment"){
+          break
+        case "comment":
           let linksToFile = token.match(/[\w-\.]+\.css/g);
           if(linksToFile && linksToFile.length){
             let linkIdx = 0;
@@ -316,10 +314,28 @@ const Highlighter = new(function(){
             }
             n.append(token.substring(fromIdx));
           }else{
-          n.textContent = c || token
+            n.textContent = c || token;
+          }
+          break;
+        case "value":
+          let startImportant = token.indexOf("!");
+          if(startImportant === -1){
+            n.textContent = c || token;
+          }else{
+            n.textContent = token.substr(0,startImportant);
+            let importantTag = document.createElement("span");
+            importantTag.className = "important-tag";
+            importantTag.textContent = "!important";
+            n.appendChild(importantTag);
+            if(token.length > (9 + startImportant)){
+              n.append(";")
             }
           }
-      else{
+          break;
+        case "function":
+          n.textContent = c || token.slice(0,-1);
+          break
+        default:
           n.textContent = c || token;
       }
       
@@ -330,9 +346,11 @@ const Highlighter = new(function(){
     }
     
     let c;
+    let functionValueLevel = 0;
     let curly = false;
     while(pointer < text.length){
       c = text[pointer];
+      
       const currentState = state.now();
       curly = currentState != 2 && (c === "{" || c === "}");
       if(!curly){
@@ -402,6 +420,11 @@ const Highlighter = new(function(){
             case "}":
               createElementFromToken("value");
               state.set(0);
+              break;
+            case "(":
+              createElementFromToken("value");
+              functionValueLevel++;
+              state.set(7);
           }
           break;
         case 5:
@@ -419,13 +442,26 @@ const Highlighter = new(function(){
               state.set(0);
           }
           break
+        case 7:
+          switch(c){
+            case ")":
+              functionValueLevel--;
+              if(functionValueLevel === 0){
+                createElementFromToken("function");
+                token = ")";
+                state.set(4);
+              }
+              break;
+            case "}":
+              functionValueLevel = 0;
+              state.set(0)
+          }
         default:
           false
       }
       
       curly && createElementFromToken("curly",c);
       
-
       pointer++
     }
     createElementFromToken("text");