Runs PostCSS twice, resulting in extra copies of fallback CSS

[andersk]

Astro Info

Astro                    v4.0.6
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

With this PostCSS configuration:

import postcssFontFamilySystemUi from 'postcss-font-family-system-ui';
export default { plugins: [postcssFontFamilySystemUi] };

Astro expands font-family: system-ui to

font-family:system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue

with every family duplicated. This is the result of running postcss-font-family-system-ui twice—looks like once before minification and once after, based on the spacing.

What's the expected result?

I expect

font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue

as shown by postcss-cli with the same configuration.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-didtjg?file=postcss.config.mjs,src%2Fpages%2Findex.astro

Participation

• [ ] I am willing to submit a pull request for this issue.

[lilnasy]

Thanks for the clean reproduction!

[matthewp]

Does this cause any problems or is it just unexpected?

[bluwy]

I think the reason it's runs twice is because the first is during CSS preprocessing (before Astro analyzes scope styles etc), and the second is after that where Vite processes it again, resolving css urls etc. I think we'd need stop the second processing in Vite, but currently there's no easy way to do so. I can take a look and see if Vite can expose something.