@jgarber/eleventy-plugin-postcss

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):

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(require('@jgarber/eleventy-plugin-postcss'));
};

Optionally, add a PostCSS configuration file to your project:

module.exports = {
  map: 'inline',
  plugins: [
    require('postcss-nesting'),
    require('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']

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(require('@jgarber/eleventy-plugin-postcss'), {
    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.

ESM Support

Eleventy v3.0.0 added bundler-free ESM support. This plugin works with either ESM or CommonJS projects!

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

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

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.