Plugin order not respected

Hi guys,

I don’t know if I am doing something wrong but I’m experiencing some problem figuring out why plugins seems to run not in the order I specified in postcss.config.js.

I created a new vue 3 project and installed tailwindcss, postcss and some plugins to show what I am talking about, I will try to explain some steps I’m doing to figure out. I published it on github here

Starting with main.css

• Importing tailwind (with @import because if I put @tailwind directives before import postcss complains it)
• Importing colors.css file with some css vars and nothing else
• Importing components/badge/index.css which imports a mixin, applies some tailwind rules and uses @mixin inside a @each

The package.json

The vite.config.js

The postcss.config.js

Now, if i run npm run dev with current postcss config Seems like mixin plugin is not working, ok.

I tried removing plugins until I found the config which works: Removing those 2 plugins seemed to be working, output css is what I was expecting

Now Trying to add only postcss-simple-vars: Same error as above I think, I don’t know if is the @each or the @mixin plugin

Trying to add only tailwindcss: Different error but still @each or @mixin plugin not working well I think

I need all of those plugins and I’m sure if each on of those would be executed one at a time it’ll be ok, but in the same process they do this mess. I’m not sure how plugins are executed but I read that the order matters, so there are any chances that some plugin takes priority or it’s been executed asynchronously?

Sorry for the long post, again, here is the repo to reproduce https://github.com/giusepetroso/postcss-plugin-issue

I’m not sure if I should have posted this issue here, or on a specific plugin but actually I can’t figure out what is going on so feel free to send me to an other appropriate repo.

Thanks a lot, Giuse.

[ai]

There is no such thing as plugins order. They all applying to CSS in the same moment with an event system.

To fix your bug, we need to do a lot of work in plugins communication. You need to report an issue to Tailwind (seems like the issue is in their event system).

[giusepetroso]

But the fact is I need to keep Tailwind into the postCSS plugins, it is actually the point, if I remove it there is no issue.

I’m not getting your request, now the project is just the essential css, but Tailwind is part of the problem I cannot exclude it.

Let me understand what do you mean please.