Plugin order not respected

[giusepetroso]

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]

1. You should not define mixins by @import. It is better to use mixinsDir and have separated file for each mixin. It will be more reliable and simplify the stack.
2. Order doesn’t matter in PostCSS 8 since plugins run simultaneously.
3. I recommend simplifying your PostCSS plugins. Why do you need postcss-simple-vars if you have CSS Custom Properties and postcss-mixins? Do you really need postcss-each?
4. The best way to use PostCSS is not to replicate Sass approach. It is better to be closer to CSS specs, prefer declarative way over imperative (avoiding writing a code inside CSS).

[giusepetroso]

Thanks @ai for the reply.

I have the need to keep some of those plugins due to theming purposes, the example I provided is just a bit of an existing css theme we created.
I didn't know about mixinsDir so I'll do a research and I can just simply refactor it.
postcss-simple-vars maybe could be ignored, actually we can use just css vars.
For the postcss-each unfortunately I don't see another way to do what we can want to do without repeating lots of lines of css, for example, how can I replicate this logic?

I have the need to easily replicate some styles in various components, based on an array of defined colors.

There is something I can do to keep postcss-each and postcss-mixins together?

[ai]

Can you show me the --color-palette? Do you use it somewhere else?

[giusepetroso]

Here is the --color-palette variable:

I use it just for those kind of loops.

[ai]

Why not:

@mixin bb-badge-palette black;
@mixin bb-badge-palette gray;
@mixin bb-badge-palette purple;
@mixin bb-badge-palette aqua;
@mixin bb-badge-palette green;
@mixin bb-badge-palette yellow;
@mixin bb-badge-palette red;
@mixin bb-badge-palette primary;
@mixin bb-badge-palette secondary;

[giusepetroso]

It's because I need to cycle those colors in lot of components, this is sort of a boilerplate for our projects and at every project we could have a different palette, so it's convenient to define the list of colors once and cycle in every component intead of editing it in 20+ files.

[ai]

In this case you will need to keep postcss-each.

[giusepetroso]

Yeah I think so, but how can I?
I can get rid of postcss-simple-vars but still can get it work.
I tried the mixinDir option, and now it compiles whithout errors but it's skipping the postcss-conditionals, tailwindcss/nesting, tailwindcss and autoprefixer.
(I formatted the output for better readability)

I think the only way to make it work would be to force some plugins to execute before others, but I don't know if I'm getting the point of why it works async now.

[ai]

Why do you have @if if you removed all unnecessary plugins?

[giusepetroso]

Actually I can get rid of it, but issue remains with tailwindcss/nesting, tailwindcss and autoprefixer.

[ai]

The big complexity of your case could hide the real issue. We need to simplify stack first.

Maybe you have a simple use case of exact issue with tailwindcss/nesting, tailwindcss and autoprefixer?

[giusepetroso]

I created a repo for this issue https://github.com/giusepetroso/postcss-plugin-issue

[ai]

Sorry, it is very big project for debug.

1. Can you keep a simple case of one CSS file with expected output and real output?
2. Can you remove Vue and other non-PostCSS dependencies?

[giusepetroso]

Hi, finally I got some time to make the minimal debug project.

Now on the master branch of the same test repo (https://github.com/giusepetroso/postcss-plugin-issue) I did some polishing.

I completely removed Vuejs from the compilation.

Doing a recap, this is the postcss.config.js

this is the vite.config.js

In the /src folder there I put two css files

• "actual.css" is the actual compilation running npm run build
• "expected.css" is what I expect to have

To make "expected.css" I first ran "npm run build" with this config

then I re-ran "npm run build" (compiling the previous css result) with this config

basically splitting the compilation in two phases.

If you need some other explainations ask me.
Thank you for the support.

[giusepetroso]

I am not getting the point since I've no postcss-scss package in my dependencies.
Can you explain me how can I fix my issue with that?
Should I put it as the parser?
Thanks.

[ai]

Oops. Wrong issue.

(I will look into your bug when I will finish my vacation)

[giusepetroso]

No worries man, have a nice vacation :)

[ai]

Sorry, I still can’t help here sine the test case is too complicated and big.

Seems like it is better for you to separated Tailwind and other plugins.

[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.

[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).