csskit

Refreshing CSS

Beautiful, fast, and powerful CSS tooling with zero configuration

Get Started View on GitHub

Everything you need for modern CSS

💅Format

Opinionated code formatting to keep your CSS consistent

🔍Lint

Find mistakes and get helpful suggestions to write better CSS

⚡Minify

Blazing fast compression that optimizes your CSS for production

🔄Transpile

Use modern CSS features with automatic browser compatibility

📦Bundle

Smart bundling that combines and optimizes your CSS files

🧪Analyze

Deep insights into your CSS with color analysis and usage reports

csskit fmt styles.css

Before

body{color:red;background:white;border-color:#ff0000}

After

body {
	color: red;
	background: white;
	border-color: #ff0000;
}

csskit lint styles.css

Input

.btn {
	color: #ff0;
	backgrond: blue;
	margin: 10px 5px 10px;
}

Suggestions

					
  × Invalid property name
   ╭─[example.css:21:15]
 2 │		color: #ff000;
 3 │		backgrond: #ff000;
   ·		────┬────
   ·		    ╰──  Did you mean background?
 4 │		margin: 10px 5px 10px;
   ╰────

csskit min styles.css

Before

.header {
	background-color: #ffffff;
	padding: 20px 16px 20px 16px;
	margin: 0 auto;
	border-radius: 8px;
}

After

.header{background:#fff;padding:20px 16px;margin:0 auto;border-radius:8px}

csskit transpile styles.css

Before

:heading {
  font-weight:600;
}

After

:is(h1,h2,h3,h4,h5,h6) {
  font-weight:600;
}

csskit bundle src/styles/

Multiple files

📁 src/styles/
├── base.css
├── components.css
└── utilities.css

Bundled output

.btn{padding:8px 16px;border:none}.card{background:#fff;border-radius:4px} .mt-4{margin-top:1rem}

Why csskit?

⚡ Blazing Fast

Built for performance. Process thousands of CSS files in milliseconds.

🚀 Zero Config

Works out of the box with sensible defaults. No complex configuration files to manage.

🔧 All-in-One

Replace multiple tools with one. Format, lint, minify, and analyze in a single package.

🌟 Modern Standards

Built on the latest CSS specifications, with weekly updates.