🌳 Postcss compiler for single files with Broccoli.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github
fixture Switch postcss plugins for testing May 10, 2017
.editorconfig
.eslintrc.js
.gitignore
.travis.yml
CHANGELOG.md
CODE_OF_CONDUCT.md
LICENSE 2018 Jan 18, 2018
README.md
index.js
package-lock.json
package.json
test.js

README.md

broccoli-postcss-single

Travis Build Status npm version Coverage Status

The broccoli-postcss-single plugin runs your css through postcss plugins of your choosing.

Installation

npm install --save-dev broccoli-postcss-single

Usage

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

var outputTree = compileCSS(inputTrees, inputFile, outputFile, options);
  • inputTrees: An array of trees that specify the directories used by Broccoli. If you have a single tree, pass [tree].

  • inputFile: Relative path of the main CSS file to process.

  • outputFile: Relative path of the output CSS file.

  • options:

  • plugins: An array of plugin objects to be used by Postcss (a minimum of 1 plugin is required). The supported object format is module: the plugin module itself, and options: an object of supported options for the given plugin.

There are two supported methods for defining plugins:

  1. Object form

    plugins: [
      {
        module: require('some-plugin'),
        options: { /* options for `some-plugin` */ }
      }
    ]
  2. Function form

    plugins: [
      require('some-plugin')({ /* options for `some-plugin` */ }),
      require('another-plugin')({ /* options for `another-plugin` */ }),
    ]
  • map: An object of options to describe how Postcss should handle source maps.

  • browsers: An array of supported browsers following the browserslist format. These will be passed to the options of each postcss plugin. This can be overridden on a per plugin basis.

  • parser: A function that parses different CSS syntax (optional). Use this if you’d like to parse a different syntax, such as Sass or Sugarcss, by passing in a custom function or node module reference.

Example

/* Brocfile.js */
var compileCSS = require('broccoli-postcss-single');
var cssnext = require('cssnext');

var options = {
    plugins: [
        {
            module: cssnext,
            options: {
                browsers: [ // this will override `options.browsers`
                    '> 1%',
                    'last 2 versions'
                ]
            }
        },
    ],
    map: {
        inline: true
    },
    browsers: ['last 2 version']
};

var outputTree = compileCSS(['styles'], 'app.css', 'app.css', options);
module.exports = outputTree;