Preact-cli: Extend PostCSS to use plugins other than autoprefixer

[OngeUK]

Having PostCSS autoprefixer is a really useful feature, but as far as I can tell, autoprefixer is the only PostCSS plugin that can be used.

Would it be possible to extend the PostCSS functionality to enable the use of other plugins, preferably via a postcss.config.js file?

[ethanroday]

@OngeUK, as of 1.3.0, you can use preact.config.js to customize the Webpack config of your project. Using this, you could configure the PostCSS functionality in a number of ways. You could, for example, modify the postcss entry in the default webpack.LoaderOptionsPlugin to override the list of PostCSS plugins. For example, in your preact.config.js (WARNING: UNTESTED):

export default function (config, env, helpers) {
  let loaderOptionsPlugins = helpers.getPluginsByName(config, 'LoaderOptionsPlugin');
  for (let i = 0; i < loaderOptionsPlugins.length; i++) {
    let loaderOptionsPlugin = loaderOptionsPlugins[i];
    if (loaderOptionsPlugin.options.postcss) {
      loaderOptionsPlugin.options.postcss = () => [
        //Set your list of postcss plugins here (make sure to add them to your dev dependencies)
      ]
    }
  }
}

Alternatively, instead of replacing the postcss entry, you could _remove_ it entirely, then add a postcss.config.js in your project directory. With no specifically configured loader options, postcss-loader will automatically look for your config file.

[sylvainpolletvillard]

@ethanroday Thanks for the code. However, since Preact CLI already use postcss-loader and postcss-loader has built-in support for postcss.config.js file, I think it would pretty easy to add support for this config file by default with Preact CLI.

[sylvainpolletvillard]

Removing options.postcss from the default config let me use postcss.config.js files :+1:

preact.config.js

export default function (config, env, helpers) {
    const options = helpers.getPluginsByName(config, 'LoaderOptionsPlugin')
        .find(({ plugin }) => plugin.options.options.postcss)
        .plugin.options.options;

    delete options.postcss; // will use postcss.config.js
}

[OngeUK]

Thanks for the feedback - the suggested preact.config.js approach works well.

[louisremi]

It seems this approach no longer works with preact-cli v2.0.0. :-/
The breaking commit seems to be https://github.com/developit/preact-cli/commit/a954fd677423a16b4749bd822c698a5cc5db08c2#diff-e8975d611d9d413eecd5c7236e2a7a85

[louisremi]

And here's the new workaround for preact-cli v2.0.0:

export default function (config, env, helpers) {
    const postcssLoader = helpers.getLoadersByName(config, 'postcss-loader');
    postcssLoader.forEach(({ loader }) => ( delete loader.options ));
}

:-)