Lightning CSS

Transform and minify your CSS files with Lightning 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();

site.use(lightningCss({/* your config here */}));

export default site;

See all available options in Deno Doc.


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


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.
  • sourceMap: Set true to generate a source map file that will be saved in the same place but with the .map extension appended. For example, the file my/styles.css will generate the sourcemap file my/
  • options: An object with the options for lightning-css.

Example with the default configuration:

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

const site = lume();

  extensions: [".css"],
  sourceMap: false,
  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