PostCSS 8

[ai]

Bug report

Describe the bug

Update PostCSS 7 → 8.

Expected behavior

Without PostCSS 8, Next.js will not be able to load PostCSS 8 plugins (for instance, Autoprefixer 10 doesn’t work in Nuxt.js).

Additional context

PostCSS 8 changelog

The only breaking changes important for Next.js is dropping Node.js 6 and 8 support.

[timneutkens]

The only breaking changes important for Next.js is dropping Node.js 6 and 8 support.

We only support Node.js 10.13+, so that sounds fine.

[ludofischer]

Updating Next’s PostCSS version might require to update a lot of PostCSS plugins to support PostCSS 8. I believe Next depends directly on postcss-preset-env and postcss-flexbugs-fixes which don’t support PostCSS 8 at the time of writing. There’s already an issue csstools/postcss-preset-env#191, where you can see that postcss-preset-env depends on more than a dozen other PostCSS plugins that need to be updated.

[ai]

PostCSS 8 is compatible with PostCSS 7 plugins. You do not need to update plugins.

You will have warnings, but it is not a big deal.

[ludofischer]

After bumping the PostCSS dep to v8, generating the TypeScript typings fails. So far I’ve managed to fix 5 errors out of 7: canary...ludovicofischer:fix-postcss8-types
I am not sure how to fix the remaining errors. They are are caused by this file using the process() function on a PostCSS plugin directly

next.js/packages/next/build/webpack/plugins/css-minimizer-plugin.ts

Line 1 in 8eccecb

import { process as minify } from 'cssnano-simple'

but the process() method has been removed in PostCSS 8, so it’s missing from the type definitions exported from the PostCSS 8 package. I could create a completely custom type in packages/next/types/misc.d.ts, but I’d rather not rely on the process() method since it won’t exist in newer PostCSS plugins. What’s the recommended alternative?

[ai]

The main way to use PostCSS plugins:

postcss([…plugins]).process(css).css

[toiluj23]

@ai so, what's the solution? on npm install autoprefixer is better to install v8? Or where should we use postcss()...?

[ai]

@toiluj23 PostCSS plugin for Next.js should be updated. As a user, you can wait or help with PR to Next.js.

[toiluj23]

@toiluj23 PostCSS plugin for Next.js should be updated. As a user, you can wait or help with PR to Next.js.

My collab:

[ludofischer]

Although the newer postcss-loader 4.0 releases mention PostCSS 8 support, their PostCSS 8 compatibility commit just changes the peer dependency and tests. I’ve skipped updating because postcss-loader 4.0 now searches for external config files and I did not want that to introduce unexpected behaviour.

[sean-clarke]

I imagine this is what is causing an upgrade from postcss-nested ^4.2.3 -> ^5.0.1 to cause:

postcss failed with TypeError: Invalid PostCSS Plugin found: [0]
    at Array.forEach (<anonymous>)

[ludofischer]

@sean-clarke I guess so; their changelog for version 5.0 says 'moved to PostCSS 8' https://github.com/postcss/postcss-nested/blob/master/CHANGELOG.md

[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.