unplugin-lightningcss

Lightning CSS integration for Vite, Rollup, esbuild, Webpack, Vue CLI, and more.

Installation

npm i -D unplugin-lightningcss

Vite

// vite.config.ts
import LightningCSS from 'unplugin-lightningcss/vite'

export default defineConfig({
  plugins: [LightningCSS()],
})

Rollup

Since Rollup does not support CSS out of the box, you need to use a CSS plugin like rollup-plugin-css-only.

// rollup.config.js
import css from 'rollup-plugin-css-only'
import LightningCSS from 'unplugin-lightningcss/rollup'

export default {
  plugins: [LightningCSS(), css()],
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'

build({
  plugins: [require('unplugin-lightningcss/esbuild')()],
})

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [require('unplugin-lightningcss/webpack')()],
}

Options

import { Features } from 'lightningcss'

export default {
  plugins: [
    LightningCSS({
      options: {
        include: Features.Nesting,
      },

      /**
       * Whether to export the transformed CSS as a default string export.
       * @default false
       */
      asString: false,
    }),
  ],
}

Sponsors

License

MIT License © 2023-PRESENT Kevin Deng