format-css

Fast, small, zero-config library to format CSS with basic rules. The design goal is to format CSS in a way that makes it easy to inspect. Bundle size and runtime speed are more important than versatility and extensibility.

Example output

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?

• StackBlitz example using CommonJS
• StackBlitz example using ES Modules

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. Multiline tokens like Selectors, Values, etc. are rendered on a single line
10. Unknown syntax is rendered as-is, with multi-line formatting kept intact

Minify CSS

This package also exposes a minifier function since minifying CSS follows many of the same rules as formatting.

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

let minified = minify("a {}");

// which is an alias for

let formatted_mini = format("a {}", { minify: true });

Acknowledgements

• Thanks to CSSTree for providing the necessary parser and the interfaces for our CSS Types (the bold elements in the list above)

Related projects

• Format CSS online - See this minifier in action online!
• CSS Analyzer - The best CSS analyzer that powers all analysis on projectwallace.com
• Minify CSS The exact opposite of this library: fast, small, zero-config CSS minifier.