csskit

🚀 Getting Started

Welcome to csskit! This guide will get you up and running in less than 5 minutes.

Quick Start

Warning

csskit is still alpha software! It is ready to experiment with and provide feedback but using it for production projects might result in bugs!

1. Install csskit

# Install globally (recommended for trying out)
npm install --global csskit@canary

# Or install in your project
npm install --save-dev csskit@canary

# Or use it once without installign
npx csskit@canary

2. Compress your first file

Given a CSS file:

/* styles.css - before minify */
body {
	color: red;
	background: white;
	margin: 0;
	padding: 10px;
}

.card {
	border: 1px solid #ccc;
	padding: 20px;
	margin: 10px;
}

Compress it with csskit:

csskit min styles.css
body {
	color: red;
	background: white;
	margin: 0;
	padding: 10px;
}
.card {
	border: 1px solid #ccc;
	padding: 20px;
	margin: 10px;
}

You'll see the minified output:

3. Try the other tools

# Lint for issues and suggestions
csskit lint styles.css

# Minify for production
csskit min styles.css

# Take many files and build them into a shared set of files:
csskit bundle entry1.css entry2.css --output css-dist/

# Analyze colors in your CSS
csskit colors styles.css

Installation Options

Global install - Use csskit anywhere:

npm install -g csskit
csskit fmt styles.css

Project install - Better for teams:

npm install --save-dev csskit
npx csskit fmt styles.css

Package scripts - Most convenient:

// package.json
{
	scripts: {
		"css:fmt": "csskit fmt src/**/*.css --write",
		"css:lint": "csskit lint src/**/*.css",
		"css:build": "csskit bundle src/entry-*.css -o dist/",
	},
}

Each script can be used:

  • npm run css:fmt
  • npm run css:lint
  • npm run css:build

What's Next?