PostCSS Plugin

Description

Allows using PostCSS, a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

Check PostCSS website for more information.

Install

yarn add postcss --dev
// OR
npm install postcss --save-dev

Usage

The PostCSS plugin generates CSS. It must therefore be chained prior to the CSSPlugin to be used.

Setup

Import the plugin from FuseBox

const {PostCSSPlugin} = require("fuse-box");

Inject into a chain.

fuse.plugin(
     [PostCSSPlugin(), CSSPlugin()]
)

Or add it to the main config plugins list to make it available across bundles.

FuseBox.init({
    plugins : [
         [PostCSSPlugin(), CSSPlugin()]
    ]
});

Require file in your code

import "./styles/main.css"

Plugins

The PostCSSPlugin take PostCss plugins as a first argument:

FuseBox.init({
    plugins : [
         [PostCSSPlugin([
             require('postcss-import'),
             // You can optionally pass options to the plugins
             require('postcss-url')({url: "rebase"}),
             require('postcss-nested')
         ]), 
         CSSPlugin()]
    ]
});

If you require more options, you can pass them as a second argument to the plugin:

FuseBox.init({
    plugins : [
         [PostCSSPlugin(
             // postcss plugins
             [require('postcss-url')({url: "rebase"})], 
             {
                 // should fusebox generate sourcemaps (see below), default: true
                 sourceMaps: false,
                 // additional paths for css resolution (see below)
                 paths: [],
                 // all other options will go to the postcss process function (see below) 
                 parser: parser,
            }
         ), CSSPlugin()]
    ]
});

Or like this:

FuseBox.init({
    plugins : [
         [PostCSSPlugin({
             // postcss plugins
             plugins: [require('postcss-url')({url: "rebase"})],
             // should fusebox generate sourcemaps (see below), default: true
             sourceMaps: false,
             // additional paths for css resolution (see below)
             paths: [],
             // all other options will go to the postcss process function (see below) 
             parser: parser,
         }), CSSPlugin()]
    ]
});

Options

PostCSSPlugin passes any additional option as process options to PostCss. For example:

var nested = require('postcss-nested');
var sugarss = require('sugarss');

fuse.plugin(
    [
        PostCSSPlugin(
            [nested], {
            // passed to PostCss process function 
            parser: sugarss
        }), 
        CSSPlugin()
    ]
)

Paths for HMR

If you are using postcss-import plugin, you might need to provide additional paths to FuseBox config. It will allow fusebox's HMR to work and detect css dependencies automatically.

You don't need to add the paths option if all you are using paths relative to the processed file.

fuse.plugin(
    [
        PostCSSPlugin(
            [ require("postcss-import")({ path: ["src"]}) ],
            {
                paths : [ path.resolve(__dirname, "src/shared" )]
            }
        ),
        CSSPlugin()
    ]
)

Disable sourceMaps

You can internally disable sourceMaps if you wish to preserve source maps generated earlier (by Sass for example)

fuse.plugin(
    [
        SassPlugin(),
        PostCSSPlugin(
            [require("postcss-import")({ path: ["src"]})], 
            {
                sourceMaps : false
            }
        ),
        CSSPlugin()
    ]
)