From d511a3e9922e93e8d85d7bf657b15c4a8602347a Mon Sep 17 00:00:00 2001
From: Sean Kellogg <skellogg@trilogyinteractive.com>
Date: Wed, 20 Apr 2011 17:37:03 -0700
Subject: [PATCH] enhanced css syntax rules

 - support for id, class, and element definition syntax
 - support for media selector blocks
 - ensure ruleset highlighting is only applied inside of definition blocks, not the entire document
---
 lib/ace/mode/css_highlight_rules.js | 138 ++++++++++++++++++++++++----
 1 file changed, 119 insertions(+), 19 deletions(-)

diff --git a/lib/ace/mode/css_highlight_rules.js b/lib/ace/mode/css_highlight_rules.js
index a312ee0c..83f44860 100644
--- a/lib/ace/mode/css_highlight_rules.js
+++ b/lib/ace/mode/css_highlight_rules.js
@@ -97,7 +97,7 @@ var CssHighlightRules = function() {
         "vertical-ideographic|vertical-text|visible|w-resize|wait|whitespace|" +
         "zero").split("|")
     );
-    
+
     var colors = lang.arrayToMap(
         ("aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|" +
         "purple|red|silver|teal|white|yellow").split("|")
@@ -122,12 +122,12 @@ var CssHighlightRules = function() {
         return re.join("");
     }
 
-    this.$rules = {
-        "start" : [ {
+    var base_ruleset = [
+        {
             token : "comment", // multi line comment
             regex : "\\/\\*",
-            next : "comment"
-        }, {
+            next : "ruleset_comment"
+        },{
             token : "string", // single line
             regex : '["](?:(?:\\\\.)|(?:[^"\\\\]))*?["]'
         }, {
@@ -190,12 +190,6 @@ var CssHighlightRules = function() {
         }, {
             token : "constant.numeric", // hex3 color
             regex : "#[a-fA-F0-9]{3}"
-        }, {
-            token : "lparen",
-            regex : "\{"
-        }, {
-            token : "rparen",
-            regex : "\}"
         }, {
             token : function(value) {
                 if (properties.hasOwnProperty(value.toLowerCase())) {
@@ -215,15 +209,121 @@ var CssHighlightRules = function() {
                 }
             },
             regex : "\\-?[a-zA-Z_][a-zA-Z0-9_\\-]*"
-        }],
-        "comment" : [{
-            token : "comment", // closing comment
-            regex : ".*?\\*\\/",
-            next : "start"
+        }
+      ];
+
+    var ruleset = lang.copyArray( base_ruleset );
+    ruleset.unshift(
+      {
+        token : "rparen",
+        regex : "\}",
+        next:   "start"
+      }
+    );
+
+    var media_ruleset = lang.copyArray( base_ruleset );
+    media_ruleset.unshift(
+      {
+        token : "rparen",
+        regex : "\}",
+        next:   "media"
+      }
+    );
+
+    var base_comment = [
+      {
+          token : "comment", // comment spanning whole line
+          regex : ".+"
+      }
+    ];
+
+    var comment = lang.copyArray( base_comment );
+    comment.unshift(
+      {
+          token : "comment", // closing comment
+          regex : ".*?\\*\\/",
+          next : "start"
+      }
+    );
+
+    var media_comment = lang.copyArray( base_comment );
+    media_comment.unshift(
+      {
+          token : "comment", // closing comment
+          regex : ".*?\\*\\/",
+          next : "media"
+      }
+    );
+
+    var ruleset_comment = lang.copyArray( base_comment );
+    ruleset_comment.unshift(
+      {
+          token : "comment", // closing comment
+          regex : ".*?\\*\\/",
+          next : "ruleset"
+      }
+    );
+
+    this.$rules = {
+        "start" : [ {
+            token : "comment", // multi line comment
+            regex : "\\/\\*",
+            next : "comment"
         }, {
-            token : "comment", // comment spanning whole line
-            regex : ".+"
-        }]
+            token: "lparen",
+            regex: "{",
+            next:  "ruleset"
+        }, {
+            token: "string",
+            regex: "@media.*?{",
+            next:  "media"
+        },{
+            token: "keyword",
+            regex: "#[a-zA-Z0-9-_]+"
+        },{
+            token: "variable",
+            regex: "\\.[a-zA-Z0-9-_]+"
+        },{
+            token: "string",
+            regex: ":[a-zA-Z0-9-_]+"
+        },{
+            token: "constant",
+            regex: "[a-zA-Z0-9-_]+"
+        }],
+
+        "media" : [ {
+            token : "comment", // multi line comment
+            regex : "\\/\\*",
+            next : "media_comment"
+        }, {
+            token: "lparen",
+            regex: "{",
+            next:  "media_ruleset"
+        },{
+            token: "string",
+            regex: "}",
+            next:  "start"
+        },{
+            token: "keyword",
+            regex: "#[a-zA-Z0-9-_]+"
+        },{
+            token: "variable",
+            regex: "\\.[a-zA-Z0-9-_]+"
+        },{
+            token: "string",
+            regex: ":[a-zA-Z0-9-_]+"
+        },{
+            token: "constant",
+            regex: "[a-zA-Z0-9-_]+"
+        }],
+
+        "comment" : comment,
+
+        "ruleset" : ruleset,
+        "ruleset_comment" : ruleset_comment,
+
+        "media_ruleset" : media_ruleset,
+        "media_comment" : media_comment
     };
 };