An Eleventy plugin for processing CSS files with PostCSS.
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 namedpostcss.config.js
.
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.
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.
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);
}
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.