Function: css-ts-mode

css-ts-mode is an autoloaded, interactive and byte-compiled function defined in css-mode.el.gz.

Signature

(css-ts-mode)

Documentation

Major mode to edit Cascading Style Sheets (CSS).

This mode provides syntax highlighting, indentation, completion, and documentation lookup for CSS, based on the tree-sitter library.

Use C-M-i (completion-at-point) to complete CSS properties, property values, pseudo-elements, pseudo-classes, at-rules, bang-rules, and HTML tags, classes and IDs. Completion candidates for HTML class names and IDs are found by looking through open HTML mode buffers.

Use C-h S (info-lookup-symbol) to look up documentation of CSS properties, at-rules, pseudo-classes, and pseudo-elements on the Mozilla Developer Network (MDN).

Use M-q (fill-paragraph) to reformat CSS declaration blocks. It can also be used to fill comments.

C-M-i completion-at-point
C-M-q prog-indent-sexp
C-c C-f css-cycle-color-format
C-h S css-lookup-symbol
M-q prog-fill-reindent-defun

In addition to any hooks its parent mode css-base-mode might have run, this mode runs the hook css-ts-mode-hook, as the final or penultimate step during initialization.

Probably introduced at or before Emacs version 29.1.

Key Bindings

Source Code

;; Defined in /usr/src/emacs/lisp/textmodes/css-mode.el.gz
;;;###autoload
(define-derived-mode css-ts-mode css-base-mode "CSS"
  "Major mode to edit Cascading Style Sheets (CSS).
\\<css-ts-mode-map>

This mode provides syntax highlighting, indentation, completion,
and documentation lookup for CSS, based on the tree-sitter
library.

Use `\\[completion-at-point]' to complete CSS properties,
property values, pseudo-elements, pseudo-classes, at-rules,
bang-rules, and HTML tags, classes and IDs.  Completion
candidates for HTML class names and IDs are found by looking
through open HTML mode buffers.

Use `\\[info-lookup-symbol]' to look up documentation of CSS
properties, at-rules, pseudo-classes, and pseudo-elements on the
Mozilla Developer Network (MDN).

Use `\\[fill-paragraph]' to reformat CSS declaration blocks.  It
can also be used to fill comments.

\\{css-mode-map}"
  :syntax-table css-mode-syntax-table
  (when (treesit-ready-p 'css)
    ;; Borrowed from `css-mode'.
    (setq-local syntax-propertize-function
                css-syntax-propertize-function)
    (add-hook 'completion-at-point-functions
              #'css-completion-at-point nil 'local)
    (setq-local fill-paragraph-function #'css-fill-paragraph)
    (setq-local adaptive-fill-function #'css-adaptive-fill)
    ;; `css--fontify-region' first calls the default function, which
    ;; will call tree-sitter's function, then it fontifies colors.
    (setq-local font-lock-fontify-region-function #'css--fontify-region)

    ;; Tree-sitter specific setup.
    (treesit-parser-create 'css)
    (setq-local treesit-simple-indent-rules css--treesit-indent-rules)
    (setq-local treesit-defun-type-regexp "rule_set")
    (setq-local treesit-defun-name-function #'css--treesit-defun-name)
    (setq-local treesit-font-lock-settings css--treesit-settings)
    (setq-local treesit-font-lock-feature-list
                '((selector comment query keyword)
                  (property constant string)
                  (error variable function operator bracket)))
    (setq-local treesit-simple-imenu-settings
                `(( nil ,(rx bos (or "rule_set" "media_statement") eos)
                    nil nil)))
    (treesit-major-mode-setup)

    (add-to-list 'auto-mode-alist '("\\.css\\'" . css-ts-mode))))