Web Inspector: Implement SCSS source highlighter
authorapavlov@chromium.org <apavlov@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 7 Sep 2012 13:24:43 +0000 (13:24 +0000)
committerapavlov@chromium.org <apavlov@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 7 Sep 2012 13:24:43 +0000 (13:24 +0000)
https://bugs.webkit.org/show_bug.cgi?id=95585

Reviewed by Vsevolod Vlasov.

Source/WebCore:

This change modifies the existing CSS highlighter to support SCSS as well. The "text/x-scss" mime-type is assigned to SASSSource.

* inspector/front-end/CSSCompletions.js:
(WebInspector.CSSCompletions.cssPropertiesMetainfoKeySet):
* inspector/front-end/ContentProviders.js:
(WebInspector.StaticContentProvider): Enabled clients to supply the content mime-type.
(WebInspector.StaticContentProvider.prototype.mimeType):
(WebInspector.StaticContentProvider.prototype.requestContent): Use client-supplied content mime-type, if any.
* inspector/front-end/SASSSourceMapping.js:
(WebInspector.SASSSource): Construct StaticContentProvider with the "text/x-scss" mime-type.
* inspector/front-end/SourceCSSTokenizer.js:
(WebInspector.SourceCSSTokenizer):
(WebInspector.SourceCSSTokenizer.prototype.nextToken):
* inspector/front-end/SourceCSSTokenizer.re2js: Extended with the SCSS syntax.
* inspector/front-end/SourceTokenizer.js:
(WebInspector.SourceTokenizer.Registry):
* inspector/front-end/inspectorSyntaxHighlight.css:
(.webkit-css-bang-keyword):

LayoutTests:

Test modified to cover the SCSS syntax as well.

* inspector/syntax-highlight-css-expected.txt:
* inspector/syntax-highlight-css.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@127864 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/inspector/syntax-highlight-css-expected.txt
LayoutTests/inspector/syntax-highlight-css.html
Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/CSSCompletions.js
Source/WebCore/inspector/front-end/ContentProviders.js
Source/WebCore/inspector/front-end/SASSSourceMapping.js
Source/WebCore/inspector/front-end/SourceCSSTokenizer.js
Source/WebCore/inspector/front-end/SourceCSSTokenizer.re2js
Source/WebCore/inspector/front-end/SourceTokenizer.js
Source/WebCore/inspector/front-end/inspectorSyntaxHighlight.css

index 96f7254dfc6c48a4d646f21c5e6f587980c706e1..59162913ae669ea2dd1ff7ab3932f38cb05b8606 100644 (file)
@@ -1,3 +1,15 @@
+2012-09-03  Alexander Pavlov  <apavlov@chromium.org>
+
+        Web Inspector: Implement SCSS source highlighter
+        https://bugs.webkit.org/show_bug.cgi?id=95585
+
+        Reviewed by Vsevolod Vlasov.
+
+        Test modified to cover the SCSS syntax as well.
+
+        * inspector/syntax-highlight-css-expected.txt:
+        * inspector/syntax-highlight-css.html:
+
 2012-09-07  Allan Sandfeld Jensen  <allan.jensen@nokia.com>
 
         Layout Test touchadjustment/iframe-boundary.html is failing
index 40a644915355409ca960902d0f69519efc773417..7dc9d39b9498307f229416b8abe6caec5c77b849 100644 (file)
@@ -1,12 +1,49 @@
-Tests that CSSSourceSyntaxHighlighter detects the tokens.
+Tests that (S)CSS syntax highlighter properly detects the tokens.
 
 a[href='/']: webkit-css-selector
-#content > a:hover: *,webkit-css-selector,*,webkit-css-selector,*,webkit-css-selector
+#content > a:hover: webkit-css-selector,*,webkit-css-selector,*
 @import url(style.css);: webkit-css-at-rule,*,webkit-css-keyword,*
 @import url("style.css") projection, tv;: webkit-css-at-rule,*,webkit-css-keyword,*,webkit-css-string,*,webkit-css-keyword,*,webkit-css-keyword,*
 @import "/css/fireball_unicode.css"; html {}: webkit-css-at-rule,*,webkit-css-string,*,webkit-css-selector,*,webkit-block-start,webkit-block-end
 @media screen { body { color: red; } }: webkit-css-at-rule,*,webkit-css-keyword,*,webkit-block-start,*,webkit-css-selector,*,webkit-block-start,*,webkit-css-property,*,webkit-css-color,*,webkit-block-end,*,webkit-block-end
 @font-face { font-family: "MyHelvetica"; }: webkit-css-at-rule,*,webkit-block-start,*,webkit-css-property,*,webkit-css-string,*,webkit-block-end
-p { color: color; red: red; color: #000; color: #FFF; color: #123AbC; color: #faebfe; color:papayawhip; }: webkit-css-selector,*,webkit-block-start,*,webkit-css-property,*,webkit-css-color,*,webkit-css-property,*,webkit-css-color,*,webkit-css-property,*,webkit-css-color,*,webkit-css-property,*,webkit-css-color,*,webkit-css-property,*,webkit-css-color,*,webkit-css-property,*,webkit-css-color,*,webkit-block-end
-p { margin: -10px !important; }: webkit-css-selector,*,webkit-block-start,*,webkit-css-property,*,webkit-css-number,*,webkit-css-important,*,webkit-block-end
+p { color: color; red: red; color: #000; color: #FFF; color: #123AbC; color: #faebfe; color:papayawhip; }: webkit-css-selector,*,webkit-block-start,*,webkit-css-property,*,webkit-css-selector,*,webkit-css-color,*,webkit-css-property,*,webkit-css-color,*,webkit-css-property,*,webkit-css-color,*,webkit-css-property,*,webkit-css-color,*,webkit-css-property,*,webkit-css-color,*,webkit-css-property,*,webkit-css-color,*,webkit-block-end
+p { margin: -10px !important; }: webkit-css-selector,*,webkit-block-start,*,webkit-css-property,*,webkit-css-number,*,webkit-css-bang-keyword,*,webkit-block-end
+$margin-left: $offsetBefore + 12px + $offsetAfter;: webkit-scss-variable,*,webkit-scss-variable,*,webkit-css-number,*,webkit-scss-variable,*
+$type: monster;
+p {
+@if $type == ocean {
+color: blue;
+} @else if $type == matador {
+color: red;
+} @else if $type == monster {
+color: green;
+} @else {
+color: black;
+}
+}: webkit-scss-variable,*,,webkit-css-selector,*,webkit-block-start,,webkit-css-at-rule,*,webkit-scss-variable,*,webkit-block-start,,webkit-css-property,*,webkit-css-color,*,,webkit-block-end,*,webkit-css-at-rule,*,webkit-css-at-rule,*,webkit-scss-variable,*,webkit-block-start,,webkit-css-property,*,webkit-css-color,*,,webkit-block-end,*,webkit-css-at-rule,*,webkit-css-at-rule,*,webkit-scss-variable,*,webkit-block-start,,webkit-css-property,*,webkit-css-color,*,,webkit-block-end,*,webkit-css-at-rule,*,webkit-block-start,,webkit-css-property,*,webkit-css-color,*,,webkit-block-end,,webkit-block-end
+@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }: webkit-css-at-rule,*,webkit-scss-variable,*,webkit-css-at-rule,*,webkit-css-number,*,webkit-css-at-rule,*,webkit-css-number,*,webkit-block-start,*,webkit-css-selector,*,webkit-block-start,webkit-scss-variable,webkit-block-end,*,webkit-block-start,*,webkit-css-property,*,webkit-css-number,*,webkit-scss-variable,*,webkit-block-end,*,webkit-block-end
+@mixin adjust-location($x, $y) {
+@if unitless($x) {
+@warn "Assuming #{$x} to be in pixels";
+$x: 1px * $x;
+}
+position: relative; left: $x; top: $y;
+}: webkit-css-at-rule,*,webkit-scss-variable,*,webkit-scss-variable,*,webkit-block-start,,webkit-css-at-rule,*,webkit-css-keyword,*,webkit-scss-variable,*,webkit-block-start,,webkit-css-at-rule,*,webkit-css-string,*,,webkit-scss-variable,*,webkit-css-number,*,webkit-scss-variable,*,,webkit-block-end,,webkit-css-property,*,webkit-css-keyword,*,webkit-css-property,*,webkit-scss-variable,*,webkit-css-property,*,webkit-scss-variable,*,,webkit-block-end
+#navbar {
+$navbar-width: 800px;
+$items: 5;
+$navbar-color: #ce4dd6;
+width: $navbar-width;
+border-bottom: 2px solid $navbar-color;
+li {
+@extend .notice !optional;
+float: left;
+width: $navbar-width/$items - 10px;
+background-color: lighten($navbar-color, 20%);
+&:hover {
+background-color: lighten($navbar-color, 10%);
+}
+}
+}: webkit-css-selector,*,webkit-block-start,,webkit-scss-variable,*,webkit-css-number,*,,webkit-scss-variable,*,webkit-css-number,*,,webkit-scss-variable,*,webkit-css-color,*,,webkit-css-property,*,webkit-scss-variable,*,,webkit-css-property,*,webkit-css-number,*,webkit-css-keyword,*,webkit-scss-variable,*,,webkit-css-selector,*,webkit-block-start,,webkit-css-at-rule,*,webkit-css-selector,*,webkit-css-bang-keyword,*,,webkit-css-property,*,webkit-css-keyword,*,,webkit-css-property,*,webkit-scss-variable,webkit-scss-variable,*,webkit-css-number,*,,webkit-css-property,*,webkit-css-keyword,*,webkit-scss-variable,*,webkit-css-number,*,,webkit-css-selector,*,webkit-block-start,,webkit-css-property,*,webkit-css-keyword,*,webkit-scss-variable,*,webkit-css-number,*,,webkit-block-end,,webkit-block-end,,webkit-block-end
 
index 71948328a57e7cfb897f5f38c03504a9e78cce36..d66ba0d10d91f2bddf9cdd5f884da8e7084f2ed7 100644 (file)
@@ -6,20 +6,62 @@
 
 function test()
 {
-    function dumpSyntaxHighlightCSS(str)
+    function dumpSyntaxHighlightSCSS(str)
     {
         InspectorTest.dumpSyntaxHighlight(str, "text/css");
     }
 
-    dumpSyntaxHighlightCSS("a[href='/']");
-    dumpSyntaxHighlightCSS("#content > a:hover");
-    dumpSyntaxHighlightCSS("@import url(style.css);");
-    dumpSyntaxHighlightCSS("@import url(\"style.css\") projection, tv;");
-    dumpSyntaxHighlightCSS("@import \"/css/fireball_unicode.css\"; html {}");
-    dumpSyntaxHighlightCSS("@media screen { body { color: red; } }");
-    dumpSyntaxHighlightCSS("@font-face { font-family: \"MyHelvetica\"; }");
-    dumpSyntaxHighlightCSS("p { color: color; red: red; color: #000; color: #FFF; color: #123AbC; color: #faebfe; color:papayawhip; }");
-    dumpSyntaxHighlightCSS("p { margin: -10px !important; }");
+    dumpSyntaxHighlightSCSS("a[href='/']");
+    dumpSyntaxHighlightSCSS("#content > a:hover");
+    dumpSyntaxHighlightSCSS("@import url(style.css);");
+    dumpSyntaxHighlightSCSS("@import url(\"style.css\") projection, tv;");
+    dumpSyntaxHighlightSCSS("@import \"/css/fireball_unicode.css\"; html {}");
+    dumpSyntaxHighlightSCSS("@media screen { body { color: red; } }");
+    dumpSyntaxHighlightSCSS("@font-face { font-family: \"MyHelvetica\"; }");
+    dumpSyntaxHighlightSCSS("p { color: color; red: red; color: #000; color: #FFF; color: #123AbC; color: #faebfe; color:papayawhip; }");
+    dumpSyntaxHighlightSCSS("p { margin: -10px !important; }");
+    dumpSyntaxHighlightSCSS("$margin-left: $offsetBefore + 12px + $offsetAfter;");
+    dumpSyntaxHighlightSCSS("$type: monster;\n" +
+        "p {\n" +
+          "@if $type == ocean {\n" +
+            "color: blue;\n" +
+          "} @else if $type == matador {\n" +
+            "color: red;\n" +
+          "} @else if $type == monster {\n" +
+            "color: green;\n" +
+          "} @else {\n" +
+            "color: black;\n" +
+          "}\n" +
+        "}");
+    dumpSyntaxHighlightSCSS("@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }");
+    dumpSyntaxHighlightSCSS(
+        "@mixin adjust-location($x, $y) {\n" +
+            "@if unitless($x) {\n" +
+                "@warn \"Assuming #{$x} to be in pixels\";\n" +
+                "$x: 1px * $x;\n" +
+            "}\n" +
+            "position: relative; left: $x; top: $y;\n" +
+        "}");
+
+    dumpSyntaxHighlightSCSS(
+        "#navbar {\n" +
+            "$navbar-width: 800px;\n" +
+            "$items: 5;\n" +
+            "$navbar-color: #ce4dd6;\n" +
+
+            "width: $navbar-width;\n" +
+            "border-bottom: 2px solid $navbar-color;\n" +
+
+            "li {\n" +
+                "@extend .notice !optional;\n" +
+                "float: left;\n" +
+                "width: $navbar-width/$items - 10px;\n" +
+                "background-color: lighten($navbar-color, 20%);\n" +
+                "&:hover {\n" +
+                    "background-color: lighten($navbar-color, 10%);\n" +
+                "}\n" +
+            "}\n" +
+        "}");
 
     InspectorTest.completeTest();
 }
