A small plugin for @11ty/eventy that enables the support for PostCSS pre-processor in you eleventy project.

• node@^18.0.0
• @11ty/eleventy@^3.0.0

• 😌 Simple. Easy to install, requires minimum configuration.
• ⭐️ Modern. Compatible with the most recent major eleventy version.
• 🗂 Flexible. Supports the following file extensions: .css, .postcss, .pcss.
• ⚙️ Configurable. Supports PostCSS configuration via postcss.config.js file. (more info)

1. Install: npm install --save-dev eleventy-plugin-postcss
2. Add the following lines to the .eleventy.js:

// Import (ES6 modules)
import PostCSSPlugin from "eleventy-plugin-postcss";

export default function (eleventyConfig) {
    // Enable the plugin in you project
    eleventyConfig.addPlugin(PostCSSPlugin);
}

OR

// CommonJS 
const PostCSSPlugin = require("eleventy-plugin-postcss");

module.exports = (eleventyConfig) => {
    // Enable the plugin in you project
    eleventyConfig.addPlugin(PostCSSPlugin);
}

Create a postcss.config.js config file for additional configuration. (more info). Example:

import mixins from "postcss-mixins";
import nested from "postcss-nested";
import preset from "postcss-preset-env";

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: [
    mixins(),
    nested(),
    preset({ stage: "0" })
  ]
}

export default config;

To load and resolve the configuration file the plugin uses postcss-load-config module. Check out the project readme for the complete list of supported config file formats.

Feel free to open a Github issue for suggestions, bug reports, feature requests.