vitejs
Support lightningcss "resolver" option
Description
Hi their! Hope you are doing well! At start, thanks for your work!
It will be nice to be able to specify the resolver options supported by the lightningcss compiler but that seems to be not passed and supported on the vite side...
https://github.com/vitejs/vite/blob/6a7dde54e4ac357798d7124894ff71cb36a36985/packages/vite/src/types/lightningcss.d.ts#L13
Suggested solution
Add the resolver option in the LightningCSSOptions type as well as passing it to the lightningcss compiler.
Alternative
No response
Additional context
Example of use:
// vite.config.ts
import { browserslistToTargets } from "lightningcss";
import fs from 'fs';
import path from 'path';
export default {
css: {
transformer: "lightningcss",
lightningcss: {
resolver: {
read(filePath) {
console.log(filePath);
return fs.readFileSync(filePath, "utf8");
},
resolve(specifier, from) {
return path.resolve(path.dirname(from), specifier);
},
},
targets: browserslistToTargets(browserslist(">= 0.25%")),
},
},
build: {
cssMinify: "lightningcss",
},
};
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.
What is the usecase for accepting a resolver option? Vite has its own internal resolver too and it should use that. Similar to how postcss-import and CSS preprocessors like SCSS, Stylus, all use Vite's resolver only.
The idea is to allow use of globs into the css @import like so:
@import './components/**/*.css';
For now it's not working at all. I checked with the lightningcss repo contributors https://github.com/parcel-bundler/lightningcss/issues/735 but they think it's on the vite side.
If I check the postcss-import-ext-glob plugin https://github.com/dimitrinicolas/postcss-import-ext-glob/blob/master/index.js, it's inside the postcss AST that the support is added.
My guess is that the simpliest way to allow devs to support custom imports inside the lighningcss module is to pass the resolver options down to lighntningcss from the lighningcss options object like in my example above.
Unless you have another idea that I will be happy to implement and share :)
In that case, it seems like a bug (or technically a feature request) to me to make import globs work with lightningcss. There's also a corresponding postcss feature request: https://github.com/vitejs/vite/issues/12336. If we can get this working, then I don't think we have to expose the resolver option.
Another use case for this was discussed in https://github.com/parcel-bundler/lightningcss/issues/664, where certain @custom-media queries may need to be included in every single CSS file.
For custom-media, there is a different feature request regarding additionalData https://github.com/vitejs/vite/issues/17724. OP hasn't responded there but it looks like custom-media seems to be a nice use case for additionalData.
