vitejs
Postcss @import glob support
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
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
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.
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.
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 🤔
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 https://github.com/vitejs/vite/discussions/6688#discussioncomment-3649999 by Knovour
Are there any alternative solutions instead of https://github.com/vitejs/vite/discussions/6688#discussioncomment-3649999?
Hi! 👋
I’m trying to use @import with glob patterns in Vite, but I’m facing the same issue mentioned above — PostCSS plugins like postcss-import-ext-glob don't run before Vite’s internal postcss-import, so glob imports don't work.
Is there currently any official workaround other than using import.meta.glob in JS?
If not, I would love some guidance on the direction the team is considering (built-in @import-glob support, plugin ordering API, etc.), so I can explore contributing a fix or helping with testing.
Thanks!
