Update postcss to 8.x

[XhmikosR]

Not sure how hard this will be, but I didn't find a similar issue. Note that most projects moved postcss to a peer dependency.

[sebastiandedeyne]

Laravel Mix is moving to Postcss 8 in the next major version, which is giving some compatibility issues in https://github.com/spatie/laravel-mix-purgecss.

[Ffloriel]

@sebastiandedeyne, what compatibility issue are you seeing? I understood that PostCSS 7 plugins would also work with PostCSS 8.
On another note, I started to look into PostCSS8, and I'll aim to release a version in the next couple of weeks.

[sebastiandedeyne]

I'm gonna dive back into this later this week, but to my understanding there wasn't really a problem with Purgecss being compatible with PostCSS 8, but a dependency issue.

Laravel Mix 8 requires PostCSS 8, while postcss-purgecss requires PostCSS 7. This causes two separate PostCSS versions to be installed, throwing weird dependency errors.

[thecrypticace]

Yeah, with the release of PostCSS 8 it's now recommended that postcss plugins list PostCSS as a peer dependency instead of a direct dependency.

[adamwathan]

We just updated Tailwind to PostCSS 8 and using the current version of PurgeCSS that still uses PostCSS 7 has not been a problem at all for what it’s worth. PostCSS 8 is designed to work fine alongside other installations of PostCSS 7. You get a slightly annoying console warning about using a deprecated API but it works 👍🏻

[sebastiandedeyne]

Interesting, I suppose the error was cause by something else. Gonna give this another try next week!

[sebastiandedeyne]

Update: when PurgeCSS is installed, it forces my test project to use PostCSS 7 over 8, which triggers an error on other packages that already require PostCSS 8.

ERROR  Failed to compile with 1 errors                                                                                     12:26:27 PM

error  in ./resources/css/app.css

Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

That said, if I explicitly define a yarn resolution, the build passes without any issues, and everything gets purged correctly. So I can report that PurgeCSS runs on PostCSS 8 without any issues. (at least for my small test file)

"resolutions": {
  "postcss": "8.1.2"
}

[adamwathan]

@sebastiandedeyne Can you share a test project? Curious what would cause that. Mix should be requiring PostCSS 8 as a dependency itself, so it should use the correct version otherwise npm/yarn have a bug which doesn't sound likely for super basic require stuff 🤔

[sebastiandedeyne]

Sure! You can check out this branch: spatie/laravel-mix-purgecss#90

In the repo, cd example, yarn, and yarn production to build. If you remove resolutions from package.json and start over, it will fail.

[adamwathan]

@sebastiandedeyne Looks like just running yarn add postcss in that folder also fixes it. Not sure the best solution there, things are definitely a little weird now that PostCSS 8 is always supposed to be installed as a peerDependency.

We have to update all of the Tailwind installation instructions for example to npm install tailwindcss postcss now :/

[adamwathan]

@sebastiandedeyne Looks like you should be doing that actually, installing postcss explicitly is now part of the instructions for installing postcss-loader:

[thecrypticace]

We have this issue with Laravel Mix too. The most prevalent version of PostCSS gets hoisted so postcss-loader gets postcss 7 but Laravel Mix gets postcss 8 when requiring. I'm investigating adding postcss directly to the root package json after the user installs mix to get around it.

[adamwathan]

@thecrypticace I think best solution for Mix is to just include postcss in the default Laravel webpack.mix.js file. For people installing Mix separately, you should just make the installation instructions npm install laravel-mix postcss (grim I know but it's simple and will solve the problem).