search

vitejs / vite

Next generation frontend tooling. It's fast!
http://vite.dev
MIT License
68.92k stars 6.23k forks source link

Postcss @import glob support #12336

Open bluwy opened 1 year ago

bluwy commented 1 year ago

Description

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

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

sun0day commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

related: https://github.com/vitejs/vite/issues/10079

bluwy commented 1 year ago

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 commented 1 year ago

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

Farnsi commented 1 year ago

What about @use and @forward and resolve aliases?

Larzans commented 1 year ago

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