Plugins

PostCSS

The PostCSS plugin load and transform your CSS files using PostCSS processor. This plugin is disabled by default so to enable it you have to import and use it in the _config.js file:

import postcss from "lume/plugins/postcss.ts";

site.use(postcss());

By default it uses the following plugins:

/* Import the CSS file from _includes/css/reset.css */
@import "css/reset.css";

/* Import the relative CSS file */
@import "./variables.css";

The available options are:

import postcss from "lume/plugins/postcss.ts";
import { autoprefixer } from "lume/deps/postcss.ts";
import csso from "https://esm.sh/postcss-csso";

site.use(postcss({
  plugins: [autoprefixer(), csso()],
  sourceMap: true,
}));

The postcss filter

In addition to the css loader and processor, this plugin register also the postcss filter so you can transform css code in the template engines. For example:

{% set css %}
  body::after {
    content: "Hello, the CSS world!";
  }
{% endset %}

<style>
  {{- css | postcss | safe -}}
</style>