;; - electric ; and }
;; - filling code with auto-fill-mode
;; - fix font-lock errors with multi-line selectors
+;; - support completion of user-defined classes names and IDs
;;; Code:
(require 'seq)
+(require 'sgml-mode)
(require 'smie)
(defgroup css nil
(bg-size length percentage "auto" "cover" "contain")
(box "border-box" "padding-box" "content-box")
(color
- "aqua" "black" "blue" "fuchsia" "gray" "green" "lime" "maroon"
- "navy" "olive" "orange" "purple" "red" "silver" "teal" "white"
- "yellow" "transparent")
+ "rgb()" "rgba()" "hsl()" "hsla()" named-color "transparent"
+ "currentColor")
(common-lig-values "common-ligatures" "no-common-ligatures")
(contextual-alt-values "contextual" "no-contextual")
(counter "counter()" "counters()")
(line-width length "thin" "medium" "thick")
(linear-gradient "linear-gradient()")
(margin-width "auto" length percentage)
+ (named-color
+ "aliceblue" "antiquewhite" "aqua" "aquamarine" "azure" "beige"
+ "bisque" "black" "blanchedalmond" "blue" "blueviolet" "brown"
+ "burlywood" "cadetblue" "chartreuse" "chocolate" "coral"
+ "cornflowerblue" "cornsilk" "crimson" "cyan" "darkblue"
+ "darkcyan" "darkgoldenrod" "darkgray" "darkgreen" "darkkhaki"
+ "darkmagenta" "darkolivegreen" "darkorange" "darkorchid"
+ "darkred" "darksalmon" "darkseagreen" "darkslateblue"
+ "darkslategray" "darkturquoise" "darkviolet" "deeppink"
+ "deepskyblue" "dimgray" "dodgerblue" "firebrick" "floralwhite"
+ "forestgreen" "fuchsia" "gainsboro" "ghostwhite" "gold"
+ "goldenrod" "gray" "green" "greenyellow" "honeydew" "hotpink"
+ "indianred" "indigo" "ivory" "khaki" "lavender" "lavenderblush"
+ "lawngreen" "lemonchiffon" "lightblue" "lightcoral" "lightcyan"
+ "lightgoldenrodyellow" "lightgray" "lightgreen" "lightpink"
+ "lightsalmon" "lightseagreen" "lightskyblue" "lightslategray"
+ "lightsteelblue" "lightyellow" "lime" "limegreen" "linen"
+ "magenta" "maroon" "mediumaquamarine" "mediumblue" "mediumorchid"
+ "mediumpurple" "mediumseagreen" "mediumslateblue"
+ "mediumspringgreen" "mediumturquoise" "mediumvioletred"
+ "midnightblue" "mintcream" "mistyrose" "moccasin" "navajowhite"
+ "navy" "oldlace" "olive" "olivedrab" "orange" "orangered"
+ "orchid" "palegoldenrod" "palegreen" "paleturquoise"
+ "palevioletred" "papayawhip" "peachpuff" "peru" "pink" "plum"
+ "powderblue" "purple" "rebeccapurple" "red" "rosybrown"
+ "royalblue" "saddlebrown" "salmon" "sandybrown" "seagreen"
+ "seashell" "sienna" "silver" "skyblue" "slateblue" "slategray"
+ "snow" "springgreen" "steelblue" "tan" "teal" "thistle" "tomato"
+ "turquoise" "violet" "wheat" "white" "whitesmoke" "yellow"
+ "yellowgreen")
(number "calc()")
(numeric-figure-values "lining-nums" "oldstyle-nums")
(numeric-fraction-values "diagonal-fractions" "stacked-fractions")
(list (point) end
(cons "inherit" (css--property-values property))))))))
+(defvar css--html-tags (mapcar #'car html-tag-alist)
+ "List of HTML tags.
+Used to provide completion of HTML tags in selectors.")
+
+(defvar css--nested-selectors-allowed nil
+ "Non-nil if nested selectors are allowed in the current mode.")
+(make-variable-buffer-local 'css--nested-selectors-allowed)
+
+;; TODO: Currently only supports completion of HTML tags. By looking
+;; at open HTML mode buffers we should be able to provide completion
+;; of user-defined classes and IDs too.
+(defun css--complete-selector ()
+ "Complete part of a CSS selector at point."
+ (when (or (= (nth 0 (syntax-ppss)) 0) css--nested-selectors-allowed)
+ (save-excursion
+ (let ((end (point)))
+ (skip-chars-backward "-[:alnum:]")
+ (list (point) end css--html-tags)))))
+
(defun css-completion-at-point ()
"Complete current symbol at point.
Currently supports completion of CSS properties, property values,
pseudo-elements, pseudo-classes, at-rules, and bang-rules."
- (or (css--complete-property)
- (css--complete-bang-rule)
+ (or (css--complete-bang-rule)
(css--complete-property-value)
(css--complete-pseudo-element-or-class)
- (css--complete-at-rule)))
+ (css--complete-at-rule)
+ (seq-let (prop-beg prop-end prop-table) (css--complete-property)
+ (seq-let (sel-beg sel-end sel-table) (css--complete-selector)
+ (when (or prop-table sel-table)
+ `(,@(if prop-table
+ (list prop-beg prop-end)
+ (list sel-beg sel-end))
+ ,(completion-table-merge prop-table sel-table)))))))
;;;###autoload
(define-derived-mode css-mode prog-mode "CSS"
(setq-local comment-end-skip "[ \t]*\\(?:\n\\|\\*+/\\)")
(setq-local css--at-ids (append css-at-ids scss-at-ids))
(setq-local css--bang-ids (append css-bang-ids scss-bang-ids))
+ (setq-local css--nested-selectors-allowed t)
(setq-local font-lock-defaults
(list (scss-font-lock-keywords) nil t)))