Lightning CSS

Transform and minify your CSS files with Lightning CSS.

Installation

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.

Description

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

Configuration

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/styles.css.map.
  • 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();

site.use(lightningCss({
  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