Lightning CSS

Transform and minify your CSS files with Lightning CSS.


The lightningcss plugin loads and transforms your CSS files using the Lightning CSS processor (previously known as Parcel CSS).


Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import lightningCss from "lume/plugins/lightningcss.ts";

const site = lume();


export default site;

See all available options in Deno Doc.


This plugin accepts a configuration object. The available options are:

  • extensions: Array with the extensions of the files that this plugin will load. By default is [".css"]. instead of replacing them.
  • options: An object with the options for lightning-css.
  • includes: By default is false, so the plugin only transforms the CSS code. Set a directory name (for example, _includes) to bundle the code.

Example with the default configuration:

import lume from "lume/mod.ts";
import lightningCss, { version } from "lume/plugins/lightningcss.ts";

const site = lume();

  extensions: [".css"],
  options: {
    minify: true,
    drafts: {
      nesting: true,
      customMedia: true,
    targets: {
      android: version(98),
      chrome: version(98),
      edge: version(98),
      firefox: version(97),
      ios_saf: version(15),
      safari: version(15),
      opera: version(83),
      samsung: version(16),

export default site;

The version() function is provided to convert a semver version to single 24-bit number as used by lightningcss. More info