[🐞] Vite's `base` property doesn't affect path for css files

timofei-iatsenko commented 1 year ago

Which component is affected?

Qwik Rollup / Vite plugin

Describe the bug

I want to deploy my Qwik App into subpath, example: https://website.com/subpath/

I added base: '/subpath', to the Vite config. It works for js chunks and q:base attribute. They are served from /subpath/build/

However, it doesn't affect css files created from css modules. They are injected directly in to the header as is (without a subpath)

<link rel="stylesheet" href="/build/q-5aaebb6c.css">

This affected code in packages/qwik/src/optimizer/src/plugins/vite.ts:420-440

  injections.push({
      tag: 'link',
      location: 'head',
      attributes: {
        rel: 'stylesheet',
        href: `/${fileName}`,
      },
    });

fileName returned from Rollup Build point to the file without specified base.

Since the path to the css file is not relative setting base html tag also not work.

Reproduction

https://github.com/thekip/qwik-css-basepath-issue

Steps to reproduce

Build project some css files (the content should be a decent size, otherwise they get inlined)
Run yarn serve
Check that css files accessed from /build instead of /subpath/build

System Info

System:
    OS: macOS 13.3
    CPU: (10) arm64 Apple M1 Pro
    Memory: 206.59 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.0/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
    Watchman: 2023.02.27.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 111.0.5563.146
    Firefox: 95.0.2
    Safari: 16.4
  npmPackages:
    @builder.io/partytown: 0.7.6 => 0.7.6 
    undici: 5.21.0 => 5.21.0 
    vite: 4.2.1 => 4.2.1

Additional Information

No response

brianbento commented 1 year ago

Tied with #2462

da8ah commented 1 year ago

These two are related too. https://github.com/BuilderIO/qwik/issues/2462 https://github.com/BuilderIO/qwik/issues/3759

I've been making test with this errors and trying to deploy to GitHub Pages, successfully now. But I've encountered a lot of people with these same problems. I believe adding subpath would help solve a bunch of deploy problems. I'm confident enough to suggest prioritize this. 📌

cc: @adamdbradley @manucorporat

JohnPremKumar commented 9 months ago

Any update on this issue...

chjlsch commented 6 months ago

this still doesn't work properly

QwikDev / qwik