External CSS import

[schallerala]

Describe the bug

With a basic vite example project using the React framework, I'm trying to bundle a CSS file into the application with an import statement like that:

/* top of my css file */
@import '/cdn/my-resource.css';

/* more stuff */

This file is then simply imported into one of my components like so: import './App.css'.

Then, vite, will try to resolve this import either with postcss-import or lightningcss by giving both of them a resolver which can't be extended through any configuration, as it will provide in a plugin-fashion-way the alias and resolve plugins (creation of the resolution plugin container in vite).

In the second case of lightningcss, that resolver is used without a chance for user configuration (usage of the resolver mentioned above from the lightning config).

In the first case of postcss-import, I would have hoped to use the filter option as described in their documentation, but the postcss-import is static and given in the vite project as so (with no chance for configuration as the postcss plugin configuration that the user provide will be "pushed" at the end of the plugin list, due to the unshift -> postcss-import plugin configuration in vite).

No config was actually part of the mentioned call sequences, like build.rollupOptions, css.postcss etc.

With tsup, I was able to define this url as a regex to avoid the bundler to inline the resource in the css, like external: ["react", /^\/cdn\/.+$/] (tsup doc).

Finally, the need behind this use case is: this resource /cdn/my-resource.css is served by a different service and based on the domain on which the user accesses it, it will provide a different resource. I case the browser can't load that resource, it is ok, I don't care and if it is accessible, then great.

Tried my up best to search through the entire internet in the official documentation or for a plugin and debug vite execution, trying to write a custom plugin during a day to find a solution before coming here. Hope you can help.

Thanks in advance for your time and help

Reproduction

https://stackblitz.com/edit/vitejs-vite-qqhyrz?file=src%2FApp.css

Steps to reproduce

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.3 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^4.0.3 => 4.0.3 
    vite: ^4.4.5 => 4.4.7

Used Package Manager

npm

Logs

[vite] Internal server error: [postcss] ENOENT: no such file or directory, open '/cdn/my-resource'
Plugin: vite:css
File: /home/projects/vitejs-vite-qqhyrz/src/App.css

[postcss] ENOENT: no such file or directory, open '/cdn/my-resource'

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-qqhyrz (Open reproduction)