Use Lightning CSS to transform and minify CSS in Vite

Install lightningcss and browserslist, then configure both CSS transformation and minification.

npm install -D lightningcss browserslist

// vite.config.ts
import { defineConfig } from 'vite'
import browserslist from 'browserslist'
import { browserslistToTargets } from 'lightningcss'

export default defineConfig({
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%'))
    }
  },
  build: {
    cssMinify: 'lightningcss'
  }
})

Merge these options into your existing Vite config. Adjust the browser query for the browsers your project supports.

Vite documentation · Lightning CSS browser targets.