An Eleventy plugin for processing CSS files with PostCSS.
An Eleventy plugin for processing CSS files with PostCSS.
First, add the plugin as a development dependency to your project's package.json file:
``sh`
npm install --save-dev @jgarber/eleventy-plugin-postcss
Next, add the plugin to your project's Eleventy configuration file (e.g. eleventy.config.js):
`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:
`js
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.
eleventy-plugin-postcss supports the following options:
| Name | Type(s) | Default |
|:------------------|:--------------------------|:-----------------------------|
| templateFormats | Array, String | ['css', 'pcss', 'postcss'] |
`js
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.
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.
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.