broccoli-multi-postcss

broccoli-multi-postcss

Broccoli plugin to transform one or more input files using PostCSS to one or more output files.

It's like broccoli-postcss, but allows you consume more than once input file at once. It also allows you to generate additional secondary output files.

Installation

yarn add broccoli-multi-postcss

Usage

import BroccoliMultiPostCSS from 'broccoli-multi-postcss';
import { plugin } from 'postcss';

const myPlugin = plugin('selector-metadata', options => {
  return (root, result) => {
    const selectors: string[] = [];
    root.walkRules(rule => {
      selectors.push(rule.selector);
    });

    const metadata = { selectors, fileName: result.opts.to };

    result.messages.push({
      type: BroccoliMultiPostCSS.MessageType.WriteFile,
      plugin: 'selector-metadata',
      path: `${result.opts.to}.meta.json`,
      content: JSON.stringify(metadata)
    });
  };
});

const tree = new BroccoliMultiPostCSS(['./styles'], { plugins: [myPlugin] });