vite-plugin-clean-css

Optimize CSS for production using clean-css

Usage

This plugin minimizes CSS during production. It will minify CSS rules such as:

/* 832 bytes */
.translate-x-0 {
  --un-translate-x: 0;
  transform: translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
    translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
    rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
    rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y))
    scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y))
    scaleZ(var(--un-scale-z));
}
.translate-x-1 {
  --un-translate-x: 0.25rem;
  transform: translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
    translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
    rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
    rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y))
    scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y))
    scaleZ(var(--un-scale-z));
}

Will be minimized to:

/* 493 bytes */
.translate-x-0,
.translate-x-1 {
  transform: translate(var(--un-translate-x)) translateY(var(--un-translate-y))
    translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
    rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
    rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y))
    scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y))
    scaleZ(var(--un-scale-z));
}
.translate-x-0 {
  --un-translate-x: 0;
}
.translate-x-1 {
  --un-translate-x: 0.25rem;
}

Installation

npm install -D vite-plugin-clean-css

Setup

// vite.config.ts

import { defineConfig } from 'vite'
import CleanCss from 'vite-plugin-clean-css'

export default defineConfig({
  plugins: [
    CleanCss({
      level: {
        2: {
          mergeSemantically: true,
          restructureRules: true,
        },
      },
    }),
  ],
})

License

MIT License © 2023-PRESENT Alex Liu