tinyparrot

tinyparrot is a simple yet powerful CLI and Node.js API for optimizing CSS stylesheets.

It combines several proven tools into a single workflow:

• vendor prefixing via autoprefixer
• CSS minification via cssnano
• duplicate rule removal
• optional unused selector removal via PurgeCSS

Designed to work out of the box with modern frontend stacks and CI pipelines.

Features

• ✅ Autoprefix CSS for target browsers
• ✅ Minify CSS output
• ✅ Remove duplicate rules
• ✅ Optional property sorting
• ✅ Purge unused selectors (PurgeCSS)
• ✅ CLI and programmatic API
• ✅ Zero configuration by default
• ✅ Pure JavaScript (no TypeScript, no build step)
• ✅ ESM compatible

Installation

Local (recommended)

npm install --save-dev css-optimizer

or

pnpm add -D css-optimizer

or

yarn add -D css-optimizer

Global (optional)

npm install -g css-optimizer

CLI Usage

Basic optimization

npx tinyparrot --in styles.css --out styles.min.css

This will:

• add vendor prefixes
• remove duplicate rules
• minify the CSS

Using stdout (pipes)

npx css-optimizer --in styles.css > styles.min.css

Disable specific steps

npx css-optimizer --in styles.css --out styles.min.css \
  --no-autoprefix \
  --no-minify

Available disable flags:

• --no-autoprefix
• --no-minify
• --no-dedupe

Sort CSS properties

npx css-optimizer --in styles.css --out styles.min.css --sort

⚠️ Property sorting may cause large diffs in version control.

PurgeCSS (remove unused styles)

PurgeCSS removes selectors that are not found in your HTML / JS / Vue / React files.

Example

npx css-optimizer \
  --in styles.css \
  --out styles.purged.css \
  --purge \
  --content "src/**/*.{html,js,ts,tsx,vue}"

Important notes

• When --purge is enabled, --content is required
• PurgeCSS runs before minification

Safelist (dynamic selectors)

If your project uses dynamically generated class names:

npx css-optimizer \
  --in styles.css \
  --out styles.purged.css \
  --purge \
  --content "src/**/*.{html,js,vue}" \
  --safelist active open modal

CLI safelist supports strings only.

The API supports both strings and RegExp.

CLI Options

| Option | Description | | ----------------------- | -------------------------------- | | --in <file> | Input CSS file (required) | | --out <file> | Output file (defaults to stdout) | | --no-autoprefix | Disable autoprefixer | | --no-minify | Disable minification | | --no-dedupe | Disable duplicate removal | | --sort | Sort CSS properties | | --purge | Enable PurgeCSS | | --content <globs...> | Files to scan for used selectors | | --safelist <items...> | Safelisted selectors |

Node.js API

Basic usage

import { optimizeCss } from "css-optimizer";

const inputCss = `
.button {
  display: flex;
  display: flex;
}
`;

const { css } = await optimizeCss(inputCss);

console.log(css);

Full example

import { optimizeCss } from "css-optimizer";

const { css } = await optimizeCss(inputCss, {
  autoprefix: true,
  minify: true,
  dedupe: true,
  sort: false,
  purge: true,
  content: ["src/**/*.html", "src/**/*.js"],
  safelist: ["active", /^modal-/]
});

API Options

optimizeCss(css, {
  from?: string,
  to?: string,

  autoprefix?: boolean,
  minify?: boolean,
  dedupe?: boolean,
  sort?: boolean,

  purge?: boolean,
  content?: string[],
  safelist?: (string | RegExp)[]
})

Typical Use Cases

• 📦 Preparing CSS for production
• ⚡ Asset optimization in CI pipelines
• 🧹 Cleaning up utility-heavy CSS (e.g. Tailwind)
• 🏗 Integration with Vite, Webpack, Nuxt, Next.js
• 🧪 One-off CSS optimization scripts

Browser Support

Browser compatibility depends on autoprefixer and browserslist.

If your project defines a browserslist configuration, it will be picked up automatically.

Limitations

• CLI safelist does not support RegExp
• Source maps are not supported yet
• No config file support (.cssoptimizerrc) yet

Roadmap

• [ ] Source map support
• [ ] --stdin / --stdout flags
• [ ] Config file support
• [ ] Presets (safe, aggressive)
• [ ] PostCSS plugin mode
• [ ] Extended CLI safelist support