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
33 ;; - support completion of user-defined classes names and IDs
42 "Cascading Style Sheets (CSS) editing mode."
45 (defconst css-pseudo-class-ids
46 '("active" "checked" "disabled" "empty" "enabled" "first"
47 "first-child" "first-of-type" "focus" "hover" "indeterminate" "lang"
48 "last-child" "last-of-type" "left" "link" "not" "nth-child"
49 "nth-last-child" "nth-last-of-type" "nth-of-type" "only-child"
50 "only-of-type" "right" "root" "target" "visited")
51 "Identifiers for pseudo-classes.")
53 (defconst css-pseudo-element-ids
54 '("after" "before" "first-letter" "first-line")
55 "Identifiers for pseudo-elements.")
58 '("charset" "font-face" "import" "keyframes" "media" "namespace"
60 "Identifiers that appear in the form @foo.")
63 '("at-root" "content" "debug" "each" "else" "else if" "error" "extend"
64 "for" "function" "if" "import" "include" "mixin" "return" "warn"
66 "Additional identifiers that appear in the form @foo in SCSS.")
68 (defvar css--at-ids css-at-ids
69 "List of at-rules for the current mode.")
70 (make-variable-buffer-local 'css--at-ids)
72 (defconst css-bang-ids
74 "Identifiers that appear in the form !foo.")
76 (defconst scss-bang-ids
77 '("default" "global" "optional")
78 "Additional identifiers that appear in the form !foo in SCSS.")
80 (defvar css--bang-ids css-bang-ids
81 "List of bang-rules for the current mode.")
82 (make-variable-buffer-local 'css--bang-ids)
84 (defconst css-descriptor-ids
85 '("ascent" "baseline" "bbox" "cap-height" "centerline" "definition-src"
86 "descent" "font-family" "font-size" "font-stretch" "font-style"
87 "font-variant" "font-weight" "mathline" "panose-1" "slope" "src" "stemh"
88 "stemv" "topline" "unicode-range" "units-per-em" "widths" "x-height")
89 "Identifiers for font descriptors.")
91 (defconst css-media-ids
92 '("all" "aural" "bitmap" "continuous" "grid" "paged" "static" "tactile"
94 "Identifiers for types of media.")
96 (defconst css-property-alist
97 ;; CSS 2.1 properties (http://www.w3.org/TR/CSS21/propidx.html).
99 ;; Properties duplicated by any of the CSS3 modules below have been
101 '(("azimuth" angle "left-side" "far-left" "left" "center-left"
102 "center" "center-right" "right" "far-right" "right-side" "behind"
103 "leftwards" "rightwards")
104 ("border-collapse" "collapse" "separate")
105 ("border-spacing" length)
106 ("bottom" length percentage "auto")
107 ("caption-side" "top" "bottom")
108 ("clear" "none" "left" "right" "both")
109 ("clip" shape "auto")
110 ("content" "normal" "none" string uri counter "attr()"
111 "open-quote" "close-quote" "no-open-quote" "no-close-quote")
112 ("counter-increment" identifier integer "none")
113 ("counter-reset" identifier integer "none")
114 ("cue" cue-before cue-after)
115 ("cue-after" uri "none")
116 ("cue-before" uri "none")
117 ("direction" "ltr" "rtl")
118 ("display" "inline" "block" "list-item" "inline-block" "table"
119 "inline-table" "table-row-group" "table-header-group"
120 "table-footer-group" "table-row" "table-column-group"
121 "table-column" "table-cell" "table-caption" "none"
122 ;; CSS Flexible Box Layout Module Level 1
123 ;; (https://www.w3.org/TR/css3-flexbox/#valdef-display-flex)
124 "flex" "inline-flex")
125 ("elevation" angle "below" "level" "above" "higher" "lower")
126 ("empty-cells" "show" "hide")
127 ("float" "left" "right" "none")
128 ("height" length percentage "auto")
129 ("left" length percentage "auto")
130 ("line-height" "normal" number length percentage)
131 ("list-style" list-style-type list-style-position
133 ("list-style-image" uri "none")
134 ("list-style-position" "inside" "outside")
135 ("list-style-type" "disc" "circle" "square" "decimal"
136 "decimal-leading-zero" "lower-roman" "upper-roman" "lower-greek"
137 "lower-latin" "upper-latin" "armenian" "georgian" "lower-alpha"
138 "upper-alpha" "none")
139 ("margin" margin-width)
140 ("margin-bottom" margin-width)
141 ("margin-left" margin-width)
142 ("margin-right" margin-width)
143 ("margin-top" margin-width)
144 ("max-height" length percentage "none")
145 ("max-width" length percentage "none")
146 ("min-height" length percentage)
147 ("min-width" length percentage)
148 ("padding" padding-width)
149 ("padding-bottom" padding-width)
150 ("padding-left" padding-width)
151 ("padding-right" padding-width)
152 ("padding-top" padding-width)
153 ("page-break-after" "auto" "always" "avoid" "left" "right")
154 ("page-break-before" "auto" "always" "avoid" "left" "right")
155 ("page-break-inside" "avoid" "auto")
156 ("pause" time percentage)
157 ("pause-after" time percentage)
158 ("pause-before" time percentage)
159 ("pitch" frequency "x-low" "low" "medium" "high" "x-high")
160 ("pitch-range" number)
161 ("play-during" uri "mix" "repeat" "auto" "none")
162 ("position" "static" "relative" "absolute" "fixed")
163 ("quotes" string "none")
165 ("right" length percentage "auto")
166 ("speak" "normal" "none" "spell-out")
167 ("speak-header" "once" "always")
168 ("speak-numeral" "digits" "continuous")
169 ("speak-punctuation" "code" "none")
170 ("speech-rate" number "x-slow" "slow" "medium" "fast" "x-fast"
173 ("table-layout" "auto" "fixed")
174 ("top" length percentage "auto")
175 ("unicode-bidi" "normal" "embed" "bidi-override")
176 ("vertical-align" "baseline" "sub" "super" "top" "text-top"
177 "middle" "bottom" "text-bottom" percentage length)
178 ("visibility" "visible" "hidden" "collapse")
179 ("voice-family" specific-voice generic-voice specific-voice
181 ("volume" number percentage "silent" "x-soft" "soft" "medium"
183 ("width" length percentage "auto")
184 ("z-index" "auto" integer)
187 ;; (http://www.w3.org/TR/css3-animations/#property-index)
188 ("animation" single-animation-name time single-timing-function
189 single-animation-iteration-count single-animation-direction
190 single-animation-fill-mode single-animation-play-state)
191 ("animation-delay" time)
192 ("animation-direction" single-animation-direction)
193 ("animation-duration" time)
194 ("animation-fill-mode" single-animation-fill-mode)
195 ("animation-iteration-count" single-animation-iteration-count)
196 ("animation-name" single-animation-name)
197 ("animation-play-state" single-animation-play-state)
198 ("animation-timing-function" single-timing-function)
200 ;; CSS Backgrounds and Borders Module Level 3
201 ;; (http://www.w3.org/TR/css3-background/#property-index)
202 ("background" bg-layer final-bg-layer)
203 ("background-attachment" attachment)
204 ("background-clip" box)
205 ("background-color" color)
206 ("background-image" bg-image)
207 ("background-origin" box)
208 ("background-position" position)
209 ("background-repeat" repeat-style)
210 ("background-size" bg-size)
211 ("border" line-width line-style color)
212 ("border-bottom" line-width line-style color)
213 ("border-bottom-color" color)
214 ("border-bottom-left-radius" length percentage)
215 ("border-bottom-right-radius" length percentage)
216 ("border-bottom-style" line-style)
217 ("border-bottom-width" line-width)
218 ("border-color" color)
219 ("border-image" border-image-source border-image-slice
220 border-image-width border-image-outset border-image-repeat)
221 ("border-image-outset" length number)
222 ("border-image-repeat" "stretch" "repeat" "round" "space")
223 ("border-image-slice" number percentage "fill")
224 ("border-image-source" "none" image)
225 ("border-image-width" length percentage number "auto")
226 ("border-left" line-width line-style color)
227 ("border-left-color" color)
228 ("border-left-style" line-style)
229 ("border-left-width" line-width)
230 ("border-radius" length percentage)
231 ("border-right" line-width line-style color)
232 ("border-right-color" color)
233 ("border-right-style" line-style)
234 ("border-right-width" line-width)
235 ("border-style" line-style)
236 ("border-top" line-width line-style color)
237 ("border-top-color" color)
238 ("border-top-left-radius" length percentage)
239 ("border-top-right-radius" length percentage)
240 ("border-top-style" line-style)
241 ("border-top-width" line-width)
242 ("border-width" line-width)
243 ("box-shadow" "none" shadow)
245 ;; CSS Basic User Interface Module Level 3 (CSS3 UI)
246 ;; (http://www.w3.org/TR/css3-ui/#property-index)
247 ("box-sizing" "content-box" "border-box")
248 ("caret-color" "auto" color)
249 ("cursor" uri x y "auto" "default" "none" "context-menu" "help"
250 "pointer" "progress" "wait" "cell" "crosshair" "text"
251 "vertical-text" "alias" "copy" "move" "no-drop" "not-allowed"
252 "grab" "grabbing" "e-resize" "n-resize" "ne-resize" "nw-resize"
253 "s-resize" "se-resize" "sw-resize" "w-resize" "ew-resize"
254 "ns-resize" "nesw-resize" "nwse-resize" "col-resize" "row-resize"
255 "all-scroll" "zoom-in" "zoom-out")
256 ("nav-down" "auto" id "current" "root" target-name)
257 ("nav-left" "auto" id "current" "root" target-name)
258 ("nav-right" "auto" id "current" "root" target-name)
259 ("nav-up" "auto" id "current" "root" target-name)
260 ("outline" outline-color outline-style outline-width)
261 ("outline-color" color "invert")
262 ("outline-offset" length)
263 ("outline-style" "auto" border-style)
264 ("outline-width" border-width)
265 ("resize" "none" "both" "horizontal" "vertical")
266 ("text-overflow" "clip" "ellipsis" string)
268 ;; CSS Color Module Level 3
269 ;; (http://www.w3.org/TR/css3-color/#property)
271 ("opacity" alphavalue)
273 ;; CSS Flexible Box Layout Module Level 1
274 ;; (http://www.w3.org/TR/css-flexbox-1/#property-index)
275 ("align-content" "flex-start" "flex-end" "center" "space-between"
276 "space-around" "stretch")
277 ("align-items" "flex-start" "flex-end" "center" "baseline"
279 ("align-self" "auto" "flex-start" "flex-end" "center" "baseline"
281 ("flex" "none" flex-grow flex-shrink flex-basis)
282 ("flex-basis" "auto" "content" width)
283 ("flex-direction" "row" "row-reverse" "column" "column-reverse")
284 ("flex-flow" flex-direction flex-wrap)
286 ("flex-shrink" number)
287 ("flex-wrap" "nowrap" "wrap" "wrap-reverse")
288 ("justify-content" "flex-start" "flex-end" "center"
289 "space-between" "space-around")
292 ;; CSS Fonts Module Level 3
293 ;; (http://www.w3.org/TR/css3-fonts/#property-index)
294 ("font" font-style font-variant-css21 font-weight font-stretch
295 font-size line-height font-family "caption" "icon" "menu"
296 "message-box" "small-caption" "status-bar")
297 ("font-family" family-name generic-family)
298 ("font-feature-settings" "normal" feature-tag-value)
299 ("font-kerning" "auto" "normal" "none")
300 ("font-language-override" "normal" string)
301 ("font-size" absolute-size relative-size length percentage)
302 ("font-size-adjust" "none" number)
303 ("font-stretch" "normal" "ultra-condensed" "extra-condensed"
304 "condensed" "semi-condensed" "semi-expanded" "expanded"
305 "extra-expanded" "ultra-expanded")
306 ("font-style" "normal" "italic" "oblique")
307 ("font-synthesis" "none" "weight" "style")
308 ("font-variant" "normal" "none" common-lig-values
309 discretionary-lig-values historical-lig-values
310 contextual-alt-values "stylistic()" "historical-forms"
311 "styleset()" "character-variant()" "swash()" "ornaments()"
312 "annotation()" "small-caps" "all-small-caps" "petite-caps"
313 "all-petite-caps" "unicase" "titling-caps" numeric-figure-values
314 numeric-spacing-values numeric-fraction-values "ordinal"
315 "slashed-zero" east-asian-variant-values east-asian-width-values
317 ("font-variant-alternates" "normal" "stylistic()"
318 "historical-forms" "styleset()" "character-variant()" "swash()"
319 "ornaments()" "annotation()")
320 ("font-variant-caps" "normal" "small-caps" "all-small-caps"
321 "petite-caps" "all-petite-caps" "unicase" "titling-caps")
322 ("font-variant-east-asian" "normal" east-asian-variant-values
323 east-asian-width-values "ruby")
324 ("font-variant-ligatures" "normal" "none" common-lig-values
325 discretionary-lig-values historical-lig-values
326 contextual-alt-values)
327 ("font-variant-numeric" "normal" numeric-figure-values
328 numeric-spacing-values numeric-fraction-values "ordinal"
330 ("font-variant-position" "normal" "sub" "super")
331 ("font-weight" "normal" "bold" "bolder" "lighter" "100" "200"
332 "300" "400" "500" "600" "700" "800" "900")
334 ;; CSS Fragmentation Module Level 3
335 ;; (https://www.w3.org/TR/css-break-3/#property-index)
336 ("box-decoration-break" "slice" "clone")
337 ("break-after" "auto" "avoid" "avoid-page" "page" "left" "right"
338 "recto" "verso" "avoid-column" "column" "avoid-region" "region")
339 ("break-before" "auto" "avoid" "avoid-page" "page" "left" "right"
340 "recto" "verso" "avoid-column" "column" "avoid-region" "region")
341 ("break-inside" "auto" "avoid" "avoid-page" "avoid-column"
346 ;; CSS Multi-column Layout Module
347 ;; (https://www.w3.org/TR/css3-multicol/#property-index)
348 ;; "break-after", "break-before", and "break-inside" are left out
349 ;; below, because they're already included in CSS Fragmentation
351 ("column-count" integer "auto")
352 ("column-fill" "auto" "balance")
353 ("column-gap" length "normal")
354 ("column-rule" column-rule-width column-rule-style
355 column-rule-color "transparent")
356 ("column-rule-color" color)
357 ("column-rule-style" border-style)
358 ("column-rule-width" border-width)
359 ("column-span" "none" "all")
360 ("column-width" length "auto")
361 ("columns" column-width column-count)
363 ;; CSS Overflow Module Level 3
364 ;; (http://www.w3.org/TR/css-overflow-3/#property-index)
365 ("max-lines" "none" integer)
366 ("overflow" "visible" "hidden" "scroll" "auto" "paged-x" "paged-y"
367 "paged-x-controls" "paged-y-controls" "fragments")
368 ("overflow-x" "visible" "hidden" "scroll" "auto" "paged-x"
369 "paged-y" "paged-x-controls" "paged-y-controls" "fragments")
370 ("overflow-y" "visible" "hidden" "scroll" "auto" "paged-x"
371 "paged-y" "paged-x-controls" "paged-y-controls" "fragments")
373 ;; CSS Text Decoration Module Level 3
374 ;; (http://dev.w3.org/csswg/css-text-decor-3/#property-index)
375 ("text-decoration" text-decoration-line text-decoration-style
376 text-decoration-color)
377 ("text-decoration-color" color)
378 ("text-decoration-line" "none" "underline" "overline"
379 "line-through" "blink")
380 ("text-decoration-skip" "none" "objects" "spaces" "ink" "edges"
382 ("text-decoration-style" "solid" "double" "dotted" "dashed"
384 ("text-emphasis" text-emphasis-style text-emphasis-color)
385 ("text-emphasis-color" color)
386 ("text-emphasis-position" "over" "under" "right" "left")
387 ("text-emphasis-style" "none" "filled" "open" "dot" "circle"
388 "double-circle" "triangle" "sesame" string)
389 ("text-shadow" "none" length color)
390 ("text-underline-position" "auto" "under" "left" "right")
392 ;; CSS Text Module Level 3
393 ;; (http://www.w3.org/TR/css3-text/#property-index)
394 ("hanging-punctuation" "none" "first" "force-end" "allow-end"
396 ("hyphens" "none" "manual" "auto")
397 ("letter-spacing" "normal" length)
398 ("line-break" "auto" "loose" "normal" "strict")
399 ("overflow-wrap" "normal" "break-word")
400 ("tab-size" integer length)
401 ("text-align" "start" "end" "left" "right" "center" "justify"
403 ("text-align-last" "auto" "start" "end" "left" "right" "center"
405 ("text-indent" length percentage)
406 ("text-justify" "auto" "none" "inter-word" "distribute")
407 ("text-transform" "none" "capitalize" "uppercase" "lowercase"
409 ("white-space" "normal" "pre" "nowrap" "pre-wrap" "pre-line")
410 ("word-break" "normal" "keep-all" "break-all")
411 ("word-spacing" "normal" length percentage)
412 ("word-wrap" "normal" "break-word")
414 ;; CSS Transforms Module Level 1
415 ;; (http://www.w3.org/TR/css3-2d-transforms/#property-index)
416 ("backface-visibility" "visible" "hidden")
417 ("perspective" "none" length)
418 ("perspective-origin" "left" "center" "right" "top" "bottom"
420 ("transform" "none" transform-list)
421 ("transform-origin" "left" "center" "right" "top" "bottom"
423 ("transform-style" "flat" "preserve-3d")
426 ;; (http://www.w3.org/TR/css3-transitions/#property-index)
427 ("transition" single-transition)
428 ("transition-delay" time)
429 ("transition-duration" time)
430 ("transition-property" "none" single-transition-property "all")
431 ("transition-timing-function" single-transition-timing-function)
433 ;; Filter Effects Module Level 1
434 ;; (http://www.w3.org/TR/filter-effects/#property-index)
435 ("color-interpolation-filters" "auto" "sRGB" "linearRGB")
436 ("filter" "none" filter-function-list)
437 ("flood-color" color)
438 ("flood-opacity" number percentage)
439 ("lighting-color" color))
440 "Identifiers for properties and their possible values.
441 The CAR of each entry is the name of a property, while the CDR is
442 a list of possible values for that property. String values in
443 the CDRs represent literal values, while symbols represent one of
444 the value classes found in `css-value-class-alist'. If a symbol
445 is not found in `css-value-class-alist', it's interpreted as a
446 reference back to one of the properties in this list. Some
447 symbols, such as `number' or `identifier', don't produce any
448 further value candidates, since that list would be infinite.")
450 (defconst css-property-ids
451 (mapcar #'car css-property-alist)
452 "Identifiers for properties.")
454 (defconst css-value-class-alist
456 "xx-small" "x-small" "small" "medium" "large" "x-large"
460 (attachment "scroll" "fixed" "local")
461 (bg-image image "none")
462 (bg-layer bg-image position repeat-style attachment box)
463 (bg-size length percentage "auto" "cover" "contain")
464 (box "border-box" "padding-box" "content-box")
466 "aqua" "black" "blue" "fuchsia" "gray" "green" "lime" "maroon"
467 "navy" "olive" "orange" "purple" "red" "silver" "teal" "white"
468 "yellow" "transparent")
469 (common-lig-values "common-ligatures" "no-common-ligatures")
470 (contextual-alt-values "contextual" "no-contextual")
471 (counter "counter()" "counters()")
472 (discretionary-lig-values
473 "discretionary-ligatures" "no-discretionary-ligatures")
474 (east-asian-variant-values
475 "jis78" "jis83" "jis90" "jis04" "simplified" "traditional")
476 (east-asian-width-values "full-width" "proportional-width")
477 (family-name "Courier" "Helvetica" "Times")
478 (feature-tag-value string integer "on" "off")
480 "blur()" "brightness()" "contrast()" "drop-shadow()"
481 "grayscale()" "hue-rotate()" "invert()" "opacity()" "sepia()"
483 (filter-function-list filter-function uri)
485 bg-image position repeat-style attachment box color)
486 (font-variant-css21 "normal" "small-caps")
489 "serif" "sans-serif" "cursive" "fantasy" "monospace")
490 (generic-voice "male" "female" "child")
492 linear-gradient radial-gradient repeating-linear-gradient
493 repeating-radial-gradient)
494 (historical-lig-values
495 "historical-ligatures" "no-historical-ligatures")
496 (image uri image-list element-reference gradient)
497 (image-list "image()")
499 (length "calc()" number)
500 (line-height "normal" number length percentage)
502 "none" "hidden" "dotted" "dashed" "solid" "double" "groove"
503 "ridge" "inset" "outset")
504 (line-width length "thin" "medium" "thick")
505 (linear-gradient "linear-gradient()")
506 (margin-width "auto" length percentage)
508 (numeric-figure-values "lining-nums" "oldstyle-nums")
509 (numeric-fraction-values "diagonal-fractions" "stacked-fractions")
510 (numeric-spacing-values "proportional-nums" "tabular-nums")
511 (padding-width length percentage)
513 "left" "center" "right" "top" "bottom" percentage length)
514 (radial-gradient "radial-gradient()")
515 (relative-size "larger" "smaller")
517 "repeat-x" "repeat-y" "repeat" "space" "round" "no-repeat")
518 (repeating-linear-gradient "repeating-linear-gradient()")
519 (repeating-radial-gradient "repeating-radial-gradient()")
520 (shadow "inset" length color)
522 (single-animation-direction
523 "normal" "reverse" "alternate" "alternate-reverse")
524 (single-animation-fill-mode "none" "forwards" "backwards" "both")
525 (single-animation-iteration-count "infinite" number)
526 (single-animation-name "none" identifier)
527 (single-animation-play-state "running" "paused")
528 (single-timing-function single-transition-timing-function)
530 "none" single-transition-property time
531 single-transition-timing-function)
532 (single-transition-property "all" identifier)
533 (single-transition-timing-function
534 "ease" "linear" "ease-in" "ease-out" "ease-in-out" "step-start"
535 "step-end" "steps()" "cubic-bezier()")
536 (specific-voice identifier)
540 "matrix()" "translate()" "translateX()" "translateY()" "scale()"
541 "scaleX()" "scaleY()" "rotate()" "skew()" "skewX()" "skewY()"
542 "matrix3d()" "translate3d()" "translateZ()" "scale3d()"
543 "scaleZ()" "rotate3d()" "rotateX()" "rotateY()" "rotateZ()"
546 (width length percentage "auto")
549 "Property value classes and their values.
550 The format is similar to that of `css-property-alist', except
551 that the CARs aren't actual CSS properties, but rather a name for
552 a class of values, and that symbols in the CDRs always refer to
553 other entries in this list, not to properties.
555 The following classes have been left out above because they
556 cannot be completed sensibly: `element-reference', `id',
557 `identifier', `percentage', and `string'.")
559 (defcustom css-electric-keys '(?\} ?\;) ;; '()
560 "Self inserting keys which should trigger re-indentation."
562 :type '(repeat character)
563 :options '((?\} ?\;))
566 (defvar css-mode-syntax-table
567 (let ((st (make-syntax-table)))
569 (modify-syntax-entry ?/ ". 14" st)
570 (modify-syntax-entry ?* ". 23b" st)
572 (modify-syntax-entry ?\" "\"" st)
573 (modify-syntax-entry ?\' "\"" st)
575 (modify-syntax-entry ?\{ "(}" st)
576 (modify-syntax-entry ?\} "){" st)
577 ;; Args in url(...) thingies and other "function calls".
578 (modify-syntax-entry ?\( "()" st)
579 (modify-syntax-entry ?\) ")(" st)
580 ;; To match attributes in selectors.
581 (modify-syntax-entry ?\[ "(]" st)
582 (modify-syntax-entry ?\] ")[" st)
583 ;; Special chars that sometimes come at the beginning of words.
584 (modify-syntax-entry ?@ "'" st)
585 ;; (modify-syntax-entry ?: "'" st)
586 (modify-syntax-entry ?# "'" st)
587 ;; Distinction between words and symbols.
588 (modify-syntax-entry ?- "_" st)
592 (defconst css--uri-re
594 "url\\((\\)[[:space:]]*\\(?:\\\\.\\|[^()[:space:]\n'\"]\\)+"
595 "[[:space:]]*\\()\\)")))
597 (defconst css-syntax-propertize-function
598 (syntax-propertize-rules
599 (css--uri-re (1 "|") (2 "|"))))
601 (defconst css-escapes-re
602 "\\\\\\(?:[^\000-\037\177]\\|[0-9a-fA-F]+[ \n\t\r\f]?\\)")
603 (defconst css-nmchar-re (concat "\\(?:[-[:alnum:]]\\|" css-escapes-re "\\)"))
604 (defconst css-nmstart-re (concat "\\(?:[[:alpha:]]\\|" css-escapes-re "\\)"))
605 (defconst css-ident-re ;; (concat css-nmstart-re css-nmchar-re "*")
606 ;; Apparently, "at rules" names can start with a dash, e.g. @-moz-keyframes.
607 (concat css-nmchar-re "+"))
608 (defconst css-proprietary-nmstart-re ;; Vendor-specific properties.
609 (concat "[-_]" (regexp-opt '("ms" "moz" "o" "khtml" "webkit")) "-"))
610 (defconst css-name-re (concat css-nmchar-re "+"))
612 (defconst scss--hash-re "#\\(?:{[$-_[:alnum:]]+}\\|[[:alnum:]]+\\)")
614 (defface css-selector '((t :inherit font-lock-function-name-face))
615 "Face to use for selectors."
617 (defface css-property '((t :inherit font-lock-variable-name-face))
618 "Face to use for properties."
620 (defface css-proprietary-property '((t :inherit (css-property italic)))
621 "Face to use for vendor-specific properties.")
623 (defun css--font-lock-keywords (&optional sassy)
624 `((,(concat "!\\s-*" (regexp-opt css--bang-ids))
625 (0 font-lock-builtin-face))
626 ;; Atrules keywords. IDs not in css-at-ids are valid (ignored).
627 ;; In fact the regexp should probably be
628 ;; (,(concat "\\(@" css-ident-re "\\)\\([ \t\n][^;{]*\\)[;{]")
629 ;; (1 font-lock-builtin-face))
630 ;; Since "An at-rule consists of everything up to and including the next
631 ;; semicolon (;) or the next block, whichever comes first."
632 (,(concat "@" css-ident-re) (0 font-lock-builtin-face))
634 (,(concat "--" css-ident-re) (0 font-lock-variable-name-face))
636 ;; FIXME: attribute selectors don't work well because they may contain
637 ;; strings which have already been highlighted as f-l-string-face and
638 ;; thus prevent this highlighting from being applied (actually now that
639 ;; I use `keep' this should work better). But really the part of the
640 ;; selector between [...] should simply not be highlighted.
644 ;; We don't allow / as first char, so as not to
645 ;; take a comment as the beginning of a selector.
646 "[^@/:{}() \t\n][^:{}()]+"
647 ;; Same as for non-sassy except we do want to allow { and }
648 ;; chars in selectors in the case of #{$foo}
649 ;; variable interpolation!
650 (concat "\\(?:" scss--hash-re
651 "\\|[^@/:{}() \t\n#]\\)"
652 "[^:{}()#]*\\(?:" scss--hash-re "[^:{}()#]*\\)*"))
653 ;; Even though pseudo-elements should be prefixed by ::, a
654 ;; single colon is accepted for backward compatibility.
655 "\\(?:\\(:" (regexp-opt (append css-pseudo-class-ids
656 css-pseudo-element-ids) t)
657 "\\|\\::" (regexp-opt css-pseudo-element-ids t) "\\)"
661 (concat "[^:{}()\n#]*\\(?:" scss--hash-re "[^:{}()\n#]*\\)*"))
663 "\\)\\(?:\n[ \t]*\\)*{")
664 (1 'css-selector keep))
665 ;; In the above rule, we allow the open-brace to be on some subsequent
666 ;; line. This will only work if we properly mark the intervening text
667 ;; as being part of a multiline element (and even then, this only
668 ;; ensures proper refontification, but not proper discovery).
669 ("^[ \t]*{" (0 (save-excursion
670 (goto-char (match-beginning 0))
671 (skip-chars-backward " \n\t")
672 (put-text-property (point) (match-end 0)
673 'font-lock-multiline t)
676 ;; Properties. Again, we don't limit ourselves to css-property-ids.
677 (,(concat "\\(?:[{;]\\|^\\)[ \t]*\\("
678 "\\(?:\\(" css-proprietary-nmstart-re "\\)\\|"
679 css-nmstart-re "\\)" css-nmchar-re "*"
681 (1 (if (match-end 2) 'css-proprietary-property 'css-property)))
682 ;; Make sure the parens in a url(...) expression receive the
683 ;; default face. This is done because the parens may sometimes
684 ;; receive generic string delimiter syntax (see
685 ;; `css-syntax-propertize-function').
687 (1 'default t) (2 'default t))))
689 (defvar css-font-lock-keywords (css--font-lock-keywords))
691 (defvar css-font-lock-defaults
692 '(css-font-lock-keywords nil t))
694 (defcustom css-indent-offset 4
695 "Basic size of one indentation step."
700 (defconst css-smie-grammar
702 (smie-precs->prec2 '((assoc ";") (assoc ",") (left ":")))))
704 (defun css-smie--forward-token ()
706 ((and (eq (char-before) ?\})
707 (scss-smie--not-interpolation-p)
708 ;; FIXME: If the next char is not whitespace, what should we do?
709 (or (memq (char-after) '(?\s ?\t ?\n))
710 (looking-at comment-start-skip)))
711 (if (memq (char-after) '(?\s ?\t ?\n))
712 (forward-char 1) (forward-comment 1))
714 ((progn (forward-comment (point-max))
715 (looking-at "[;,:]"))
716 (forward-char 1) (match-string 0))
717 (t (smie-default-forward-token))))
719 (defun css-smie--backward-token ()
721 (forward-comment (- (point)))
723 ;; FIXME: If the next char is not whitespace, what should we do?
724 ((and (eq (char-before) ?\}) (scss-smie--not-interpolation-p)
725 (> pos (point))) ";")
726 ((memq (char-before) '(?\; ?\, ?\:))
727 (forward-char -1) (string (char-after)))
728 (t (smie-default-backward-token)))))
730 (defun css-smie-rules (kind token)
731 (pcase (cons kind token)
732 (`(:elem . basic) css-indent-offset)
734 (`(:list-intro . ,(or `";" `"")) t) ;"" stands for BOB (bug#15467).
736 (when (or (smie-rule-hanging-p) (smie-rule-bolp))
737 (smie-backward-sexp ";")
738 (smie-indent-virtual)))
739 (`(:before . ,(or "{" "("))
740 (if (smie-rule-hanging-p) (smie-rule-parent 0)))))
744 (defun css--complete-property ()
745 "Complete property at point."
748 (skip-chars-backward "-[:alnum:]")
749 (let ((start (point)))
750 (skip-chars-backward " \t\r\n")
751 (when (memq (char-before) '(?\{ ?\;))
752 (list start pos css-property-ids))))))
754 (defun css--complete-bang-rule ()
755 "Complete bang-rule at point."
758 (skip-chars-backward "-[:alnum:]")
759 (when (eq (char-before) ?\!)
760 (list (point) pos css--bang-ids)))))
762 (defun css--complete-pseudo-element-or-class ()
763 "Complete pseudo-element or pseudo-class at point."
766 (skip-chars-backward "-[:alnum:]")
767 (when (eq (char-before) ?\:)
769 (if (eq (char-before (- (point) 1)) ?\:)
770 css-pseudo-element-ids
771 css-pseudo-class-ids))))))
773 (defun css--complete-at-rule ()
774 "Complete at-rule (statement beginning with `@') at point."
777 (skip-chars-backward "-[:alnum:]")
778 (when (eq (char-before) ?\@)
779 (list (point) pos css--at-ids)))))
781 (defvar css--property-value-cache
782 (make-hash-table :test 'equal :size (length css-property-alist))
783 "Cache of previously completed property values.")
785 (defun css--value-class-lookup (value-class)
786 "Return a list of value completion candidates for VALUE-CLASS.
787 Completion candidates are looked up in `css-value-class-alist' by
788 the symbol VALUE-CLASS."
794 (css--value-class-lookup value)))
795 (cdr (assq value-class css-value-class-alist)))))
797 (defun css--property-values (property)
798 "Return a list of value completion candidates for PROPERTY.
799 Completion candidates are looked up in `css-property-alist' by
800 the string PROPERTY."
801 (or (gethash property css--property-value-cache)
808 (or (css--value-class-lookup value)
809 (css--property-values (symbol-name value)))))
810 (cdr (assoc property css-property-alist))))))
811 (puthash property values css--property-value-cache))))
813 (defun css--complete-property-value ()
814 "Complete property value at point."
817 (re-search-backward ":[^/]" (line-beginning-position) t)
818 (let ((property-end (point)))
819 (skip-chars-backward "-[:alnum:]")
820 (let ((property (buffer-substring (point) property-end)))
821 (car (member property css-property-ids)))))))
825 (skip-chars-backward "[:graph:]")
827 (cons "inherit" (css--property-values property))))))))
829 (defvar css--html-tags (mapcar #'car html-tag-alist)
831 Used to provide completion of HTML tags in selectors.")
833 (defvar css--nested-selectors-allowed nil
834 "Non-nil if nested selectors are allowed in the current mode.")
835 (make-variable-buffer-local 'css--nested-selectors-allowed)
837 ;; TODO: Currently only supports completion of HTML tags. By looking
838 ;; at open HTML mode buffers we should be able to provide completion
839 ;; of user-defined classes and IDs too.
840 (defun css--complete-selector ()
841 "Complete part of a CSS selector at point."
842 (when (or (= (nth 0 (syntax-ppss)) 0) css--nested-selectors-allowed)
845 (skip-chars-backward "-[:alnum:]")
846 (list (point) end css--html-tags)))))
848 (defun css-completion-at-point ()
849 "Complete current symbol at point.
850 Currently supports completion of CSS properties, property values,
851 pseudo-elements, pseudo-classes, at-rules, and bang-rules."
852 (or (css--complete-bang-rule)
853 (css--complete-property-value)
854 (css--complete-pseudo-element-or-class)
855 (css--complete-at-rule)
856 (seq-let (prop-beg prop-end prop-table) (css--complete-property)
857 (seq-let (sel-beg sel-end sel-table) (css--complete-selector)
858 (when (or prop-table sel-table)
860 (list prop-beg prop-end)
861 (list sel-beg sel-end))
862 ,(completion-table-merge prop-table sel-table)))))))
865 (define-derived-mode css-mode prog-mode "CSS"
866 "Major mode to edit Cascading Style Sheets."
867 (setq-local font-lock-defaults css-font-lock-defaults)
868 (setq-local comment-start "/*")
869 (setq-local comment-start-skip "/\\*+[ \t]*")
870 (setq-local comment-end "*/")
871 (setq-local comment-end-skip "[ \t]*\\*+/")
872 (setq-local syntax-propertize-function
873 css-syntax-propertize-function)
874 (setq-local fill-paragraph-function #'css-fill-paragraph)
875 (setq-local adaptive-fill-function #'css-adaptive-fill)
876 (setq-local add-log-current-defun-function #'css-current-defun-name)
877 (smie-setup css-smie-grammar #'css-smie-rules
878 :forward-token #'css-smie--forward-token
879 :backward-token #'css-smie--backward-token)
880 (setq-local electric-indent-chars
881 (append css-electric-keys electric-indent-chars))
882 (add-hook 'completion-at-point-functions
883 #'css-completion-at-point nil 'local))
885 (defvar comment-continue)
887 (defun css-fill-paragraph (&optional justify)
889 ;; Fill succeeding comment when invoked right before a multi-line
891 (when (save-excursion
893 (comment-search-forward (point-at-eol) t))
894 (goto-char (match-end 0)))
895 (let ((ppss (syntax-ppss))
896 (eol (line-end-position)))
900 (goto-char (nth 8 ppss))
903 (setq eol (point)))))
904 ;; Filling inside a comment whose comment-end marker is not \n.
905 ;; This code is meant to be generic, so that it works not only for
906 ;; css-mode but for all modes.
908 (narrow-to-region (nth 8 ppss) eol)
909 (comment-normalize-vars) ;Will define comment-continue.
910 (let ((fill-paragraph-function nil)
912 (if (and comment-continue
913 (string-match "[^ \t]" comment-continue))
914 (concat "\\(?:[ \t]*\\(?:"
915 (regexp-quote comment-continue) "\\|"
916 comment-start-skip "\\|"
917 comment-end-skip "\\)\\)?"
918 "\\(?:" paragraph-separate "\\)")
921 (if (and comment-continue
922 (string-match "[^ \t]" comment-continue))
923 (concat "\\(?:[ \t]*" (regexp-quote comment-continue)
924 "\\)?\\(?:" paragraph-start "\\)")
926 (fill-paragraph justify)
927 ;; Don't try filling again.
930 ((and (null (nth 8 ppss))
934 (when (<= (point) eol)
935 (setq ppss (syntax-ppss)))))))
936 (goto-char (nth 1 ppss))
937 (let ((end (save-excursion
938 (ignore-errors (forward-sexp 1) (copy-marker (point) t)))))
940 (while (re-search-forward "[{;}]" end t)
942 ;; This is a false positive inside a string or comment.
943 ((nth 8 (syntax-ppss)) nil)
944 ;; This is a false positive when encountering an
945 ;; interpolated variable (bug#19751).
946 ((eq (char-before (- (point) 1)) ?#) nil)
947 ((eq (char-before) ?\})
950 (skip-chars-backward " \t")
951 (when (and (not (bolp))
952 (scss-smie--not-interpolation-p))
957 (setq eol (line-end-position))
958 (and (forward-comment 1)
960 ;; A multi-line comment should be on its own line.
961 (save-excursion (forward-comment -1)
962 (when (< (point) eol)
965 (if (< (point) eol) (newline)))))
966 (goto-char (nth 1 ppss))
967 (indent-region (line-beginning-position 2) end)
968 ;; Don't use the default filling code.
971 (defun css-adaptive-fill ()
972 (when (looking-at "[ \t]*/\\*[ \t]*")
973 (let ((str (match-string 0)))
974 (and (string-match "/\\*" str)
975 (replace-match " *" t t str)))))
977 (defun css-current-defun-name ()
978 "Return the name of the CSS section at point, or nil."
980 (let ((max (max (point-min) (- (point) 1600)))) ; approx 20 lines back
981 (when (search-backward "{" max t)
982 (skip-chars-backward " \t\r\n")
984 (if (looking-at "^[ \t]*\\([^{\r\n]*[^ {\t\r\n]\\)")
985 (match-string-no-properties 1))))))
989 (defvar scss-mode-syntax-table
990 (let ((st (make-syntax-table css-mode-syntax-table)))
991 (modify-syntax-entry ?/ ". 124" st)
992 (modify-syntax-entry ?\n ">" st)
993 ;; Variable names are prefixed by $.
994 (modify-syntax-entry ?$ "'" st)
997 (defun scss-font-lock-keywords ()
998 (append `((,(concat "$" css-ident-re) (0 font-lock-variable-name-face)))
999 (css--font-lock-keywords 'sassy)
1000 `((,(concat "@mixin[ \t]+\\(" css-ident-re "\\)[ \t]*(")
1001 (1 font-lock-function-name-face)))))
1003 (defun scss-smie--not-interpolation-p ()
1006 (or (zerop (skip-chars-backward "-[:alnum:]"))
1007 (not (looking-back "#{\\$" (- (point) 3))))))
1009 ;;;###autoload (add-to-list 'auto-mode-alist '("\\.scss\\'" . scss-mode))
1011 (define-derived-mode scss-mode css-mode "SCSS"
1012 "Major mode to edit \"Sassy CSS\" files."
1013 (setq-local comment-start "// ")
1014 (setq-local comment-end "")
1015 (setq-local comment-continue " *")
1016 (setq-local comment-start-skip "/[*/]+[ \t]*")
1017 (setq-local comment-end-skip "[ \t]*\\(?:\n\\|\\*+/\\)")
1018 (setq-local css--at-ids (append css-at-ids scss-at-ids))
1019 (setq-local css--bang-ids (append css-bang-ids scss-bang-ids))
1020 (setq-local css--nested-selectors-allowed t)
1021 (setq-local font-lock-defaults
1022 (list (scss-font-lock-keywords) nil t)))
1025 ;;; css-mode.el ends here