url() in a CSS file imported by @import is not resolved correctly when using lightningcss

[ghost]

Describe the bug

url() inside a CSS file that is imported from a CSS file by @import is not resolved correctly when using css.transformer: 'lightningcss'. The same source code works with css.transformer: 'postcss'.

original description

Hello.
When a CSS file is imported with .css?inline, it is correctly minified and transformed with css.transformer=postcss and build.cssMinify=esbuild.

When I change to build.cssMinify=lightningcss, the build process still works correctly. 👍

However, when I change to css.transformer=lightningcss in vite.config.js, then the .css?inline isn't recognized anymore and when I run the build process of Vite, it prints a message in the console: "(...).css?inline didn't resolve at build time, it will remain unchanged to be resolved at runtime" 👎

In the documentation, nothing is said about .css?inline being specific to postcss, so I expected it would work with lightningcss too.

Reproduction

https://stackblitz.com/edit/vitest-dev-vitest-cil2qs?file=vite.config.js,src%2Fpages%2Fbeginning.css

Steps to reproduce

Run the script _vite:build.
You are going to see that the image Border.avif is not built into the dist folder, because the app.css file was not considered in the build process. I tried debugging and at least discarded the plugins as the cause.

System Info

System:
    OS: Linux 6.5 Ubuntu 23.10 23.10 (Mantic Minotaur)
    CPU: (1) x64 Intel Celeron N4020 Core(TM) N4020
    Memory: 15.11 GB / 15.34 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 21.7.2 - ~/.nvm/versions/node/v21.7.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v21.7.2/bin/npm

Used Package Manager

npm

Logs

No response

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.

• vitest-dev-vitest-cil2qs (Open reproduction)

[github-actions]

Hello @1GBpendrive. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs reproduction will be closed if they have no activity within 3 days.

[sapphi-red]

Ah, Vite's build script doesn't work on the reproduction on stackblitz, but it works correctly locally.

It seems to happen because dependencies field was upper case. If I fix that, I got a different error (Could not resolve entry module "./app.js".) that is valid.
https://stackblitz.com/edit/vitest-dev-vitest-bsvjcm?file=package.json

[ghost]

Thank you @sapphi-red
Please see this StackBlitz: https://stackblitz.com/edit/vitest-dev-vitest-pezgng
The problem mentioned before is seen when running the script _vite:build.
You are going to see that the image Border.avif is not built into the dist folder, because the app.css file was not considered in the build process. I tried debugging and at least discarded the plugins as the cause.

[sapphi-red]

I was able to reproduce with that. I trimmed down the reproduction and clarified the issue description.