[css-hint addon] Rewrite to work with overhauled css mode

Author: marijnh

addon/hint/css-hint.js

@@ -1,50 +1,46 @@
 (function () {
   "use strict";
 
-  function getHints(cm) {
+  var pseudoClasses = {link: 1, visited: 1, active: 1, hover: 1, focus: 1,
+                       "first-letter": 1, "first-line": 1, "first-child": 1,
+                       before: 1, after: 1, lang: 1};
+
+  CodeMirror.registerHelper("hint", "css", function(cm) {
     var cur = cm.getCursor(), token = cm.getTokenAt(cur);
     var inner = CodeMirror.innerMode(cm.getMode(), token.state);
     if (inner.mode.name != "css") return;
 
-    // If it's not a 'word-style' token, ignore the token.
-    if (!/^[\w$_-]*$/.test(token.string)) {
-      token = {
-        start: cur.ch, end: cur.ch, string: "", state: token.state,
-        type: null
-      };
-      var stack = token.state.stack;
-      var lastToken = stack && stack.length > 0 ? stack[stack.length - 1] : "";
-      if (token.string == ":" || lastToken.indexOf("property") == 0)
-        token.type = "variable";
-      else if (token.string == "{" || lastToken.indexOf("rule") == 0)
-        token.type = "property";
+    var word = token.string, start = token.start, end = token.end;
+    if (/[^\w$_-]/.test(word)) {
+      word = ""; start = end = cur.ch;
     }
 
-    if (!token.type)
-      return;
-
     var spec = CodeMirror.resolveMode("text/css");
-    var keywords = null;
-    if (token.type.indexOf("property") == 0)
-      keywords = spec.propertyKeywords;
-    else if (token.type.indexOf("variable") == 0)
-      keywords = spec.valueKeywords;
-
-    if (!keywords)
-      return;
 
     var result = [];
-    for (var name in keywords) {
-      if (name.indexOf(token.string) == 0 /* > -1 */)
-        result.push(name);
+    function add(keywords) {
+      for (var name in keywords)
+        if (!word || name.indexOf(word) == 0)
+          result.push(name);
     }
 
-    return {
+    var st = token.state.state;
+    if (st == "pseudo" || token.type == "variable-3") {
+      add(pseudoClasses);
+    } else if (st == "block" || st == "maybeprop") {
+      add(spec.propertyKeywords);
+    } else if (st == "prop" || st == "parens" || st == "at" || st == "params") {
+      add(spec.valueKeywords);
+      add(spec.colorKeywords);
+    } else if (st == "media" || st == "media_parens") {
+      add(spec.mediaTypes);
+      add(spec.mediaFeatures);
+    }
+
+    if (result.length) return {
       list: result,
-      from: CodeMirror.Pos(cur.line, token.start),
-      to: CodeMirror.Pos(cur.line, token.end)
+      from: CodeMirror.Pos(cur.line, start),
+      to: CodeMirror.Pos(cur.line, end)
     };
-  }
-
-  CodeMirror.registerHelper("hint", "css", getHints);
+  });
 })();

doc/manual.html

@@ -2159,7 +2159,7 @@ <h2>Addons</h2>
       the <a href="../demo/html5complete.html">demo</a>.</dd>
 
       <dt id="addon_css-hint"><a href="../addon/hint/css-hint.js"><code>hint/css-hint.js</code></a></dt>
-      <dd>A minimal hinting function for CSS code.
+      <dd>A hinting function for CSS, SCSS, or LESS code.
       Defines <code>CodeMirror.hint.css</code>.</dd>
 
       <dt id="addon_python-hint"><a href="../addon/hint/python-hint.js"><code>hint/python-hint.js</code></a></dt>

mode/css/css.js

@@ -206,7 +206,7 @@ CodeMirror.defineMode("css", function(config, parserConfig) {
 
   states.pseudo = function(type, stream, state) {
     if (type == "word") {
-      override = "variable-2";
+      override = "variable-3";
       return state.context.type;
     }
     return pass(type, stream, state);
@@ -601,7 +601,8 @@ CodeMirror.defineMode("css", function(config, parserConfig) {
         return [null, "interpolation"];
       }
     },
-    name: "css"
+    name: "css",
+    helperType: "scss"
   });
 
   CodeMirror.defineMIME("text/x-less", {
@@ -634,6 +635,7 @@ CodeMirror.defineMode("css", function(config, parserConfig) {
         return ["atom", "atom"];
       }
     },
-    name: "css"
+    name: "css",
+    helperType: "less"
   });
 })();