Postcss: Unexpected CSS removal in 7.0.19 when using TailwindCSS

[danielbachhuber]

Hi!

Dependabot auto-updated postcss for me this morning from 7.0.18 to 7.0.19.

However, my site output for 7.0.19 looks like this:

With postcss 7.0.18 installed, my site output looks like this:

It seems like there might be a regression in 7.0.19.

What information can I provide to help debug?

[ai]

1. Try to compare output CSS for one component to find what was changed. Post changes here.
2. Show your PostCSS plugins.

[danielbachhuber]

Here's the original https://gist.github.com/danielbachhuber/047ea044c467a327a33caf94db437e4b/725a0a2e37ace2f7c518b287b86d0ccff64af9a9

Here's the broken: https://gist.github.com/danielbachhuber/047ea044c467a327a33caf94db437e4b/1c613fb25fe97b1ff5c223da1dfc12a650242386

It looks like it's removing ~9k lines of CSS:

My PostCSS plugins are:

module.exports = {
  plugins: [require('tailwindcss')('./tailwind.config.js')],
}

[ai]

@danielbachhuber can you try to show diff output between these two files?

I am trying to reproduce the issue in my project.

[danielbachhuber]

can you try to show diff output between these two files?

Yep, here's the diff output: https://gist.github.com/danielbachhuber/047ea044c467a327a33caf94db437e4b#file-style-diff

[ai]

I checked my plugins and didn’t found any problem. Tailwindcss uses too many PostCSS plugins and output is too big to help you with this data.

@adamwathan can you help us? Did you see any problems with new PostCSS 7.0.19?

I add fix for code like: rule.append({ selector: 'a', nodes: [decl] }) https://github.com/postcss/postcss/commit/3494ffc2e78635944d1e68169dc1def324d3e371

Maybe, do you use passing nodes to node’s constructor and the change break something?

[adamwathan]

Yep our tests are failing on 7.0.19 by the looks of it but not 100% sure why. Going to investigate more deeply in about 15 minutes, currently watching Peppa Pig with my daughter 😄

[ai]

With help by @adamwathan we found the source of the problem. I will try to fix it quickly.

[msheakoski]

If you're in a jam and need to deploy before it is fixed, this worked for me if you use yarn:

Add this to your package.json:

"resolutions": {
  "postcss": "7.0.18"
}

[ai]

Fixed 6d6d982. Release is coming.

[ai]

Fix was released in 7.0.20

[danielbachhuber]

Thanks @ai! I appreciate your hard work :)