eleventy-plugin-postcss

An Eleventy plugin for processing CSS files with PostCSS.

Usage

First, add the plugin as a development dependency to your project's package.json file:

npm install --save-dev @jgarber/eleventy-plugin-postcss

Next, add the plugin to your project's Eleventy configuration file (e.g. eleventy.config.js):

import postcssPlugin from "@jgarber/eleventy-plugin-postcss";

export default async function(eleventyConfig) {
  eleventyConfig.addPlugin(postcssPlugin);
}

Optionally, add a PostCSS configuration file to your project:

import cssnano from "cssnano";
import postcssNesting from "postcss-nesting";

export default {
  map: "inline",
  plugins: [postcssNesting, cssnano]
};

[!TIP] This plugin uses postcss-load-config which will load PostCSS configuration from your project's package.json or from a litany of other files. We recommend creating a file named postcss.config.js.

Options

eleventy-plugin-postcss supports the following options:

| Name | Type(s) | Default | |:------------------|:--------------------------|:-----------------------------| | templateFormats | Array<String>, String | ['css', 'pcss', 'postcss'] |

import postcssPlugin from "@jgarber/eleventy-plugin-postcss";

export default async function(eleventyConfig) {
  eleventyConfig.addPlugin(postcssPlugin, {
    templateFormats: "css"
  });
};

[!NOTE] For most use cases, the default templateFormats value will suffice.

Sass-style Partials Support

eleventy-plugin-postcss treats files named with a leading underscore (e.g. _variables.css) as Sass-style partials. These files will not be written to the output directory.

Acknowledgments

First and foremost, eleventy-plugin-postcss wouldn't be possible without Zach Leatherman's incredible work creating Eleventy and his stewardship of its community.

The plugin code is derived from whoisvadym/eleventy-plugin-postcss.

eleventy-plugin-postcss is written and maintained by Jason Garber.