Skip to content

CSS

Files ending in .css are formatted by the CSS pack (rainbow_fmt.languages.css, grammar tree-sitter-css).

a,b>c{color:red;margin:0 .5px}

becomes

a,
b > c {
    color: red;
    margin: 0 .5px;
}

What changes and what does not

The pack changes layout only; every token is printed as written, so #FFF, .5 and quotes stay as they are.

  • Whitespace between tokens becomes one space where the source had any, none where it had none (url(a.png) stays together).
  • A comma is followed by one space; selector combinators (>, +, ~) get one space on each side; !important is preceded by one space; a feature query colon is followed by one ((min-width: 100px)).
  • selector {, property: value;, one declaration per line (see rule_wrap), blocks indented with core.indent_*.
  • A value with top-level commas that does not fit is broken after the colon with one item per line:
transition:
    opacity 0.3s ease-in-out,
    transform 0.3s ease-in-out;
  • Comments are kept: a comment on the line where a declaration or rule ends stays there; others get their own line. A comment between a property and its colon keeps the declaration as written.
  • Blank lines between rules and declarations are kept, at most core.max_blank_lines (default 1).

Inline directives (/* rainbow: off */, /* prettier-ignore */, /* rainbow: set … */) keep rules and declarations as written or change options for one of them (configuration.md).

Options

Key Values Default
language.css.selector_list "one_per_line"; "fit": on one line when the selectors and { fit "one_per_line"
language.css.rule_wrap "always" broken; "fit" one line when it fits (a { color: red; }); "preserve" broken if the source has a line break after {, otherwise as "fit" "always"
language.css.last_semicolon "always", "never", "preserve": the ; after a block's last declaration "always"

rule_wrap applies to blocks of declarations (including @font-face); a block that contains rules (@media, nesting) always breaks.

Limitations

  • The grammar (tree-sitter-css 0.25) does not parse some valid CSS, for example @page :first and nested selectors such as .b &; such files are reported as syntax errors and left unchanged.
  • No token normalizations yet (colour and keyword case, leading zeros, quotes).