Laravel-mix: PostCSS plugins are processed multiple times in a confusing order

[adamwathan]

Something weird happens in Mix when you use multiple PostCSS configurations where it runs some configurations more than once.

Sample project:

https://github.com/adamwathan/mix-postcss-bug

In this project I'm using the following mix file:

mix.js('resources/js/app.js', 'public/js')
  .postCss('resources/css/one.css', 'public/css', [
    function () {
      console.log('\n\n  **one**')
    }
  ])
  .postCss('resources/css/two.css', 'public/css', [
    function () {
      console.log('\n\  **two**')
    }
  ])

When you run yarn run dev you'll this in the console:

**two**
**two**
**one**
**two**

I'm not sure exactly what's going on here but I have a feeling it's the source of some very weird bugs I encounter when trying to use multiple Tailwind CSS config files in the same project, as everything works as expected when I use raw webpack instead of mix.

[corneliusio]

I believe this has something to do with the ident option for postcss-loader. Currently all instances of the loader of given an ident of 'postcss'. If you go to src/components/Preprocessor.js:22 and include the index for the forEach() loop and the concat that to the ident on src/components/Preprocessor.js:46 you don't get the last postCss call's plugins running for every time postCss() was used.

In other words, if you added a third call to .postCss() you would get

 **one**
 **two**
 **three**
 **one**
 **two**
 **three**

instead of

 **three**
 **three**
 **three**
 **one**
 **two**
 **three**

That said, I'm not sure if you should be seeing two of each call anyway (which is why I haven't submitted a PR). This may only be half the problem and somebody with more familiarity should prob confirm. However, you could try making that change and seeing what effect it has when you use multiple tailwind configs.

[corneliusio]

(p.s. - I can submit a PR for this if this looks like it may be on the right track.)

[JeffreyWay]

But it should only be called once each, right? So we want an output of...

**one**
**two**

...right?

My instinct is this is more related to the CSS extract plugin, which is buggy on webpack 4. Can't wait to get off it as soon as webpack 5 is out (should be soon).

[JeffreyWay]

I'll take a look at this today and see what the problem might be.

[MattStypa]

I was able to fix this by replacing extract-text-webpack-plugin with mini-css-extract-plugin

[JeffreyWay]

@MattStypa Right - but we can't update to mini-css-extract-plugin yet.

So if I try @corneliusio's approach, for Adam's example, I get:

  **one**
  **two**
  **one**
  **two**

Is that correct, or should it be?

  **one**
  **two**

[adamwathan]

In case it helps, here is a branch that just uses raw webpack where I wasn't getting any of the bugs related to Tailwind that alluded to in the initial post:

https://github.com/adamwathan/mix-postcss-bug/blob/webpack/webpack.config.js

The result here is:

  **one**
  **two**
  **one**
  **two**

[corneliusio]

I would definitely be inclined to believe that it should only be

**one**
**two**

Adding unique idents to the postcss-loader only feels like a part of the problem, but as weird as this issue is I'd be curious if the above change might just iron out the issue Adam's having.

[JeffreyWay]

@adamwathan - Can you npm update laravel-mix to v4.0.15 and let me know if that does what you want?

[adamwathan]

Works perfectly now 🙌🏻 Basically the problem I was seeing before is that Tailwind was trying to use the wrong config for the wrong CSS file, so if I tried to do things like @apply a utility generated by tailwind-one.js in my one.css file, it wouldn't work because it was looking for classes generated by tailwind-two.js instead.

HAPPY BIRTHDAY TO ME! Thanks Jeffrey 🎉

[JeffreyWay]

Haha, wew! And I have no clue what "ident" even does. 👊

Happy birthday, @adamwathan!

[adamwathan]

Sorry, big thanks to @corneliusio too of course for identifying the root cause so fast 👏🏻

[corneliusio]

@adamwathan Dude, no problem! Glad that took care of the issue you were having. Thanks for putting so much work into Tailwind—it rocks.

And happy birthday!