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,54 +273,70 @@ const Highlighter = new(function(){
       }
       let n = document.createElement("span");
       
+      switch(type){
+        case "selector":
+          let parts = token.split(/([\.#:\[]\w[\w-_"'=\]]*|\s\w[\w-_"'=\]]*)/);
         
-      if(type==="selector"){
+          for(let part of parts){
-        
+            if(part.length === 0){
-        let parts = token.split(/([\.#:\[]\w[\w-_"'=\]]*|\s\w[\w-_"'=\]]*)/);
+              continue
-        
+            }
-        for(let part of parts){
+            let c = part[0];
-          if(part.length === 0){
+            switch (c){
-            continue
+              case ":":
+              case "#":
+              case "[":
+              case ".":
+                let p = n.appendChild(document.createElement("span"));
+                p.className = selectorToClassMap.get(c);
+                p.textContent = part;
+                break;
+              default:
+                n.append(part);
+            }
           }
-          let c = part[0];
+          break
-          switch (c){
+        case "comment":
-            case ":":
+          let linksToFile = token.match(/[\w-\.]+\.css/g);
-            case "#":
+          if(linksToFile && linksToFile.length){
-            case "[":
+            let linkIdx = 0;
-            case ".":
+            let fromIdx = 0;
-              let p = n.appendChild(document.createElement("span"));
+            while(linkIdx < linksToFile.length){
-							p.className = selectorToClassMap.get(c);
+              let part = linksToFile[linkIdx++];
-              p.textContent = part;
+              let idx = token.indexOf(part);
-              break;
+              n.append(token.substring(fromIdx,idx));
-            default:
+              let link = document.createElement("a");
-              n.append(part);
+              link.textContent = part;
+              link.href = `https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/${part}`;
+              link.target = "_blank";
+              n.appendChild(link);
+              fromIdx = idx + part.length;
+            }
+            n.append(token.substring(fromIdx));
+          }else{
+            n.textContent = c || token;
           }
-        }
+          break;
-        
+        case "value":
-        
+          let startImportant = token.indexOf("!");
-      } else if(type === "comment"){
+          if(startImportant === -1){
-        let linksToFile = token.match(/[\w-\.]+\.css/g);
+            n.textContent = c || token;
-        if(linksToFile && linksToFile.length){
+          }else{
-          let linkIdx = 0;
+            n.textContent = token.substr(0,startImportant);
-          let fromIdx = 0;
+            let importantTag = document.createElement("span");
-          while(linkIdx < linksToFile.length){
+            importantTag.className = "important-tag";
-            let part = linksToFile[linkIdx++];
+            importantTag.textContent = "!important";
-            let idx = token.indexOf(part);
+            n.appendChild(importantTag);
-            n.append(token.substring(fromIdx,idx));
+            if(token.length > (9 + startImportant)){
-            let link = document.createElement("a");
+              n.append(";")
-            link.textContent = part;
+            }
-            link.href = `https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/${part}`;
-            link.target = "_blank";
-            n.appendChild(link);
-            fromIdx = idx + part.length;
           }
-          n.append(token.substring(fromIdx));
+          break;
-        }else{
+        case "function":
-          n.textContent = c || token
+          n.textContent = c || token.slice(0,-1);
-        }
+          break
-      }
+        default:
-      else{
+          n.textContent = c || token;
-        n.textContent = c || token;
       }
       
       n.className = (`token ${type}`);
@@ -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");