https://github.com/thearchitector/rollup-plugin-lightningcss

Use Parcel's LightningCSS transformer and minifier with Rollup
https://github.com/thearchitector/rollup-plugin-lightningcss

browserslist css lightningcss minify plugin rollup rollup-plugin

Last synced: about 2 months ago
JSON representation

Use Parcel's LightningCSS transformer and minifier with Rollup

• Host: GitHub
• URL: https://github.com/thearchitector/rollup-plugin-lightningcss
• Owner: thearchitector
• License: mit
• Created: 2023-03-18T05:01:28.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-03-22T01:50:52.000Z (almost 3 years ago)
• Last Synced: 2025-02-14T02:56:29.061Z (about 1 year ago)
• Topics: browserslist, css, lightningcss, minify, plugin, rollup, rollup-plugin
• Language: JavaScript
• Homepage:
• Size: 8.79 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# rollup-plugin-lightningcss

![latest version](https://img.shields.io/npm/v/rollup-plugin-lightningcss?label=version&style=flat-square)

![downloads per month](https://img.shields.io/npm/dm/rollup-plugin-lightningcss?style=flat-square)

![license](https://img.shields.io/github/license/thearchitector/rollup-plugin-lightningcss?style=flat-square)

A Rollup plugin for using [LightningCSS](https://lightningcss.dev/) to transform and minify your application's CSS files.

## Usage

Currently the plugin supports transforming separate CSS files using a shared configuration block. Specific options for that configuration block can be found in the [LightningCSS documentation](https://lightningcss.dev/docs.html), or [via the source code](https://github.com/parcel-bundler/lightningcss/blob/master/node/index.d.ts) for a more complete overview.

Source maps will be generated if the `sourceMap` option is passed as `true` in the configuration.

This plugin doesn't use anything special, so it should work with virtually all Rollup versions (as long as it implements the `generateBundle` hook).

### Example

A simple example plugin configuration might look something this, taken from [`openendpoint.tools/ping/`](https://github.com/thearchitector/openendpoint-tools/blob/main/polypong/rollup.config.js).

```js

// rollup.config.js

import lightningcss from "rollup-plugin-lightningcss";

export default {

  input: "src/polypong.js",

  output: {

    file: "static/polypong.js",

    format: "umd",

    name: "polypong",

    sourcemap: true,

  },

  plugins: [

    lightningcss({

      files: ["src/polypong.css"],

      options: {

        sourceMap: true,

      },

    })

  ]

}

```

## Limitations

Both CSS files and their maps are packaged into the bundle produced when Rollup processes another genuine JS file (the entrypoint). As such, their output destination is not currently configurable and all CSS files will be placed at the same level of the output.