Transform your CSS code with PostCSS.

Options See on

extensions string[]

The list of extensions this plugin applies to

[ ".css" ]
includes string boolean

Custom includes path for postcss-import

plugins any[]

Plugins to use by postcss

[postcssNesting(), autoprefixer()]
keepDefaultPlugins boolean

Set true append your plugins to the defaults



The PostCSS plugin loads and transforms your CSS files using the PostCSS processor.


Import this plugin in your _config.ts file to use it:

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

const site = lume();

site.use(postcss(/* Options */));

export default site;


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.
  • includes: The directory to search for the @imported files. By default it is "_includes". Set false to disable it.

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 "";

  plugins: [postcssFontFormatKeywords()],

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

// Add more postcss plugins without overriding the defaults
  plugins: [postcssFontFormatKeywords()],
  keepDefaultPlugins: true,


In addition to the default plugins, PostCSS also uses postcss-import, to inline the local @imports by 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 by your plugins (even if keepDefaultPlugins is set to false). But you can change the _includes directory or disable it completely with the includes option:

// Change the includes folder of CSS to _styles
  includes: "_styles",
// Disable the includes (the local @import's won't be inlined)
  includes: false,


This plugin exposes the following hooks:

  • addPostcssPlugin(plugin) To add additional plugins.
  • postcss(processor) To modify the processor instance in a low level way.
import lume from "lume/mod.ts";
import postcss from "lume/plugins/postcss.ts";
import nano from "npm:cssnano";

const site = lume();



export default site;

The postcss filter

This plugin also registers 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 %}

  {{- css | postcss | safe -}}

Configure VSCode

You can use the Postcss extension for VS Code for syntax highlight.