Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PostCSS 8 #8087

Assignees

Comments

@ai
Copy link

ai commented Sep 17, 2020

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
Copy link
Member

pi0 commented Sep 17, 2020

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.

@imShara

This comment has been minimized.

@katohs
Copy link

katohs commented Nov 5, 2020

Still not works?

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

Copy link
Member

This will be closed by #8408

@gapipro
Copy link

gapipro commented Feb 15, 2021

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.

@danielroe danielroe linked a pull request Feb 15, 2021 that will close this issue
7 tasks
@clarkdo
Copy link
Member

clarkdo commented Feb 16, 2021

@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
Copy link

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

@clarkdo
Copy link
Member

clarkdo commented Feb 18, 2021

Sorry, I’ll put it on release note

@simllll
Copy link

simllll commented Feb 24, 2021

Is there a reason why this ticket is still open?

@danielroe
Copy link
Member

danielroe commented Feb 24, 2021

@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
Copy link

AndrewBogdanovTSS commented Mar 2, 2021

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

@pi0
Copy link
Member

pi0 commented Mar 12, 2021

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
Copy link

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
Copy link

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
Copy link
Member

pi0 commented Mar 16, 2021

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

@FarhanShares
Copy link

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
Copy link

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
Copy link
Contributor

FloEdelmann commented Nov 21, 2021

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
Copy link
Member

pi0 commented Apr 12, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment