Support lightningcss "resolver" option

[olivierbossel]

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...

vite/packages/vite/src/types/lightningcss.d.ts

Line 13 in 6a7dde5

export type LightningCSSOptions = {

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

• 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.

[bluwy]

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.

[olivierbossel]

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 parcel-bundler/lightningcss#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 :)

[bluwy]

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: #12336. If we can get this working, then I don't think we have to expose the resolver option.

[ayuhito]

Another use case for this was discussed in parcel-bundler/lightningcss#664, where certain @custom-media queries may need to be included in every single CSS file.

[hi-ogawa]

For custom-media, there is a different feature request regarding additionalData #17724. OP hasn't responded there but it looks like custom-media seems to be a nice use case for additionalData.

[Themayu]

For me, I need this to be able to mark specific @imports as external as per the implementation of parcel-bundler/lightningcss#880, where returning {external: specifier} will prevent LightningCSS from trying to inline that @import specifier. As far as I can tell, having tried multiple methods, this cannot be done with Vite's own configuration.