PostCSS 8

[ai]

Is your feature request related to a problem? Please describe.

PostCSS 8 came with a new plugin API. Right now Nuxt.js users can use new PostCSS plugins because Nuxt.js uses PostCSS 7.

Describe the solution you'd like

Update PostCSS from ^7.0.0 to ^8.0.0

Additional context

PostCSS 8 changelog

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

[pi0]

Hi @ai thanks for creating issue. We also planned doing upgrade. All dependencies dropped Node.js 8 support are currently locked for nuxt 2 to avoid breaking changes however seems for longer term it would be best to bump them in a semver-minor and notify users.

[katohs]

Still not works?

postcss-nested wasn't available due to postcss8, but it worked after I lowered the version.

[danielroe]

This will be closed by #8408

[gapipro]

How is this still not merged? Postcss8 is out for half a year almost and most of plugins are not working with older versions. Making our projects hard to maintain.

[clarkdo]

@gapipro nuxt v2.15.0 has been released which includes postcss v8 support.

NOTE: postcss-preset-env is disabled in v8 config as it doesn't support postcss v8 for now, so please install all below dependencies explicitly.

yarn add --dev css-loader@^5.0.0 postcss@^8.1.10 postcss-import@^13.0.0 postcss-loader@^4.1.0 postcss-url@^10.1.1
# or
npm i --save-dev css-loader@^5.0.0 postcss@^8.1.10 postcss-import@^13.0.0 postcss-loader@^4.1.0 postcss-url@^10.1.1

[janvorisek]

@clarkdo How is this not mentioned anywhere? You literally saved me after spending 2 hours investigating CI issues.

[clarkdo]

Sorry, I’ll put it on release note

[simllll]

Is there a reason why this ticket is still open?

[danielroe]

@simllll Yes. Nuxt still uses PostCSS 7 as we're waiting for postcss-preset -env support (see above). But Nuxt does support PostCSS 8 if installed manually.

[AndrewBogdanovTSS]

Please, keep this one opened until a proper support will land from postcss-preset-env

[pi0]

postcss8 support is finally stable with nuxt>=2.15.3 and nuxt/postcss8 module which uses autoprefixer instead of postcss-preset-env (issue moved to nuxt/postcss8#4 to check possibility of using preset-env again)

Remaining opt-in of postcss8 for nuxt2 depends on plugin breaking changes. But is likely to be always opt-in. But modules like tailwindcss can enforce using v8 to make it seamless for end-users. Will keep an eye on changes to reflect in nuxt/postcss8 module.

@ai Would you please help updating wiki page?

[snake575]

Hi @pi0, this line still results on a warning when using the new nuxt/postcss8 module, not a big deal but kind of misleading:

https://github.com/nuxt/nuxt.js/blob/f08f4efcde7bc174fd9b68a2a5a785d504659391/packages/cli/src/utils/dependencies.js#L6

[MartinMa]

As @snake575 already mentioned. When using nuxt/postcss8 you still get the following warning.

 WARN  postcss@8.2.8 is installed but ^7.0.32 is expected 

I tried to fix it, only to find out that this is expected behavior now.

[pi0]

postcss8 warning is removed for nuxt-edge and will be removed for next release of nuxt (via #8996) since 2.15.4

[FarhanShares]

If you've upgraded to @nuxtjs/tailwindcss to v4.x, be sure to upgrade @fullhuman/postcss-purgecss to v4 to use PostCSS v8.x with nuxtjs v2.15+.

[vivekrao1985]

is this really fixed? i'm still seeing vulnerabilities when i run npm audit on a freshly generated nuxt project. looks like nuxt/webpack still depends on postcss 7.0.35 -

$ npm ls postcss
abc@1.0.0
└─┬ nuxt@2.15.5
  └─┬ @nuxt/webpack@2.15.5
    ├─┬ css-loader@4.3.0
    │ ├─┬ icss-utils@4.1.1
    │ │ └── postcss@7.0.35 deduped

[FloEdelmann]

postcss-preset-env does now support PostCSS v8. See csstools/postcss-preset-env#191 and https://github.com/csstools/postcss-preset-env/releases/tag/7.0.0.

So Nuxt v2 could now drop support for PostCSS v7 with these changes; making the manual workarounds and https://github.com/nuxt/postcss8 obsolete, right?

[pi0]

Please use nuxt/postcss8 module for postcss8 with nuxt 2.