Skip to content

projectwallace/format-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Feb 4, 2025
917eb5c · Feb 4, 2025
Oct 11, 2024
Sep 20, 2024
Feb 4, 2025
Jun 2, 2024
May 26, 2023
Feb 18, 2024
Feb 4, 2025
Feb 4, 2025
Feb 4, 2025
Dec 13, 2023
Jun 2, 2024

Repository files navigation

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

/* TURN THIS: */

@layer base.normalize{@media (dynamic-range:high) or (color-gamut:p3){@supports (color:color(display-p3 0 0 0)){:where(html){--link:color(display-p3 .1 .4 1);--link-visited:color(display-p3 .6 .2 1)}}}}@layer base.normalize{:where(html) :where(dialog){background-color:var(--surface-1)}}

/* INTO THIS: */

@layer base.normalize {
	@media (dynamic-range: high) or (color-gamut: p3) {
		@supports (color: color(display-p3 0 0 0)) {
			:where(html) {
				--link: color(display-p3 .1 .4 1);
				--link-visited: color(display-p3 .6 .2 1);
			}
		}
	}
}

@layer base.normalize {
	:where(html) :where(dialog) {
		background-color: var(--surface-1);
	}
}

/* AND BACK AGAIN! */

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

  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