fix(vite): remove postcss-url and duplicate postcss-import

[danielroe]

🔗 Linked issue

resolves #15765

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This was a fun deep-dive.

Investigating the linked issue, I found that we are adding postcss-import - and so is vite. In addition, I believe the key features postcss-url (which was causing the bug) are in fact already covered by Vite's list of features:

Vite improves @import resolving for Sass and Less so that Vite aliases are also respected. In addition, relative url() references inside imported Sass/Less files that are in different directories from the root file are also automatically rebased to ensure correctness.
https://vitejs.dev/guide/features.html#css-pre-processors

Accordingly, this PR removes both plugins (or rather, doesn't add them).

I suspect removing these two plugins will improve our performance as well as fix the bug. I would also consider we reconsider whether to include cssnano or defer to vite's esbuild/lightningcss minificiation step in future (cc: antfu).

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[mrleblanc101]

Shouldn't this mention/link to #20533 since all the related issue were merged into that one ?

[antfu]

For CSS minification, I am not sure if users would want full control over which tool to use, maybe could be an option as 'cssnano' | 'esbuild' | 'lightningcss' where we built a thin layer of adapter?

[danielroe]

I think that would be a very nice idea.

[nathanchase]

@danielroe @antfu

For CSS minification, I am not sure if users would want full control over which tool to use, maybe could be an option as 'cssnano' | 'esbuild' | 'lightningcss' where we built a thin layer of adapter?

Full control is good, but also with the most performant (sensible) default (likely lightningcss). I was recently looking at whether or not something like nuxt-modules/critters or nuxt-beastcss was even necessary, or if Nuxt 3 already accomplishes the same goals.

There's not much in the docs other than Nuxt is pre-configured to use cssnano for "minification and purge" (at the end of "Using Postcss") - but nothing specifically about best practices of inlining critical css.

I know there's the inlineSSRStyles experimental flag defaulting to true, but unsure if that's doing the same thing that critters / beastcss are or not.

Anyway, ideally Nuxt 3 takes care of all of the above for us (inlined critical CSS, fastest minification and purging), and maybe explains the optimal pre-configured choice (lightning) - but then lets us opt for other less performant options if it's somehow a project requirement.