Assets pipeline quickstart

Ship CSS and JS through Baseline's assets module. By the end you'll have one CSS entry going through PostCSS, one JS entry going through esbuild, and a handle on the inline filters when you need them. That, taken together, is what Baseline calls the assets pipeline.

The assets module is always on. PostCSS and esbuild are its processors, the small adapters that wire each pipeline into Eleventy. Bring your own configs, or let Baseline fall back to its defaults.

What you will build

• src/assets/css/index.css bundled through PostCSS, using your config or Baseline's fallback.
• src/assets/js/index.js bundled through esbuild, minified for production.
• Optionally, the same content inlined into a template through inlinePostCSS and inlineESbuild.

Prerequisites

• Node 20.15.0 (or >=20) and npm.
• Baseline already installed and configured, as in the simple site tutorial.
• package.json with "type": "module" and the dev/build scripts:

  {
  	"name": "simple-baseline-site",
  	"type": "module",
  	"scripts": {
  		"start": "rimraf dist/ && npx @11ty/eleventy --serve",
  		"build": "rimraf dist/ && cross-env ELEVENTY_ENV=production npx @11ty/eleventy"
  	}
  }

---

1) Ensure Baseline is loaded

eleventy.config.js:

import baseline, { config as baselineConfig } from '@apleasantview/eleventy-plugin-baseline';
import settings from './src/_data/settings.js';

/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
export default async function (eleventyConfig) {
	eleventyConfig.addPlugin(baseline(settings));
}

export const config = baselineConfig;

2) Add a page that links assets

Create src/content/pages/assets-quickstart.md:

---
title: 'Assets Quickstart'
slug: 'assets-quickstart'
description: 'CSS and JS bundled by Baseline.'
layout: 'layouts/base.njk'
---

CSS should style this page, and JS should log to the console. Here is a small badge:

<span class="pill">Pending</span>

The <link rel="stylesheet"> and <script> tags come from settings.head (set up in the simple site tutorial), so the layout never needs to know they exist. Baseline injects them into every page.

3) Author the CSS entry

Create src/assets/css/index.css:

:root {
	color-scheme: light;
}

body {
	font-family: system-ui, sans-serif;
	margin: 0;
	padding: 2rem;
	line-height: 1.5;
	color: #1f2937;
	background: #f8fafc;
}

h1 {
	margin-bottom: 0.5rem;
}

.pill {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: #e0f2fe;
	color: #0f172a;
	font-weight: 600;
}

If a postcss.config.js exists at the project root, Baseline picks it up. Otherwise it falls back to its built-in config.

4) Author the JS entry

Create src/assets/js/index.js:

document.addEventListener('DOMContentLoaded', () => {
	console.log('Baseline assets: JS is loaded');
	const pill = document.querySelector('.pill');
	if (pill) {
		pill.textContent = 'Bundled JS is running';
	}
});

5) Run the site locally

npm start

• Open the local URL (default http://localhost:8080/). Confirm the styles apply and the console log fires.
• Dev writes to dist/ as it runs, so dist/assets/css/index.css and dist/assets/js/index.js are inspectable while the server is up.
• Image-format changes (png, jpg, webp, gif, avif, svg) under src/assets/ also trigger a rebuild during npm run dev.

Eleventy never cleans dist/ for you. Clear it with npx rimraf dist/ whenever a rebuild looks stale.

6) Production build and inspect output

Change URL in .env to an absolute URL. On a deployed site that's your real production URL; for this exercise, any absolute URL (e.g. https://www.example.com/) works to verify the output. Then run:

npm run build

• Check dist/assets/css/index.css (PostCSS output) and dist/assets/js/index.js (bundled and minified).
• Reset URL in .env to "http://localhost:8080/".

---

Next steps

• Drop a postcss.config.js at the project root when you want to bring your own plugins.
• Add more entry points as the site grows; section-specific index.css files under subfolders work the same way.
• Reach for inlinePostCSS and inlineESbuild on critical snippets only. Inlining a full bundle defeats the point.
• See the assets module reference for the full option list, and the filters reference for inlineESbuild and inlinePostCSS.