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
: Settrue
to append your plugins to the defaults, instead of replacing them.sourceMap
: Settrue
to generate the source map that will be inlined in the css file. To generate the source map in a different file, setsourceMap: { inline: false }
.includes
: An array of directories to search for the@import
ed files. By default is_includes
. Setfalse
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>