Documentation — Table of Contents

assets-postcss

Note: The options API is still evolving; expect tweaks as the project grows.

What it does

Adds css as a template format and processes index.css under the resolved assets css directory (from your Eleventy dir.assets).
Runs PostCSS with your shared postcss.config.js (import, nesting/preset-env, cssnano in prod).
Outputs compiled CSS for Eleventy to write to dist.

Entry: any index.css under <input>/<assets>/css/ (including nested folders).
Uses postcss.config.js (respects source maps per config, minifies in production via cssnano).
No layouts for CSS.
Options: none (inherits global Baseline verbose only).
If postcss.config.js is missing, falls back to internal PostCSS config.
Peer deps: PostCSS plugins come from your postcss.config.js; fallback config is bundled.
Output: under dist/assets/css/ (matching Eleventy dir.assets and dir.output).

Resolves the assets directory from Eleventy dir and builds cssDir from it.
Registers css format and an extension handler that runs for index.css under the resolved assets css directory.
Runs PostCSS with configured plugins (user config or fallback), returns result.css.
Leaves non-entry CSS files untouched (they’ll fall through).

Any CSS file can be inlined with inlinePostCSS; the filter processes the exact file you pass through PostCSS (not limited to assets dir).
In a template or Markdown file, build the path (e.g., from _baseline.assets.input) and pipe it through inlinePostCSS.
In Markdown, keep the call unindented and on its own lines so the <style> is treated as raw HTML.

Example:

{% set cssPath = _baseline.assets.input ~ "css/critical.css" %}
{{ cssPath | inlinePostCSS | safe }}

Any nested index.css under the assets css directory will be processed; keep only the entries you intend to ship.
Use inlinePostCSS filter if you want to inline compiled CSS in templates.
See the “Assets Pipeline” tutorial for an end-to-end example.
Tutorial: Assets Pipeline Quickstart