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());

Configuration

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

PostCSS Plugins

PostCSS uses the following plugins by default:

Use the property plugins to replace them. For example, to use the font-format-keywords plugin:

import postcss from "lume/plugins/postcss.ts";
import postcssFontFormatKeywords from "https://deno.land/x/postcss_font_format_keywords/mod.js";

site.use(postcss({
  plugins: [postcssFontFormatKeywords()],
}));

This will override the default plugins with yours. If you only want to add more plugins without remove the defaults, use the keepDefaultPlugins option:

// Add more postcss plugins without override the defaults
site.use(postcss({
  plugins: [postcssFontFormatKeywords()],
  keepDefaultPlugins: true,
}));

Includes

In addition to the default plugins, PostCSS use also postcss-import, to inline the local @imports looking in the _includes directory.

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

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

For convenience, this plugin won't be removed with your plugins (even if keepDefaultPlugins is set to false). But you can change the _includes directory or disable completelly with the includes option:

// Change the includes folder of CSS to _styles
site.use(postcss({
  includes: "_styles",
}));
// Disable the includes (the local @import's won't be inlined)
site.use(postcss({
  includes: false,
}));

The postcss filter

This plugin also register 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>