@@ -29,7 +71,7 @@ function test()
 
 <body onload="runTest()">
 <p>
-Tests that CSSSourceSyntaxHighlighter detects the tokens.
+Tests that (S)CSS syntax highlighter properly detects the tokens.
 </p>
 
 </body>
index 276c354944556176b58b8b8ce33efb702b408a3f..397a917216179944a9ab793bfb6ccafa35b7c4df 100644 (file)
@@ -1,3 +1,29 @@
+2012-09-06  Alexander Pavlov  <apavlov@chromium.org>
+
+        Web Inspector: Implement SCSS source highlighter
+        https://bugs.webkit.org/show_bug.cgi?id=95585
+
+        Reviewed by Vsevolod Vlasov.
+
+        This change modifies the existing CSS highlighter to support SCSS as well. The "text/x-scss" mime-type is assigned to SASSSource.
+
+        * inspector/front-end/CSSCompletions.js:
+        (WebInspector.CSSCompletions.cssPropertiesMetainfoKeySet):
+        * inspector/front-end/ContentProviders.js:
+        (WebInspector.StaticContentProvider): Enabled clients to supply the content mime-type.
+        (WebInspector.StaticContentProvider.prototype.mimeType):
+        (WebInspector.StaticContentProvider.prototype.requestContent): Use client-supplied content mime-type, if any.
+        * inspector/front-end/SASSSourceMapping.js:
+        (WebInspector.SASSSource): Construct StaticContentProvider with the "text/x-scss" mime-type.
+        * inspector/front-end/SourceCSSTokenizer.js:
+        (WebInspector.SourceCSSTokenizer):
+        (WebInspector.SourceCSSTokenizer.prototype.nextToken):
+        * inspector/front-end/SourceCSSTokenizer.re2js: Extended with the SCSS syntax.
+        * inspector/front-end/SourceTokenizer.js:
+        (WebInspector.SourceTokenizer.Registry):
+        * inspector/front-end/inspectorSyntaxHighlight.css:
+        (.webkit-css-bang-keyword):
+
 2012-09-07  Allan Sandfeld Jensen  <allan.jensen@nokia.com>
 
         X11 Global Selection
index 84d7cae0babd4360e752811d687fe0f62c51c3e6..9e379853579a206375b8b856ca8df8a75e599550 100644 (file)
@@ -83,6 +83,13 @@ WebInspector.CSSCompletions.requestCSSNameCompletions = function()
     CSSAgent.getSupportedCSSProperties(propertyNamesCallback);
 }
 
