Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Failed to resolve the relative background image url in css when there're (/) in it's parent paths. #19261

Open
7 tasks done
sapphi-red opened this issue Jan 22, 2025 · 4 comments
Labels
feat: css has workaround p3-downstream-blocker Blocking the downstream ecosystem to work properly (priority)

Comments

@sapphi-red
Copy link
Member

Describe the bug

It seems to fail to resolve the relative background image url in css when a component is located in a folder containing brackets.

A workaround is to wrap the url with double quotes:

.foo {
  background: url(./javascript.svg); /* before */
  background: url("./javascript.svg"); /* after */
}

Migrated from vitejs/vite-plugin-vue#512

Reproduction

https://stackblitz.com/edit/vitejs-vite-hebxocad?file=src%2Fmain.js,src%2F(foo)%2Findex.css,vite.config.js&terminal=dev

Steps to reproduce

No response

System Info

Stackblitz

  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: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vite: ^6.0.7 => 6.0.10

Used Package Manager

npm

Logs

No response

Validations

@lvzhenbo
Copy link

lvzhenbo commented Feb 6, 2025

The problem I've found is that the @ path won't resolve either, as of version 6.1.0

Image

<=6.0.11

Image

@sapphi-red
Copy link
Member Author

@lvzhenbo I'm not sure if that's caused by the same root problem. Would you create a minimal reproduction for it?

@lvzhenbo
Copy link

lvzhenbo commented Feb 6, 2025

After trying to reproduce it, I realized that the problem I was having was related to using tailwindcssv3
https://github.com/lvzhenbo/vue-project

@sapphi-red
Copy link
Member Author

@lvzhenbo your case should be fixed by #19371

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: css has workaround p3-downstream-blocker Blocking the downstream ecosystem to work properly (priority)
Projects
None yet
Development

No branches or pull requests

2 participants