Lightning CSS integration for Vite, Rollup, esbuild, Webpack, Vue CLI, and more.
npm install unplugin-lightningcss[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![JSR][jsr-src]][jsr-href]
[![Unit Test][unit-test-src]][unit-test-href]
Lightning CSS integration for Vite, Rollup, esbuild, Webpack, Vue CLI, and more.
``bash`
npm i -D unplugin-lightningcss
Vite
`ts
// 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.
`ts
// rollup.config.js
import css from 'rollup-plugin-css-only'
import LightningCSS from 'unplugin-lightningcss/rollup'
export default {
plugins: [LightningCSS(), css()],
}
`
esbuild
`ts
// esbuild.config.js
import { build } from 'esbuild'
build({
plugins: [require('unplugin-lightningcss/esbuild')()],
})
`
Webpack
`ts`
// webpack.config.js
module.exports = {
/ ... /
plugins: [require('unplugin-lightningcss/webpack')()],
}
`ts
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,
}),
],
}
``
MIT License © 2023-PRESENT Kevin Deng
[npm-version-src]: https://img.shields.io/npm/v/unplugin-lightningcss.svg
[npm-version-href]: https://npmjs.com/package/unplugin-lightningcss
[npm-downloads-src]: https://img.shields.io/npm/dm/unplugin-lightningcss
[npm-downloads-href]: https://www.npmcharts.com/compare/unplugin-lightningcss?interval=30
[jsr-src]: https://jsr.io/badges/@unplugin/lightningcss
[jsr-href]: https://jsr.io/@unplugin/lightningcss
[unit-test-src]: https://github.com/unplugin/unplugin-lightningcss/actions/workflows/unit-test.yml/badge.svg
[unit-test-href]: https://github.com/unplugin/unplugin-lightningcss/actions/workflows/unit-test.yml