@yummacss/postcss

Generate CSS through PostCSS.

The PostCSS plugin, for Next.js & anything else with PostCSS in its pipeline. It works through Turbopack & Webpack alike, since both go through the same built-in PostCSS support.

Usage

pnpm add -D @yummacss/postcss

Register it in your PostCSS configuration:

postcss.config.mjs
export default {  plugins: {    "@yummacss/postcss": {},  },};

Then add the @yummacss; marker to your global CSS file. The plugin replaces it with the generated CSS:

globals.css
@yummacss;

Installation walks through the whole setup, including the config file.

Options

OptionTypeDefaultDescription
configConfigInline configuration. When provided, no config file is read.
configPathstringyumma.config.mjsPath to the config file.
cwdstringprocess.cwd()Directory to resolve the config file & source globs from.

cwd is the one option the Vite plugin does not have. PostCSS is often run from a directory other than the project root, and the source globs are relative to the config file rather than to wherever the process started:

postcss.config.mjs
export default {
  plugins: {
    "@yummacss/postcss": { cwd: import.meta.dirname },
  },
};