format-css

Lightweight and fast library to format CSS with some very basic rules. Our design goal is to format CSS in such a way that it's easy to inspect. Bundle size and runtime speed are more important than versatility and extensibility.

My CSS is pretty bad, but at least it's nicely formatted

Example output

Example input-output of this formatter

Installation

npm install @projectwallace/format-css

Usage

import { format } from "@projectwallace/format-css";

let old_css = "/* Your old CSS here */";
let new_css = format(old_css);

Need more examples?

Formatting rules

Every AtRule starts on a new line
Every Rule starts on a new line
Every Selector starts on a new line
A comma is placed after every Selector that’s not the last in the SelectorList
Every Block is indented with 1 tab more than the previous indentation level
Every Declaration starts on a new line
Every Declaration ends with a semicolon (;)
An empty line is placed after a Block, unless it’s the last in the surrounding Block
Unknown syntax is rendered as-is

Acknowledgements

Thanks to CSSTree for providing the necessary parser and the interfaces for our CSS Types (the bold elements in the list above)
Thanks to Prettier and countless others for prior art