+WebInspector.CSSCompletions.cssPropertiesMetainfoKeySet = function()
+{
+    if (!WebInspector.CSSCompletions._cssPropertiesMetainfoKeySet)
+        WebInspector.CSSCompletions._cssPropertiesMetainfoKeySet = WebInspector.CSSCompletions.cssPropertiesMetainfo.keySet();
+    return WebInspector.CSSCompletions._cssPropertiesMetainfoKeySet;
+}
+
 WebInspector.CSSCompletions.prototype = {
     startsWith: function(prefix)
     {
index e1c3996f31e1cda3df56ac8c8a2c0b6e5ecb5985..9c19953dd2d0dadfa4a9b6c6b232d34c3f01dfee 100644 (file)
@@ -241,12 +241,14 @@ WebInspector.CompilerSourceMappingContentProvider.prototype.__proto__ = WebInspe
  * @constructor
  * @implements {WebInspector.ContentProvider}
  * @param {WebInspector.ResourceType} contentType 
- * @param {string} content 
+ * @param {string} content
+ * @param {string=} mimeType
  */
-WebInspector.StaticContentProvider = function(contentType, content)
+WebInspector.StaticContentProvider = function(contentType, content, mimeType)
 {
     this._content = content;
     this._contentType = contentType;
+    this._mimeType = mimeType;
 }
 
 WebInspector.StaticContentProvider.prototype = {
@@ -271,7 +273,7 @@ WebInspector.StaticContentProvider.prototype = {
      */
     requestContent: function(callback)
     {
-        callback(this._content, false, this._contentType.canonicalMimeType());
+        callback(this._content, false, this._mimeType || this._contentType.canonicalMimeType());
     },
 
     /**
index b8a49718493b5464c034503739fd51cfbd5e137e..0b8e96e6e480a0936513cc97aec37944e40a81e4 100644 (file)
@@ -166,7 +166,7 @@ WebInspector.SASSSourceMapping.prototype = {
 WebInspector.SASSSource = function(sassURL)
 {
     var content = InspectorFrontendHost.loadResourceSynchronously(sassURL);
-    var contentProvider = new WebInspector.StaticContentProvider(WebInspector.resourceTypes.Stylesheet, content);
+    var contentProvider = new WebInspector.StaticContentProvider(WebInspector.resourceTypes.Stylesheet, content, "text/x-scss");
     WebInspector.UISourceCode.call(this, sassURL, null, contentProvider);
 }
 
index 8d5b8de8240d537be87a4b96f1f8f60e31c09ccc..61891396964da4285d0e59bc554ec777fca96992 100644 (file)
@@ -1,4 +1,4 @@
-/* Generated by re2c 0.13.5 on Mon Jul  9 19:31:30 2012 */
+/* Generated by re2c 0.13.5 on Fri Sep  7 17:09:30 2012 */
 /*
  * Copyright (C) 2009 Google Inc. All rights reserved.
  *
@@ -52,7 +52,7 @@ WebInspector.SourceCSSTokenizer = function()
 {
     WebInspector.SourceTokenizer.call(this);
 
-    this._propertyKeywords = WebInspector.CSSCompletions.cssPropertiesMetainfo.keySet();
+    this._propertyKeywords = WebInspector.CSSCompletions.cssPropertiesMetainfoKeySet();
     this._colorKeywords = WebInspector.CSSKeywordCompletions.colors();
 
     this._valueKeywords = [
@@ -105,7 +105,12 @@ WebInspector.SourceCSSTokenizer = function()
         "-webkit-right", "-webkit-small-control", "-webkit-text", "-webkit-xxx-large", "-webkit-zoom-in", "-webkit-zoom-out",
     ].keySet();
 
-    this._mediaTypes = ["all", "aural", "braille", "embossed", "handheld", "import", "print", "projection", "screen", "tty", "tv"].keySet();
+    this._scssValueKeywords = [
+        "abs", "adjust-color", "adjust-hue", "alpha", "append", "ceil", "change-color", "comparable", "complement", "darken", "desaturate",
+        "fade-in", "fade-out", "floor", "grayscale", "hue", "ie-hex-str", "invert", "join", "length", "lighten",
+        "lightness", "max", "min", "mix", "nth", "opacify", "opacity", "percentage", "quote", "round", "saturate",
+        "saturation", "scale-color", "transparentize", "type-of", "unit", "unitless", "unquote", "zip"
+    ].keySet();
 
     this._lexConditions = {
         INITIAL: 0,
@@ -130,6 +135,10 @@ WebInspector.SourceCSSTokenizer = function()
     this.condition = this.createInitialCondition();
 }
 
+WebInspector.SourceCSSTokenizer.SCSSAtRelatedKeywords = ["from", "if", "in", "through"].keySet();
+
+WebInspector.SourceCSSTokenizer.MediaTypes = ["all", "aural", "braille", "embossed", "handheld", "import", "print", "projection", "screen", "tty", "tv"].keySet();
+
 WebInspector.SourceCSSTokenizer.prototype = {
     createInitialCondition: function()
     {
@@ -153,6 +162,11 @@ WebInspector.SourceCSSTokenizer.prototype = {
         return this._condition.parseCondition === this._parseConditions.PROPERTY_VALUE || this._condition.parseCondition === this._parseConditions.AT_RULE;
     },
 
+    _setParseCondition: function(condition)
+    {
+        this._condition.parseCondition = condition;
+    },
+
     nextToken: function(cursor)
     {
         var cursorOnEnter = cursor;
@@ -341,43 +355,44 @@ case 26:
 /* *********************************** */
 case this.case_INITIAL:
             yych = this._charAt(cursor);
-            if (yych <= ';') {
-                if (yych <= '\'') {
+            if (yych <= ':') {
+                if (yych <= '&') {
                     if (yych <= '"') {
                         if (yych <= ' ') { gotoCase = 29; continue; };
                         if (yych <= '!') { gotoCase = 31; continue; };
                         { gotoCase = 33; continue; };
                     } else {
                         if (yych <= '#') { gotoCase = 34; continue; };
-                        if (yych <= '$') { gotoCase = 31; continue; };
-                        if (yych >= '\'') { gotoCase = 35; continue; };
+                        if (yych <= '$') { gotoCase = 35; continue; };
+                        if (yych >= '&') { gotoCase = 31; continue; };
                     }
                 } else {
-                    if (yych <= '.') {
-                        if (yych <= ',') { gotoCase = 29; continue; };
-                        if (yych <= '-') { gotoCase = 36; continue; };
-                        { gotoCase = 37; continue; };
+                    if (yych <= '-') {
+                        if (yych <= '\'') { gotoCase = 36; continue; };
+                        if (yych >= '-') { gotoCase = 37; continue; };
                     } else {
-                        if (yych <= '/') { gotoCase = 38; continue; };
-                        if (yych <= '9') { gotoCase = 39; continue; };
-                        if (yych <= ':') { gotoCase = 41; continue; };
-                        { gotoCase = 43; continue; };
+                        if (yych <= '.') { gotoCase = 38; continue; };
+                        if (yych <= '/') { gotoCase = 39; continue; };
+                        if (yych <= '9') { gotoCase = 40; continue; };
+                        { gotoCase = 42; continue; };
                     }
                 }
             } else {
-                if (yych <= '^') {
-                    if (yych <= '?') {
-                        if (yych == '=') { gotoCase = 31; continue; };
+                if (yych <= ']') {
+                    if (yych <= '=') {
+                        if (yych <= ';') { gotoCase = 44; continue; };
+                        if (yych >= '=') { gotoCase = 31; continue; };
                     } else {
-                        if (yych == '\\') { gotoCase = 29; continue; };
-                        if (yych <= ']') { gotoCase = 31; continue; };
+                        if (yych <= '?') { gotoCase = 29; continue; };
+                        if (yych != '\\') { gotoCase = 31; continue; };
                     }
                 } else {
                     if (yych <= 'z') {
-                        if (yych != '`') { gotoCase = 31; continue; };
+                        if (yych == '_') { gotoCase = 31; continue; };
+                        if (yych >= 'a') { gotoCase = 31; continue; };
                     } else {
-                        if (yych <= '{') { gotoCase = 45; continue; };
-                        if (yych == '}') { gotoCase = 47; continue; };
+                        if (yych <= '{') { gotoCase = 46; continue; };
+                        if (yych == '}') { gotoCase = 48; continue; };
                     }
                 }
             }
@@ -388,79 +403,89 @@ case 30:
 case 31:
             ++cursor;
             yych = this._charAt(cursor);
-            { gotoCase = 50; continue; };
+            { gotoCase = 51; continue; };
 case 32:
             {
                     var token = this._line.substring(cursorOnEnter, cursor);
-                    if (this._condition.parseCondition === this._parseConditions.INITIAL) {
-                        if (token === "@media") {
+                    this.tokenType = null;
+                    if (this._condition.parseCondition === this._parseConditions.INITIAL || this._condition.parseCondition === this._parseConditions.PROPERTY) {
+                        if (token.charAt(0) === "@") {
                             this.tokenType = "css-at-rule";
-                            this._condition.parseCondition = this._parseConditions.AT_MEDIA_RULE;
-                        } else if (token.startsWith("@")) {
+                            this._setParseCondition(token === "@media" ? this._parseConditions.AT_MEDIA_RULE : this._parseConditions.AT_RULE);
+                            this._condition.atKeyword = token;
+                        } else if (this._condition.parseCondition === this._parseConditions.INITIAL)
+                            this.tokenType = "css-selector";
+                        else if (this._propertyKeywords.hasOwnProperty(token))
+                            this.tokenType = "css-property";
+                    } else if (this._condition.parseCondition === this._parseConditions.AT_MEDIA_RULE || this._condition.parseCondition === this._parseConditions.AT_RULE) {
+                        if (WebInspector.SourceCSSTokenizer.SCSSAtRelatedKeywords.hasOwnProperty(token))
                             this.tokenType = "css-at-rule";
-                            this._condition.parseCondition = this._parseConditions.AT_RULE;
-                        } else
+                        else if (WebInspector.SourceCSSTokenizer.MediaTypes.hasOwnProperty(token))
+                            this.tokenType = "css-keyword";
+                    }
+                    if (this.tokenType)
+                        return cursor;
+
+                    if (this._isPropertyValue()) {
+                        var firstChar = token.charAt(0);
+                        if (firstChar === "$")
+                            this.tokenType = "scss-variable";
+                        else if (firstChar === "!")
+                            this.tokenType = "css-bang-keyword";
+                        else if (this._condition.atKeyword === "@extend")
                             this.tokenType = "css-selector";
-                    } else if ((this._condition.parseCondition === this._parseConditions.AT_MEDIA_RULE || this._condition.parseCondition === this._parseConditions.AT_RULE) && token in this._mediaTypes)
-                        this.tokenType = "css-keyword";
-                    else if (this._condition.parseCondition === this._parseConditions.PROPERTY && token in this._propertyKeywords)
-                        this.tokenType = "css-property";
-                    else if (this._isPropertyValue()) {
-                        if (token in this._valueKeywords)
+                        else if (this._valueKeywords.hasOwnProperty(token) || this._scssValueKeywords.hasOwnProperty(token))
                             this.tokenType = "css-keyword";
-                        else if (token in this._colorKeywords) {
+                        else if (this._colorKeywords.hasOwnProperty(token)) {
                             // FIXME: this does not convert tokens toLowerCase() for the sake of speed.
                             this.tokenType = "css-color";
-                        } else if (token === "!important")
-                            this.tokenType = "css-important";
-                    } else
-                        this.tokenType = null;
+                        }
+                    } else if (this._condition.parseCondition !== this._parseConditions.PROPERTY_VALUE)
+                        this.tokenType = "css-selector";
                     return cursor;
                 }
 case 33:
             yyaccept = 0;
             yych = this._charAt(YYMARKER = ++cursor);
-            if (yych <= '-') {
+            if (yych <= '.') {
                 if (yych <= '!') {
                     if (yych <= '\f') {
                         if (yych == '\n') { gotoCase = 32; continue; };
-                        { gotoCase = 128; continue; };
+                        { gotoCase = 132; continue; };
                     } else {
                         if (yych <= '\r') { gotoCase = 32; continue; };
-                        if (yych <= ' ') { gotoCase = 128; continue; };
-                        { gotoCase = 126; continue; };
+                        if (yych <= ' ') { gotoCase = 132; continue; };
+                        { gotoCase = 130; continue; };
                     }
                 } else {
-                    if (yych <= '$') {
-                        if (yych <= '"') { gotoCase = 115; continue; };
-                        if (yych <= '#') { gotoCase = 128; continue; };
-                        { gotoCase = 126; continue; };
+                    if (yych <= '\'') {
+                        if (yych <= '"') { gotoCase = 116; continue; };
+                        if (yych <= '%') { gotoCase = 132; continue; };
+                        { gotoCase = 130; continue; };
                     } else {
-                        if (yych == '\'') { gotoCase = 126; continue; };
-                        if (yych <= ',') { gotoCase = 128; continue; };
-                        { gotoCase = 126; continue; };
+                        if (yych == '-') { gotoCase = 130; continue; };
+                        { gotoCase = 132; continue; };
                     }
                 }
             } else {
-                if (yych <= '[') {
-                    if (yych <= '<') {
-                        if (yych <= '.') { gotoCase = 128; continue; };
-                        if (yych <= '9') { gotoCase = 126; continue; };
-                        { gotoCase = 128; continue; };
+                if (yych <= '\\') {
+                    if (yych <= '=') {
+                        if (yych <= '9') { gotoCase = 130; continue; };
+                        if (yych <= '<') { gotoCase = 132; continue; };
+                        { gotoCase = 130; continue; };
                     } else {
-                        if (yych <= '=') { gotoCase = 126; continue; };
-                        if (yych <= '?') { gotoCase = 128; continue; };
-                        { gotoCase = 126; continue; };
+                        if (yych <= '?') { gotoCase = 132; continue; };
+                        if (yych <= '[') { gotoCase = 130; continue; };
+                        { gotoCase = 134; continue; };
                     }
                 } else {
-                    if (yych <= '^') {
-                        if (yych <= '\\') { gotoCase = 130; continue; };
-                        if (yych <= ']') { gotoCase = 126; continue; };
-                        { gotoCase = 128; continue; };
+                    if (yych <= '_') {
+                        if (yych == '^') { gotoCase = 132; continue; };
+                        { gotoCase = 130; continue; };
                     } else {
-                        if (yych == '`') { gotoCase = 128; continue; };
-                        if (yych <= 'z') { gotoCase = 126; continue; };
-                        { gotoCase = 128; continue; };
+                        if (yych <= '`') { gotoCase = 132; continue; };
+                        if (yych <= 'z') { gotoCase = 130; continue; };
+                        { gotoCase = 132; continue; };
                     }
                 }
             }
@@ -468,84 +493,121 @@ case 34:
             yych = this._charAt(++cursor);
             if (yych <= '@') {
                 if (yych <= '/') { gotoCase = 30; continue; };
-                if (yych <= '9') { gotoCase = 123; continue; };
+                if (yych <= '9') { gotoCase = 127; continue; };
                 { gotoCase = 30; continue; };
             } else {
-                if (yych <= 'F') { gotoCase = 123; continue; };
+                if (yych <= 'Z') { gotoCase = 127; continue; };
                 if (yych <= '`') { gotoCase = 30; continue; };
-                if (yych <= 'f') { gotoCase = 123; continue; };
+                if (yych <= 'z') { gotoCase = 127; continue; };
                 { gotoCase = 30; continue; };
             }
 case 35:
+            yych = this._charAt(++cursor);
+            if (yych <= '<') {
+                if (yych <= '\'') {
+                    if (yych <= ' ') { gotoCase = 30; continue; };
+                    if (yych <= '"') { gotoCase = 124; continue; };
+                    if (yych <= '%') { gotoCase = 30; continue; };
+                    { gotoCase = 124; continue; };
+                } else {
+                    if (yych <= '-') {
+                        if (yych <= ',') { gotoCase = 30; continue; };
+                        { gotoCase = 124; continue; };
+                    } else {
+                        if (yych <= '.') { gotoCase = 30; continue; };
+                        if (yych <= '9') { gotoCase = 124; continue; };
+                        { gotoCase = 30; continue; };
+                    }
+                }
+            } else {
+                if (yych <= ']') {
+                    if (yych <= '?') {
+                        if (yych <= '=') { gotoCase = 124; continue; };
+                        { gotoCase = 30; continue; };
+                    } else {
+                        if (yych == '\\') { gotoCase = 30; continue; };
+                        { gotoCase = 124; continue; };
+                    }
+                } else {
+                    if (yych <= '_') {
+                        if (yych <= '^') { gotoCase = 30; continue; };
+                        { gotoCase = 124; continue; };
+                    } else {
+                        if (yych <= '`') { gotoCase = 30; continue; };
+                        if (yych <= 'z') { gotoCase = 124; continue; };
+                        { gotoCase = 30; continue; };
+                    }
+                }
+            }
+case 36:
             yyaccept = 0;
             yych = this._charAt(YYMARKER = ++cursor);
-            if (yych <= '-') {
+            if (yych <= '.') {
                 if (yych <= '"') {
                     if (yych <= '\f') {
                         if (yych == '\n') { gotoCase = 32; continue; };
-                        { gotoCase = 117; continue; };
+                        { gotoCase = 118; continue; };
                     } else {
                         if (yych <= '\r') { gotoCase = 32; continue; };
-                        if (yych <= ' ') { gotoCase = 117; continue; };
-                        { gotoCase = 113; continue; };
+                        if (yych <= ' ') { gotoCase = 118; continue; };
+                        { gotoCase = 114; continue; };
                     }
                 } else {
-                    if (yych <= '&') {
-                        if (yych == '$') { gotoCase = 113; continue; };
-                        { gotoCase = 117; continue; };
+                    if (yych <= '\'') {
+                        if (yych <= '%') { gotoCase = 118; continue; };
+                        if (yych <= '&') { gotoCase = 114; continue; };
+                        { gotoCase = 116; continue; };
                     } else {
-                        if (yych <= '\'') { gotoCase = 115; continue; };
-                        if (yych <= ',') { gotoCase = 117; continue; };
-                        { gotoCase = 113; continue; };
+                        if (yych == '-') { gotoCase = 114; continue; };
+                        { gotoCase = 118; continue; };
                     }
                 }
             } else {
-                if (yych <= '[') {
-                    if (yych <= '<') {
-                        if (yych <= '.') { gotoCase = 117; continue; };
-                        if (yych <= '9') { gotoCase = 113; continue; };
-                        { gotoCase = 117; continue; };
+                if (yych <= '\\') {
+                    if (yych <= '=') {
+                        if (yych <= '9') { gotoCase = 114; continue; };
+                        if (yych <= '<') { gotoCase = 118; continue; };
+                        { gotoCase = 114; continue; };
                     } else {
-                        if (yych <= '=') { gotoCase = 113; continue; };
-                        if (yych <= '?') { gotoCase = 117; continue; };
-                        { gotoCase = 113; continue; };
+                        if (yych <= '?') { gotoCase = 118; continue; };
+                        if (yych <= '[') { gotoCase = 114; continue; };
+                        { gotoCase = 120; continue; };
                     }
                 } else {
-                    if (yych <= '^') {
-                        if (yych <= '\\') { gotoCase = 119; continue; };
-                        if (yych <= ']') { gotoCase = 113; continue; };
-                        { gotoCase = 117; continue; };
+                    if (yych <= '_') {
+                        if (yych == '^') { gotoCase = 118; continue; };
+                        { gotoCase = 114; continue; };
                     } else {
-                        if (yych == '`') { gotoCase = 117; continue; };
-                        if (yych <= 'z') { gotoCase = 113; continue; };
-                        { gotoCase = 117; continue; };
+                        if (yych <= '`') { gotoCase = 118; continue; };
+                        if (yych <= 'z') { gotoCase = 114; continue; };
+                        { gotoCase = 118; continue; };
                     }
                 }
             }
-case 36:
+case 37:
             yyaccept = 0;
             yych = this._charAt(YYMARKER = ++cursor);
-            if (yych == '.') { gotoCase = 66; continue; };
-            if (yych <= '/') { gotoCase = 50; continue; };
-            if (yych <= '9') { gotoCase = 51; continue; };
-            { gotoCase = 50; continue; };
-case 37:
+            if (yych == '.') { gotoCase = 67; continue; };
+            if (yych <= '/') { gotoCase = 51; continue; };
+            if (yych <= '9') { gotoCase = 52; continue; };
+            { gotoCase = 51; continue; };
+case 38:
             yych = this._charAt(++cursor);
             if (yych <= '/') { gotoCase = 30; continue; };
-            if (yych <= '9') { gotoCase = 69; continue; };
+            if (yych <= '9') { gotoCase = 70; continue; };
             { gotoCase = 30; continue; };
-case 38:
+case 39:
             yyaccept = 0;
             yych = this._charAt(YYMARKER = ++cursor);
-            if (yych == '*') { gotoCase = 105; continue; };
-            { gotoCase = 50; continue; };
-case 39:
+            if (yych == '*') { gotoCase = 106; continue; };
+            { gotoCase = 51; continue; };
+case 40:
             yyaccept = 1;
             yych = this._charAt(YYMARKER = ++cursor);
             switch (yych) {
             case '!':
             case '"':
-            case '$':
+            case '&':
             case '\'':
             case '-':
             case '/':
@@ -592,9 +654,9 @@ case 39:
             case 'w':
             case 'x':
             case 'y':
-            case 'z':    { gotoCase = 49; continue; };
-            case '%':    { gotoCase = 68; continue; };
-            case '.':    { gotoCase = 66; continue; };
+            case 'z':    { gotoCase = 50; continue; };
+            case '%':    { gotoCase = 69; continue; };
+            case '.':    { gotoCase = 67; continue; };
             case '0':
             case '1':
             case '2':
@@ -604,23 +666,23 @@ case 39:
             case '6':
             case '7':
             case '8':
-            case '9':    { gotoCase = 51; continue; };
-            case 'H':    { gotoCase = 53; continue; };
-            case '_':    { gotoCase = 54; continue; };
-            case 'c':    { gotoCase = 55; continue; };
-            case 'd':    { gotoCase = 56; continue; };
-            case 'e':    { gotoCase = 57; continue; };
-            case 'g':    { gotoCase = 58; continue; };
-            case 'i':    { gotoCase = 59; continue; };
-            case 'k':    { gotoCase = 60; continue; };
-            case 'm':    { gotoCase = 61; continue; };
-            case 'p':    { gotoCase = 62; continue; };
-            case 'r':    { gotoCase = 63; continue; };
-            case 's':    { gotoCase = 64; continue; };
-            case 't':    { gotoCase = 65; continue; };
-            default:    { gotoCase = 40; continue; };
+            case '9':    { gotoCase = 52; continue; };
+            case 'H':    { gotoCase = 54; continue; };
+            case '_':    { gotoCase = 55; continue; };
+            case 'c':    { gotoCase = 56; continue; };
+            case 'd':    { gotoCase = 57; continue; };
+            case 'e':    { gotoCase = 58; continue; };
+            case 'g':    { gotoCase = 59; continue; };
+            case 'i':    { gotoCase = 60; continue; };
+            case 'k':    { gotoCase = 61; continue; };
+            case 'm':    { gotoCase = 62; continue; };
+            case 'p':    { gotoCase = 63; continue; };
+            case 'r':    { gotoCase = 64; continue; };
+            case 's':    { gotoCase = 65; continue; };
+            case 't':    { gotoCase = 66; continue; };
+            default:    { gotoCase = 41; continue; };
             }
-case 40:
+case 41:
             {
                     if (this._isPropertyValue())
                         this.tokenType = "css-number";
@@ -628,92 +690,91 @@ case 40:
                         this.tokenType = null;
                     return cursor;
                 }
-case 41:
+case 42:
             ++cursor;
             {
                     this.tokenType = null;
-                    if (this._condition.parseCondition === this._parseConditions.PROPERTY)
-                        this._condition.parseCondition = this._parseConditions.PROPERTY_VALUE;
+                    if (this._condition.parseCondition === this._parseConditions.PROPERTY || this._condition.parseCondition === this._parseConditions.INITIAL)
+                        this._setParseCondition(this._parseConditions.PROPERTY_VALUE);
                     return cursor;
                 }
-case 43:
+case 44:
             ++cursor;
             {
                     this.tokenType = null;
-                    if (this._condition.parseCondition === this._parseConditions.AT_RULE)
-                        this._condition.parseCondition = this._parseConditions.INITIAL;
-                    else
-                        this._condition.parseCondition = this._parseConditions.PROPERTY;
+                    this._setParseCondition(this._condition.openBraces ? this._parseConditions.PROPERTY : this._parseConditions.INITIAL);
+                    delete this._condition.atKeyword;
                     return cursor;
                 }
-case 45:
+case 46:
             ++cursor;
             {
                     this.tokenType = "block-start";
+                    this._condition.openBraces = (this._condition.openBraces || 0) + 1;
                     if (this._condition.parseCondition === this._parseConditions.AT_MEDIA_RULE)
-                        this._condition.parseCondition = this._parseConditions.INITIAL;
+                        this._setParseCondition(this._parseConditions.INITIAL);
                     else
-                        this._condition.parseCondition = this._parseConditions.PROPERTY;
+                        this._setParseCondition(this._parseConditions.PROPERTY);
                     return cursor;
                 }
-case 47:
+case 48:
             ++cursor;
             {
                     this.tokenType = "block-end";
-                    this._condition.parseCondition = this._parseConditions.INITIAL;
+                    if (this._condition.openBraces > 0)
+                        --this._condition.openBraces;
+                    this._setParseCondition(this._condition.openBraces ? this._parseConditions.PROPERTY : this._parseConditions.INITIAL);
+                    delete this._condition.atKeyword;
                     return cursor;
                 }
-case 49:
+case 50:
             ++cursor;
             yych = this._charAt(cursor);
-case 50:
-            if (yych <= '9') {
-                if (yych <= '&') {
-                    if (yych <= '"') {
-                        if (yych <= ' ') { gotoCase = 32; continue; };
-                        { gotoCase = 49; continue; };
-                    } else {
-                        if (yych == '$') { gotoCase = 49; continue; };
-                        { gotoCase = 32; continue; };
-                    }
+case 51:
+            if (yych <= '<') {
+                if (yych <= '\'') {
+                    if (yych <= ' ') { gotoCase = 32; continue; };
+                    if (yych <= '"') { gotoCase = 50; continue; };
+                    if (yych <= '%') { gotoCase = 32; continue; };
+                    { gotoCase = 50; continue; };
                 } else {
-                    if (yych <= ',') {
-                        if (yych <= '\'') { gotoCase = 49; continue; };
-                        { gotoCase = 32; continue; };
+                    if (yych <= '-') {
+                        if (yych <= ',') { gotoCase = 32; continue; };
+                        { gotoCase = 50; continue; };
                     } else {
-                        if (yych == '.') { gotoCase = 32; continue; };
-                        { gotoCase = 49; continue; };
+                        if (yych <= '.') { gotoCase = 32; continue; };
+                        if (yych <= '9') { gotoCase = 50; continue; };
+                        { gotoCase = 32; continue; };
                     }
                 }
             } else {
-                if (yych <= '\\') {
-                    if (yych <= '=') {
-                        if (yych <= '<') { gotoCase = 32; continue; };
-                        { gotoCase = 49; continue; };
-                    } else {
-                        if (yych <= '?') { gotoCase = 32; continue; };
-                        if (yych <= '[') { gotoCase = 49; continue; };
+                if (yych <= ']') {
+                    if (yych <= '?') {
+                        if (yych <= '=') { gotoCase = 50; continue; };
                         { gotoCase = 32; continue; };
+                    } else {
+                        if (yych == '\\') { gotoCase = 32; continue; };
+                        { gotoCase = 50; continue; };
                     }
                 } else {
                     if (yych <= '_') {
-                        if (yych == '^') { gotoCase = 32; continue; };
-                        { gotoCase = 49; continue; };
+                        if (yych <= '^') { gotoCase = 32; continue; };
+                        { gotoCase = 50; continue; };
                     } else {
                         if (yych <= '`') { gotoCase = 32; continue; };
-                        if (yych <= 'z') { gotoCase = 49; continue; };
+                        if (yych <= 'z') { gotoCase = 50; continue; };
                         { gotoCase = 32; continue; };
                     }
                 }
             }
-case 51:
+case 52:
             yyaccept = 1;
             YYMARKER = ++cursor;
             yych = this._charAt(cursor);
             switch (yych) {
             case '!':
             case '"':
-            case '$':
+            case '&':
             case '\'':
             case '-':
             case '/':
@@ -760,9 +821,9 @@ case 51:
             case 'w':
             case 'x':
             case 'y':
-            case 'z':    { gotoCase = 49; continue; };
-            case '%':    { gotoCase = 68; continue; };
-            case '.':    { gotoCase = 66; continue; };
+            case 'z':    { gotoCase = 50; continue; };
+            case '%':    { gotoCase = 69; continue; };
+            case '.':    { gotoCase = 67; continue; };
             case '0':
             case '1':
             case '2':
@@ -772,584 +833,617 @@ case 51:
             case '6':
             case '7':
             case '8':
-            case '9':    { gotoCase = 51; continue; };
-            case 'H':    { gotoCase = 53; continue; };
-            case '_':    { gotoCase = 54; continue; };
-            case 'c':    { gotoCase = 55; continue; };
-            case 'd':    { gotoCase = 56; continue; };
-            case 'e':    { gotoCase = 57; continue; };
-            case 'g':    { gotoCase = 58; continue; };
-            case 'i':    { gotoCase = 59; continue; };
-            case 'k':    { gotoCase = 60; continue; };
-            case 'm':    { gotoCase = 61; continue; };
-            case 'p':    { gotoCase = 62; continue; };
-            case 'r':    { gotoCase = 63; continue; };
-            case 's':    { gotoCase = 64; continue; };
-            case 't':    { gotoCase = 65; continue; };
-            default:    { gotoCase = 40; continue; };
+            case '9':    { gotoCase = 52; continue; };
+            case 'H':    { gotoCase = 54; continue; };
+            case '_':    { gotoCase = 55; continue; };
+            case 'c':    { gotoCase = 56; continue; };
+            case 'd':    { gotoCase = 57; continue; };
+            case 'e':    { gotoCase = 58; continue; };
+            case 'g':    { gotoCase = 59; continue; };
+            case 'i':    { gotoCase = 60; continue; };
+            case 'k':    { gotoCase = 61; continue; };
+            case 'm':    { gotoCase = 62; continue; };
+            case 'p':    { gotoCase = 63; continue; };
+            case 'r':    { gotoCase = 64; continue; };
+            case 's':    { gotoCase = 65; continue; };
+            case 't':    { gotoCase = 66; continue; };
+            default:    { gotoCase = 41; continue; };
             }
-case 53:
-            yych = this._charAt(++cursor);
-            if (yych == 'z') { gotoCase = 64; continue; };
-            { gotoCase = 50; continue; };
 case 54:
             yych = this._charAt(++cursor);
-            if (yych == '_') { gotoCase = 102; continue; };
-            { gotoCase = 50; continue; };
+            if (yych == 'z') { gotoCase = 65; continue; };
+            { gotoCase = 51; continue; };
 case 55:
             yych = this._charAt(++cursor);
-            if (yych == 'm') { gotoCase = 64; continue; };
-            { gotoCase = 50; continue; };
+            if (yych == '_') { gotoCase = 103; continue; };
+            { gotoCase = 51; continue; };
 case 56:
             yych = this._charAt(++cursor);
-            if (yych == 'e') { gotoCase = 101; continue; };
-            { gotoCase = 50; continue; };
+            if (yych == 'm') { gotoCase = 65; continue; };
+            { gotoCase = 51; continue; };
 case 57:
             yych = this._charAt(++cursor);
-            if (yych == 'm') { gotoCase = 64; continue; };
-            if (yych == 'x') { gotoCase = 64; continue; };
-            { gotoCase = 50; continue; };
+            if (yych == 'e') { gotoCase = 102; continue; };
+            { gotoCase = 51; continue; };
 case 58:
             yych = this._charAt(++cursor);
-            if (yych == 'r') { gotoCase = 99; continue; };
-            { gotoCase = 50; continue; };
+            if (yych == 'm') { gotoCase = 65; continue; };
+            if (yych == 'x') { gotoCase = 65; continue; };
+            { gotoCase = 51; continue; };
 case 59:
             yych = this._charAt(++cursor);
-            if (yych == 'n') { gotoCase = 64; continue; };
-            { gotoCase = 50; continue; };
+            if (yych == 'r') { gotoCase = 100; continue; };
+            { gotoCase = 51; continue; };
 case 60:
             yych = this._charAt(++cursor);
-            if (yych == 'H') { gotoCase = 98; continue; };
-            { gotoCase = 50; continue; };
+            if (yych == 'n') { gotoCase = 65; continue; };
+            { gotoCase = 51; continue; };
 case 61:
             yych = this._charAt(++cursor);
-            if (yych == 'm') { gotoCase = 64; continue; };
-            if (yych == 's') { gotoCase = 64; continue; };
-            { gotoCase = 50; continue; };
+            if (yych == 'H') { gotoCase = 99; continue; };
+            { gotoCase = 51; continue; };
 case 62:
+            yych = this._charAt(++cursor);
+            if (yych == 'm') { gotoCase = 65; continue; };
+            if (yych == 's') { gotoCase = 65; continue; };
+            { gotoCase = 51; continue; };
+case 63:
             yych = this._charAt(++cursor);
             if (yych <= 's') {
-                if (yych == 'c') { gotoCase = 64; continue; };
-                { gotoCase = 50; continue; };
+                if (yych == 'c') { gotoCase = 65; continue; };
+                { gotoCase = 51; continue; };
             } else {
-                if (yych <= 't') { gotoCase = 64; continue; };
-                if (yych == 'x') { gotoCase = 64; continue; };
-                { gotoCase = 50; continue; };
+                if (yych <= 't') { gotoCase = 65; continue; };
+                if (yych == 'x') { gotoCase = 65; continue; };
+                { gotoCase = 51; continue; };
             }
-case 63:
-            yych = this._charAt(++cursor);
-            if (yych == 'a') { gotoCase = 96; continue; };
-            if (yych == 'e') { gotoCase = 97; continue; };
-            { gotoCase = 50; continue; };
 case 64:
             yych = this._charAt(++cursor);
-            if (yych <= '9') {
-                if (yych <= '&') {
-                    if (yych <= '"') {
-                        if (yych <= ' ') { gotoCase = 40; continue; };
-                        { gotoCase = 49; continue; };
-                    } else {
-                        if (yych == '$') { gotoCase = 49; continue; };
-                        { gotoCase = 40; continue; };
-                    }
+            if (yych == 'a') { gotoCase = 97; continue; };
+            if (yych == 'e') { gotoCase = 98; continue; };
+            { gotoCase = 51; continue; };
+case 65:
+            yych = this._charAt(++cursor);
+            if (yych <= '<') {
+                if (yych <= '\'') {
+                    if (yych <= ' ') { gotoCase = 41; continue; };
+                    if (yych <= '"') { gotoCase = 50; continue; };
+                    if (yych <= '%') { gotoCase = 41; continue; };
+                    { gotoCase = 50; continue; };
                 } else {
-                    if (yych <= ',') {
-                        if (yych <= '\'') { gotoCase = 49; continue; };
-                        { gotoCase = 40; continue; };
+                    if (yych <= '-') {
+                        if (yych <= ',') { gotoCase = 41; continue; };
+                        { gotoCase = 50; continue; };
                     } else {
-                        if (yych == '.') { gotoCase = 40; continue; };
-                        { gotoCase = 49; continue; };
+                        if (yych <= '.') { gotoCase = 41; continue; };
+                        if (yych <= '9') { gotoCase = 50; continue; };
+                        { gotoCase = 41; continue; };
                     }
                 }
             } else {
-                if (yych <= '\\') {
-                    if (yych <= '=') {
-                        if (yych <= '<') { gotoCase = 40; continue; };
-                        { gotoCase = 49; continue; };
+                if (yych <= ']') {
+                    if (yych <= '?') {
+                        if (yych <= '=') { gotoCase = 50; continue; };
+                        { gotoCase = 41; continue; };
                     } else {
-                        if (yych <= '?') { gotoCase = 40; continue; };
-                        if (yych <= '[') { gotoCase = 49; continue; };
-                        { gotoCase = 40; continue; };
+                        if (yych == '\\') { gotoCase = 41; continue; };
+                        { gotoCase = 50; continue; };
                     }
                 } else {
                     if (yych <= '_') {
-                        if (yych == '^') { gotoCase = 40; continue; };
-                        { gotoCase = 49; continue; };
+                        if (yych <= '^') { gotoCase = 41; continue; };
+                        { gotoCase = 50; continue; };
                     } else {
-                        if (yych <= '`') { gotoCase = 40; continue; };
-                        if (yych <= 'z') { gotoCase = 49; continue; };
-                        { gotoCase = 40; continue; };
+                        if (yych <= '`') { gotoCase = 41; continue; };
+                        if (yych <= 'z') { gotoCase = 50; continue; };
+                        { gotoCase = 41; continue; };
                     }
                 }
             }
-case 65:
-            yych = this._charAt(++cursor);
-            if (yych == 'u') { gotoCase = 94; continue; };
-            { gotoCase = 50; continue; };
 case 66:
             yych = this._charAt(++cursor);
-            if (yych <= '/') { gotoCase = 67; continue; };
-            if (yych <= '9') { gotoCase = 69; continue; };
+            if (yych == 'u') { gotoCase = 95; continue; };
+            { gotoCase = 51; continue; };
 case 67:
+            yych = this._charAt(++cursor);
+            if (yych <= '/') { gotoCase = 68; continue; };
+            if (yych <= '9') { gotoCase = 70; continue; };
+case 68:
             cursor = YYMARKER;
             if (yyaccept <= 0) {
                 { gotoCase = 32; continue; };
             } else {
-                { gotoCase = 40; continue; };
+                { gotoCase = 41; continue; };
             }
-case 68:
-            yych = this._charAt(++cursor);
-            { gotoCase = 40; continue; };
 case 69:
+            yych = this._charAt(++cursor);
+            { gotoCase = 41; continue; };
+case 70:
             yyaccept = 1;
             YYMARKER = ++cursor;
             yych = this._charAt(cursor);
             if (yych <= 'f') {
                 if (yych <= 'H') {
                     if (yych <= '/') {
-                        if (yych == '%') { gotoCase = 68; continue; };
-                        { gotoCase = 40; continue; };
+                        if (yych == '%') { gotoCase = 69; continue; };
+                        { gotoCase = 41; continue; };
                     } else {
-                        if (yych <= '9') { gotoCase = 69; continue; };
-                        if (yych <= 'G') { gotoCase = 40; continue; };
-                        { gotoCase = 81; continue; };
+                        if (yych <= '9') { gotoCase = 70; continue; };
+                        if (yych <= 'G') { gotoCase = 41; continue; };
+                        { gotoCase = 82; continue; };
                     }
                 } else {
                     if (yych <= 'b') {
-                        if (yych == '_') { gotoCase = 73; continue; };
-                        { gotoCase = 40; continue; };
+                        if (yych == '_') { gotoCase = 74; continue; };
+                        { gotoCase = 41; continue; };
                     } else {
-                        if (yych <= 'c') { gotoCase = 75; continue; };
-                        if (yych <= 'd') { gotoCase = 78; continue; };
-                        if (yych >= 'f') { gotoCase = 40; continue; };
+                        if (yych <= 'c') { gotoCase = 76; continue; };
+                        if (yych <= 'd') { gotoCase = 79; continue; };
+                        if (yych >= 'f') { gotoCase = 41; continue; };
                     }
                 }
             } else {
                 if (yych <= 'm') {
                     if (yych <= 'i') {
-                        if (yych <= 'g') { gotoCase = 79; continue; };
-                        if (yych <= 'h') { gotoCase = 40; continue; };
-                        { gotoCase = 77; continue; };
+                        if (yych <= 'g') { gotoCase = 80; continue; };
+                        if (yych <= 'h') { gotoCase = 41; continue; };
+                        { gotoCase = 78; continue; };
                     } else {
-                        if (yych == 'k') { gotoCase = 82; continue; };
-                        if (yych <= 'l') { gotoCase = 40; continue; };
-                        { gotoCase = 76; continue; };
+                        if (yych == 'k') { gotoCase = 83; continue; };
+                        if (yych <= 'l') { gotoCase = 41; continue; };
+                        { gotoCase = 77; continue; };
                     }
                 } else {
                     if (yych <= 'q') {
-                        if (yych == 'p') { gotoCase = 74; continue; };
-                        { gotoCase = 40; continue; };
+                        if (yych == 'p') { gotoCase = 75; continue; };
+                        { gotoCase = 41; continue; };
                     } else {
-                        if (yych <= 'r') { gotoCase = 72; continue; };
-                        if (yych <= 's') { gotoCase = 68; continue; };
-                        if (yych <= 't') { gotoCase = 80; continue; };
-                        { gotoCase = 40; continue; };
+                        if (yych <= 'r') { gotoCase = 73; continue; };
+                        if (yych <= 's') { gotoCase = 69; continue; };
+                        if (yych <= 't') { gotoCase = 81; continue; };
+                        { gotoCase = 41; continue; };
                     }
                 }
             }
             yych = this._charAt(++cursor);
-            if (yych == 'm') { gotoCase = 68; continue; };
-            if (yych == 'x') { gotoCase = 68; continue; };
-            { gotoCase = 67; continue; };
-case 72:
-            yych = this._charAt(++cursor);
-            if (yych == 'a') { gotoCase = 92; continue; };
-            if (yych == 'e') { gotoCase = 93; continue; };
-            { gotoCase = 67; continue; };
+            if (yych == 'm') { gotoCase = 69; continue; };
+            if (yych == 'x') { gotoCase = 69; continue; };
+            { gotoCase = 68; continue; };
 case 73:
             yych = this._charAt(++cursor);
-            if (yych == '_') { gotoCase = 89; continue; };
-            { gotoCase = 67; continue; };
+            if (yych == 'a') { gotoCase = 93; continue; };
+            if (yych == 'e') { gotoCase = 94; continue; };
+            { gotoCase = 68; continue; };
 case 74:
+            yych = this._charAt(++cursor);
+            if (yych == '_') { gotoCase = 90; continue; };
+            { gotoCase = 68; continue; };
+case 75:
             yych = this._charAt(++cursor);
             if (yych <= 's') {
-                if (yych == 'c') { gotoCase = 68; continue; };
-                { gotoCase = 67; continue; };
+                if (yych == 'c') { gotoCase = 69; continue; };
+                { gotoCase = 68; continue; };
             } else {
-                if (yych <= 't') { gotoCase = 68; continue; };
-                if (yych == 'x') { gotoCase = 68; continue; };
-                { gotoCase = 67; continue; };
+                if (yych <= 't') { gotoCase = 69; continue; };
+                if (yych == 'x') { gotoCase = 69; continue; };
+                { gotoCase = 68; continue; };
             }
-case 75:
-            yych = this._charAt(++cursor);
-            if (yych == 'm') { gotoCase = 68; continue; };
-            { gotoCase = 67; continue; };
 case 76:
             yych = this._charAt(++cursor);
-            if (yych == 'm') { gotoCase = 68; continue; };
-            if (yych == 's') { gotoCase = 68; continue; };
-            { gotoCase = 67; continue; };
+            if (yych == 'm') { gotoCase = 69; continue; };
+            { gotoCase = 68; continue; };
 case 77:
             yych = this._charAt(++cursor);
-            if (yych == 'n') { gotoCase = 68; continue; };
-            { gotoCase = 67; continue; };
+            if (yych == 'm') { gotoCase = 69; continue; };
+            if (yych == 's') { gotoCase = 69; continue; };
+            { gotoCase = 68; continue; };
 case 78:
             yych = this._charAt(++cursor);
-            if (yych == 'e') { gotoCase = 88; continue; };
-            { gotoCase = 67; continue; };
+            if (yych == 'n') { gotoCase = 69; continue; };
+            { gotoCase = 68; continue; };
 case 79:
             yych = this._charAt(++cursor);
-            if (yych == 'r') { gotoCase = 86; continue; };
-            { gotoCase = 67; continue; };
+            if (yych == 'e') { gotoCase = 89; continue; };
+            { gotoCase = 68; continue; };
 case 80:
             yych = this._charAt(++cursor);
-            if (yych == 'u') { gotoCase = 84; continue; };
-            { gotoCase = 67; continue; };
+            if (yych == 'r') { gotoCase = 87; continue; };
+            { gotoCase = 68; continue; };
 case 81:
             yych = this._charAt(++cursor);
-            if (yych == 'z') { gotoCase = 68; continue; };
-            { gotoCase = 67; continue; };
+            if (yych == 'u') { gotoCase = 85; continue; };
+            { gotoCase = 68; continue; };
 case 82:
             yych = this._charAt(++cursor);
-            if (yych != 'H') { gotoCase = 67; continue; };
+            if (yych == 'z') { gotoCase = 69; continue; };
+            { gotoCase = 68; continue; };
+case 83:
             yych = this._charAt(++cursor);
-            if (yych == 'z') { gotoCase = 68; continue; };
-            { gotoCase = 67; continue; };
-case 84:
+            if (yych != 'H') { gotoCase = 68; continue; };
             yych = this._charAt(++cursor);
-            if (yych != 'r') { gotoCase = 67; continue; };
+            if (yych == 'z') { gotoCase = 69; continue; };
+            { gotoCase = 68; continue; };
+case 85:
             yych = this._charAt(++cursor);
-            if (yych == 'n') { gotoCase = 68; continue; };
-            { gotoCase = 67; continue; };
-case 86:
+            if (yych != 'r') { gotoCase = 68; continue; };
             yych = this._charAt(++cursor);
-            if (yych != 'a') { gotoCase = 67; continue; };
+            if (yych == 'n') { gotoCase = 69; continue; };
+            { gotoCase = 68; continue; };
+case 87:
             yych = this._charAt(++cursor);
-            if (yych == 'd') { gotoCase = 68; continue; };
-            { gotoCase = 67; continue; };
-case 88:
+            if (yych != 'a') { gotoCase = 68; continue; };
             yych = this._charAt(++cursor);
-            if (yych == 'g') { gotoCase = 68; continue; };
-            { gotoCase = 67; continue; };
+            if (yych == 'd') { gotoCase = 69; continue; };
+            { gotoCase = 68; continue; };
 case 89:
             yych = this._charAt(++cursor);
-            if (yych != 'q') { gotoCase = 67; continue; };
+            if (yych == 'g') { gotoCase = 69; continue; };
+            { gotoCase = 68; continue; };
+case 90:
             yych = this._charAt(++cursor);
-            if (yych != 'e') { gotoCase = 67; continue; };
+            if (yych != 'q') { gotoCase = 68; continue; };
             yych = this._charAt(++cursor);
-            if (yych == 'm') { gotoCase = 68; continue; };
-            { gotoCase = 67; continue; };
-case 92:
+            if (yych != 'e') { gotoCase = 68; continue; };
             yych = this._charAt(++cursor);
-            if (yych == 'd') { gotoCase = 68; continue; };
-            { gotoCase = 67; continue; };
+            if (yych == 'm') { gotoCase = 69; continue; };
+            { gotoCase = 68; continue; };
 case 93:
             yych = this._charAt(++cursor);
-            if (yych == 'm') { gotoCase = 68; continue; };
-            { gotoCase = 67; continue; };
+            if (yych == 'd') { gotoCase = 69; continue; };
+            { gotoCase = 68; continue; };
 case 94:
             yych = this._charAt(++cursor);
-            if (yych != 'r') { gotoCase = 50; continue; };
+            if (yych == 'm') { gotoCase = 69; continue; };
+            { gotoCase = 68; continue; };
+case 95:
             yych = this._charAt(++cursor);
-            if (yych == 'n') { gotoCase = 64; continue; };
-            { gotoCase = 50; continue; };
-case 96:
+            if (yych != 'r') { gotoCase = 51; continue; };
             yych = this._charAt(++cursor);
-            if (yych == 'd') { gotoCase = 64; continue; };
-            { gotoCase = 50; continue; };
+            if (yych == 'n') { gotoCase = 65; continue; };
+            { gotoCase = 51; continue; };
 case 97:
             yych = this._charAt(++cursor);
-            if (yych == 'm') { gotoCase = 64; continue; };
-            { gotoCase = 50; continue; };
+            if (yych == 'd') { gotoCase = 65; continue; };
+            { gotoCase = 51; continue; };
 case 98:
             yych = this._charAt(++cursor);
-            if (yych == 'z') { gotoCase = 64; continue; };
-            { gotoCase = 50; continue; };
+            if (yych == 'm') { gotoCase = 65; continue; };
+            { gotoCase = 51; continue; };
 case 99:
             yych = this._charAt(++cursor);
-            if (yych != 'a') { gotoCase = 50; continue; };
+            if (yych == 'z') { gotoCase = 65; continue; };
+            { gotoCase = 51; continue; };
+case 100:
             yych = this._charAt(++cursor);
-            if (yych == 'd') { gotoCase = 64; continue; };
-            { gotoCase = 50; continue; };
-case 101:
+            if (yych != 'a') { gotoCase = 51; continue; };
             yych = this._charAt(++cursor);
-            if (yych == 'g') { gotoCase = 64; continue; };
-            { gotoCase = 50; continue; };
+            if (yych == 'd') { gotoCase = 65; continue; };
+            { gotoCase = 51; continue; };
 case 102:
             yych = this._charAt(++cursor);
-            if (yych != 'q') { gotoCase = 50; continue; };
+            if (yych == 'g') { gotoCase = 65; continue; };
+            { gotoCase = 51; continue; };
+case 103:
+            yych = this._charAt(++cursor);
+            if (yych != 'q') { gotoCase = 51; continue; };
             yych = this._charAt(++cursor);
-            if (yych != 'e') { gotoCase = 50; continue; };
+            if (yych != 'e') { gotoCase = 51; continue; };
             yych = this._charAt(++cursor);
-            if (yych == 'm') { gotoCase = 64; continue; };
-            { gotoCase = 50; continue; };
-case 105:
+            if (yych == 'm') { gotoCase = 65; continue; };
+            { gotoCase = 51; continue; };
+case 106:
             ++cursor;
             yych = this._charAt(cursor);
             if (yych <= '\f') {
-                if (yych == '\n') { gotoCase = 109; continue; };
-                { gotoCase = 105; continue; };
+                if (yych == '\n') { gotoCase = 110; continue; };
+                { gotoCase = 106; continue; };
             } else {
-                if (yych <= '\r') { gotoCase = 109; continue; };
-                if (yych != '*') { gotoCase = 105; continue; };
+                if (yych <= '\r') { gotoCase = 110; continue; };
+                if (yych != '*') { gotoCase = 106; continue; };
             }
-case 107:
+case 108:
             ++cursor;
             yych = this._charAt(cursor);
-            if (yych == '*') { gotoCase = 107; continue; };
-            if (yych == '/') { gotoCase = 111; continue; };
-            { gotoCase = 105; continue; };
-case 109:
+            if (yych == '*') { gotoCase = 108; continue; };
+            if (yych == '/') { gotoCase = 112; continue; };
+            { gotoCase = 106; continue; };
+case 110:
             ++cursor;
             this.setLexCondition(this._lexConditions.COMMENT);
             { this.tokenType = "css-comment"; return cursor; }
-case 111:
+case 112:
             ++cursor;
             { this.tokenType = "css-comment"; return cursor; }
-case 113:
+case 114:
             yyaccept = 0;
             YYMARKER = ++cursor;
             yych = this._charAt(cursor);
-            if (yych <= '-') {
+            if (yych <= '.') {
                 if (yych <= '"') {
                     if (yych <= '\f') {
                         if (yych == '\n') { gotoCase = 32; continue; };
-                        { gotoCase = 117; continue; };
+                        { gotoCase = 118; continue; };
                     } else {
                         if (yych <= '\r') { gotoCase = 32; continue; };
-                        if (yych <= ' ') { gotoCase = 117; continue; };
-                        { gotoCase = 113; continue; };
+                        if (yych <= ' ') { gotoCase = 118; continue; };
+                        { gotoCase = 114; continue; };
                     }
                 } else {
-                    if (yych <= '&') {
-                        if (yych == '$') { gotoCase = 113; continue; };
-                        { gotoCase = 117; continue; };
+                    if (yych <= '\'') {
+                        if (yych <= '%') { gotoCase = 118; continue; };
+                        if (yych <= '&') { gotoCase = 114; continue; };
                     } else {
-                        if (yych <= '\'') { gotoCase = 115; continue; };
-                        if (yych <= ',') { gotoCase = 117; continue; };
-                        { gotoCase = 113; continue; };
+                        if (yych == '-') { gotoCase = 114; continue; };
+                        { gotoCase = 118; continue; };
                     }
                 }
             } else {
-                if (yych <= '[') {
-                    if (yych <= '<') {
-                        if (yych <= '.') { gotoCase = 117; continue; };
-                        if (yych <= '9') { gotoCase = 113; continue; };
-                        { gotoCase = 117; continue; };
+                if (yych <= '\\') {
+                    if (yych <= '=') {
+                        if (yych <= '9') { gotoCase = 114; continue; };
+                        if (yych <= '<') { gotoCase = 118; continue; };
+                        { gotoCase = 114; continue; };
                     } else {
-                        if (yych <= '=') { gotoCase = 113; continue; };
-                        if (yych <= '?') { gotoCase = 117; continue; };
-                        { gotoCase = 113; continue; };
+                        if (yych <= '?') { gotoCase = 118; continue; };
+                        if (yych <= '[') { gotoCase = 114; continue; };
+                        { gotoCase = 120; continue; };
                     }
                 } else {
-                    if (yych <= '^') {
-                        if (yych <= '\\') { gotoCase = 119; continue; };
-                        if (yych <= ']') { gotoCase = 113; continue; };
-                        { gotoCase = 117; continue; };
+                    if (yych <= '_') {
+                        if (yych == '^') { gotoCase = 118; continue; };
+                        { gotoCase = 114; continue; };
                     } else {
-                        if (yych == '`') { gotoCase = 117; continue; };
-                        if (yych <= 'z') { gotoCase = 113; continue; };
-                        { gotoCase = 117; continue; };
+                        if (yych <= '`') { gotoCase = 118; continue; };
+                        if (yych <= 'z') { gotoCase = 114; continue; };
+                        { gotoCase = 118; continue; };
                     }
                 }
             }
-case 115:
+case 116:
             ++cursor;
-            if ((yych = this._charAt(cursor)) <= '9') {
-                if (yych <= '&') {
-                    if (yych <= '"') {
-                        if (yych >= '!') { gotoCase = 49; continue; };
-                    } else {
-                        if (yych == '$') { gotoCase = 49; continue; };
-                    }
+            if ((yych = this._charAt(cursor)) <= '<') {
+                if (yych <= '\'') {
+                    if (yych <= ' ') { gotoCase = 117; continue; };
+                    if (yych <= '"') { gotoCase = 50; continue; };
+                    if (yych >= '&') { gotoCase = 50; continue; };
                 } else {
-                    if (yych <= ',') {
-                        if (yych <= '\'') { gotoCase = 49; continue; };
+                    if (yych <= '-') {
+                        if (yych >= '-') { gotoCase = 50; continue; };
                     } else {
-                        if (yych != '.') { gotoCase = 49; continue; };
+                        if (yych <= '.') { gotoCase = 117; continue; };
+                        if (yych <= '9') { gotoCase = 50; continue; };
                     }
                 }
             } else {
-                if (yych <= '\\') {
-                    if (yych <= '=') {
-                        if (yych >= '=') { gotoCase = 49; continue; };
+                if (yych <= ']') {
+                    if (yych <= '?') {
+                        if (yych <= '=') { gotoCase = 50; continue; };
                     } else {
-                        if (yych <= '?') { gotoCase = 116; continue; };
-                        if (yych <= '[') { gotoCase = 49; continue; };
+                        if (yych != '\\') { gotoCase = 50; continue; };
                     }
                 } else {
                     if (yych <= '_') {
-                        if (yych != '^') { gotoCase = 49; continue; };
+                        if (yych >= '_') { gotoCase = 50; continue; };
                     } else {
-                        if (yych <= '`') { gotoCase = 116; continue; };
-                        if (yych <= 'z') { gotoCase = 49; continue; };
+                        if (yych <= '`') { gotoCase = 117; continue; };
+                        if (yych <= 'z') { gotoCase = 50; continue; };
                     }
                 }
             }
-case 116:
-            { return this._stringToken(cursor, true); }
 case 117:
+            { return this._stringToken(cursor, true); }
+case 118:
             ++cursor;
             yych = this._charAt(cursor);
             if (yych <= '\r') {
-                if (yych == '\n') { gotoCase = 67; continue; };
-                if (yych <= '\f') { gotoCase = 117; continue; };
-                { gotoCase = 67; continue; };
+                if (yych == '\n') { gotoCase = 68; continue; };
+                if (yych <= '\f') { gotoCase = 118; continue; };
+                { gotoCase = 68; continue; };
             } else {
                 if (yych <= '\'') {
-                    if (yych <= '&') { gotoCase = 117; continue; };
-                    { gotoCase = 122; continue; };
+                    if (yych <= '&') { gotoCase = 118; continue; };
+                    { gotoCase = 123; continue; };
                 } else {
-                    if (yych != '\\') { gotoCase = 117; continue; };
+                    if (yych != '\\') { gotoCase = 118; continue; };
                 }
             }
-case 119:
+case 120:
             ++cursor;
             yych = this._charAt(cursor);
             if (yych <= 'a') {
                 if (yych <= '!') {
                     if (yych <= '\n') {
-                        if (yych <= '\t') { gotoCase = 67; continue; };
+                        if (yych <= '\t') { gotoCase = 68; continue; };
                     } else {
-                        if (yych != '\r') { gotoCase = 67; continue; };
+                        if (yych != '\r') { gotoCase = 68; continue; };
                     }
                 } else {
                     if (yych <= '\'') {
-                        if (yych <= '"') { gotoCase = 117; continue; };
-                        if (yych <= '&') { gotoCase = 67; continue; };
-                        { gotoCase = 117; continue; };
+                        if (yych <= '"') { gotoCase = 118; continue; };
+                        if (yych <= '&') { gotoCase = 68; continue; };
+                        { gotoCase = 118; continue; };
                     } else {
-                        if (yych == '\\') { gotoCase = 117; continue; };
-                        { gotoCase = 67; continue; };
+                        if (yych == '\\') { gotoCase = 118; continue; };
+                        { gotoCase = 68; continue; };
                     }
                 }
             } else {
                 if (yych <= 'q') {
                     if (yych <= 'f') {
-                        if (yych <= 'b') { gotoCase = 117; continue; };
-                        if (yych <= 'e') { gotoCase = 67; continue; };
-                        { gotoCase = 117; continue; };
+                        if (yych <= 'b') { gotoCase = 118; continue; };
+                        if (yych <= 'e') { gotoCase = 68; continue; };
+                        { gotoCase = 118; continue; };
                     } else {
-                        if (yych == 'n') { gotoCase = 117; continue; };
-                        { gotoCase = 67; continue; };
+                        if (yych == 'n') { gotoCase = 118; continue; };
+                        { gotoCase = 68; continue; };
                     }
                 } else {
                     if (yych <= 't') {
-                        if (yych == 's') { gotoCase = 67; continue; };
-                        { gotoCase = 117; continue; };
+                        if (yych == 's') { gotoCase = 68; continue; };
+                        { gotoCase = 118; continue; };
                     } else {
-                        if (yych == 'v') { gotoCase = 117; continue; };
-                        { gotoCase = 67; continue; };
+                        if (yych == 'v') { gotoCase = 118; continue; };
+                        { gotoCase = 68; continue; };
                     }
                 }
             }
             ++cursor;
             this.setLexCondition(this._lexConditions.SSTRING);
             { return this._stringToken(cursor); }
-case 122:
-            yych = this._charAt(++cursor);
-            { gotoCase = 116; continue; };
 case 123:
+            yych = this._charAt(++cursor);
+            { gotoCase = 117; continue; };
+case 124:
+            ++cursor;
+            yych = this._charAt(cursor);
+            if (yych <= '<') {
+                if (yych <= '\'') {
+                    if (yych <= ' ') { gotoCase = 126; continue; };
+                    if (yych <= '"') { gotoCase = 124; continue; };
+                    if (yych >= '&') { gotoCase = 124; continue; };
+                } else {
+                    if (yych <= '-') {
+                        if (yych >= '-') { gotoCase = 124; continue; };
+                    } else {
+                        if (yych <= '.') { gotoCase = 126; continue; };
+                        if (yych <= '9') { gotoCase = 124; continue; };
+                    }
+                }
+            } else {
+                if (yych <= ']') {
+                    if (yych <= '?') {
+                        if (yych <= '=') { gotoCase = 124; continue; };
+                    } else {
+                        if (yych != '\\') { gotoCase = 124; continue; };
+                    }
+                } else {
+                    if (yych <= '_') {
+                        if (yych >= '_') { gotoCase = 124; continue; };
+                    } else {
+                        if (yych <= '`') { gotoCase = 126; continue; };
+                        if (yych <= 'z') { gotoCase = 124; continue; };
+                    }
+                }
+            }
+case 126:
+            {
+                    if (this._condition.parseCondition === this._condition.parseCondition.INITIAL || this._condition.parseCondition === this._condition.parseCondition.AT_RULE)
+                        this._setParseCondition(this._parseConditions.PROPERTY);
+                    this.tokenType = "scss-variable";
+                    return cursor;
+                }
+case 127:
             ++cursor;
             yych = this._charAt(cursor);
             if (yych <= '@') {
-                if (yych <= '/') { gotoCase = 125; continue; };
-                if (yych <= '9') { gotoCase = 123; continue; };
+                if (yych <= '/') { gotoCase = 129; continue; };
+                if (yych <= '9') { gotoCase = 127; continue; };
             } else {
-                if (yych <= 'F') { gotoCase = 123; continue; };
-                if (yych <= '`') { gotoCase = 125; continue; };
-                if (yych <= 'f') { gotoCase = 123; continue; };
+                if (yych <= 'Z') { gotoCase = 127; continue; };
+                if (yych <= '`') { gotoCase = 129; continue; };
+                if (yych <= 'z') { gotoCase = 127; continue; };
             }
-case 125:
+case 129:
             {
                     if (this._isPropertyValue())
                         this.tokenType = "css-color";
+                    else if (this._condition.parseCondition === this._parseConditions.INITIAL)
+                        this.tokenType = "css-selector";
                     else
                         this.tokenType = null;
                     return cursor;
                 }
-case 126:
+case 130:
             yyaccept = 0;
             YYMARKER = ++cursor;
             yych = this._charAt(cursor);
-            if (yych <= '-') {
+            if (yych <= '.') {
                 if (yych <= '!') {
                     if (yych <= '\f') {
                         if (yych == '\n') { gotoCase = 32; continue; };
                     } else {
                         if (yych <= '\r') { gotoCase = 32; continue; };
-                        if (yych >= '!') { gotoCase = 126; continue; };
+                        if (yych >= '!') { gotoCase = 130; continue; };
                     }
                 } else {
-                    if (yych <= '$') {
-                        if (yych <= '"') { gotoCase = 115; continue; };
-                        if (yych >= '$') { gotoCase = 126; continue; };
+                    if (yych <= '\'') {
+                        if (yych <= '"') { gotoCase = 116; continue; };
+                        if (yych >= '&') { gotoCase = 130; continue; };
                     } else {
-                        if (yych == '\'') { gotoCase = 126; continue; };
-                        if (yych >= '-') { gotoCase = 126; continue; };
+                        if (yych == '-') { gotoCase = 130; continue; };
                     }
                 }
             } else {
-                if (yych <= '[') {
-                    if (yych <= '<') {
-                        if (yych <= '.') { gotoCase = 128; continue; };
-                        if (yych <= '9') { gotoCase = 126; continue; };
+                if (yych <= '\\') {
+                    if (yych <= '=') {
+                        if (yych <= '9') { gotoCase = 130; continue; };
+                        if (yych >= '=') { gotoCase = 130; continue; };
                     } else {
-                        if (yych <= '=') { gotoCase = 126; continue; };
-                        if (yych >= '@') { gotoCase = 126; continue; };
+                        if (yych <= '?') { gotoCase = 132; continue; };
+                        if (yych <= '[') { gotoCase = 130; continue; };
+                        { gotoCase = 134; continue; };
                     }
                 } else {
-                    if (yych <= '^') {
-                        if (yych <= '\\') { gotoCase = 130; continue; };
-                        if (yych <= ']') { gotoCase = 126; continue; };
+                    if (yych <= '_') {
+                        if (yych != '^') { gotoCase = 130; continue; };
                     } else {
-                        if (yych == '`') { gotoCase = 128; continue; };
-                        if (yych <= 'z') { gotoCase = 126; continue; };
+                        if (yych <= '`') { gotoCase = 132; continue; };
+                        if (yych <= 'z') { gotoCase = 130; continue; };
                     }
                 }
             }
-case 128:
+case 132:
             ++cursor;
             yych = this._charAt(cursor);
             if (yych <= '\r') {
-                if (yych == '\n') { gotoCase = 67; continue; };
-                if (yych <= '\f') { gotoCase = 128; continue; };
-                { gotoCase = 67; continue; };
+                if (yych == '\n') { gotoCase = 68; continue; };
+                if (yych <= '\f') { gotoCase = 132; continue; };
+                { gotoCase = 68; continue; };
             } else {
                 if (yych <= '"') {
-                    if (yych <= '!') { gotoCase = 128; continue; };
-                    { gotoCase = 122; continue; };
+                    if (yych <= '!') { gotoCase = 132; continue; };
+                    { gotoCase = 123; continue; };
                 } else {
-                    if (yych != '\\') { gotoCase = 128; continue; };
+                    if (yych != '\\') { gotoCase = 132; continue; };
                 }
             }
-case 130:
+case 134:
             ++cursor;
             yych = this._charAt(cursor);
             if (yych <= 'a') {
                 if (yych <= '!') {
                     if (yych <= '\n') {
-                        if (yych <= '\t') { gotoCase = 67; continue; };
+                        if (yych <= '\t') { gotoCase = 68; continue; };
                     } else {
-                        if (yych != '\r') { gotoCase = 67; continue; };
+                        if (yych != '\r') { gotoCase = 68; continue; };
                     }
                 } else {
                     if (yych <= '\'') {
-                        if (yych <= '"') { gotoCase = 128; continue; };
-                        if (yych <= '&') { gotoCase = 67; continue; };
-                        { gotoCase = 128; continue; };
+                        if (yych <= '"') { gotoCase = 132; continue; };
+                        if (yych <= '&') { gotoCase = 68; continue; };
+                        { gotoCase = 132; continue; };
                     } else {
-                        if (yych == '\\') { gotoCase = 128; continue; };
-                        { gotoCase = 67; continue; };
+                        if (yych == '\\') { gotoCase = 132; continue; };
+                        { gotoCase = 68; continue; };
                     }
                 }
             } else {
                 if (yych <= 'q') {
                     if (yych <= 'f') {
-                        if (yych <= 'b') { gotoCase = 128; continue; };
-                        if (yych <= 'e') { gotoCase = 67; continue; };
-                        { gotoCase = 128; continue; };
+                        if (yych <= 'b') { gotoCase = 132; continue; };
+                        if (yych <= 'e') { gotoCase = 68; continue; };
+                        { gotoCase = 132; continue; };
                     } else {
-                        if (yych == 'n') { gotoCase = 128; continue; };
-                        { gotoCase = 67; continue; };
+                        if (yych == 'n') { gotoCase = 132; continue; };
+                        { gotoCase = 68; continue; };
                     }
                 } else {
                     if (yych <= 't') {
-                        if (yych == 's') { gotoCase = 67; continue; };
-                        { gotoCase = 128; continue; };
+                        if (yych == 's') { gotoCase = 68; continue; };
+                        { gotoCase = 132; continue; };
                     } else {
-                        if (yych == 'v') { gotoCase = 128; continue; };
-                        { gotoCase = 67; continue; };
+                        if (yych == 'v') { gotoCase = 132; continue; };
+                        { gotoCase = 68; continue; };
                     }
                 }
             }
@@ -1360,114 +1454,114 @@ case 130:
 case this.case_SSTRING:
             yych = this._charAt(cursor);
             if (yych <= '\r') {
-                if (yych == '\n') { gotoCase = 137; continue; };
-                if (yych <= '\f') { gotoCase = 136; continue; };
-                { gotoCase = 137; continue; };
+                if (yych == '\n') { gotoCase = 141; continue; };
+                if (yych <= '\f') { gotoCase = 140; continue; };
+                { gotoCase = 141; continue; };
             } else {
                 if (yych <= '\'') {
-                    if (yych <= '&') { gotoCase = 136; continue; };
-                    { gotoCase = 139; continue; };
+                    if (yych <= '&') { gotoCase = 140; continue; };
+                    { gotoCase = 143; continue; };
                 } else {
-                    if (yych == '\\') { gotoCase = 141; continue; };
-                    { gotoCase = 136; continue; };
+                    if (yych == '\\') { gotoCase = 145; continue; };
+                    { gotoCase = 140; continue; };
                 }
             }
-case 135:
+case 139:
             { return this._stringToken(cursor); }
-case 136:
+case 140:
             yyaccept = 0;
             yych = this._charAt(YYMARKER = ++cursor);
-            { gotoCase = 143; continue; };
-case 137:
+            { gotoCase = 147; continue; };
+case 141:
             ++cursor;
-case 138:
+case 142:
             { this.tokenType = null; return cursor; }
-case 139:
+case 143:
             ++cursor;
-case 140:
+case 144:
             this.setLexCondition(this._lexConditions.INITIAL);
             { return this._stringToken(cursor, true); }
-case 141:
+case 145:
             yych = this._charAt(++cursor);
             if (yych <= 'e') {
                 if (yych <= '\'') {
-                    if (yych == '"') { gotoCase = 142; continue; };
-                    if (yych <= '&') { gotoCase = 138; continue; };
+                    if (yych == '"') { gotoCase = 146; continue; };
+                    if (yych <= '&') { gotoCase = 142; continue; };
                 } else {
                     if (yych <= '\\') {
-                        if (yych <= '[') { gotoCase = 138; continue; };
+                        if (yych <= '[') { gotoCase = 142; continue; };
                     } else {
-                        if (yych != 'b') { gotoCase = 138; continue; };
+                        if (yych != 'b') { gotoCase = 142; continue; };
                     }
                 }
             } else {
                 if (yych <= 'r') {
                     if (yych <= 'm') {
-                        if (yych >= 'g') { gotoCase = 138; continue; };
+                        if (yych >= 'g') { gotoCase = 142; continue; };
                     } else {
-                        if (yych <= 'n') { gotoCase = 142; continue; };
-                        if (yych <= 'q') { gotoCase = 138; continue; };
+                        if (yych <= 'n') { gotoCase = 146; continue; };
+                        if (yych <= 'q') { gotoCase = 142; continue; };
                     }
                 } else {
                     if (yych <= 't') {
-                        if (yych <= 's') { gotoCase = 138; continue; };
+                        if (yych <= 's') { gotoCase = 142; continue; };
                     } else {
-                        if (yych != 'v') { gotoCase = 138; continue; };
+                        if (yych != 'v') { gotoCase = 142; continue; };
                     }
                 }
             }
-case 142:
+case 146:
             yyaccept = 0;
             YYMARKER = ++cursor;
             yych = this._charAt(cursor);
-case 143:
+case 147:
             if (yych <= '\r') {
-                if (yych == '\n') { gotoCase = 135; continue; };
-                if (yych <= '\f') { gotoCase = 142; continue; };
-                { gotoCase = 135; continue; };
+                if (yych == '\n') { gotoCase = 139; continue; };
+                if (yych <= '\f') { gotoCase = 146; continue; };
+                { gotoCase = 139; continue; };
             } else {
                 if (yych <= '\'') {
-                    if (yych <= '&') { gotoCase = 142; continue; };
-                    { gotoCase = 146; continue; };
+                    if (yych <= '&') { gotoCase = 146; continue; };
+                    { gotoCase = 150; continue; };
                 } else {
-                    if (yych != '\\') { gotoCase = 142; continue; };
+                    if (yych != '\\') { gotoCase = 146; continue; };
                 }
             }
             ++cursor;
             yych = this._charAt(cursor);
             if (yych <= 'e') {
                 if (yych <= '\'') {
-                    if (yych == '"') { gotoCase = 142; continue; };
-                    if (yych >= '\'') { gotoCase = 142; continue; };
+                    if (yych == '"') { gotoCase = 146; continue; };
+                    if (yych >= '\'') { gotoCase = 146; continue; };
                 } else {
                     if (yych <= '\\') {
-                        if (yych >= '\\') { gotoCase = 142; continue; };
+                        if (yych >= '\\') { gotoCase = 146; continue; };
                     } else {
-                        if (yych == 'b') { gotoCase = 142; continue; };
+                        if (yych == 'b') { gotoCase = 146; continue; };
                     }
                 }
             } else {
                 if (yych <= 'r') {
                     if (yych <= 'm') {
-                        if (yych <= 'f') { gotoCase = 142; continue; };
+                        if (yych <= 'f') { gotoCase = 146; continue; };
                     } else {
-                        if (yych <= 'n') { gotoCase = 142; continue; };
-                        if (yych >= 'r') { gotoCase = 142; continue; };
+                        if (yych <= 'n') { gotoCase = 146; continue; };
+                        if (yych >= 'r') { gotoCase = 146; continue; };
                     }
                 } else {
                     if (yych <= 't') {
-                        if (yych >= 't') { gotoCase = 142; continue; };
+                        if (yych >= 't') { gotoCase = 146; continue; };
                     } else {
-                        if (yych == 'v') { gotoCase = 142; continue; };
+                        if (yych == 'v') { gotoCase = 146; continue; };
                     }
                 }
             }
             cursor = YYMARKER;
-            { gotoCase = 135; continue; };
-case 146:
+            { gotoCase = 139; continue; };
+case 150:
             ++cursor;
             yych = this._charAt(cursor);
-            { gotoCase = 140; continue; };
+            { gotoCase = 144; continue; };
         }
 
         }
index 9e7b3ff2247b62f8d4ddfc8a2aeed2ba11013afb..f33f5a924f2421e213ce590b15ace2e5faa85526 100644 (file)
@@ -51,7 +51,7 @@ WebInspector.SourceCSSTokenizer = function()
 {
     WebInspector.SourceTokenizer.call(this);
 
-    this._propertyKeywords = WebInspector.CSSCompletions.cssPropertiesMetainfo.keySet();
+    this._propertyKeywords = WebInspector.CSSCompletions.cssPropertiesMetainfoKeySet();
     this._colorKeywords = WebInspector.CSSKeywordCompletions.colors();
 
     this._valueKeywords = [
@@ -104,7 +104,12 @@ WebInspector.SourceCSSTokenizer = function()
         "-webkit-right", "-webkit-small-control", "-webkit-text", "-webkit-xxx-large", "-webkit-zoom-in", "-webkit-zoom-out",
     ].keySet();
 
-    this._mediaTypes = ["all", "aural", "braille", "embossed", "handheld", "import", "print", "projection", "screen", "tty", "tv"].keySet();
+    this._scssValueKeywords = [
+        "abs", "adjust-color", "adjust-hue", "alpha", "append", "ceil", "change-color", "comparable", "complement", "darken", "desaturate",
+        "fade-in", "fade-out", "floor", "grayscale", "hue", "ie-hex-str", "invert", "join", "length", "lighten",
+        "lightness", "max", "min", "mix", "nth", "opacify", "opacity", "percentage", "quote", "round", "saturate",
+        "saturation", "scale-color", "transparentize", "type-of", "unit", "unitless", "unquote", "zip"
+    ].keySet();
 
     this._lexConditions = {
         INITIAL: 0,
@@ -129,6 +134,10 @@ WebInspector.SourceCSSTokenizer = function()
     this.condition = this.createInitialCondition();
 }
 
+WebInspector.SourceCSSTokenizer.SCSSAtRelatedKeywords = ["from", "if", "in", "through"].keySet();
+
+WebInspector.SourceCSSTokenizer.MediaTypes = ["all", "aural", "braille", "embossed", "handheld", "import", "print", "projection", "screen", "tty", "tv"].keySet();
+
 WebInspector.SourceCSSTokenizer.prototype = {
     createInitialCondition: function()
     {
@@ -152,6 +161,11 @@ WebInspector.SourceCSSTokenizer.prototype = {
         return this._condition.parseCondition === this._parseConditions.PROPERTY_VALUE || this._condition.parseCondition === this._parseConditions.AT_RULE;
     },
 
+    _setParseCondition: function(condition)
+    {
+        this._condition.parseCondition = condition;
+    },
+
     nextToken: function(cursor)
     {
         var cursorOnEnter = cursor;
@@ -186,8 +200,9 @@ WebInspector.SourceCSSTokenizer.prototype = {
                 NumericLiteral = "-"? ([0-9]+ | [0-9]* "." [0-9]+)  ("em" | "rem" | "__qem" | "ex" | "px" | "cm" |
                     "mm" | "in" | "pt" | "pc" | "deg" | "rad" | "grad" | "turn" | "ms" | "s" | "Hz" | "kHz" | "%")?;
 
-                Color = "#" [0-9A-Fa-f]+;
-                Identifier = [@!_\-$0-9a-zA-Z\[\]='"/]+;
+                ColorOrSelector = "#" [0-9A-Za-z]+;
+                Identifier = [@!_\-0-9a-zA-Z\[\]='"/&]+;
+                Variable = "$" Identifier;
 
                 DoubleStringContent = ([^\r\n\"\\] | "\\" ['"\\bfnrtv])*;
                 SingleStringContent = ([^\r\n\'\\] | "\\" ['"\\bfnrtv])*;
@@ -213,35 +228,37 @@ WebInspector.SourceCSSTokenizer.prototype = {
                 <INITIAL> OpenCurlyBracket
                 {
                     this.tokenType = "block-start";
+                    this._condition.openBraces = (this._condition.openBraces || 0) + 1;
                     if (this._condition.parseCondition === this._parseConditions.AT_MEDIA_RULE)
-                        this._condition.parseCondition = this._parseConditions.INITIAL;
+                        this._setParseCondition(this._parseConditions.INITIAL);
                     else
-                        this._condition.parseCondition = this._parseConditions.PROPERTY;
+                        this._setParseCondition(this._parseConditions.PROPERTY);
                     return cursor;
                 }
 
                 <INITIAL> CloseCurlyBracket
                 {
                     this.tokenType = "block-end";
-                    this._condition.parseCondition = this._parseConditions.INITIAL;
+                    if (this._condition.openBraces > 0)
+                        --this._condition.openBraces;
+                    this._setParseCondition(this._condition.openBraces ? this._parseConditions.PROPERTY : this._parseConditions.INITIAL);
+                    delete this._condition.atKeyword;
                     return cursor;
                 }
 
                 <INITIAL> Colon
                 {
                     this.tokenType = null;
-                    if (this._condition.parseCondition === this._parseConditions.PROPERTY)
-                        this._condition.parseCondition = this._parseConditions.PROPERTY_VALUE;
+                    if (this._condition.parseCondition === this._parseConditions.PROPERTY || this._condition.parseCondition === this._parseConditions.INITIAL)
+                        this._setParseCondition(this._parseConditions.PROPERTY_VALUE);
                     return cursor;
                 }
 
                 <INITIAL> Semicolon
                 {
                     this.tokenType = null;
-                    if (this._condition.parseCondition === this._parseConditions.AT_RULE)
-                        this._condition.parseCondition = this._parseConditions.INITIAL;
-                    else
-                        this._condition.parseCondition = this._parseConditions.PROPERTY;
+                    this._setParseCondition(this._condition.openBraces ? this._parseConditions.PROPERTY : this._parseConditions.INITIAL);
+                    delete this._condition.atKeyword;
                     return cursor;
                 }
 
@@ -254,41 +271,63 @@ WebInspector.SourceCSSTokenizer.prototype = {
                     return cursor;
                 }
 
-                <INITIAL> Color
+                <INITIAL> ColorOrSelector
                 {
                     if (this._isPropertyValue())
                         this.tokenType = "css-color";
+                    else if (this._condition.parseCondition === this._parseConditions.INITIAL)
+                        this.tokenType = "css-selector";
                     else
                         this.tokenType = null;
                     return cursor;
                 }
 
+                <INITIAL> Variable
+                {
+                    if (this._condition.parseCondition === this._condition.parseCondition.INITIAL || this._condition.parseCondition === this._condition.parseCondition.AT_RULE)
+                        this._setParseCondition(this._parseConditions.PROPERTY);
+                    this.tokenType = "scss-variable";
+                    return cursor;
+                }
+
                 <INITIAL> Identifier
                 {
                     var token = this._line.substring(cursorOnEnter, cursor);
-                    if (this._condition.parseCondition === this._parseConditions.INITIAL) {
-                        if (token === "@media") {
+                    this.tokenType = null;
+                    if (this._condition.parseCondition === this._parseConditions.INITIAL || this._condition.parseCondition === this._parseConditions.PROPERTY) {
+                        if (token.charAt(0) === "@") {
                             this.tokenType = "css-at-rule";
-                            this._condition.parseCondition = this._parseConditions.AT_MEDIA_RULE;
-                        } else if (token.startsWith("@")) {
+                            this._setParseCondition(token === "@media" ? this._parseConditions.AT_MEDIA_RULE : this._parseConditions.AT_RULE);
+                            this._condition.atKeyword = token;
+                        } else if (this._condition.parseCondition === this._parseConditions.INITIAL)
+                            this.tokenType = "css-selector";
+                        else if (this._propertyKeywords.hasOwnProperty(token))
+                            this.tokenType = "css-property";
+                    } else if (this._condition.parseCondition === this._parseConditions.AT_MEDIA_RULE || this._condition.parseCondition === this._parseConditions.AT_RULE) {
+                        if (WebInspector.SourceCSSTokenizer.SCSSAtRelatedKeywords.hasOwnProperty(token))
                             this.tokenType = "css-at-rule";
-                            this._condition.parseCondition = this._parseConditions.AT_RULE;
-                        } else
+                        else if (WebInspector.SourceCSSTokenizer.MediaTypes.hasOwnProperty(token))
+                            this.tokenType = "css-keyword";
+                    }
+                    if (this.tokenType)
+                        return cursor;
+
+                    if (this._isPropertyValue()) {
+                        var firstChar = token.charAt(0);
+                        if (firstChar === "$")
+                            this.tokenType = "scss-variable";
+                        else if (firstChar === "!")
+                            this.tokenType = "css-bang-keyword";
+                        else if (this._condition.atKeyword === "@extend")
                             this.tokenType = "css-selector";
-                    } else if ((this._condition.parseCondition === this._parseConditions.AT_MEDIA_RULE || this._condition.parseCondition === this._parseConditions.AT_RULE) && token in this._mediaTypes)
-                        this.tokenType = "css-keyword";
-                    else if (this._condition.parseCondition === this._parseConditions.PROPERTY && token in this._propertyKeywords)
-                        this.tokenType = "css-property";
-                    else if (this._isPropertyValue()) {
-                        if (token in this._valueKeywords)
+                        else if (this._valueKeywords.hasOwnProperty(token) || this._scssValueKeywords.hasOwnProperty(token))
                             this.tokenType = "css-keyword";
-                        else if (token in this._colorKeywords) {
+                        else if (this._colorKeywords.hasOwnProperty(token)) {
                             // FIXME: this does not convert tokens toLowerCase() for the sake of speed.
                             this.tokenType = "css-color";
-                        } else if (token === "!important")
-                            this.tokenType = "css-important";
-                    } else
-                        this.tokenType = null;
+                        }
+                    } else if (this._condition.parseCondition !== this._parseConditions.PROPERTY_VALUE)
+                        this.tokenType = "css-selector";
                     return cursor;
                 }
                 <*> [^] { this.tokenType = null; return cursor; }
index 7a8a6acfbb2b63830e7542e2da233c1c1555ceb3..9ae78a65d960069b5a5bdaa0572e6fd01d4a70d8 100644 (file)
@@ -83,7 +83,8 @@ WebInspector.SourceTokenizer.Registry = function() {
     this._tokenizerConstructors = {
         "text/css": "SourceCSSTokenizer",
         "text/html": "SourceHTMLTokenizer",
-        "text/javascript": "SourceJavaScriptTokenizer"
+        "text/javascript": "SourceJavaScriptTokenizer",
+        "text/x-scss": "SourceCSSTokenizer"
     };
 }
 
index 748631e11bfcf76a3aa937534edd792b95cee6dc..81897d8d43d1ee73fa17fdc45d2d188536708b84 100644 (file)
@@ -46,7 +46,7 @@
     color: black;
 }
 
-.webkit-css-important {
+.webkit-css-bang-keyword {
     color: rgb(200, 0, 180);
 }