Next.js 9.2 not backward compatible with postcss config

[cullylarson]

I don't really know how to classify this. Maybe just something that should be documented.

I have a postcss.config.js file that returns a function (i.e takes ctx as a parameter, returns a config object). That works fine in Next.js 9.1. But in 9.2, I get this error:

Error: Your custom PostCSS configuration may not export a function. Please export a plain object instead.

at getPostCssPlugins (/path/to/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:4:296)

Looking at the code for plugin.ts, this is obviously intentional behavior. I tried to find this breaking change documented somewhere (e.g. release notes, blog posts, etc.), but didn't find anything (the pull request with the change does provide some context, but it's hard to find). I get it, new version, things change. So possibly the only resolution to this is to document it somewhere in the release notes, maybe explain why it's changed.

If it's helpful, this is what my postcss.config.js file looked like before. Granted, what I'm using ctx for is probably unnecessary (sourcemaps seem to be generated just fine using Next.js default behavior). So it's not a big deal for me to get rid of it.

module.exports = ctx => ({
    map: ctx.env === 'production' ? false : {inline: true},
    plugins: {
        'postcss-import': {
            resolve: createResolver({
                alias: {
                    '@css': path.resolve(__dirname, 'client/style'),
                    '@client': path.resolve(__dirname, 'client'),
                },
            }),
        },
        'postcss-rem': {
            baseline: 16,
            fallback: false,
            precision: 5,
        },
        'postcss-mixins': {},
        'postcss-simple-vars': {},
        'postcss-nested-ancestors': {},
        'postcss-nested': {},
        'postcss-custom-media': {},
        'postcss-calc': {mediaQueries: true},
        'postcss-preset-env': {
            stage: 0,
            browsers: 'last 2 versions',
        },
        'cssnano': {
            zindex: false,
            // autoprefixer is included in postcss-preset-env, so no need to do it again in nano
            autoprefixer: false,
            discardComments: {removeAll: true}
        },
        'postcss-reporter': {clearReportedMessages: true},
    }
})

System information

• OS: MacOS
• Browser (if applies): NA
• Version of Next.js: 9.2

[timneutkens]

Duplicate of #10117. Keeping it open there as it already has an explanation etc.

I tried to find this breaking change documented somewhere

It's not a breaking change, you were using @zeit/next-css before, a plugin, you could continue using that without any changes. We've ensure that if you have @zeit/next-css included the built-in CSS feature is completely disabled. Built-in CSS is not "Built-in @zeit/next-css" it's a new feature with different, more constrained behavior for better results.

[cullylarson]

@timneutkens Oh, I didn't realize this was an issue with next-css. I had been experimenting with it and forgot I had enabled it. I confirmed that when not using next-css, it is possible to return a function from postcss.config.js. Sorry for the trouble.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.