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.

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);

Formatting rules

1. Every AtRule starts on a new line
2. Every Rule starts on a new line
3. Every Selector starts on a new line
4. A comma is placed after every Selector that’s not the last in the SelectorList
5. Every Block is indented with 1 tab more than the previous indentation level
6. Every Declaration starts on a new line
7. Every Declaration ends with a semicolon (;)
8. An empty line is placed after a Block, unless it’s the last in the surrounding Block
9. 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