Lightning CSS

Options

includes string boolean

Custom includes path

Default:

site.options.includes

options object

Options passed to Lightningcss

Default:

{
  minify: true,
  drafts: { customMedia: true },
  targets: {
    android: 6553600,
    chrome: 6553600,
    edge: 6553600,
    firefox: 6553600,
    ios_saf: 1048576,
    safari: 1048576,
    opera: 6553600,
    samsung: 1245184
  }
}

Description

The lightningcss plugin bundles your CSS files using the Lightning CSS processor (previously known as Parcel 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(/* Options */));
site.add("style.css"); //Add the entry point(s)

export default site;

Configuration

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

• extensions: Array with the extensions of the files that this plugin will load. The default is [".css"].
• options: An object with the options for Lightning CSS.
• includes: The directory to search for the @imported files. The default is "_includes". Set it to false to disable it.

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({
  includes: "_includes",
  options: {
    minify: true,
    drafts: {
      customMedia: true,
    },
    targets: {
      android: version(100),
      chrome: version(100),
      edge: version(100),
      firefox: version(100),
      ios_saf: version(16),
      safari: version(16),
      opera: version(100),
      samsung: version(19),
    },
  },
}));

export default site;