css.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465
  1. CodeMirror.defineMode("css", function(config) {
  2. var indentUnit = config.indentUnit, type;
  3. var atMediaTypes = keySet([
  4. "all", "aural", "braille", "handheld", "print", "projection", "screen",
  5. "tty", "tv", "embossed"
  6. ]);
  7. var atMediaFeatures = keySet([
  8. "width", "min-width", "max-width", "height", "min-height", "max-height",
  9. "device-width", "min-device-width", "max-device-width", "device-height",
  10. "min-device-height", "max-device-height", "aspect-ratio",
  11. "min-aspect-ratio", "max-aspect-ratio", "device-aspect-ratio",
  12. "min-device-aspect-ratio", "max-device-aspect-ratio", "color", "min-color",
  13. "max-color", "color-index", "min-color-index", "max-color-index",
  14. "monochrome", "min-monochrome", "max-monochrome", "resolution",
  15. "min-resolution", "max-resolution", "scan", "grid"
  16. ]);
  17. var propertyKeywords = keySet([
  18. "align-content", "align-items", "align-self", "alignment-adjust",
  19. "alignment-baseline", "anchor-point", "animation", "animation-delay",
  20. "animation-direction", "animation-duration", "animation-iteration-count",
  21. "animation-name", "animation-play-state", "animation-timing-function",
  22. "appearance", "azimuth", "backface-visibility", "background",
  23. "background-attachment", "background-clip", "background-color",
  24. "background-image", "background-origin", "background-position",
  25. "background-repeat", "background-size", "baseline-shift", "binding",
  26. "bleed", "bookmark-label", "bookmark-level", "bookmark-state",
  27. "bookmark-target", "border", "border-bottom", "border-bottom-color",
  28. "border-bottom-left-radius", "border-bottom-right-radius",
  29. "border-bottom-style", "border-bottom-width", "border-collapse",
  30. "border-color", "border-image", "border-image-outset",
  31. "border-image-repeat", "border-image-slice", "border-image-source",
  32. "border-image-width", "border-left", "border-left-color",
  33. "border-left-style", "border-left-width", "border-radius", "border-right",
  34. "border-right-color", "border-right-style", "border-right-width",
  35. "border-spacing", "border-style", "border-top", "border-top-color",
  36. "border-top-left-radius", "border-top-right-radius", "border-top-style",
  37. "border-top-width", "border-width", "bottom", "box-decoration-break",
  38. "box-shadow", "box-sizing", "break-after", "break-before", "break-inside",
  39. "caption-side", "clear", "clip", "color", "color-profile", "column-count",
  40. "column-fill", "column-gap", "column-rule", "column-rule-color",
  41. "column-rule-style", "column-rule-width", "column-span", "column-width",
  42. "columns", "content", "counter-increment", "counter-reset", "crop", "cue",
  43. "cue-after", "cue-before", "cursor", "direction", "display",
  44. "dominant-baseline", "drop-initial-after-adjust",
  45. "drop-initial-after-align", "drop-initial-before-adjust",
  46. "drop-initial-before-align", "drop-initial-size", "drop-initial-value",
  47. "elevation", "empty-cells", "fit", "fit-position", "flex", "flex-basis",
  48. "flex-direction", "flex-flow", "flex-grow", "flex-shrink", "flex-wrap",
  49. "float", "float-offset", "font", "font-feature-settings", "font-family",
  50. "font-kerning", "font-language-override", "font-size", "font-size-adjust",
  51. "font-stretch", "font-style", "font-synthesis", "font-variant",
  52. "font-variant-alternates", "font-variant-caps", "font-variant-east-asian",
  53. "font-variant-ligatures", "font-variant-numeric", "font-variant-position",
  54. "font-weight", "grid-cell", "grid-column", "grid-column-align",
  55. "grid-column-sizing", "grid-column-span", "grid-columns", "grid-flow",
  56. "grid-row", "grid-row-align", "grid-row-sizing", "grid-row-span",
  57. "grid-rows", "grid-template", "hanging-punctuation", "height", "hyphens",
  58. "icon", "image-orientation", "image-rendering", "image-resolution",
  59. "inline-box-align", "justify-content", "left", "letter-spacing",
  60. "line-break", "line-height", "line-stacking", "line-stacking-ruby",
  61. "line-stacking-shift", "line-stacking-strategy", "list-style",
  62. "list-style-image", "list-style-position", "list-style-type", "margin",
  63. "margin-bottom", "margin-left", "margin-right", "margin-top",
  64. "marker-offset", "marks", "marquee-direction", "marquee-loop",
  65. "marquee-play-count", "marquee-speed", "marquee-style", "max-height",
  66. "max-width", "min-height", "min-width", "move-to", "nav-down", "nav-index",
  67. "nav-left", "nav-right", "nav-up", "opacity", "order", "orphans", "outline",
  68. "outline-color", "outline-offset", "outline-style", "outline-width",
  69. "overflow", "overflow-style", "overflow-wrap", "overflow-x", "overflow-y",
  70. "padding", "padding-bottom", "padding-left", "padding-right", "padding-top",
  71. "page", "page-break-after", "page-break-before", "page-break-inside",
  72. "page-policy", "pause", "pause-after", "pause-before", "perspective",
  73. "perspective-origin", "pitch", "pitch-range", "play-during", "position",
  74. "presentation-level", "punctuation-trim", "quotes", "rendering-intent",
  75. "resize", "rest", "rest-after", "rest-before", "richness", "right",
  76. "rotation", "rotation-point", "ruby-align", "ruby-overhang",
  77. "ruby-position", "ruby-span", "size", "speak", "speak-as", "speak-header",
  78. "speak-numeral", "speak-punctuation", "speech-rate", "stress", "string-set",
  79. "tab-size", "table-layout", "target", "target-name", "target-new",
  80. "target-position", "text-align", "text-align-last", "text-decoration",
  81. "text-decoration-color", "text-decoration-line", "text-decoration-skip",
  82. "text-decoration-style", "text-emphasis", "text-emphasis-color",
  83. "text-emphasis-position", "text-emphasis-style", "text-height",
  84. "text-indent", "text-justify", "text-outline", "text-shadow",
  85. "text-space-collapse", "text-transform", "text-underline-position",
  86. "text-wrap", "top", "transform", "transform-origin", "transform-style",
  87. "transition", "transition-delay", "transition-duration",
  88. "transition-property", "transition-timing-function", "unicode-bidi",
  89. "vertical-align", "visibility", "voice-balance", "voice-duration",
  90. "voice-family", "voice-pitch", "voice-range", "voice-rate", "voice-stress",
  91. "voice-volume", "volume", "white-space", "widows", "width", "word-break",
  92. "word-spacing", "word-wrap", "z-index"
  93. ]);
  94. var colorKeywords = keySet([
  95. "black", "silver", "gray", "white", "maroon", "red", "purple", "fuchsia",
  96. "green", "lime", "olive", "yellow", "navy", "blue", "teal", "aqua"
  97. ]);
  98. var valueKeywords = keySet([
  99. "above", "absolute", "activeborder", "activecaption", "afar",
  100. "after-white-space", "ahead", "alias", "all", "all-scroll", "alternate",
  101. "always", "amharic", "amharic-abegede", "antialiased", "appworkspace",
  102. "arabic-indic", "armenian", "asterisks", "auto", "avoid", "background",
  103. "backwards", "baseline", "below", "bidi-override", "binary", "bengali",
  104. "blink", "block", "block-axis", "bold", "bolder", "border", "border-box",
  105. "both", "bottom", "break-all", "break-word", "button", "button-bevel",
  106. "buttonface", "buttonhighlight", "buttonshadow", "buttontext", "cambodian",
  107. "capitalize", "caps-lock-indicator", "caption", "captiontext", "caret",
  108. "cell", "center", "checkbox", "circle", "cjk-earthly-branch",
  109. "cjk-heavenly-stem", "cjk-ideographic", "clear", "clip", "close-quote",
  110. "col-resize", "collapse", "compact", "condensed", "contain", "content",
  111. "content-box", "context-menu", "continuous", "copy", "cover", "crop",
  112. "cross", "crosshair", "currentcolor", "cursive", "dashed", "decimal",
  113. "decimal-leading-zero", "default", "default-button", "destination-atop",
  114. "destination-in", "destination-out", "destination-over", "devanagari",
  115. "disc", "discard", "document", "dot-dash", "dot-dot-dash", "dotted",
  116. "double", "down", "e-resize", "ease", "ease-in", "ease-in-out", "ease-out",
  117. "element", "ellipsis", "embed", "end", "ethiopic", "ethiopic-abegede",
  118. "ethiopic-abegede-am-et", "ethiopic-abegede-gez", "ethiopic-abegede-ti-er",
  119. "ethiopic-abegede-ti-et", "ethiopic-halehame-aa-er",
  120. "ethiopic-halehame-aa-et", "ethiopic-halehame-am-et",
  121. "ethiopic-halehame-gez", "ethiopic-halehame-om-et",
  122. "ethiopic-halehame-sid-et", "ethiopic-halehame-so-et",
  123. "ethiopic-halehame-ti-er", "ethiopic-halehame-ti-et",
  124. "ethiopic-halehame-tig", "ew-resize", "expanded", "extra-condensed",
  125. "extra-expanded", "fantasy", "fast", "fill", "fixed", "flat", "footnotes",
  126. "forwards", "from", "geometricPrecision", "georgian", "graytext", "groove",
  127. "gujarati", "gurmukhi", "hand", "hangul", "hangul-consonant", "hebrew",
  128. "help", "hidden", "hide", "higher", "highlight", "highlighttext",
  129. "hiragana", "hiragana-iroha", "horizontal", "hsl", "hsla", "icon", "ignore",
  130. "inactiveborder", "inactivecaption", "inactivecaptiontext", "infinite",
  131. "infobackground", "infotext", "inherit", "initial", "inline", "inline-axis",
  132. "inline-block", "inline-table", "inset", "inside", "intrinsic", "invert",
  133. "italic", "justify", "kannada", "katakana", "katakana-iroha", "khmer",
  134. "landscape", "lao", "large", "larger", "left", "level", "lighter",
  135. "line-through", "linear", "lines", "list-item", "listbox", "listitem",
  136. "local", "logical", "loud", "lower", "lower-alpha", "lower-armenian",
  137. "lower-greek", "lower-hexadecimal", "lower-latin", "lower-norwegian",
  138. "lower-roman", "lowercase", "ltr", "malayalam", "match",
  139. "media-controls-background", "media-current-time-display",
  140. "media-fullscreen-button", "media-mute-button", "media-play-button",
  141. "media-return-to-realtime-button", "media-rewind-button",
  142. "media-seek-back-button", "media-seek-forward-button", "media-slider",
  143. "media-sliderthumb", "media-time-remaining-display", "media-volume-slider",
  144. "media-volume-slider-container", "media-volume-sliderthumb", "medium",
  145. "menu", "menulist", "menulist-button", "menulist-text",
  146. "menulist-textfield", "menutext", "message-box", "middle", "min-intrinsic",
  147. "mix", "mongolian", "monospace", "move", "multiple", "myanmar", "n-resize",
  148. "narrower", "navy", "ne-resize", "nesw-resize", "no-close-quote", "no-drop",
  149. "no-open-quote", "no-repeat", "none", "normal", "not-allowed", "nowrap",
  150. "ns-resize", "nw-resize", "nwse-resize", "oblique", "octal", "open-quote",
  151. "optimizeLegibility", "optimizeSpeed", "oriya", "oromo", "outset",
  152. "outside", "overlay", "overline", "padding", "padding-box", "painted",
  153. "paused", "persian", "plus-darker", "plus-lighter", "pointer", "portrait",
  154. "pre", "pre-line", "pre-wrap", "preserve-3d", "progress", "push-button",
  155. "radio", "read-only", "read-write", "read-write-plaintext-only", "relative",
  156. "repeat", "repeat-x", "repeat-y", "reset", "reverse", "rgb", "rgba",
  157. "ridge", "right", "round", "row-resize", "rtl", "run-in", "running",
  158. "s-resize", "sans-serif", "scroll", "scrollbar", "se-resize", "searchfield",
  159. "searchfield-cancel-button", "searchfield-decoration",
  160. "searchfield-results-button", "searchfield-results-decoration",
  161. "semi-condensed", "semi-expanded", "separate", "serif", "show", "sidama",
  162. "single", "skip-white-space", "slide", "slider-horizontal",
  163. "slider-vertical", "sliderthumb-horizontal", "sliderthumb-vertical", "slow",
  164. "small", "small-caps", "small-caption", "smaller", "solid", "somali",
  165. "source-atop", "source-in", "source-out", "source-over", "space", "square",
  166. "square-button", "start", "static", "status-bar", "stretch", "stroke",
  167. "sub", "subpixel-antialiased", "super", "sw-resize", "table",
  168. "table-caption", "table-cell", "table-column", "table-column-group",
  169. "table-footer-group", "table-header-group", "table-row", "table-row-group",
  170. "telugu", "text", "text-bottom", "text-top", "textarea", "textfield", "thai",
  171. "thick", "thin", "threeddarkshadow", "threedface", "threedhighlight",
  172. "threedlightshadow", "threedshadow", "tibetan", "tigre", "tigrinya-er",
  173. "tigrinya-er-abegede", "tigrinya-et", "tigrinya-et-abegede", "to", "top",
  174. "transparent", "ultra-condensed", "ultra-expanded", "underline", "up",
  175. "upper-alpha", "upper-armenian", "upper-greek", "upper-hexadecimal",
  176. "upper-latin", "upper-norwegian", "upper-roman", "uppercase", "urdu", "url",
  177. "vertical", "vertical-text", "visible", "visibleFill", "visiblePainted",
  178. "visibleStroke", "visual", "w-resize", "wait", "wave", "white", "wider",
  179. "window", "windowframe", "windowtext", "x-large", "x-small", "xor",
  180. "xx-large", "xx-small", "yellow"
  181. ]);
  182. function keySet(array) { var keys = {}; for (var i = 0; i < array.length; ++i) keys[array[i]] = true; return keys; }
  183. function ret(style, tp) {type = tp; return style;}
  184. function tokenBase(stream, state) {
  185. var ch = stream.next();
  186. if (ch == "@") {stream.eatWhile(/[\w\\\-]/); return ret("def", stream.current());}
  187. else if (ch == "/" && stream.eat("*")) {
  188. state.tokenize = tokenCComment;
  189. return tokenCComment(stream, state);
  190. }
  191. else if (ch == "<" && stream.eat("!")) {
  192. state.tokenize = tokenSGMLComment;
  193. return tokenSGMLComment(stream, state);
  194. }
  195. else if (ch == "=") ret(null, "compare");
  196. else if ((ch == "~" || ch == "|") && stream.eat("=")) return ret(null, "compare");
  197. else if (ch == "\"" || ch == "'") {
  198. state.tokenize = tokenString(ch);
  199. return state.tokenize(stream, state);
  200. }
  201. else if (ch == "#") {
  202. stream.eatWhile(/[\w\\\-]/);
  203. return ret("atom", "hash");
  204. }
  205. else if (ch == "!") {
  206. stream.match(/^\s*\w*/);
  207. return ret("keyword", "important");
  208. }
  209. else if (/\d/.test(ch)) {
  210. stream.eatWhile(/[\w.%]/);
  211. return ret("number", "unit");
  212. }
  213. else if (ch === "-") {
  214. if (/\d/.test(stream.peek())) {
  215. stream.eatWhile(/[\w.%]/);
  216. return ret("number", "unit");
  217. } else if (stream.match(/^[^-]+-/)) {
  218. return ret("meta", type);
  219. }
  220. }
  221. else if (/[,+>*\/]/.test(ch)) {
  222. return ret(null, "select-op");
  223. }
  224. else if (ch == "." && stream.match(/^-?[_a-z][_a-z0-9-]*/i)) {
  225. return ret("qualifier", type);
  226. }
  227. else if (ch == ":") {
  228. return ret("operator", ch);
  229. }
  230. else if (/[;{}\[\]\(\)]/.test(ch)) {
  231. return ret(null, ch);
  232. }
  233. else if (ch == "u" && stream.match("rl(")) {
  234. stream.backUp(1);
  235. state.tokenize = tokenParenthesized;
  236. return ret("property", "variable");
  237. }
  238. else {
  239. stream.eatWhile(/[\w\\\-]/);
  240. return ret("property", "variable");
  241. }
  242. }
  243. function tokenCComment(stream, state) {
  244. var maybeEnd = false, ch;
  245. while ((ch = stream.next()) != null) {
  246. if (maybeEnd && ch == "/") {
  247. state.tokenize = tokenBase;
  248. break;
  249. }
  250. maybeEnd = (ch == "*");
  251. }
  252. return ret("comment", "comment");
  253. }
  254. function tokenSGMLComment(stream, state) {
  255. var dashes = 0, ch;
  256. while ((ch = stream.next()) != null) {
  257. if (dashes >= 2 && ch == ">") {
  258. state.tokenize = tokenBase;
  259. break;
  260. }
  261. dashes = (ch == "-") ? dashes + 1 : 0;
  262. }
  263. return ret("comment", "comment");
  264. }
  265. function tokenString(quote, nonInclusive) {
  266. return function(stream, state) {
  267. var escaped = false, ch;
  268. while ((ch = stream.next()) != null) {
  269. if (ch == quote && !escaped)
  270. break;
  271. escaped = !escaped && ch == "\\";
  272. }
  273. if (!escaped) {
  274. if (nonInclusive) stream.backUp(1);
  275. state.tokenize = tokenBase;
  276. }
  277. return ret("string", "string");
  278. };
  279. }
  280. function tokenParenthesized(stream, state) {
  281. stream.next(); // Must be '('
  282. if (!stream.match(/\s*[\"\']/, false))
  283. state.tokenize = tokenString(")", true);
  284. else
  285. state.tokenize = tokenBase;
  286. return ret(null, "(");
  287. }
  288. return {
  289. startState: function(base) {
  290. return {tokenize: tokenBase,
  291. baseIndent: base || 0,
  292. stack: []};
  293. },
  294. token: function(stream, state) {
  295. // Use these terms when applicable (see http://www.xanthir.com/blog/b4E50)
  296. //
  297. // rule** or **ruleset:
  298. // A selector + braces combo, or an at-rule.
  299. //
  300. // declaration block:
  301. // A sequence of declarations.
  302. //
  303. // declaration:
  304. // A property + colon + value combo.
  305. //
  306. // property value:
  307. // The entire value of a property.
  308. //
  309. // component value:
  310. // A single piece of a property value. Like the 5px in
  311. // text-shadow: 0 0 5px blue;. Can also refer to things that are
  312. // multiple terms, like the 1-4 terms that make up the background-size
  313. // portion of the background shorthand.
  314. //
  315. // term:
  316. // The basic unit of author-facing CSS, like a single number (5),
  317. // dimension (5px), string ("foo"), or function. Officially defined
  318. // by the CSS 2.1 grammar (look for the 'term' production)
  319. //
  320. //
  321. // simple selector:
  322. // A single atomic selector, like a type selector, an attr selector, a
  323. // class selector, etc.
  324. //
  325. // compound selector:
  326. // One or more simple selectors without a combinator. div.example is
  327. // compound, div > .example is not.
  328. //
  329. // complex selector:
  330. // One or more compound selectors chained with combinators.
  331. //
  332. // combinator:
  333. // The parts of selectors that express relationships. There are four
  334. // currently - the space (descendant combinator), the greater-than
  335. // bracket (child combinator), the plus sign (next sibling combinator),
  336. // and the tilda (following sibling combinator).
  337. //
  338. // sequence of selectors:
  339. // One or more of the named type of selector chained with commas.
  340. if (state.tokenize == tokenBase && stream.eatSpace()) return null;
  341. var style = state.tokenize(stream, state);
  342. // Changing style returned based on context
  343. var context = state.stack[state.stack.length-1];
  344. if (style == "property") {
  345. if (context == "propertyValue"){
  346. if (valueKeywords[stream.current()]) {
  347. style = "string-2";
  348. } else if (colorKeywords[stream.current()]) {
  349. style = "keyword";
  350. } else {
  351. style = "variable-2";
  352. }
  353. } else if (context == "rule") {
  354. if (!propertyKeywords[stream.current()]) {
  355. style += " error";
  356. }
  357. } else if (!context || context == "@media{") {
  358. style = "tag";
  359. } else if (context == "@media") {
  360. if (atMediaTypes[stream.current()]) {
  361. style = "attribute"; // Known attribute
  362. } else if (/^(only|not)$/i.test(stream.current())) {
  363. style = "keyword";
  364. } else if (stream.current().toLowerCase() == "and") {
  365. style = "error"; // "and" is only allowed in @mediaType
  366. } else if (atMediaFeatures[stream.current()]) {
  367. style = "error"; // Known property, should be in @mediaType(
  368. } else {
  369. // Unknown, expecting keyword or attribute, assuming attribute
  370. style = "attribute error";
  371. }
  372. } else if (context == "@mediaType") {
  373. if (atMediaTypes[stream.current()]) {
  374. style = "attribute";
  375. } else if (stream.current().toLowerCase() == "and") {
  376. style = "operator";
  377. } else if (/^(only|not)$/i.test(stream.current())) {
  378. style = "error"; // Only allowed in @media
  379. } else if (atMediaFeatures[stream.current()]) {
  380. style = "error"; // Known property, should be in parentheses
  381. } else {
  382. // Unknown attribute or property, but expecting property (preceded
  383. // by "and"). Should be in parentheses
  384. style = "error";
  385. }
  386. } else if (context == "@mediaType(") {
  387. if (propertyKeywords[stream.current()]) {
  388. // do nothing, remains "property"
  389. } else if (atMediaTypes[stream.current()]) {
  390. style = "error"; // Known property, should be in parentheses
  391. } else if (stream.current().toLowerCase() == "and") {
  392. style = "operator";
  393. } else if (/^(only|not)$/i.test(stream.current())) {
  394. style = "error"; // Only allowed in @media
  395. } else {
  396. style += " error";
  397. }
  398. } else {
  399. style = "error";
  400. }
  401. } else if (style == "atom") {
  402. if(!context || context == "@media{") {
  403. style = "builtin";
  404. } else if (context == "propertyValue") {
  405. if (!/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(stream.current())) {
  406. style += " error";
  407. }
  408. } else {
  409. style = "error";
  410. }
  411. } else if (context == "@media" && type == "{") {
  412. style = "error";
  413. }
  414. // Push/pop context stack
  415. if (type == "{") {
  416. if (context == "@media" || context == "@mediaType") {
  417. state.stack.pop();
  418. state.stack[state.stack.length-1] = "@media{";
  419. }
  420. else state.stack.push("rule");
  421. }
  422. else if (type == "}") {
  423. state.stack.pop();
  424. if (context == "propertyValue") state.stack.pop();
  425. }
  426. else if (type == "@media") state.stack.push("@media");
  427. else if (context == "@media" && /\b(keyword|attribute)\b/.test(style))
  428. state.stack.push("@mediaType");
  429. else if (context == "@mediaType" && stream.current() == ",") state.stack.pop();
  430. else if (context == "@mediaType" && type == "(") state.stack.push("@mediaType(");
  431. else if (context == "@mediaType(" && type == ")") state.stack.pop();
  432. else if (context == "rule" && type == ":") state.stack.push("propertyValue");
  433. else if (context == "propertyValue" && type == ";") state.stack.pop();
  434. return style;
  435. },
  436. indent: function(state, textAfter) {
  437. var n = state.stack.length;
  438. if (/^\}/.test(textAfter))
  439. n -= state.stack[state.stack.length-1] == "propertyValue" ? 2 : 1;
  440. return state.baseIndent + n * indentUnit;
  441. },
  442. electricChars: "}"
  443. };
  444. });
  445. CodeMirror.defineMIME("text/css", "css");