Add cheap CSS highlighting which is unfortunately far to slow to make any use of.

common/modules/styles.jsm

@@ -341,7 +341,7 @@ var Styles = Module("Styles", {
                 (?:
                     <space>* : \s* (?P<value>
                         (?:
-                            [-\w]
+                            [-\w]+
                             (?:
                                 \s* \( \s*
                                     (?: <string> | [^)]*  )
@@ -360,7 +360,60 @@ var Styles = Module("Styles", {
         {
             space: /(?: \s | \/\* .*? \*\/ )/,
             string: /(?:" (?:[^\\"]|\\.)* (?:"|$) | '(?:[^\\']|\\.)* (?:'|$) )/
-        })
+        }),
+
+    patterns: memoize({
+        iter: function (pattern, str) {
+            pattern = this[pattern];
+            pattern.lastIndex = 0;
+
+            let match;
+            while ((match = pattern.exec(str)) && match[0].length)
+                yield match;
+        },
+
+        get property() util.regexp(<![CDATA[
+                (?:
+                    (?P<preSpace> <space>*)
+                    (?P<name> [-a-z]*)
+                    (?:
+                        <space>* : \s* (?P<value>
+                            <token>*
+                        )
+                    )?
+                )
+                (?P<postSpace> <space>* (?: ; | $) )
+            ]]>, "gi", this),
+
+        get function() util.regexp(<![CDATA[
+                (?P<function>
+                    \s* \( \s*
+                        (?: <string> | [^)]*  )
+                    \s* (?: \) | $)
+                )
+            ]]>, "g", this),
+
+        space: /(?: \s | \/\* .*? \*\/ )/,
+
+        get string() util.regexp(<![CDATA[
+                (?P<string>
+                    " (?:[^\\"]|\\.)* (?:"|$) |
+                    ' (?:[^\\']|\\.)* (?:'|$)
+                )
+            ]]>, "g", this),
+
+        get token() util.regexp(<![CDATA[
+            (?P<token>
+                (?P<word> [-\w]+)
+                <function>?
+                \s*
+                | (?P<important> !important\b)
+                | \s* <string> \s*
+                | <space>+
+                | [^;}\s]+
+            )
+        ]]>, "gi", this)
+    })
 }, {
     commands: function (dactyl, modules, window) {
         const commands = modules.commands;
@@ -545,7 +598,34 @@ var Styles = Module("Styles", {
                 null,
                 function (context, obj, args) this.sheets
             ]);
-    }
+    },
+    template: function () {
+        let patterns = Styles.patterns;
+
+        template.highlightCSS = function highlightCSS(css) {
+            XML.prettyPrinting = XML.ignoreWhitespace = false;
+
+            return this.highlightRegexp(css, patterns.property, function (match) <>{
+                match.preSpace}{template.filter(match.name)}: {
+
+                    template.highlightRegexp(match.value, patterns.token, function (match) {
+                        if (match.function)
+                            return <>{template.filter(match.word)}{
+                                template.highlightRegexp(match.function, patterns.string,
+                                    function (match) <span highlight="String">{match.string}</span>)
+                            }</>;
+                        if (match.important == "!important")
+                            return <span highlight="String">{match.important}</span>;
+                        if (match.string)
+                            return <span highlight="String">{match.string}</span>;
+                        return template.highlightRegexp(match.wholeMatch, /^(\d+)(em|ex|px|in|cm|mm|pt|pc)?/g,
+                                                        function (m, n, u) <><span highlight="Number">{n}</span><span highlight="Object">{u || ""}</span></>);
+                    })
+
+                }{ match.postSpace }</>
+            )
+        }
+    },
 });
 
 endModule();

common/modules/template.jsm

@@ -161,14 +161,15 @@ var Template = Module("Template", {
 
     highlightRegexp: function highlightRegexp(str, re, highlight) {
         return this.highlightSubstrings(str, (function () {
+            re.lastIndex = 0;
             let res;
             while ((res = re.exec(str)) && res[0].length)
-                yield [res.index, res[0].length, res];
+                yield [res.index, res[0].length, res.wholeMatch ? [res] : res];
         })(), highlight || template.filter);
     },
 
     highlightSubstrings: function highlightSubstrings(str, iter, highlight) {
-        XML.ignoreWhitespace = false; XML.prettyPrinting = false;
+        XML.ignoreWhitespace = XML.prettyPrinting = false;
         if (typeof str == "xml")
             return str;
         if (str == "")

common/modules/util.jsm

@@ -1220,12 +1220,13 @@ var Util = Module("Util", XPCOM([Ci.nsIObserver, Ci.nsISupportsWeakReference]),
             expr = expr.source;
 
         if (tokens)
-            expr = String.replace(expr, /<(\w+)>/g, function (m, n1) set.has(tokens, n1) ? tokens[n1].source || tokens[n1] : m);
+            expr = String.replace(expr, /(\(?P)?<(\w+)>/g, function (m, n1, n2) !n1 && set.has(tokens, n2) ? tokens[n2].dactylSource || tokens[n2].source || tokens[n2] : m);
 
         expr = String.replace(expr, /\/\/[^\n]*|\/\*[^]*?\*\//gm, "")
                      .replace(/\s+/g, "");
 
         if (/\(\?P</.test(expr)) {
+            var source = expr;
             let groups = ["wholeMatch"];
             expr = expr.replace(/((?:[^[(\\]|\\.|\[(?:[^\]]|\\.)*\])*)\((?:\?P<([^>]+)>|(\?))?/gy,
                 function (m0, m1, m2, m3) {
@@ -1234,7 +1235,6 @@ var Util = Module("Util", XPCOM([Ci.nsIObserver, Ci.nsISupportsWeakReference]),
                     return m1 + "(" + (m3 || "");
                 });
             var struct = Struct.apply(null, groups);
-            var source = expr;
         }
 
         let res = update(RegExp(expr, flags), {
@@ -1244,7 +1244,7 @@ var Util = Module("Util", XPCOM([Ci.nsIObserver, Ci.nsISupportsWeakReference]),
         if (struct)
             update(res, {
                 exec: function exec() let (match = exec.superapply(this, arguments)) match && struct.fromArray(match),
-                struct: struct
+                dactylSource: source, struct: struct
             });
         return res;
     }, {