[Summary view] [Print] [Text view]

   1  // CodeMirror, copyright (c) by Marijn Haverbeke and others
   2  // Distributed under an MIT license: http://codemirror.net/LICENSE
   3  
   4  (function(mod) {
   5    if (typeof exports == "object" && typeof module == "object") // CommonJS
   6      mod(require("../../lib/codemirror"));
   7    else if (typeof define == "function" && define.amd) // AMD
   8      define(["../../lib/codemirror"], mod);
   9    else // Plain browser env
  10      mod(CodeMirror);
  11  })(function(CodeMirror) {
  12  "use strict";
  13  
  14  CodeMirror.defineMode("css", function(config, parserConfig) {
  15    var inline = parserConfig.inline
  16    if (!parserConfig.propertyKeywords) parserConfig = CodeMirror.resolveMode("text/css");
  17  
  18    var indentUnit = config.indentUnit,
  19        tokenHooks = parserConfig.tokenHooks,
  20        documentTypes = parserConfig.documentTypes || {},
  21        mediaTypes = parserConfig.mediaTypes || {},
  22        mediaFeatures = parserConfig.mediaFeatures || {},
  23        mediaValueKeywords = parserConfig.mediaValueKeywords || {},
  24        propertyKeywords = parserConfig.propertyKeywords || {},
  25        nonStandardPropertyKeywords = parserConfig.nonStandardPropertyKeywords || {},
  26        fontProperties = parserConfig.fontProperties || {},
  27        counterDescriptors = parserConfig.counterDescriptors || {},
  28        colorKeywords = parserConfig.colorKeywords || {},
  29        valueKeywords = parserConfig.valueKeywords || {},
  30        allowNested = parserConfig.allowNested,
  31        lineComment = parserConfig.lineComment,
  32        supportsAtComponent = parserConfig.supportsAtComponent === true;
  33  
  34    var type, override;
  35    function ret(style, tp) { type = tp; return style; }
  36  
  37    // Tokenizers
  38  
  39    function tokenBase(stream, state) {
  40      var ch = stream.next();
  41      if (tokenHooks[ch]) {
  42        var result = tokenHooks[ch](stream, state);
  43        if (result !== false) return result;
  44      }
  45      if (ch == "@") {
  46        stream.eatWhile(/[\w\\\-]/);
  47        return ret("def", stream.current());
  48      } else if (ch == "=" || (ch == "~" || ch == "|") && stream.eat("=")) {
  49        return ret(null, "compare");
  50      } else if (ch == "\"" || ch == "'") {
  51        state.tokenize = tokenString(ch);
  52        return state.tokenize(stream, state);
  53      } else if (ch == "#") {
  54        stream.eatWhile(/[\w\\\-]/);
  55        return ret("atom", "hash");
  56      } else if (ch == "!") {
  57        stream.match(/^\s*\w*/);
  58        return ret("keyword", "important");
  59      } else if (/\d/.test(ch) || ch == "." && stream.eat(/\d/)) {
  60        stream.eatWhile(/[\w.%]/);
  61        return ret("number", "unit");
  62      } else if (ch === "-") {
  63        if (/[\d.]/.test(stream.peek())) {
  64          stream.eatWhile(/[\w.%]/);
  65          return ret("number", "unit");
  66        } else if (stream.match(/^-[\w\\\-]+/)) {
  67          stream.eatWhile(/[\w\\\-]/);
  68          if (stream.match(/^\s*:/, false))
  69            return ret("variable-2", "variable-definition");
  70          return ret("variable-2", "variable");
  71        } else if (stream.match(/^\w+-/)) {
  72          return ret("meta", "meta");
  73        }
  74      } else if (/[,+>*\/]/.test(ch)) {
  75        return ret(null, "select-op");
  76      } else if (ch == "." && stream.match(/^-?[_a-z][_a-z0-9-]*/i)) {
  77        return ret("qualifier", "qualifier");
  78      } else if (/[:;{}\[\]\(\)]/.test(ch)) {
  79        return ret(null, ch);
  80      } else if ((ch == "u" && stream.match(/rl(-prefix)?\(/)) ||
  81                 (ch == "d" && stream.match("omain(")) ||
  82                 (ch == "r" && stream.match("egexp("))) {
  83        stream.backUp(1);
  84        state.tokenize = tokenParenthesized;
  85        return ret("property", "word");
  86      } else if (/[\w\\\-]/.test(ch)) {
  87        stream.eatWhile(/[\w\\\-]/);
  88        return ret("property", "word");
  89      } else {
  90        return ret(null, null);
  91      }
  92    }
  93  
  94    function tokenString(quote) {
  95      return function(stream, state) {
  96        var escaped = false, ch;
  97        while ((ch = stream.next()) != null) {
  98          if (ch == quote && !escaped) {
  99            if (quote == ")") stream.backUp(1);
 100            break;
 101          }
 102          escaped = !escaped && ch == "\\";
 103        }
 104        if (ch == quote || !escaped && quote != ")") state.tokenize = null;
 105        return ret("string", "string");
 106      };
 107    }
 108  
 109    function tokenParenthesized(stream, state) {
 110      stream.next(); // Must be '('
 111      if (!stream.match(/\s*[\"\')]/, false))
 112        state.tokenize = tokenString(")");
 113      else
 114        state.tokenize = null;
 115      return ret(null, "(");
 116    }
 117  
 118    // Context management
 119  
 120    function Context(type, indent, prev) {
 121      this.type = type;
 122      this.indent = indent;
 123      this.prev = prev;
 124    }
 125  
 126    function pushContext(state, stream, type, indent) {
 127      state.context = new Context(type, stream.indentation() + (indent === false ? 0 : indentUnit), state.context);
 128      return type;
 129    }
 130  
 131    function popContext(state) {
 132      if (state.context.prev)
 133        state.context = state.context.prev;
 134      return state.context.type;
 135    }
 136  
 137    function pass(type, stream, state) {
 138      return states[state.context.type](type, stream, state);
 139    }
 140    function popAndPass(type, stream, state, n) {
 141      for (var i = n || 1; i > 0; i--)
 142        state.context = state.context.prev;
 143      return pass(type, stream, state);
 144    }
 145  
 146    // Parser
 147  
 148    function wordAsValue(stream) {
 149      var word = stream.current().toLowerCase();
 150      if (valueKeywords.hasOwnProperty(word))
 151        override = "atom";
 152      else if (colorKeywords.hasOwnProperty(word))
 153        override = "keyword";
 154      else
 155        override = "variable";
 156    }
 157  
 158    var states = {};
 159  
 160    states.top = function(type, stream, state) {
 161      if (type == "{") {
 162        return pushContext(state, stream, "block");
 163      } else if (type == "}" && state.context.prev) {
 164        return popContext(state);
 165      } else if (supportsAtComponent && /@component/.test(type)) {
 166        return pushContext(state, stream, "atComponentBlock");
 167      } else if (/^@(-moz-)?document$/.test(type)) {
 168        return pushContext(state, stream, "documentTypes");
 169      } else if (/^@(media|supports|(-moz-)?document|import)$/.test(type)) {
 170        return pushContext(state, stream, "atBlock");
 171      } else if (/^@(font-face|counter-style)/.test(type)) {
 172        state.stateArg = type;
 173        return "restricted_atBlock_before";
 174      } else if (/^@(-(moz|ms|o|webkit)-)?keyframes$/.test(type)) {
 175        return "keyframes";
 176      } else if (type && type.charAt(0) == "@") {
 177        return pushContext(state, stream, "at");
 178      } else if (type == "hash") {
 179        override = "builtin";
 180      } else if (type == "word") {
 181        override = "tag";
 182      } else if (type == "variable-definition") {
 183        return "maybeprop";
 184      } else if (type == "interpolation") {
 185        return pushContext(state, stream, "interpolation");
 186      } else if (type == ":") {
 187        return "pseudo";
 188      } else if (allowNested && type == "(") {
 189        return pushContext(state, stream, "parens");
 190      }
 191      return state.context.type;
 192    };
 193  
 194    states.block = function(type, stream, state) {
 195      if (type == "word") {
 196        var word = stream.current().toLowerCase();
 197        if (propertyKeywords.hasOwnProperty(word)) {
 198          override = "property";
 199          return "maybeprop";
 200        } else if (nonStandardPropertyKeywords.hasOwnProperty(word)) {
 201          override = "string-2";
 202          return "maybeprop";
 203        } else if (allowNested) {
 204          override = stream.match(/^\s*:(?:\s|$)/, false) ? "property" : "tag";
 205          return "block";
 206        } else {
 207          override += " error";
 208          return "maybeprop";
 209        }
 210      } else if (type == "meta") {
 211        return "block";
 212      } else if (!allowNested && (type == "hash" || type == "qualifier")) {
 213        override = "error";
 214        return "block";
 215      } else {
 216        return states.top(type, stream, state);
 217      }
 218    };
 219  
 220    states.maybeprop = function(type, stream, state) {
 221      if (type == ":") return pushContext(state, stream, "prop");
 222      return pass(type, stream, state);
 223    };
 224  
 225    states.prop = function(type, stream, state) {
 226      if (type == ";") return popContext(state);
 227      if (type == "{" && allowNested) return pushContext(state, stream, "propBlock");
 228      if (type == "}" || type == "{") return popAndPass(type, stream, state);
 229      if (type == "(") return pushContext(state, stream, "parens");
 230  
 231      if (type == "hash" && !/^#([0-9a-fA-f]{3,4}|[0-9a-fA-f]{6}|[0-9a-fA-f]{8})$/.test(stream.current())) {
 232        override += " error";
 233      } else if (type == "word") {
 234        wordAsValue(stream);
 235      } else if (type == "interpolation") {
 236        return pushContext(state, stream, "interpolation");
 237      }
 238      return "prop";
 239    };
 240  
 241    states.propBlock = function(type, _stream, state) {
 242      if (type == "}") return popContext(state);
 243      if (type == "word") { override = "property"; return "maybeprop"; }
 244      return state.context.type;
 245    };
 246  
 247    states.parens = function(type, stream, state) {
 248      if (type == "{" || type == "}") return popAndPass(type, stream, state);
 249      if (type == ")") return popContext(state);
 250      if (type == "(") return pushContext(state, stream, "parens");
 251      if (type == "interpolation") return pushContext(state, stream, "interpolation");
 252      if (type == "word") wordAsValue(stream);
 253      return "parens";
 254    };
 255  
 256    states.pseudo = function(type, stream, state) {
 257      if (type == "meta") return "pseudo";
 258  
 259      if (type == "word") {
 260        override = "variable-3";
 261        return state.context.type;
 262      }
 263      return pass(type, stream, state);
 264    };
 265  
 266    states.documentTypes = function(type, stream, state) {
 267      if (type == "word" && documentTypes.hasOwnProperty(stream.current())) {
 268        override = "tag";
 269        return state.context.type;
 270      } else {
 271        return states.atBlock(type, stream, state);
 272      }
 273    };
 274  
 275    states.atBlock = function(type, stream, state) {
 276      if (type == "(") return pushContext(state, stream, "atBlock_parens");
 277      if (type == "}" || type == ";") return popAndPass(type, stream, state);
 278      if (type == "{") return popContext(state) && pushContext(state, stream, allowNested ? "block" : "top");
 279  
 280      if (type == "interpolation") return pushContext(state, stream, "interpolation");
 281  
 282      if (type == "word") {
 283        var word = stream.current().toLowerCase();
 284        if (word == "only" || word == "not" || word == "and" || word == "or")
 285          override = "keyword";
 286        else if (mediaTypes.hasOwnProperty(word))
 287          override = "attribute";
 288        else if (mediaFeatures.hasOwnProperty(word))
 289          override = "property";
 290        else if (mediaValueKeywords.hasOwnProperty(word))
 291          override = "keyword";
 292        else if (propertyKeywords.hasOwnProperty(word))
 293          override = "property";
 294        else if (nonStandardPropertyKeywords.hasOwnProperty(word))
 295          override = "string-2";
 296        else if (valueKeywords.hasOwnProperty(word))
 297          override = "atom";
 298        else if (colorKeywords.hasOwnProperty(word))
 299          override = "keyword";
 300        else
 301          override = "error";
 302      }
 303      return state.context.type;
 304    };
 305  
 306    states.atComponentBlock = function(type, stream, state) {
 307      if (type == "}")
 308        return popAndPass(type, stream, state);
 309      if (type == "{")
 310        return popContext(state) && pushContext(state, stream, allowNested ? "block" : "top", false);
 311      if (type == "word")
 312        override = "error";
 313      return state.context.type;
 314    };
 315  
 316    states.atBlock_parens = function(type, stream, state) {
 317      if (type == ")") return popContext(state);
 318      if (type == "{" || type == "}") return popAndPass(type, stream, state, 2);
 319      return states.atBlock(type, stream, state);
 320    };
 321  
 322    states.restricted_atBlock_before = function(type, stream, state) {
 323      if (type == "{")
 324        return pushContext(state, stream, "restricted_atBlock");
 325      if (type == "word" && state.stateArg == "@counter-style") {
 326        override = "variable";
 327        return "restricted_atBlock_before";
 328      }
 329      return pass(type, stream, state);
 330    };
 331  
 332    states.restricted_atBlock = function(type, stream, state) {
 333      if (type == "}") {
 334        state.stateArg = null;
 335        return popContext(state);
 336      }
 337      if (type == "word") {
 338        if ((state.stateArg == "@font-face" && !fontProperties.hasOwnProperty(stream.current().toLowerCase())) ||
 339            (state.stateArg == "@counter-style" && !counterDescriptors.hasOwnProperty(stream.current().toLowerCase())))
 340          override = "error";
 341        else
 342          override = "property";
 343        return "maybeprop";
 344      }
 345      return "restricted_atBlock";
 346    };
 347  
 348    states.keyframes = function(type, stream, state) {
 349      if (type == "word") { override = "variable"; return "keyframes"; }
 350      if (type == "{") return pushContext(state, stream, "top");
 351      return pass(type, stream, state);
 352    };
 353  
 354    states.at = function(type, stream, state) {
 355      if (type == ";") return popContext(state);
 356      if (type == "{" || type == "}") return popAndPass(type, stream, state);
 357      if (type == "word") override = "tag";
 358      else if (type == "hash") override = "builtin";
 359      return "at";
 360    };
 361  
 362    states.interpolation = function(type, stream, state) {
 363      if (type == "}") return popContext(state);
 364      if (type == "{" || type == ";") return popAndPass(type, stream, state);
 365      if (type == "word") override = "variable";
 366      else if (type != "variable" && type != "(" && type != ")") override = "error";
 367      return "interpolation";
 368    };
 369  
 370    return {
 371      startState: function(base) {
 372        return {tokenize: null,
 373                state: inline ? "block" : "top",
 374                stateArg: null,
 375                context: new Context(inline ? "block" : "top", base || 0, null)};
 376      },
 377  
 378      token: function(stream, state) {
 379        if (!state.tokenize && stream.eatSpace()) return null;
 380        var style = (state.tokenize || tokenBase)(stream, state);
 381        if (style && typeof style == "object") {
 382          type = style[1];
 383          style = style[0];
 384        }
 385        override = style;
 386        if (type != "comment")
 387          state.state = states[state.state](type, stream, state);
 388        return override;
 389      },
 390  
 391      indent: function(state, textAfter) {
 392        var cx = state.context, ch = textAfter && textAfter.charAt(0);
 393        var indent = cx.indent;
 394        if (cx.type == "prop" && (ch == "}" || ch == ")")) cx = cx.prev;
 395        if (cx.prev) {
 396          if (ch == "}" && (cx.type == "block" || cx.type == "top" ||
 397                            cx.type == "interpolation" || cx.type == "restricted_atBlock")) {
 398            // Resume indentation from parent context.
 399            cx = cx.prev;
 400            indent = cx.indent;
 401          } else if (ch == ")" && (cx.type == "parens" || cx.type == "atBlock_parens") ||
 402              ch == "{" && (cx.type == "at" || cx.type == "atBlock")) {
 403            // Dedent relative to current context.
 404            indent = Math.max(0, cx.indent - indentUnit);
 405          }
 406        }
 407        return indent;
 408      },
 409  
 410      electricChars: "}",
 411      blockCommentStart: "/*",
 412      blockCommentEnd: "*/",
 413      lineComment: lineComment,
 414      fold: "brace"
 415    };
 416  });
 417  
 418    function keySet(array) {
 419      var keys = {};
 420      for (var i = 0; i < array.length; ++i) {
 421        keys[array[i].toLowerCase()] = true;
 422      }
 423      return keys;
 424    }
 425  
 426    var documentTypes_ = [
 427      "domain", "regexp", "url", "url-prefix"
 428    ], documentTypes = keySet(documentTypes_);
 429  
 430    var mediaTypes_ = [
 431      "all", "aural", "braille", "handheld", "print", "projection", "screen",
 432      "tty", "tv", "embossed"
 433    ], mediaTypes = keySet(mediaTypes_);
 434  
 435    var mediaFeatures_ = [
 436      "width", "min-width", "max-width", "height", "min-height", "max-height",
 437      "device-width", "min-device-width", "max-device-width", "device-height",
 438      "min-device-height", "max-device-height", "aspect-ratio",
 439      "min-aspect-ratio", "max-aspect-ratio", "device-aspect-ratio",
 440      "min-device-aspect-ratio", "max-device-aspect-ratio", "color", "min-color",
 441      "max-color", "color-index", "min-color-index", "max-color-index",
 442      "monochrome", "min-monochrome", "max-monochrome", "resolution",
 443      "min-resolution", "max-resolution", "scan", "grid", "orientation",
 444      "device-pixel-ratio", "min-device-pixel-ratio", "max-device-pixel-ratio",
 445      "pointer", "any-pointer", "hover", "any-hover"
 446    ], mediaFeatures = keySet(mediaFeatures_);
 447  
 448    var mediaValueKeywords_ = [
 449      "landscape", "portrait", "none", "coarse", "fine", "on-demand", "hover",
 450      "interlace", "progressive"
 451    ], mediaValueKeywords = keySet(mediaValueKeywords_);
 452  
 453    var propertyKeywords_ = [
 454      "align-content", "align-items", "align-self", "alignment-adjust",
 455      "alignment-baseline", "anchor-point", "animation", "animation-delay",
 456      "animation-direction", "animation-duration", "animation-fill-mode",
 457      "animation-iteration-count", "animation-name", "animation-play-state",
 458      "animation-timing-function", "appearance", "azimuth", "backface-visibility",
 459      "background", "background-attachment", "background-blend-mode", "background-clip",
 460      "background-color", "background-image", "background-origin", "background-position",
 461      "background-repeat", "background-size", "baseline-shift", "binding",
 462      "bleed", "bookmark-label", "bookmark-level", "bookmark-state",
 463      "bookmark-target", "border", "border-bottom", "border-bottom-color",
 464      "border-bottom-left-radius", "border-bottom-right-radius",
 465      "border-bottom-style", "border-bottom-width", "border-collapse",
 466      "border-color", "border-image", "border-image-outset",
 467      "border-image-repeat", "border-image-slice", "border-image-source",
 468      "border-image-width", "border-left", "border-left-color",
 469      "border-left-style", "border-left-width", "border-radius", "border-right",
 470      "border-right-color", "border-right-style", "border-right-width",
 471      "border-spacing", "border-style", "border-top", "border-top-color",
 472      "border-top-left-radius", "border-top-right-radius", "border-top-style",
 473      "border-top-width", "border-width", "bottom", "box-decoration-break",
 474      "box-shadow", "box-sizing", "break-after", "break-before", "break-inside",
 475      "caption-side", "caret-color", "clear", "clip", "color", "color-profile", "column-count",
 476      "column-fill", "column-gap", "column-rule", "column-rule-color",
 477      "column-rule-style", "column-rule-width", "column-span", "column-width",
 478      "columns", "content", "counter-increment", "counter-reset", "crop", "cue",
 479      "cue-after", "cue-before", "cursor", "direction", "display",
 480      "dominant-baseline", "drop-initial-after-adjust",
 481      "drop-initial-after-align", "drop-initial-before-adjust",
 482      "drop-initial-before-align", "drop-initial-size", "drop-initial-value",
 483      "elevation", "empty-cells", "fit", "fit-position", "flex", "flex-basis",
 484      "flex-direction", "flex-flow", "flex-grow", "flex-shrink", "flex-wrap",
 485      "float", "float-offset", "flow-from", "flow-into", "font", "font-feature-settings",
 486      "font-family", "font-kerning", "font-language-override", "font-size", "font-size-adjust",
 487      "font-stretch", "font-style", "font-synthesis", "font-variant",
 488      "font-variant-alternates", "font-variant-caps", "font-variant-east-asian",
 489      "font-variant-ligatures", "font-variant-numeric", "font-variant-position",
 490      "font-weight", "grid", "grid-area", "grid-auto-columns", "grid-auto-flow",
 491      "grid-auto-rows", "grid-column", "grid-column-end", "grid-column-gap",
 492      "grid-column-start", "grid-gap", "grid-row", "grid-row-end", "grid-row-gap",
 493      "grid-row-start", "grid-template", "grid-template-areas", "grid-template-columns",
 494      "grid-template-rows", "hanging-punctuation", "height", "hyphens",
 495      "icon", "image-orientation", "image-rendering", "image-resolution",
 496      "inline-box-align", "justify-content", "justify-items", "justify-self", "left", "letter-spacing",
 497      "line-break", "line-height", "line-stacking", "line-stacking-ruby",
 498      "line-stacking-shift", "line-stacking-strategy", "list-style",
 499      "list-style-image", "list-style-position", "list-style-type", "margin",
 500      "margin-bottom", "margin-left", "margin-right", "margin-top",
 501      "marks", "marquee-direction", "marquee-loop",
 502      "marquee-play-count", "marquee-speed", "marquee-style", "max-height",
 503      "max-width", "min-height", "min-width", "move-to", "nav-down", "nav-index",
 504      "nav-left", "nav-right", "nav-up", "object-fit", "object-position",
 505      "opacity", "order", "orphans", "outline",
 506      "outline-color", "outline-offset", "outline-style", "outline-width",
 507      "overflow", "overflow-style", "overflow-wrap", "overflow-x", "overflow-y",
 508      "padding", "padding-bottom", "padding-left", "padding-right", "padding-top",
 509      "page", "page-break-after", "page-break-before", "page-break-inside",
 510      "page-policy", "pause", "pause-after", "pause-before", "perspective",
 511      "perspective-origin", "pitch", "pitch-range", "place-content", "place-items", "place-self", "play-during", "position",
 512      "presentation-level", "punctuation-trim", "quotes", "region-break-after",
 513      "region-break-before", "region-break-inside", "region-fragment",
 514      "rendering-intent", "resize", "rest", "rest-after", "rest-before", "richness",
 515      "right", "rotation", "rotation-point", "ruby-align", "ruby-overhang",
 516      "ruby-position", "ruby-span", "shape-image-threshold", "shape-inside", "shape-margin",
 517      "shape-outside", "size", "speak", "speak-as", "speak-header",
 518      "speak-numeral", "speak-punctuation", "speech-rate", "stress", "string-set",
 519      "tab-size", "table-layout", "target", "target-name", "target-new",
 520      "target-position", "text-align", "text-align-last", "text-decoration",
 521      "text-decoration-color", "text-decoration-line", "text-decoration-skip",
 522      "text-decoration-style", "text-emphasis", "text-emphasis-color",
 523      "text-emphasis-position", "text-emphasis-style", "text-height",
 524      "text-indent", "text-justify", "text-outline", "text-overflow", "text-shadow",
 525      "text-size-adjust", "text-space-collapse", "text-transform", "text-underline-position",
 526      "text-wrap", "top", "transform", "transform-origin", "transform-style",
 527      "transition", "transition-delay", "transition-duration",
 528      "transition-property", "transition-timing-function", "unicode-bidi",
 529      "user-select", "vertical-align", "visibility", "voice-balance", "voice-duration",
 530      "voice-family", "voice-pitch", "voice-range", "voice-rate", "voice-stress",
 531      "voice-volume", "volume", "white-space", "widows", "width", "will-change", "word-break",
 532      "word-spacing", "word-wrap", "z-index",
 533      // SVG-specific
 534      "clip-path", "clip-rule", "mask", "enable-background", "filter", "flood-color",
 535      "flood-opacity", "lighting-color", "stop-color", "stop-opacity", "pointer-events",
 536      "color-interpolation", "color-interpolation-filters",
 537      "color-rendering", "fill", "fill-opacity", "fill-rule", "image-rendering",
 538      "marker", "marker-end", "marker-mid", "marker-start", "shape-rendering", "stroke",
 539      "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin",
 540      "stroke-miterlimit", "stroke-opacity", "stroke-width", "text-rendering",
 541      "baseline-shift", "dominant-baseline", "glyph-orientation-horizontal",
 542      "glyph-orientation-vertical", "text-anchor", "writing-mode"
 543    ], propertyKeywords = keySet(propertyKeywords_);
 544  
 545    var nonStandardPropertyKeywords_ = [
 546      "scrollbar-arrow-color", "scrollbar-base-color", "scrollbar-dark-shadow-color",
 547      "scrollbar-face-color", "scrollbar-highlight-color", "scrollbar-shadow-color",
 548      "scrollbar-3d-light-color", "scrollbar-track-color", "shape-inside",
 549      "searchfield-cancel-button", "searchfield-decoration", "searchfield-results-button",
 550      "searchfield-results-decoration", "zoom"
 551    ], nonStandardPropertyKeywords = keySet(nonStandardPropertyKeywords_);
 552  
 553    var fontProperties_ = [
 554      "font-family", "src", "unicode-range", "font-variant", "font-feature-settings",
 555      "font-stretch", "font-weight", "font-style"
 556    ], fontProperties = keySet(fontProperties_);
 557  
 558    var counterDescriptors_ = [
 559      "additive-symbols", "fallback", "negative", "pad", "prefix", "range",
 560      "speak-as", "suffix", "symbols", "system"
 561    ], counterDescriptors = keySet(counterDescriptors_);
 562  
 563    var colorKeywords_ = [
 564      "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige",
 565      "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown",
 566      "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue",
 567      "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod",
 568      "darkgray", "darkgreen", "darkkhaki", "darkmagenta", "darkolivegreen",
 569      "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen",
 570      "darkslateblue", "darkslategray", "darkturquoise", "darkviolet",
 571      "deeppink", "deepskyblue", "dimgray", "dodgerblue", "firebrick",
 572      "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite",
 573      "gold", "goldenrod", "gray", "grey", "green", "greenyellow", "honeydew",
 574      "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender",
 575      "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral",
 576      "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightpink",
 577      "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray",
 578      "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta",
 579      "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple",
 580      "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise",
 581      "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin",
 582      "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered",
 583      "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred",
 584      "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue",
 585      "purple", "rebeccapurple", "red", "rosybrown", "royalblue", "saddlebrown",
 586      "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue",
 587      "slateblue", "slategray", "snow", "springgreen", "steelblue", "tan",
 588      "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white",
 589      "whitesmoke", "yellow", "yellowgreen"
 590    ], colorKeywords = keySet(colorKeywords_);
 591  
 592    var valueKeywords_ = [
 593      "above", "absolute", "activeborder", "additive", "activecaption", "afar",
 594      "after-white-space", "ahead", "alias", "all", "all-scroll", "alphabetic", "alternate",
 595      "always", "amharic", "amharic-abegede", "antialiased", "appworkspace",
 596      "arabic-indic", "armenian", "asterisks", "attr", "auto", "auto-flow", "avoid", "avoid-column", "avoid-page",
 597      "avoid-region", "background", "backwards", "baseline", "below", "bidi-override", "binary",
 598      "bengali", "blink", "block", "block-axis", "bold", "bolder", "border", "border-box",
 599      "both", "bottom", "break", "break-all", "break-word", "bullets", "button", "button-bevel",
 600      "buttonface", "buttonhighlight", "buttonshadow", "buttontext", "calc", "cambodian",
 601      "capitalize", "caps-lock-indicator", "caption", "captiontext", "caret",
 602      "cell", "center", "checkbox", "circle", "cjk-decimal", "cjk-earthly-branch",
 603      "cjk-heavenly-stem", "cjk-ideographic", "clear", "clip", "close-quote",
 604      "col-resize", "collapse", "color", "color-burn", "color-dodge", "column", "column-reverse",
 605      "compact", "condensed", "contain", "content", "contents",
 606      "content-box", "context-menu", "continuous", "copy", "counter", "counters", "cover", "crop",
 607      "cross", "crosshair", "currentcolor", "cursive", "cyclic", "darken", "dashed", "decimal",
 608      "decimal-leading-zero", "default", "default-button", "dense", "destination-atop",
 609      "destination-in", "destination-out", "destination-over", "devanagari", "difference",
 610      "disc", "discard", "disclosure-closed", "disclosure-open", "document",
 611      "dot-dash", "dot-dot-dash",
 612      "dotted", "double", "down", "e-resize", "ease", "ease-in", "ease-in-out", "ease-out",
 613      "element", "ellipse", "ellipsis", "embed", "end", "ethiopic", "ethiopic-abegede",
 614      "ethiopic-abegede-am-et", "ethiopic-abegede-gez", "ethiopic-abegede-ti-er",
 615      "ethiopic-abegede-ti-et", "ethiopic-halehame-aa-er",
 616      "ethiopic-halehame-aa-et", "ethiopic-halehame-am-et",
 617      "ethiopic-halehame-gez", "ethiopic-halehame-om-et",
 618      "ethiopic-halehame-sid-et", "ethiopic-halehame-so-et",
 619      "ethiopic-halehame-ti-er", "ethiopic-halehame-ti-et", "ethiopic-halehame-tig",
 620      "ethiopic-numeric", "ew-resize", "exclusion", "expanded", "extends", "extra-condensed",
 621      "extra-expanded", "fantasy", "fast", "fill", "fixed", "flat", "flex", "flex-end", "flex-start", "footnotes",
 622      "forwards", "from", "geometricPrecision", "georgian", "graytext", "grid", "groove",
 623      "gujarati", "gurmukhi", "hand", "hangul", "hangul-consonant", "hard-light", "hebrew",
 624      "help", "hidden", "hide", "higher", "highlight", "highlighttext",
 625      "hiragana", "hiragana-iroha", "horizontal", "hsl", "hsla", "hue", "icon", "ignore",
 626      "inactiveborder", "inactivecaption", "inactivecaptiontext", "infinite",
 627      "infobackground", "infotext", "inherit", "initial", "inline", "inline-axis",
 628      "inline-block", "inline-flex", "inline-grid", "inline-table", "inset", "inside", "intrinsic", "invert",
 629      "italic", "japanese-formal", "japanese-informal", "justify", "kannada",
 630      "katakana", "katakana-iroha", "keep-all", "khmer",
 631      "korean-hangul-formal", "korean-hanja-formal", "korean-hanja-informal",
 632      "landscape", "lao", "large", "larger", "left", "level", "lighter", "lighten",
 633      "line-through", "linear", "linear-gradient", "lines", "list-item", "listbox", "listitem",
 634      "local", "logical", "loud", "lower", "lower-alpha", "lower-armenian",
 635      "lower-greek", "lower-hexadecimal", "lower-latin", "lower-norwegian",
 636      "lower-roman", "lowercase", "ltr", "luminosity", "malayalam", "match", "matrix", "matrix3d",
 637      "media-controls-background", "media-current-time-display",
 638      "media-fullscreen-button", "media-mute-button", "media-play-button",
 639      "media-return-to-realtime-button", "media-rewind-button",
 640      "media-seek-back-button", "media-seek-forward-button", "media-slider",
 641      "media-sliderthumb", "media-time-remaining-display", "media-volume-slider",
 642      "media-volume-slider-container", "media-volume-sliderthumb", "medium",
 643      "menu", "menulist", "menulist-button", "menulist-text",
 644      "menulist-textfield", "menutext", "message-box", "middle", "min-intrinsic",
 645      "mix", "mongolian", "monospace", "move", "multiple", "multiply", "myanmar", "n-resize",
 646      "narrower", "ne-resize", "nesw-resize", "no-close-quote", "no-drop",
 647      "no-open-quote", "no-repeat", "none", "normal", "not-allowed", "nowrap",
 648      "ns-resize", "numbers", "numeric", "nw-resize", "nwse-resize", "oblique", "octal", "opacity", "open-quote",
 649      "optimizeLegibility", "optimizeSpeed", "oriya", "oromo", "outset",
 650      "outside", "outside-shape", "overlay", "overline", "padding", "padding-box",
 651      "painted", "page", "paused", "persian", "perspective", "plus-darker", "plus-lighter",
 652      "pointer", "polygon", "portrait", "pre", "pre-line", "pre-wrap", "preserve-3d",
 653      "progress", "push-button", "radial-gradient", "radio", "read-only",
 654      "read-write", "read-write-plaintext-only", "rectangle", "region",
 655      "relative", "repeat", "repeating-linear-gradient",
 656      "repeating-radial-gradient", "repeat-x", "repeat-y", "reset", "reverse",
 657      "rgb", "rgba", "ridge", "right", "rotate", "rotate3d", "rotateX", "rotateY",
 658      "rotateZ", "round", "row", "row-resize", "row-reverse", "rtl", "run-in", "running",
 659      "s-resize", "sans-serif", "saturation", "scale", "scale3d", "scaleX", "scaleY", "scaleZ", "screen",
 660      "scroll", "scrollbar", "scroll-position", "se-resize", "searchfield",
 661      "searchfield-cancel-button", "searchfield-decoration",
 662      "searchfield-results-button", "searchfield-results-decoration", "self-start", "self-end",
 663      "semi-condensed", "semi-expanded", "separate", "serif", "show", "sidama",
 664      "simp-chinese-formal", "simp-chinese-informal", "single",
 665      "skew", "skewX", "skewY", "skip-white-space", "slide", "slider-horizontal",
 666      "slider-vertical", "sliderthumb-horizontal", "sliderthumb-vertical", "slow",
 667      "small", "small-caps", "small-caption", "smaller", "soft-light", "solid", "somali",
 668      "source-atop", "source-in", "source-out", "source-over", "space", "space-around", "space-between", "space-evenly", "spell-out", "square",
 669      "square-button", "start", "static", "status-bar", "stretch", "stroke", "sub",
 670      "subpixel-antialiased", "super", "sw-resize", "symbolic", "symbols", "system-ui", "table",
 671      "table-caption", "table-cell", "table-column", "table-column-group",
 672      "table-footer-group", "table-header-group", "table-row", "table-row-group",
 673      "tamil",
 674      "telugu", "text", "text-bottom", "text-top", "textarea", "textfield", "thai",
 675      "thick", "thin", "threeddarkshadow", "threedface", "threedhighlight",
 676      "threedlightshadow", "threedshadow", "tibetan", "tigre", "tigrinya-er",
 677      "tigrinya-er-abegede", "tigrinya-et", "tigrinya-et-abegede", "to", "top",
 678      "trad-chinese-formal", "trad-chinese-informal", "transform",
 679      "translate", "translate3d", "translateX", "translateY", "translateZ",
 680      "transparent", "ultra-condensed", "ultra-expanded", "underline", "unset", "up",
 681      "upper-alpha", "upper-armenian", "upper-greek", "upper-hexadecimal",
 682      "upper-latin", "upper-norwegian", "upper-roman", "uppercase", "urdu", "url",
 683      "var", "vertical", "vertical-text", "visible", "visibleFill", "visiblePainted",
 684      "visibleStroke", "visual", "w-resize", "wait", "wave", "wider",
 685      "window", "windowframe", "windowtext", "words", "wrap", "wrap-reverse", "x-large", "x-small", "xor",
 686      "xx-large", "xx-small"
 687    ], valueKeywords = keySet(valueKeywords_);
 688  
 689    var allWords = documentTypes_.concat(mediaTypes_).concat(mediaFeatures_).concat(mediaValueKeywords_)
 690      .concat(propertyKeywords_).concat(nonStandardPropertyKeywords_).concat(colorKeywords_)
 691      .concat(valueKeywords_);
 692    CodeMirror.registerHelper("hintWords", "css", allWords);
 693  
 694    function tokenCComment(stream, state) {
 695      var maybeEnd = false, ch;
 696      while ((ch = stream.next()) != null) {
 697        if (maybeEnd && ch == "/") {
 698          state.tokenize = null;
 699          break;
 700        }
 701        maybeEnd = (ch == "*");
 702      }
 703      return ["comment", "comment"];
 704    }
 705  
 706    CodeMirror.defineMIME("text/css", {
 707      documentTypes: documentTypes,
 708      mediaTypes: mediaTypes,
 709      mediaFeatures: mediaFeatures,
 710      mediaValueKeywords: mediaValueKeywords,
 711      propertyKeywords: propertyKeywords,
 712      nonStandardPropertyKeywords: nonStandardPropertyKeywords,
 713      fontProperties: fontProperties,
 714      counterDescriptors: counterDescriptors,
 715      colorKeywords: colorKeywords,
 716      valueKeywords: valueKeywords,
 717      tokenHooks: {
 718        "/": function(stream, state) {
 719          if (!stream.eat("*")) return false;
 720          state.tokenize = tokenCComment;
 721          return tokenCComment(stream, state);
 722        }
 723      },
 724      name: "css"
 725    });
 726  
 727    CodeMirror.defineMIME("text/x-scss", {
 728      mediaTypes: mediaTypes,
 729      mediaFeatures: mediaFeatures,
 730      mediaValueKeywords: mediaValueKeywords,
 731      propertyKeywords: propertyKeywords,
 732      nonStandardPropertyKeywords: nonStandardPropertyKeywords,
 733      colorKeywords: colorKeywords,
 734      valueKeywords: valueKeywords,
 735      fontProperties: fontProperties,
 736      allowNested: true,
 737      lineComment: "//",
 738      tokenHooks: {
 739        "/": function(stream, state) {
 740          if (stream.eat("/")) {
 741            stream.skipToEnd();
 742            return ["comment", "comment"];
 743          } else if (stream.eat("*")) {
 744            state.tokenize = tokenCComment;
 745            return tokenCComment(stream, state);
 746          } else {
 747            return ["operator", "operator"];
 748          }
 749        },
 750        ":": function(stream) {
 751          if (stream.match(/\s*\{/, false))
 752            return [null, null]
 753          return false;
 754        },
 755        "$": function(stream) {
 756          stream.match(/^[\w-]+/);
 757          if (stream.match(/^\s*:/, false))
 758            return ["variable-2", "variable-definition"];
 759          return ["variable-2", "variable"];
 760        },
 761        "#": function(stream) {
 762          if (!stream.eat("{")) return false;
 763          return [null, "interpolation"];
 764        }
 765      },
 766      name: "css",
 767      helperType: "scss"
 768    });
 769  
 770    CodeMirror.defineMIME("text/x-less", {
 771      mediaTypes: mediaTypes,
 772      mediaFeatures: mediaFeatures,
 773      mediaValueKeywords: mediaValueKeywords,
 774      propertyKeywords: propertyKeywords,
 775      nonStandardPropertyKeywords: nonStandardPropertyKeywords,
 776      colorKeywords: colorKeywords,
 777      valueKeywords: valueKeywords,
 778      fontProperties: fontProperties,
 779      allowNested: true,
 780      lineComment: "//",
 781      tokenHooks: {
 782        "/": function(stream, state) {
 783          if (stream.eat("/")) {
 784            stream.skipToEnd();
 785            return ["comment", "comment"];
 786          } else if (stream.eat("*")) {
 787            state.tokenize = tokenCComment;
 788            return tokenCComment(stream, state);
 789          } else {
 790            return ["operator", "operator"];
 791          }
 792        },
 793        "@": function(stream) {
 794          if (stream.eat("{")) return [null, "interpolation"];
 795          if (stream.match(/^(charset|document|font-face|import|(-(moz|ms|o|webkit)-)?keyframes|media|namespace|page|supports)\b/, false)) return false;
 796          stream.eatWhile(/[\w\\\-]/);
 797          if (stream.match(/^\s*:/, false))
 798            return ["variable-2", "variable-definition"];
 799          return ["variable-2", "variable"];
 800        },
 801        "&": function() {
 802          return ["atom", "atom"];
 803        }
 804      },
 805      name: "css",
 806      helperType: "less"
 807    });
 808  
 809    CodeMirror.defineMIME("text/x-gss", {
 810      documentTypes: documentTypes,
 811      mediaTypes: mediaTypes,
 812      mediaFeatures: mediaFeatures,
 813      propertyKeywords: propertyKeywords,
 814      nonStandardPropertyKeywords: nonStandardPropertyKeywords,
 815      fontProperties: fontProperties,
 816      counterDescriptors: counterDescriptors,
 817      colorKeywords: colorKeywords,
 818      valueKeywords: valueKeywords,
 819      supportsAtComponent: true,
 820      tokenHooks: {
 821        "/": function(stream, state) {
 822          if (!stream.eat("*")) return false;
 823          state.tokenize = tokenCComment;
 824          return tokenCComment(stream, state);
 825        }
 826      },
 827      name: "css",
 828      helperType: "gss"
 829    });
 830  
 831  });