Update to PostCSS 8

[ai]

Fixed #9664

postcss-loader 4.0 moved PostCSS to peerDependencies

[piecyk]

Would be awesome if update to PostCSS 8 would be released with support for custom config #8907 🤞

[Mancancode]

hello has the issue with postCSS 8 on '' Create react app '' fix ?

because am still getting errors when i run "npm run build ".

👇🏿👇🏿👇🏿👇🏿👇🏿👇🏿

C:\Users\cilium\Desktop\ebuka\webdev\tailwindCSS> npm run build

tailwindCSS@1.0.0 build C:\Users\cilium\Desktop\ebuka\webdev\tailwindCSS
postcss css/tailwind.css -o public/build/tailwind.css

Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (C:\Users\cilium\Desktop\ebuka\webdev\tailwindCSS\node_modules\postcss\lib\processor.js:153:15)
at new Processor (C:\Users\cilium\Desktop\ebuka\webdev\tailwindCSS\node_modules\postcss\lib\processor.js:56:25)
at postcss (C:\Users\cilium\Desktop\ebuka\webdev\tailwindCSS\node_modules\postcss\lib\postcss.js:55:10)
at C:\Users\cilium\Desktop\ebuka\webdev\tailwindCSS\node_modules\postcss-cli\index.js:218:14
at async Promise.all (index 0)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! tailwindCSS@1.0.0 build: postcss css/tailwind.css -o public/build/tailwind.css
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the tailwindCSS@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\cilium\AppData\Roaming\npm-cache_logs\2020-11-16T16_00_30_816Z-debug.log
PS C:\Users\cilium\Desktop\ebuka\webdev\tailwindCSS>

[clarkd]

Changes look good (approving), but the tests seem a bit broken?

[ai]

@clarkd it was some unrelated error, but for some reason log was already cleaned.

Seems like PR review took too long for CI.

[andremonteiro95]

@iansu is there a release date for the 4.0.2 milestone?

[andremonteiro95]

The build was failing for me, updating the packages wasn't enough. I had to change the Webpack config to reflect postcss-loader changes, wrapping up some of the options in the postcssOptions key.

{
  // Options for PostCSS as we reference these options twice
  // Adds vendor prefixing based on your specified browser support in
  // package.json
  loader: require.resolve('postcss-loader'),
  options: {
    postcssOptions: {
      // Necessary for external CSS imports to work
      // https://github.com/facebook/create-react-app/issues/2677
      ident: 'postcss',
      plugins: () => [
        require('postcss-flexbugs-fixes'),
        require('postcss-preset-env')({
          autoprefixer: {
            flexbox: 'no-2009',
          },
          stage: 3,
        }),
        // Adds PostCSS Normalize as the reset css with default options,
        // so that it honors browserslist config in package.json
        // which in turn let's users customize the target behavior as per their needs.
        postcssNormalize(),
      ],
    },
    sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
  },
},

[raix]

I only saw this PR today - The pull-request #10003 is done as part of the webpack 5 update #9994 and updating postcss dependencies and configuration in general - tests are passing locally etc. just heads up

[ianschmitz]

@ai thanks for the PR. Apologies that this hasn't been adressed sooner. I've merged #10003 as it included the configuration updates, and updated the other related postcss packages.

[ai]

@ianschmitz when do you plan to release it?

I need to add instructions for PostCSS migration docs.

[JimLynchCodes]

@ai this doesn't work for me.

still getting the error:

🚫 Error: PostCSS plugin postcss-nested requires PostCSS 8.

[ai]

@JimLynchCodes ask CRA team. not me.

They didn’t merged my PR and still do not have PostCSS 8 support #10003

[OmerWow]

@ianschmitz any news regarding this?

[raix]

#10003 was reverted #10456 is a retry

[goforbg]

Anyone else following this up?

[DevJett]

any news regarding this?

[agusterodin]

I really hate to add to the noise but to answer the question of why this probably isn't released: webpack 5 support is being worked on as well (see pinned issue).

I would imagine that they want to finish that before pushing a new version of react scripts so breaking changes are consolidated.

[jetro4u]

When will this issue be fixed with CRA?

[raix]

released in v5 alpha

[hegelstad]

@raix react-scripts 5? or webpack 5? this thread is about postcss 8 support in react-scripts

[raix]

CRA v5 (currently in alpha, the postcss 8 upgrade was a major version due to node 10 deprecation, therefor it was moved to v5, along webpack 5, node 10+12 deprecation etc.)

[iiLearner]

are there any plans for this?

[UltiRequiem]

Bump

[sandeep1995]

Nice

[chenrico]

tailwindcss 3.0.0 is on postcss 8! Please support!

[kevinstueber]

Yes, please! Tailwindcss 3.0 requires postcss 8.

[Aspyryan]

Please support this for tailwindcss 3.0.0

[billshannon]

Please support this must have!

[hugovdev]

Tailwindcss 3.0.0 is on PostCSS 8! Please support!

[raix]

#11717

[cheesea3]

Please support PostCSS for TailwindCSS 3.0.

[MikePrus]

We need PostCSS for TailwindCSS 3.0. Definitely need to support

[michaelschadhauser]

Please support PostCSS for TailwindCSS 3.0.

[karlhorky]

To everyone coming here for Tailwind CSS / PostCSS support, the new version (react-scripts@5.0.0) should support both of these.

Read about the new version and how to upgrade here:

https://github.com/facebook/create-react-app/releases/tag/v5.0.0