broccoli-postcss-single

5.0.2 verified Fri May 01 auth: no javascript maintenance

A Broccoli plugin that compiles CSS using PostCSS, operating on individual files. The current stable version is 5.0.2, which uses PostCSS V8, while version 4 uses PostCSS V7. It requires Node >= 10 and integrates into Broccoli build pipelines. Unlike broader PostCSS plugins for Broccoli, this one focuses on single-file processing, supports both object and function plugin definitions, and includes caching with configurable include/exclude patterns. Maintenance appears minimal.

Common errors

error Error: The 'plugins' option requires at least one plugin ↓

cause Empty plugins array or missing plugins option.

fix

Provide at least one plugin in the plugins array.

error Cannot find module 'postcss' ↓

cause PostCSS is not installed as a peer dependency.

fix

Run 'npm install --save-dev postcss'.

error TypeError: compileCSS is not a function ↓

cause Incorrect import (e.g., named import instead of default).

fix

Use 'import compileCSS from "broccoli-postcss-single"' or 'const compileCSS = require("broccoli-postcss-single")'.

Warnings

breaking Upgrading from v4 to v5 requires PostCSS V8; some PostCSS plugins may need updates. ↓

fix Update to v5 and ensure all PostCSS plugins are compatible with V8.

gotcha The cache only includes .css, .scss, .sass, .less by default. Custom file types (e.g., .vue) require cacheInclude configuration. ↓

fix Add cacheInclude: [/.*\.(vue|other)/] to options.

gotcha If using Tailwind or a PostCSS plugin with a config file, changes to the config won't trigger rebuilds unless cacheInclude includes JS files. ↓

fix Set cacheInclude: [/.*\.(css|js|config)/] or similar.

deprecated The 'browsers' option is typically deprecated in favor of browserslist config in package.json or .browserslistrc. ↓

fix Use browserslist configuration instead of passing 'browsers' array.

Install

npm install broccoli-postcss-single

yarn add broccoli-postcss-single

pnpm add broccoli-postcss-single

Imports

compileCSS

wrong

const compileCSS = require('broccoli-postcss-single');

correct

import compileCSS from 'broccoli-postcss-single'

CommonJS require works in Node but ESM import is preferred for modern code.

compileCSS

wrong

const { compileCSS } = require('broccoli-postcss-single');

correct

const compileCSS = require('broccoli-postcss-single');

Default export only, not named.

Quickstart

Shows how to use broccoli-postcss-single with Brocfile, including plugin configuration and source maps.

// Brocfile.js or Brocfile.ts
import compileCSS from 'broccoli-postcss-single';
import autoprefixer from 'autoprefixer';

const inputTrees = ['styles']; // path to source directory
const inputFile = 'app.css';
const outputFile = 'app.css';

const options = {
  plugins: [
    {
      module: autoprefixer,
      options: {
        overrideBrowserslist: ['> 1%', 'last 2 versions']
      }
    }
  ],
  map: { inline: true },
  browsers: ['last 2 versions']
};

const outputTree = compileCSS(inputTrees, inputFile, outputFile, options);
export default outputTree;