People have asked how to configure bud to only use certain postcss plugins in certain environments and I thought it had value as a stand-alone post.
/**
* Multi-compiler example
*
* This config absolutely must be async as `bud.make` is an
* async method. You will get errors if you do not heed this.
*/
module.exports = async (bud) => {
/**
* Important if child compilations ouput
* to subdirectories of whatever this outer
* compiler is.
*/
bud.extensions.remove('clean-webpack-plugin')
/**
* Each compiler is a brand new instance of
* Bud. Any modification to the parent thus far
* will not have an effect.
*
* In a future bud release it's possible the
* top-level compiler config will apply to children.
*/
await bud.make('app-a', async (config) => {
config
/**
* Set a unique output directory
* so compilers don't overwrite one another.
*/
.setPath('dist', 'public/app/js')
/**
* Continue configuring as usual.
*/
.entry('app', 'scripts/app.js');
});
/**
* This also means all extensions are applied to every
* compiler in advance. In this compiler we'll unset
* `postcss-preset-env` so it isn't used in the compilation.
*
* Tooling modifications like this one are the only reason you
* should ever use this mode. There are trade-offs to this
* approach -- the biggest of them is that each compiler
* is unaware of the other ones and you end up with more
* code than you would have otherwise.
*/
await bud.make('app-b', async (config) => {
config
.setPath('dist', 'public/app/css')
.entry('app', 'styles/app.css')
.postcss.unsetPlugin('postcss-preset-env');
});
/**
* You can use as many as you like.
* They are processed in parallel.
*/
await bud.make('app-c', async (config) => {})
};
I would consider this to be an experimental feature but for a small change like this it does the trick.
For Sage users: Acorn will support this without needing to do a lot of heavy lifting with https://github.com/roots/acorn/pull/192.