diff --git a/html_resources/main.css b/html_resources/main.css
index 5fc62f8..d7b451c 100644
--- a/html_resources/main.css
+++ b/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 }}
diff --git a/html_resources/selector.js b/html_resources/selector.js
index dba6123..fddfdf8 100644
--- a/html_resources/selector.js
+++ b/html_resources/selector.js
@@ -273,54 +273,70 @@ 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-_"'=\]]*)/);
- let parts = token.split(/([\.#:\[]\w[\w-_"'=\]]*|\s\w[\w-_"'=\]]*)/);
-
- for(let part of parts){
- if(part.length === 0){
- continue
+ for(let part of parts){
+ if(part.length === 0){
+ continue
+ }
+ let c = part[0];
+ switch (c){
+ 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];
- switch (c){
- case ":":
- case "#":
- case "[":
- case ".":
- let p = n.appendChild(document.createElement("span"));
- p.className = selectorToClassMap.get(c);
- p.textContent = part;
- break;
- default:
- n.append(part);
+ break
+ case "comment":
+ let linksToFile = token.match(/[\w-\.]+\.css/g);
+ if(linksToFile && linksToFile.length){
+ let linkIdx = 0;
+ let fromIdx = 0;
+ while(linkIdx < linksToFile.length){
+ let part = linksToFile[linkIdx++];
+ let idx = token.indexOf(part);
+ n.append(token.substring(fromIdx,idx));
+ let link = document.createElement("a");
+ 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;
}
- }
-
-
- } else if(type === "comment"){
- let linksToFile = token.match(/[\w-\.]+\.css/g);
- if(linksToFile && linksToFile.length){
- let linkIdx = 0;
- let fromIdx = 0;
- while(linkIdx < linksToFile.length){
- let part = linksToFile[linkIdx++];
- let idx = token.indexOf(part);
- n.append(token.substring(fromIdx,idx));
- let link = document.createElement("a");
- 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;
+ 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(";")
+ }
}
- n.append(token.substring(fromIdx));
- }else{
- n.textContent = c || token
- }
- }
- else{
- n.textContent = c || token;
+ break;
+ case "function":
+ n.textContent = c || token.slice(0,-1);
+ break
+ default:
+ 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");