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:

• extensions: Array with the extensions of the files that this plugin will load. By default is [".css"].
• plugins: Array with the PostCSS plugins that you want to use.
• keepDefaultPlugins: Set true to append your plugins to the defaults, instead of replacing them.
• sourceMap: Set true to generate the source map that will be inlined in the css file. To generate the source map in a different file, set sourceMap: { inline: false }.
• includes: An array of directories to search for the @imported files. By default is _includes. Set false to disable it.

PostCSS Plugins

PostCSS uses the following plugins by default:

• postcss-nesting to give support to nested rules.
• postcss_autoprefixer to add automatically the vendor prefixes.

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>