PostCSS 8

[ai]

Is your proposal related to a problem?

PostCSS 8 was released. It added a new plugin API. Right now Gatsby does not support PostCSS 8 plugins.

Describe the solution you'd like

Updating postcss-loader and adding postcss to dependencies will fix the problem.

Describe alternatives you've considered

N/A

Additional context

PostCSS 8 changelog does not have breaking changes related to CRA 4 only removing Node.js 6 and 8 support).

[zackdotcomputer]

For anyone else who comes here and wonders what's up with this issue, I'll save you some clicks and summarize the state of the related PRs:

• PR #9716 above was closed in favor of #10003, which was merged.
• That PR was then reverted by #10216 because dependencies postcss-normalize and postcss-browser-comments were both still using postcss@7
• PostCSS-Normalize is separately tracking their need to update here
• Not much has happened in January or February on this issue.

[harryzcy]

PR #10456 is now merged and should have resolved this issue.

[zackbloom]

@harryzcy It will only be resolved when a new react-scripts release is made to npm.

[msalahz]

When the new react-scripts release is planned?

[6thpath]

When the new react-scripts release is planned?

I think it'd happen if these issues got resolved postcss-normalize postcss-browser-comments

[radiosilence]

Perhaps we need to fork both of those packages or not depend on them. They look completely dead, especially postcss-browser-comments, which has not been updated in two years.

[radiosilence]

I have forked both, thanks to the work of @devpeerapong

Here is new package - https://www.npmjs.com/package/postcss-normalize-next so we could try using this new package until @jonathantneal resurfaces??

[radiosilence]

Ok, @jonathantneal has helpfully merged the PRs and we're just waiting on a version bump of postcss-normalize and my fork can be irrelevant already :)

@lPaths does that satisfy everything?

[devpeerapong]

postcss-normalize@10.0.0 is released with support for PostCSS 8

[Bluefitdev]

Its released! Can we re-open PR for postcss 8 please

[radiosilence]

Thank you @jonathantneal for releasing 10.0.0!

[camjackson]

Looks like postcss 8 was added back into react-scripts a couple of months ago, in https://github.com/facebook/create-react-app/commit/7b56cf75fb901f04bbff25afe63138cbff6aee75. It's currently sitting in master, awaiting release I guess.

Does anyone know when the next react-scripts release is? 🙂

[derrabus]

10946 is also needed for PostCSS 8 support.

[Bluefitdev]

Webpack 5 PR is also there #10961,

Can CRA team help with the release please? Its been so long since the last release. We're dying to use tailwind jit because its soo fast

[raix]

The pr with postcss normalize 10 should now be on master (postcss 8 should also be on master, not sure if anything is blocking a release)

[Bluefitdev]

Pretty please, @ianschmitz @iansu , we know you're busy but can you please help with the release?

Edit: I didn't know that it is planned in the next release, thanks! Sorry

[epicfaace]

It's already on their roadmap for the next release (https://github.com/iansu/create-react-app-meta/issues/56). Let's try not to rush and just let them release whenever they're ready.

[DopamineDriven]

you could always patch-package react-scripts until the update is released then discard the patch and roll with the default. If using yarn make sure you install postinstall-postinstall as well

[peiris]

Pretty please, What the status update here?

[mrmckeb]

Hi all, we're hoping to get this out as a part of 4.1. @raix has already done the hard work, so we just needed to bump to a new version of 8.x.

Please see #11121 for the exact version. 4.1 is coming very soon, but I can't give an exact date sorry.

[marcofranssen]

@mrmckeb I assume soon should now be really really soon 😄 …

Any update on the release?

[raix]

Should be released already in the alpha/next?

[beaussan]

Any update on a release timeline for this issue ?

[dospolov]

1 year and it's still not updated? This project looks abandoned. I'm switching to Vite.js. Anyway, thank you guys for all you've done!

[Bessonov]

Hey guys, sorry for hijacking this topic. cra was great at the time webpack suffers widely from compatibility issues with plugins. You got a kinda management environment that just works. But after fighting a lot of issues like https://github.com/facebook/create-react-app/pull/7961, https://github.com/facebook/create-react-app/issues/1333, https://github.com/facebook/create-react-app/issues/9119, support es6+ with code sharing and many others and after usage of rewired, craco and so on I decided to setup custom config. It turns out, that this was much easier with webpack 5, because some plugins aren't needed anymore (like the whole resource loader stuff in previous versions). I'm pretty happy now. You can find important parts here and here. It uses the last postcss version.

If you don't need code sharing like me, then take a look at snowpack. From my experience it's a game changer.

[polarathene]

I'm switching to Vite.js.

It seems to be one of the advised alternatives to adopt now.

I haven't checked but AFAIK both PostCSS 8 and Webpack 5 updates were merged and available in a alpha/beta release in the past month or so. Eventually that will get a proper release, but you may want other tooling like CRACO to also update to be compatible, and CRA is effectively in maintenance mode without much priority by Facebook now (no sponsored maintainers IIRC).

There's this issue about maintenance issues and future of CRA.

[pavelkornev]

[stevecastaneda]

I see recent repo commits but still no updates on this particular issue. Is there any progress or ETA?

[msalahz]

This is part of the upcoming alpha release and you can use it now by following the instruction mentioned here https://github.com/facebook/create-react-app/discussions/11278