1 ;;; css-mode.el --- Major mode to edit CSS files -*- lexical-binding: t -*-
3 ;; Copyright (C) 2006-2016 Free Software Foundation, Inc.
5 ;; Author: Stefan Monnier <monnier@iro.umontreal.ca>
6 ;; Maintainer: Simen Heggestøyl <simenheg@gmail.com>
7 ;; Keywords: hypermedia
9 ;; This file is part of GNU Emacs.
11 ;; GNU Emacs is free software: you can redistribute it and/or modify
12 ;; it under the terms of the GNU General Public License as published by
13 ;; the Free Software Foundation, either version 3 of the License, or
14 ;; (at your option) any later version.
16 ;; GNU Emacs is distributed in the hope that it will be useful,
17 ;; but WITHOUT ANY WARRANTY; without even the implied warranty of
18 ;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
19 ;; GNU General Public License for more details.
21 ;; You should have received a copy of the GNU General Public License
22 ;; along with GNU Emacs. If not, see <http://www.gnu.org/licenses/>.
26 ;; Yet another CSS mode.
31 ;; - filling code with auto-fill-mode
32 ;; - fix font-lock errors with multi-line selectors
40 "Cascading Style Sheets (CSS) editing mode."
43 (defconst css-pseudo-class-ids
44 '("active" "checked" "disabled" "empty" "enabled" "first"
45 "first-child" "first-of-type" "focus" "hover" "indeterminate" "lang"
46 "last-child" "last-of-type" "left" "link" "not" "nth-child"
47 "nth-last-child" "nth-last-of-type" "nth-of-type" "only-child"
48 "only-of-type" "right" "root" "target" "visited")
49 "Identifiers for pseudo-classes.")
51 (defconst css-pseudo-element-ids
52 '("after" "before" "first-letter" "first-line")
53 "Identifiers for pseudo-elements.")
56 '("charset" "font-face" "import" "keyframes" "media" "namespace"
58 "Identifiers that appear in the form @foo.")
61 '("at-root" "content" "debug" "each" "else" "else if" "error" "extend"
62 "for" "function" "if" "import" "include" "mixin" "return" "warn"
64 "Additional identifiers that appear in the form @foo in SCSS.")
66 (defvar css--at-ids css-at-ids
67 "List of at-rules for the current mode.")
68 (make-variable-buffer-local 'css--at-ids)
70 (defconst css-bang-ids
72 "Identifiers that appear in the form !foo.")
74 (defconst scss-bang-ids
75 '("default" "global" "optional")
76 "Additional identifiers that appear in the form !foo in SCSS.")
78 (defvar css--bang-ids css-bang-ids
79 "List of bang-rules for the current mode.")
80 (make-variable-buffer-local 'css--bang-ids)
82 (defconst css-descriptor-ids
83 '("ascent" "baseline" "bbox" "cap-height" "centerline" "definition-src"
84 "descent" "font-family" "font-size" "font-stretch" "font-style"
85 "font-variant" "font-weight" "mathline" "panose-1" "slope" "src" "stemh"
86 "stemv" "topline" "unicode-range" "units-per-em" "widths" "x-height")
87 "Identifiers for font descriptors.")
89 (defconst css-media-ids
90 '("all" "aural" "bitmap" "continuous" "grid" "paged" "static" "tactile"
92 "Identifiers for types of media.")
94 (defconst css-property-alist
95 ;; CSS 2.1 properties (http://www.w3.org/TR/CSS21/propidx.html).
97 ;; Properties duplicated by any of the CSS3 modules below have been
99 '(("azimuth" angle "left-side" "far-left" "left" "center-left"
100 "center" "center-right" "right" "far-right" "right-side" "behind"
101 "leftwards" "rightwards")
102 ("border-collapse" "collapse" "separate")
103 ("border-spacing" length)
104 ("bottom" length percentage "auto")
105 ("caption-side" "top" "bottom")
106 ("clear" "none" "left" "right" "both")
107 ("clip" shape "auto")
108 ("content" "normal" "none" string uri counter "attr()"
109 "open-quote" "close-quote" "no-open-quote" "no-close-quote")
110 ("counter-increment" identifier integer "none")
111 ("counter-reset" identifier integer "none")
112 ("cue" cue-before cue-after)
113 ("cue-after" uri "none")
114 ("cue-before" uri "none")
115 ("direction" "ltr" "rtl")
116 ("display" "inline" "block" "list-item" "inline-block" "table"
117 "inline-table" "table-row-group" "table-header-group"
118 "table-footer-group" "table-row" "table-column-group"
119 "table-column" "table-cell" "table-caption" "none"
120 ;; CSS Flexible Box Layout Module Level 1
121 ;; (https://www.w3.org/TR/css3-flexbox/#valdef-display-flex)
122 "flex" "inline-flex")
123 ("elevation" angle "below" "level" "above" "higher" "lower")
124 ("empty-cells" "show" "hide")
125 ("float" "left" "right" "none")
126 ("height" length percentage "auto")
127 ("left" length percentage "auto")
128 ("line-height" "normal" number length percentage)
129 ("list-style" list-style-type list-style-position
131 ("list-style-image" uri "none")
132 ("list-style-position" "inside" "outside")
133 ("list-style-type" "disc" "circle" "square" "decimal"
134 "decimal-leading-zero" "lower-roman" "upper-roman" "lower-greek"
135 "lower-latin" "upper-latin" "armenian" "georgian" "lower-alpha"
136 "upper-alpha" "none")
137 ("margin" margin-width)
138 ("margin-bottom" margin-width)
139 ("margin-left" margin-width)
140 ("margin-right" margin-width)
141 ("margin-top" margin-width)
142 ("max-height" length percentage "none")
143 ("max-width" length percentage "none")
144 ("min-height" length percentage)
145 ("min-width" length percentage)
146 ("padding" padding-width)
147 ("padding-bottom" padding-width)
148 ("padding-left" padding-width)
149 ("padding-right" padding-width)
150 ("padding-top" padding-width)
151 ("page-break-after" "auto" "always" "avoid" "left" "right")
152 ("page-break-before" "auto" "always" "avoid" "left" "right")
153 ("page-break-inside" "avoid" "auto")
154 ("pause" time percentage)
155 ("pause-after" time percentage)
156 ("pause-before" time percentage)
157 ("pitch" frequency "x-low" "low" "medium" "high" "x-high")
158 ("pitch-range" number)
159 ("play-during" uri "mix" "repeat" "auto" "none")
160 ("position" "static" "relative" "absolute" "fixed")
161 ("quotes" string "none")
163 ("right" length percentage "auto")
164 ("speak" "normal" "none" "spell-out")
165 ("speak-header" "once" "always")
166 ("speak-numeral" "digits" "continuous")
167 ("speak-punctuation" "code" "none")
168 ("speech-rate" number "x-slow" "slow" "medium" "fast" "x-fast"
171 ("table-layout" "auto" "fixed")
172 ("top" length percentage "auto")
173 ("unicode-bidi" "normal" "embed" "bidi-override")
174 ("vertical-align" "baseline" "sub" "super" "top" "text-top"
175 "middle" "bottom" "text-bottom" percentage length)
176 ("visibility" "visible" "hidden" "collapse")
177 ("voice-family" specific-voice generic-voice specific-voice
179 ("volume" number percentage "silent" "x-soft" "soft" "medium"
181 ("width" length percentage "auto")
182 ("z-index" "auto" integer)
185 ;; (http://www.w3.org/TR/css3-animations/#property-index)
186 ("animation" single-animation-name time single-timing-function
187 single-animation-iteration-count single-animation-direction
188 single-animation-fill-mode single-animation-play-state)
189 ("animation-delay" time)
190 ("animation-direction" single-animation-direction)
191 ("animation-duration" time)
192 ("animation-fill-mode" single-animation-fill-mode)
193 ("animation-iteration-count" single-animation-iteration-count)
194 ("animation-name" single-animation-name)
195 ("animation-play-state" single-animation-play-state)
196 ("animation-timing-function" single-timing-function)
198 ;; CSS Backgrounds and Borders Module Level 3
199 ;; (http://www.w3.org/TR/css3-background/#property-index)
200 ("background" bg-layer final-bg-layer)
201 ("background-attachment" attachment)
202 ("background-clip" box)
203 ("background-color" color)
204 ("background-image" bg-image)
205 ("background-origin" box)
206 ("background-position" position)
207 ("background-repeat" repeat-style)
208 ("background-size" bg-size)
209 ("border" line-width line-style color)
210 ("border-bottom" line-width line-style color)
211 ("border-bottom-color" color)
212 ("border-bottom-left-radius" length percentage)
213 ("border-bottom-right-radius" length percentage)
214 ("border-bottom-style" line-style)
215 ("border-bottom-width" line-width)
216 ("border-color" color)
217 ("border-image" border-image-source border-image-slice
218 border-image-width border-image-outset border-image-repeat)
219 ("border-image-outset" length number)
220 ("border-image-repeat" "stretch" "repeat" "round" "space")
221 ("border-image-slice" number percentage "fill")
222 ("border-image-source" "none" image)
223 ("border-image-width" length percentage number "auto")
224 ("border-left" line-width line-style color)
225 ("border-left-color" color)
226 ("border-left-style" line-style)
227 ("border-left-width" line-width)
228 ("border-radius" length percentage)
229 ("border-right" line-width line-style color)
230 ("border-right-color" color)
231 ("border-right-style" line-style)
232 ("border-right-width" line-width)
233 ("border-style" line-style)
234 ("border-top" line-width line-style color)
235 ("border-top-color" color)
236 ("border-top-left-radius" length percentage)
237 ("border-top-right-radius" length percentage)
238 ("border-top-style" line-style)
239 ("border-top-width" line-width)
240 ("border-width" line-width)
241 ("box-shadow" "none" shadow)
243 ;; CSS Basic User Interface Module Level 3 (CSS3 UI)
244 ;; (http://www.w3.org/TR/css3-ui/#property-index)
245 ("box-sizing" "content-box" "border-box")
246 ("caret-color" "auto" color)
247 ("cursor" uri x y "auto" "default" "none" "context-menu" "help"
248 "pointer" "progress" "wait" "cell" "crosshair" "text"
249 "vertical-text" "alias" "copy" "move" "no-drop" "not-allowed"
250 "grab" "grabbing" "e-resize" "n-resize" "ne-resize" "nw-resize"
251 "s-resize" "se-resize" "sw-resize" "w-resize" "ew-resize"
252 "ns-resize" "nesw-resize" "nwse-resize" "col-resize" "row-resize"
253 "all-scroll" "zoom-in" "zoom-out")
254 ("nav-down" "auto" id "current" "root" target-name)
255 ("nav-left" "auto" id "current" "root" target-name)
256 ("nav-right" "auto" id "current" "root" target-name)
257 ("nav-up" "auto" id "current" "root" target-name)
258 ("outline" outline-color outline-style outline-width)
259 ("outline-color" color "invert")
260 ("outline-offset" length)
261 ("outline-style" "auto" border-style)
262 ("outline-width" border-width)
263 ("resize" "none" "both" "horizontal" "vertical")
264 ("text-overflow" "clip" "ellipsis" string)
266 ;; CSS Color Module Level 3
267 ;; (http://www.w3.org/TR/css3-color/#property)
269 ("opacity" alphavalue)
271 ;; CSS Flexible Box Layout Module Level 1
272 ;; (http://www.w3.org/TR/css-flexbox-1/#property-index)
273 ("align-content" "flex-start" "flex-end" "center" "space-between"
274 "space-around" "stretch")
275 ("align-items" "flex-start" "flex-end" "center" "baseline"
277 ("align-self" "auto" "flex-start" "flex-end" "center" "baseline"
279 ("flex" "none" flex-grow flex-shrink flex-basis)
280 ("flex-basis" "auto" "content" width)
281 ("flex-direction" "row" "row-reverse" "column" "column-reverse")
282 ("flex-flow" flex-direction flex-wrap)
284 ("flex-shrink" number)
285 ("flex-wrap" "nowrap" "wrap" "wrap-reverse")
286 ("justify-content" "flex-start" "flex-end" "center"
287 "space-between" "space-around")
290 ;; CSS Fonts Module Level 3
291 ;; (http://www.w3.org/TR/css3-fonts/#property-index)
292 ("font" font-style font-variant-css21 font-weight font-stretch
293 font-size line-height font-family "caption" "icon" "menu"
294 "message-box" "small-caption" "status-bar")
295 ("font-family" family-name generic-family)
296 ("font-feature-settings" "normal" feature-tag-value)
297 ("font-kerning" "auto" "normal" "none")
298 ("font-language-override" "normal" string)
299 ("font-size" absolute-size relative-size length percentage)
300 ("font-size-adjust" "none" number)
301 ("font-stretch" "normal" "ultra-condensed" "extra-condensed"
302 "condensed" "semi-condensed" "semi-expanded" "expanded"
303 "extra-expanded" "ultra-expanded")
304 ("font-style" "normal" "italic" "oblique")
305 ("font-synthesis" "none" "weight" "style")
306 ("font-variant" "normal" "none" common-lig-values
307 discretionary-lig-values historical-lig-values
308 contextual-alt-values "stylistic()" "historical-forms"
309 "styleset()" "character-variant()" "swash()" "ornaments()"
310 "annotation()" "small-caps" "all-small-caps" "petite-caps"
311 "all-petite-caps" "unicase" "titling-caps" numeric-figure-values
312 numeric-spacing-values numeric-fraction-values "ordinal"
313 "slashed-zero" east-asian-variant-values east-asian-width-values
315 ("font-variant-alternates" "normal" "stylistic()"
316 "historical-forms" "styleset()" "character-variant()" "swash()"
317 "ornaments()" "annotation()")
318 ("font-variant-caps" "normal" "small-caps" "all-small-caps"
319 "petite-caps" "all-petite-caps" "unicase" "titling-caps")
320 ("font-variant-east-asian" "normal" east-asian-variant-values
321 east-asian-width-values "ruby")
322 ("font-variant-ligatures" "normal" "none" common-lig-values
323 discretionary-lig-values historical-lig-values
324 contextual-alt-values)
325 ("font-variant-numeric" "normal" numeric-figure-values
326 numeric-spacing-values numeric-fraction-values "ordinal"
328 ("font-variant-position" "normal" "sub" "super")
329 ("font-weight" "normal" "bold" "bolder" "lighter" "100" "200"
330 "300" "400" "500" "600" "700" "800" "900")
332 ;; CSS Fragmentation Module Level 3
333 ;; (https://www.w3.org/TR/css-break-3/#property-index)
334 ("box-decoration-break" "slice" "clone")
335 ("break-after" "auto" "avoid" "avoid-page" "page" "left" "right"
336 "recto" "verso" "avoid-column" "column" "avoid-region" "region")
337 ("break-before" "auto" "avoid" "avoid-page" "page" "left" "right"
338 "recto" "verso" "avoid-column" "column" "avoid-region" "region")
339 ("break-inside" "auto" "avoid" "avoid-page" "avoid-column"
344 ;; CSS Multi-column Layout Module
345 ;; (https://www.w3.org/TR/css3-multicol/#property-index)
346 ;; "break-after", "break-before", and "break-inside" are left out
347 ;; below, because they're already included in CSS Fragmentation
349 ("column-count" integer "auto")
350 ("column-fill" "auto" "balance")
351 ("column-gap" length "normal")
352 ("column-rule" column-rule-width column-rule-style
353 column-rule-color "transparent")
354 ("column-rule-color" color)
355 ("column-rule-style" border-style)
356 ("column-rule-width" border-width)
357 ("column-span" "none" "all")
358 ("column-width" length "auto")
359 ("columns" column-width column-count)
361 ;; CSS Overflow Module Level 3
362 ;; (http://www.w3.org/TR/css-overflow-3/#property-index)
363 ("max-lines" "none" integer)
364 ("overflow" "visible" "hidden" "scroll" "auto" "paged-x" "paged-y"
365 "paged-x-controls" "paged-y-controls" "fragments")
366 ("overflow-x" "visible" "hidden" "scroll" "auto" "paged-x"
367 "paged-y" "paged-x-controls" "paged-y-controls" "fragments")
368 ("overflow-y" "visible" "hidden" "scroll" "auto" "paged-x"
369 "paged-y" "paged-x-controls" "paged-y-controls" "fragments")
371 ;; CSS Text Decoration Module Level 3
372 ;; (http://dev.w3.org/csswg/css-text-decor-3/#property-index)
373 ("text-decoration" text-decoration-line text-decoration-style
374 text-decoration-color)
375 ("text-decoration-color" color)
376 ("text-decoration-line" "none" "underline" "overline"
377 "line-through" "blink")
378 ("text-decoration-skip" "none" "objects" "spaces" "ink" "edges"
380 ("text-decoration-style" "solid" "double" "dotted" "dashed"
382 ("text-emphasis" text-emphasis-style text-emphasis-color)
383 ("text-emphasis-color" color)
384 ("text-emphasis-position" "over" "under" "right" "left")
385 ("text-emphasis-style" "none" "filled" "open" "dot" "circle"
386 "double-circle" "triangle" "sesame" string)
387 ("text-shadow" "none" length color)
388 ("text-underline-position" "auto" "under" "left" "right")
390 ;; CSS Text Module Level 3
391 ;; (http://www.w3.org/TR/css3-text/#property-index)
392 ("hanging-punctuation" "none" "first" "force-end" "allow-end"
394 ("hyphens" "none" "manual" "auto")
395 ("letter-spacing" "normal" length)
396 ("line-break" "auto" "loose" "normal" "strict")
397 ("overflow-wrap" "normal" "break-word")
398 ("tab-size" integer length)
399 ("text-align" "start" "end" "left" "right" "center" "justify"
401 ("text-align-last" "auto" "start" "end" "left" "right" "center"
403 ("text-indent" length percentage)
404 ("text-justify" "auto" "none" "inter-word" "distribute")
405 ("text-transform" "none" "capitalize" "uppercase" "lowercase"
407 ("white-space" "normal" "pre" "nowrap" "pre-wrap" "pre-line")
408 ("word-break" "normal" "keep-all" "break-all")
409 ("word-spacing" "normal" length percentage)
410 ("word-wrap" "normal" "break-word")
412 ;; CSS Transforms Module Level 1
413 ;; (http://www.w3.org/TR/css3-2d-transforms/#property-index)
414 ("backface-visibility" "visible" "hidden")
415 ("perspective" "none" length)
416 ("perspective-origin" "left" "center" "right" "top" "bottom"
418 ("transform" "none" transform-list)
419 ("transform-origin" "left" "center" "right" "top" "bottom"
421 ("transform-style" "flat" "preserve-3d")
424 ;; (http://www.w3.org/TR/css3-transitions/#property-index)
425 ("transition" single-transition)
426 ("transition-delay" time)
427 ("transition-duration" time)
428 ("transition-property" "none" single-transition-property "all")
429 ("transition-timing-function" single-transition-timing-function)
431 ;; Filter Effects Module Level 1
432 ;; (http://www.w3.org/TR/filter-effects/#property-index)
433 ("color-interpolation-filters" "auto" "sRGB" "linearRGB")
434 ("filter" "none" filter-function-list)
435 ("flood-color" color)
436 ("flood-opacity" number percentage)
437 ("lighting-color" color))
438 "Identifiers for properties and their possible values.
439 The CAR of each entry is the name of a property, while the CDR is
440 a list of possible values for that property. String values in
441 the CDRs represent literal values, while symbols represent one of
442 the value classes found in `css-value-class-alist'. If a symbol
443 is not found in `css-value-class-alist', it's interpreted as a
444 reference back to one of the properties in this list. Some
445 symbols, such as `number' or `identifier', don't produce any
446 further value candidates, since that list would be infinite.")
448 (defconst css-property-ids
449 (mapcar #'car css-property-alist)
450 "Identifiers for properties.")
452 (defconst css-value-class-alist
454 "xx-small" "x-small" "small" "medium" "large" "x-large"
457 (attachment "scroll" "fixed" "local")
458 (bg-image image "none")
459 (bg-layer bg-image position repeat-style attachment box)
460 (bg-size length percentage "auto" "cover" "contain")
461 (box "border-box" "padding-box" "content-box")
463 "aqua" "black" "blue" "fuchsia" "gray" "green" "lime" "maroon"
464 "navy" "olive" "orange" "purple" "red" "silver" "teal" "white"
465 "yellow" "transparent")
466 (common-lig-values "common-ligatures" "no-common-ligatures")
467 (contextual-alt-values "contextual" "no-contextual")
468 (counter "counter()" "counters()")
469 (discretionary-lig-values
470 "discretionary-ligatures" "no-discretionary-ligatures")
471 (east-asian-variant-values
472 "jis78" "jis83" "jis90" "jis04" "simplified" "traditional")
473 (east-asian-width-values "full-width" "proportional-width")
474 (family-name "Courier" "Helvetica" "Times")
475 (feature-tag-value string integer "on" "off")
477 "blur()" "brightness()" "contrast()" "drop-shadow()"
478 "grayscale()" "hue-rotate()" "invert()" "opacity()" "sepia()"
480 (filter-function-list filter-function uri)
482 bg-image position repeat-style attachment box color)
483 (font-variant-css21 "normal" "small-caps")
485 "serif" "sans-serif" "cursive" "fantasy" "monospace")
486 (generic-voice "male" "female" "child")
488 linear-gradient radial-gradient repeating-linear-gradient
489 repeating-radial-gradient)
490 (historical-lig-values
491 "historical-ligatures" "no-historical-ligatures")
492 (image uri image-list element-reference gradient)
493 (image-list "image()")
495 (line-height "normal" number length percentage)
497 "none" "hidden" "dotted" "dashed" "solid" "double" "groove"
498 "ridge" "inset" "outset")
499 (line-width length "thin" "medium" "thick")
500 (linear-gradient "linear-gradient()")
501 (margin-width "auto" length percentage)
502 (numeric-figure-values "lining-nums" "oldstyle-nums")
503 (numeric-fraction-values "diagonal-fractions" "stacked-fractions")
504 (numeric-spacing-values "proportional-nums" "tabular-nums")
505 (padding-width length percentage)
507 "left" "center" "right" "top" "bottom" percentage length)
508 (radial-gradient "radial-gradient()")
509 (relative-size "larger" "smaller")
511 "repeat-x" "repeat-y" "repeat" "space" "round" "no-repeat")
512 (repeating-linear-gradient "repeating-linear-gradient()")
513 (repeating-radial-gradient "repeating-radial-gradient()")
514 (shadow "inset" length color)
516 (single-animation-direction
517 "normal" "reverse" "alternate" "alternate-reverse")
518 (single-animation-fill-mode "none" "forwards" "backwards" "both")
519 (single-animation-iteration-count "infinite" number)
520 (single-animation-name "none" identifier)
521 (single-animation-play-state "running" "paused")
522 (single-timing-function single-transition-timing-function)
524 "none" single-transition-property time
525 single-transition-timing-function)
526 (single-transition-property "all" identifier)
527 (single-transition-timing-function
528 "ease" "linear" "ease-in" "ease-out" "ease-in-out" "step-start"
529 "step-end" "steps()" "cubic-bezier()")
530 (specific-voice identifier)
533 "matrix()" "translate()" "translateX()" "translateY()" "scale()"
534 "scaleX()" "scaleY()" "rotate()" "skew()" "skewX()" "skewY()"
535 "matrix3d()" "translate3d()" "translateZ()" "scale3d()"
536 "scaleZ()" "rotate3d()" "rotateX()" "rotateY()" "rotateZ()"
539 (width length percentage "auto")
542 "Property value classes and their values.
543 The format is similar to that of `css-property-alist', except
544 that the CARs aren't actual CSS properties, but rather a name for
545 a class of values, and that symbols in the CDRs always refer to
546 other entries in this list, not to properties.
548 The following classes have been left out above because they
549 cannot be completed sensibly: `angle', `element-reference',
550 `frequency', `id', `identifier', `integer', `number',
551 `percentage', `string', and `time'.")
553 (defcustom css-electric-keys '(?\} ?\;) ;; '()
554 "Self inserting keys which should trigger re-indentation."
556 :type '(repeat character)
557 :options '((?\} ?\;))
560 (defvar css-mode-syntax-table
561 (let ((st (make-syntax-table)))
563 (modify-syntax-entry ?/ ". 14" st)
564 (modify-syntax-entry ?* ". 23b" st)
566 (modify-syntax-entry ?\" "\"" st)
567 (modify-syntax-entry ?\' "\"" st)
569 (modify-syntax-entry ?\{ "(}" st)
570 (modify-syntax-entry ?\} "){" st)
571 ;; Args in url(...) thingies and other "function calls".
572 (modify-syntax-entry ?\( "()" st)
573 (modify-syntax-entry ?\) ")(" st)
574 ;; To match attributes in selectors.
575 (modify-syntax-entry ?\[ "(]" st)
576 (modify-syntax-entry ?\] ")[" st)
577 ;; Special chars that sometimes come at the beginning of words.
578 (modify-syntax-entry ?@ "'" st)
579 ;; (modify-syntax-entry ?: "'" st)
580 (modify-syntax-entry ?# "'" st)
581 ;; Distinction between words and symbols.
582 (modify-syntax-entry ?- "_" st)
586 (defconst css--uri-re
588 "url\\((\\)[[:space:]]*\\(?:\\\\.\\|[^()[:space:]\n'\"]\\)+"
589 "[[:space:]]*\\()\\)")))
591 (defconst css-syntax-propertize-function
592 (syntax-propertize-rules
593 (css--uri-re (1 "|") (2 "|"))))
595 (defconst css-escapes-re
596 "\\\\\\(?:[^\000-\037\177]\\|[0-9a-fA-F]+[ \n\t\r\f]?\\)")
597 (defconst css-nmchar-re (concat "\\(?:[-[:alnum:]]\\|" css-escapes-re "\\)"))
598 (defconst css-nmstart-re (concat "\\(?:[[:alpha:]]\\|" css-escapes-re "\\)"))
599 (defconst css-ident-re ;; (concat css-nmstart-re css-nmchar-re "*")
600 ;; Apparently, "at rules" names can start with a dash, e.g. @-moz-keyframes.
601 (concat css-nmchar-re "+"))
602 (defconst css-proprietary-nmstart-re ;; Vendor-specific properties.
603 (concat "[-_]" (regexp-opt '("ms" "moz" "o" "khtml" "webkit")) "-"))
604 (defconst css-name-re (concat css-nmchar-re "+"))
606 (defconst scss--hash-re "#\\(?:{[$-_[:alnum:]]+}\\|[[:alnum:]]+\\)")
608 (defface css-selector '((t :inherit font-lock-function-name-face))
609 "Face to use for selectors."
611 (defface css-property '((t :inherit font-lock-variable-name-face))
612 "Face to use for properties."
614 (defface css-proprietary-property '((t :inherit (css-property italic)))
615 "Face to use for vendor-specific properties.")
617 (defun css--font-lock-keywords (&optional sassy)
618 `((,(concat "!\\s-*" (regexp-opt css--bang-ids))
619 (0 font-lock-builtin-face))
620 ;; Atrules keywords. IDs not in css-at-ids are valid (ignored).
621 ;; In fact the regexp should probably be
622 ;; (,(concat "\\(@" css-ident-re "\\)\\([ \t\n][^;{]*\\)[;{]")
623 ;; (1 font-lock-builtin-face))
624 ;; Since "An at-rule consists of everything up to and including the next
625 ;; semicolon (;) or the next block, whichever comes first."
626 (,(concat "@" css-ident-re) (0 font-lock-builtin-face))
628 (,(concat "--" css-ident-re) (0 font-lock-variable-name-face))
630 ;; FIXME: attribute selectors don't work well because they may contain
631 ;; strings which have already been highlighted as f-l-string-face and
632 ;; thus prevent this highlighting from being applied (actually now that
633 ;; I use `keep' this should work better). But really the part of the
634 ;; selector between [...] should simply not be highlighted.
638 ;; We don't allow / as first char, so as not to
639 ;; take a comment as the beginning of a selector.
640 "[^@/:{}() \t\n][^:{}()]+"
641 ;; Same as for non-sassy except we do want to allow { and }
642 ;; chars in selectors in the case of #{$foo}
643 ;; variable interpolation!
644 (concat "\\(?:" scss--hash-re
645 "\\|[^@/:{}() \t\n#]\\)"
646 "[^:{}()#]*\\(?:" scss--hash-re "[^:{}()#]*\\)*"))
647 ;; Even though pseudo-elements should be prefixed by ::, a
648 ;; single colon is accepted for backward compatibility.
649 "\\(?:\\(:" (regexp-opt (append css-pseudo-class-ids
650 css-pseudo-element-ids) t)
651 "\\|\\::" (regexp-opt css-pseudo-element-ids t) "\\)"
655 (concat "[^:{}()\n#]*\\(?:" scss--hash-re "[^:{}()\n#]*\\)*"))
657 "\\)\\(?:\n[ \t]*\\)*{")
658 (1 'css-selector keep))
659 ;; In the above rule, we allow the open-brace to be on some subsequent
660 ;; line. This will only work if we properly mark the intervening text
661 ;; as being part of a multiline element (and even then, this only
662 ;; ensures proper refontification, but not proper discovery).
663 ("^[ \t]*{" (0 (save-excursion
664 (goto-char (match-beginning 0))
665 (skip-chars-backward " \n\t")
666 (put-text-property (point) (match-end 0)
667 'font-lock-multiline t)
670 ;; Properties. Again, we don't limit ourselves to css-property-ids.
671 (,(concat "\\(?:[{;]\\|^\\)[ \t]*\\("
672 "\\(?:\\(" css-proprietary-nmstart-re "\\)\\|"
673 css-nmstart-re "\\)" css-nmchar-re "*"
675 (1 (if (match-end 2) 'css-proprietary-property 'css-property)))
676 ;; Make sure the parens in a url(...) expression receive the
677 ;; default face. This is done because the parens may sometimes
678 ;; receive generic string delimiter syntax (see
679 ;; `css-syntax-propertize-function').
681 (1 'default t) (2 'default t))))
683 (defvar css-font-lock-keywords (css--font-lock-keywords))
685 (defvar css-font-lock-defaults
686 '(css-font-lock-keywords nil t))
688 (defcustom css-indent-offset 4
689 "Basic size of one indentation step."
694 (defconst css-smie-grammar
696 (smie-precs->prec2 '((assoc ";") (assoc ",") (left ":")))))
698 (defun css-smie--forward-token ()
700 ((and (eq (char-before) ?\})
701 (scss-smie--not-interpolation-p)
702 ;; FIXME: If the next char is not whitespace, what should we do?
703 (or (memq (char-after) '(?\s ?\t ?\n))
704 (looking-at comment-start-skip)))
705 (if (memq (char-after) '(?\s ?\t ?\n))
706 (forward-char 1) (forward-comment 1))
708 ((progn (forward-comment (point-max))
709 (looking-at "[;,:]"))
710 (forward-char 1) (match-string 0))
711 (t (smie-default-forward-token))))
713 (defun css-smie--backward-token ()
715 (forward-comment (- (point)))
717 ;; FIXME: If the next char is not whitespace, what should we do?
718 ((and (eq (char-before) ?\}) (scss-smie--not-interpolation-p)
719 (> pos (point))) ";")
720 ((memq (char-before) '(?\; ?\, ?\:))
721 (forward-char -1) (string (char-after)))
722 (t (smie-default-backward-token)))))
724 (defun css-smie-rules (kind token)
725 (pcase (cons kind token)
726 (`(:elem . basic) css-indent-offset)
728 (`(:list-intro . ,(or `";" `"")) t) ;"" stands for BOB (bug#15467).
730 (when (or (smie-rule-hanging-p) (smie-rule-bolp))
731 (smie-backward-sexp ";")
732 (smie-indent-virtual)))
733 (`(:before . ,(or "{" "("))
734 (if (smie-rule-hanging-p) (smie-rule-parent 0)))))
738 (defun css--complete-property ()
739 "Complete property at point."
742 (skip-chars-backward "-[:alnum:]")
743 (let ((start (point)))
744 (skip-chars-backward " \t\r\n")
745 (when (memq (char-before) '(?\{ ?\;))
746 (list start pos css-property-ids))))))
748 (defun css--complete-bang-rule ()
749 "Complete bang-rule at point."
752 (skip-chars-backward "-[:alnum:]")
753 (when (eq (char-before) ?\!)
754 (list (point) pos css--bang-ids)))))
756 (defun css--complete-pseudo-element-or-class ()
757 "Complete pseudo-element or pseudo-class at point."
760 (skip-chars-backward "-[:alnum:]")
761 (when (eq (char-before) ?\:)
763 (if (eq (char-before (- (point) 1)) ?\:)
764 css-pseudo-element-ids
765 css-pseudo-class-ids))))))
767 (defun css--complete-at-rule ()
768 "Complete at-rule (statement beginning with `@') at point."
771 (skip-chars-backward "-[:alnum:]")
772 (when (eq (char-before) ?\@)
773 (list (point) pos css--at-ids)))))
775 (defvar css--property-value-cache
776 (make-hash-table :test 'equal :size (length css-property-alist))
777 "Cache of previously completed property values.")
779 (defun css--value-class-lookup (value-class)
780 "Return a list of value completion candidates for VALUE-CLASS.
781 Completion candidates are looked up in `css-value-class-alist' by
782 the symbol VALUE-CLASS."
787 (css--value-class-lookup value)))
788 (cdr (assq value-class css-value-class-alist))))
790 (defun css--property-values (property)
791 "Return a list of value completion candidates for PROPERTY.
792 Completion candidates are looked up in `css-property-alist' by
793 the string PROPERTY."
794 (or (gethash property css--property-value-cache)
801 (or (css--value-class-lookup value)
802 (css--property-values (symbol-name value)))))
803 (cdr (assoc property css-property-alist))))))
804 (puthash property values css--property-value-cache))))
806 (defun css--complete-property-value ()
807 "Complete property value at point."
810 (re-search-backward ":[^/]" (line-beginning-position) t)
811 (let ((property-end (point)))
812 (skip-chars-backward "-[:alnum:]")
813 (let ((property (buffer-substring (point) property-end)))
814 (car (member property css-property-ids)))))))
818 (skip-chars-backward "[:graph:]")
820 (cons "inherit" (css--property-values property))))))))
822 (defun css-completion-at-point ()
823 "Complete current symbol at point.
824 Currently supports completion of CSS properties, property values,
825 pseudo-elements, pseudo-classes, at-rules, and bang-rules."
826 (or (css--complete-property)
827 (css--complete-bang-rule)
828 (css--complete-property-value)
829 (css--complete-pseudo-element-or-class)
830 (css--complete-at-rule)))
833 (define-derived-mode css-mode prog-mode "CSS"
834 "Major mode to edit Cascading Style Sheets."
835 (setq-local font-lock-defaults css-font-lock-defaults)
836 (setq-local comment-start "/*")
837 (setq-local comment-start-skip "/\\*+[ \t]*")
838 (setq-local comment-end "*/")
839 (setq-local comment-end-skip "[ \t]*\\*+/")
840 (setq-local syntax-propertize-function
841 css-syntax-propertize-function)
842 (setq-local fill-paragraph-function #'css-fill-paragraph)
843 (setq-local adaptive-fill-function #'css-adaptive-fill)
844 (setq-local add-log-current-defun-function #'css-current-defun-name)
845 (smie-setup css-smie-grammar #'css-smie-rules
846 :forward-token #'css-smie--forward-token
847 :backward-token #'css-smie--backward-token)
848 (setq-local electric-indent-chars
849 (append css-electric-keys electric-indent-chars))
850 (add-hook 'completion-at-point-functions
851 #'css-completion-at-point nil 'local))
853 (defvar comment-continue)
855 (defun css-fill-paragraph (&optional justify)
857 ;; Fill succeeding comment when invoked right before a multi-line
859 (when (save-excursion
861 (comment-search-forward (point-at-eol) t))
862 (goto-char (match-end 0)))
863 (let ((ppss (syntax-ppss))
864 (eol (line-end-position)))
868 (goto-char (nth 8 ppss))
871 (setq eol (point)))))
872 ;; Filling inside a comment whose comment-end marker is not \n.
873 ;; This code is meant to be generic, so that it works not only for
874 ;; css-mode but for all modes.
876 (narrow-to-region (nth 8 ppss) eol)
877 (comment-normalize-vars) ;Will define comment-continue.
878 (let ((fill-paragraph-function nil)
880 (if (and comment-continue
881 (string-match "[^ \t]" comment-continue))
882 (concat "\\(?:[ \t]*\\(?:"
883 (regexp-quote comment-continue) "\\|"
884 comment-start-skip "\\|"
885 comment-end-skip "\\)\\)?"
886 "\\(?:" paragraph-separate "\\)")
889 (if (and comment-continue
890 (string-match "[^ \t]" comment-continue))
891 (concat "\\(?:[ \t]*" (regexp-quote comment-continue)
892 "\\)?\\(?:" paragraph-start "\\)")
894 (fill-paragraph justify)
895 ;; Don't try filling again.
898 ((and (null (nth 8 ppss))
902 (when (<= (point) eol)
903 (setq ppss (syntax-ppss)))))))
904 (goto-char (nth 1 ppss))
905 (let ((end (save-excursion
906 (ignore-errors (forward-sexp 1) (copy-marker (point) t)))))
908 (while (re-search-forward "[{;}]" end t)
910 ;; This is a false positive inside a string or comment.
911 ((nth 8 (syntax-ppss)) nil)
912 ;; This is a false positive when encountering an
913 ;; interpolated variable (bug#19751).
914 ((eq (char-before (- (point) 1)) ?#) nil)
915 ((eq (char-before) ?\})
918 (skip-chars-backward " \t")
919 (when (and (not (bolp))
920 (scss-smie--not-interpolation-p))
925 (setq eol (line-end-position))
926 (and (forward-comment 1)
928 ;; A multi-line comment should be on its own line.
929 (save-excursion (forward-comment -1)
930 (when (< (point) eol)
933 (if (< (point) eol) (newline)))))
934 (goto-char (nth 1 ppss))
935 (indent-region (line-beginning-position 2) end)
936 ;; Don't use the default filling code.
939 (defun css-adaptive-fill ()
940 (when (looking-at "[ \t]*/\\*[ \t]*")
941 (let ((str (match-string 0)))
942 (and (string-match "/\\*" str)
943 (replace-match " *" t t str)))))
945 (defun css-current-defun-name ()
946 "Return the name of the CSS section at point, or nil."
948 (let ((max (max (point-min) (- (point) 1600)))) ; approx 20 lines back
949 (when (search-backward "{" max t)
950 (skip-chars-backward " \t\r\n")
952 (if (looking-at "^[ \t]*\\([^{\r\n]*[^ {\t\r\n]\\)")
953 (match-string-no-properties 1))))))
957 (defvar scss-mode-syntax-table
958 (let ((st (make-syntax-table css-mode-syntax-table)))
959 (modify-syntax-entry ?/ ". 124" st)
960 (modify-syntax-entry ?\n ">" st)
961 ;; Variable names are prefixed by $.
962 (modify-syntax-entry ?$ "'" st)
965 (defun scss-font-lock-keywords ()
966 (append `((,(concat "$" css-ident-re) (0 font-lock-variable-name-face)))
967 (css--font-lock-keywords 'sassy)
968 `((,(concat "@mixin[ \t]+\\(" css-ident-re "\\)[ \t]*(")
969 (1 font-lock-function-name-face)))))
971 (defun scss-smie--not-interpolation-p ()
974 (or (zerop (skip-chars-backward "-[:alnum:]"))
975 (not (looking-back "#{\\$" (- (point) 3))))))
977 ;;;###autoload (add-to-list 'auto-mode-alist '("\\.scss\\'" . scss-mode))
979 (define-derived-mode scss-mode css-mode "SCSS"
980 "Major mode to edit \"Sassy CSS\" files."
981 (setq-local comment-start "// ")
982 (setq-local comment-end "")
983 (setq-local comment-continue " *")
984 (setq-local comment-start-skip "/[*/]+[ \t]*")
985 (setq-local comment-end-skip "[ \t]*\\(?:\n\\|\\*+/\\)")
986 (setq-local css--at-ids (append css-at-ids scss-at-ids))
987 (setq-local css--bang-ids (append css-bang-ids scss-bang-ids))
988 (setq-local font-lock-defaults
989 (list (scss-font-lock-keywords) nil t)))
992 ;;; css-mode.el ends here