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

ghost commented 2 months ago

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

[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 reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 2 months ago

Start a new pull request in StackBlitz Codeflow.

vitest-dev-vitest-cil2qs (Open reproduction)

github-actions[bot] commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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

vitejs / vite