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.

Sign up for GitHub

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

Jump to bottom

CSS url() property path mismatch in deep routes #8914

Closed
kazzkiq opened this issue Feb 6, 2023 · 1 comment
Closed

CSS url() property path mismatch in deep routes #8914

kazzkiq opened this issue Feb 6, 2023 · 1 comment

Comments

@kazzkiq
Copy link

kazzkiq commented Feb 6, 2023 •
edited

Describe the bug

It seems that if you use CSS url() property linking to an asset (be it relative or absolute path), it stops finding said asset if the page is rendered in a deep enough route (five or more levels).

<div class="my-awesome-bg"></div>

<style lang="scss">
  .my-awesome-bg {
    width: 200px;
    height: 200px;

    // routes that would work:
    // e.g. "/", "/d1", "/d1/d2", "/d1/d2/d3", "/d1/d2/d3/d4"
    //
    // after 4th level of depth, image won't be found and will return 404.
    // e.g. "/d1/d2/d3/d4/d5", "/d1/d2/d3/d4/d5/d6", ...
    background: url('/images/bg.png') repeat;
  }
</style>

It does not happens in development mode, only after builds.

Was tested only building for adapter-node, not sure about other adapters.

Reproduction

Steps to reproduce:

  1. Clone this repo which reproduces the issue
  2. npm install and npm run build
  3. node build/index.js
  4. Start navigating the deeper links, and hitting CMD+R/F5 (full page refresh) every time a page loads.
  5. You should see CSS bg() issues on the 5th depth level route and beyond.

Logs

Listening on 0.0.0.0:3000
Error: Not found: /favicon-32.png
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3612:18)
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3479:34)
    at Object.#options.hooks.handle (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3656:59)
    at respond (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3477:43)
Error: Not found: /favicon-16.png
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3612:18)
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3479:34)
    at Object.#options.hooks.handle (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3656:59)
    at respond (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3477:43)
Error: Not found: /depth1/svelte-logo.svg
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3612:18)
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3479:34)
    at Object.#options.hooks.handle (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3656:59)
    at respond (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3477:43)
Error: Not found: /depth1/depth2/svelte-logo.svg
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3612:18)
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3479:34)
    at Object.#options.hooks.handle (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3656:59)
    at respond (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3477:43)
Error: Not found: /depth1/svelte-logo.svg
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3612:18)
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3479:34)
    at Object.#options.hooks.handle (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3656:59)
    at respond (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3477:43)
Error: Not found: /depth1/svelte-logo.svg
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3612:18)
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3479:34)
    at Object.#options.hooks.handle (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3656:59)
    at respond (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3477:43)
Error: Not found: /depth1/svelte-logo.svg
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3612:18)
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3479:34)
    at Object.#options.hooks.handle (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3656:59)
    at respond (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3477:43)
Error: Not found: /depth1/depth2/svelte-logo.svg
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3612:18)
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3479:34)
    at Object.#options.hooks.handle (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3656:59)
    at respond (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3477:43)
Error: Not found: /depth1/svelte-logo.svg
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3612:18)
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3479:34)
    at Object.#options.hooks.handle (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3656:59)
    at respond (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3477:43)
Error: Not found: /depth1/svelte-logo.svg
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3612:18)
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3479:34)
    at Object.#options.hooks.handle (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3656:59)
    at respond (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3477:43)
Error: Not found: /depth1/svelte-logo.svg
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3612:18)
    at resolve (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3479:34)
    at Object.#options.hooks.handle (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3656:59)
    at respond (file:///Users/claudiojunior/Downloads/odd-behavior-css-url-sveltekit-main/build/server/index.js:3477:43)

System Info

System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Max
    Memory: 3.16 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.18.1 - ~/n/bin/node
    npm: 8.19.2 - ~/n/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 109.0
    Safari: 16.1
  npmPackages:
    @sveltejs/adapter-auto: ^1.0.0 => 1.0.2 
    @sveltejs/adapter-node: ^1.1.6 => 1.1.6 
    @sveltejs/kit: ^1.0.0 => 1.3.10 
    svelte: ^3.54.0 => 3.55.1 
    vite: ^4.0.0 => 4.1.1

Severity

serious, but I can work around it

Additional Information

Related discord link
@gtm-nayan
Copy link
Contributor

Duplicate of #6720

@gtm-nayan gtm-nayan marked this as a duplicate of #6720 Feb 19, 2023
@gtm-nayan gtm-nayan closed this as not planned Won't fix, can't repro, duplicate, stale Feb 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kazzkiq @gtm-nayan