How to configure `cssnano` with `bud`?

bud
1

I want to disable a specific optimization (calc) in cssnano. How can I configure bud to pass this option down to cssnano?

2

You can do it with this hook:

/**
 * Replace css minimizer
 */
.hooks.on('build.optimization.minimizer', () => [
  '...',
  new (require('css-minimizer-webpack-plugin'))({
    minimizerOptions: {
      preset: ['default', {discardComments: {removeAll: true}}],
    },
  }),
])

minimizerOptions gets passed through to cssnano. the default config is included in the call above (we went with a pretty vanilla setup).

What I want to do in a future release

The idea is for you to be able to do this customization by calling .minimize() and passing in an object that contains your config.

The problem with calling that function, I’m realizing now, is that the @roots/sage extension is already calling it. Which shouldn’t be an issue, but it is. And soon it will be an actual proper issue :sweat_smile: and it’s a pretty small change to make in bud core.

For now, the hook works well (and is what the function will end up calling anyway).

I’m on bud 5.1.0.

1 Like