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.

Defaults

• 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).

How it works

• 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).

Inlining your CSS

• 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 }}

Tips

• 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