Postcss @import glob support

[bluwy]

Description

Vite currently uses postcss-import to resolve @import, there are some postcss plugins out there that supports glob imports like:

• https://github.com/dimitrinicolas/postcss-import-ext-glob
• https://github.com/TrySound/postcss-easy-import

But they can't be used as they can't be injected before Vite's postcss-import plugin instance. Vite also adds it's custom resolve logic (alias, extension, export conditions, etc), so postcss-import can't be swapped out.

Suggested solution

Ideally a first-class support would prevent needing a new API for injecting plugins before postcss-import.

It could look like postcss-import-ext-glob using @import-glob, as it's also a suggested plugin in postcss-import's readme.

Alternative

No glob support. Or support injecting plugins before postcss-import.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sun0day]

I think we could internally support the @import glob pattern via postcss-easy-import. Then we can consider adding new APIs to inject postcss plugins like postcss-import-ext-glob before postcss-import.

[bluwy]

Since @import with globs isn't part of the spec, I think we should introduce a new API if we want to support this, and @import-glob might be the best choice. Though since Vite had never introduced special APIs in CSS files, this might need a bit of discussion before landing.

[sapphi-red]

related: #10079

[bluwy]

Interesting, maybe rewriting the plugin with Postcss 8's plugin would solve this issue, so we don't have to carve out an API to put plugins before Vite's (which I'm not sure how without non-standard plugin properties). I guess one upside of having this builtin is support for globbing with aliases 🤔

[ashutosh887]

@bluwy I would like to work on this issue
Please assign me

[Farnsi]

What about @use and @forward and resolve aliases?

[Larzans]

in the meantime you can use import.meta.glob in your main.js file to include all the css files of a folder as suggested here #6688 (comment) by Knovour