PostCSS

Options See on deno.land

extensions string[]

The list of extensions this plugin applies to

Default:

[ ".css" ]

includes string boolean

Custom includes path for postcss-import

Default:

site.options.includes

plugins any[]

Plugins to use by postcss

Default:

[postcssNesting(), autoprefixer()]

useDefaultPlugins boolean

Set false to remove the default plugins

Default:

true

Description

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

Installation

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;

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 add more plugins. 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()],
}));

Includes

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

You can change the _includes directory or disable it completely 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,
}));

Hooks

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

site.use(postcss());

site.hooks.addPostcssPlugin(nano);

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!";
  }
{{ /set }}

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

Configure VSCode

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