INSTALLATION · COMPLETE ADAPTER

Using PostCSS

Add Coordiation to an existing PostCSS 8 pipeline with built-in import, nesting, prefixing, and minification controls plus standard dependency messages, warning channels, source-map support, and safe multi-entry processing.

✓

Only stylesheets containing a top-level @coordiation marker are transformed. Local CSS imports become standard PostCSS dependencies, and a process-local cache reuses unchanged source extraction and compilation.

Install the packages

Install PostCSS, the compiler, and the official adapter as development dependencies.

Terminal

npm install -D postcss @coordiation/css @coordiation/postcss

Configure the pipeline

Coordiation owns import bundling, nesting, and target-aware prefixing by default. Enable minification for production without adding a second transformer.

postcss.config.mjs

import coordiation from "@coordiation/postcss";

export default {
  plugins: [
    coordiation({
      content: ["src"],
      cwd: process.cwd(),
      toolchain: {
        minify: process.env.NODE_ENV === "production"
      }
    })
  ]
};

Add the framework marker

Use one dedicated CSS entry and import project-owned CSS before the marker. Imported directives and authored rules enter the same compilation.

src/app.css

@import "./theme.css";
@import "./base.css";
@coordiation;

src/theme.css

@co-theme {
  --co-color-brand-500: oklch(62.3% 0.214 259.815);
}

Let the runner track every dependency

Every imported CSS file and scanned source file emits a PostCSS dependency message. Every source directory emits a recursive dir-dependency, allowing compatible runners to rebuild for edits, additions, and deletions.

No custom watcher protocol

Webpack loaders, task runners, and other PostCSS hosts can consume the standard result messages. Coordiation does not require runner-specific callbacks.

Use the standard warning channel

Dynamic class construction and unsupported candidates are reported through result.warn(). Your runner decides how warnings are printed, collected, or promoted to errors.

Terminal output

coordiation-css: [dynamic-candidate] Dynamic co- class construction cannot be scanned.
coordiation-css: Unsupported candidate: co-does-not-exist

Keep source maps in the pipeline

When the PostCSS runner requests a map, the adapter automatically generates and composes Coordiation's Source Map v3 data across imports, framework generation, transforms, and minification. Continue configuring from, to, and map through the runner.

Inspectable result

The composed map remains available through the normal PostCSS result, and a coordiation-source-map message exposes the framework-stage map for diagnostics.

CONFIGURATION

Share the scanner contract

The PostCSS adapter forwards the same compiler and scanner options used by Vite and the CLI.

01
content: source files or directories; defaults to ["src"].
02
cwd: explicit project root for resolving content paths.
03
cache: process-local source and compilation reuse; defaults to true.
04
sourceMap: follows the runner's map request by default; set an explicit embedded-content policy when needed.
05
toolchain: controls imports, nesting, prefixing, minification, and browser targets.
06
include / exclude / safelist: literal scan-boundary controls.
07
extractors: extension-specific or global extraction hooks.
08
preflight: set to false only when another reset owns base styles.

AI GENERATION CONTRACT

Keep pipeline decisions auditable

Agents can query the complete PostCSS and toolchain capabilities before generating configuration.

Use an ESM or CJS PostCSS config that matches the host project.
Do not add a second nesting transform, prefixer, or minifier unless the matching Coordiation stage is explicitly disabled.
Keep content, filters, safelist, imports, and targets literal.
Do not add custom filesystem watchers when the runner consumes standard dependency messages.
Do not place @coordiation in CSS entries that should remain untouched.

Previous← Using Vite NextUsing the CLI →