CSS full path for images

Describe the bug

When vite is required (included from another endpoint) the reference to images in the CSS are lost cause the CSS is injected in the page.

div {
    background: url(/image/demo.png)
}

When transpiled I think it would be nice to inject the full path to avoid any problem

div {
    background: url(http://localhost:3000/image/demo.png)
}

Or maybe offer a configuration to set the “publicPath”

Reproduction

Start any vite template including CSS. Then load this from another endpoint. For instance I’m on http://localhost:8000 and I include

<script src="http://localhost:3000/app.js" type="module" defer></script>

System Info

• vite version: 2.0.0-beta.27
• Operating System: all
• Node version: all
• Package manager (npm/yarn/pnpm) and version: all

[at86]

in vite.config.js use config of

  css: {
    preprocessorOptions: {
      less: {
        rootpath: "http://localhost:3000/src",
      },
    },
  },

[nobleach]

I’ve noticed the opposite problem. I have imported a component/style framework that uses an icon font via a rule like this:

@font-face {
  font-family: 'rsuite-icon-font';
  src: url('https://cdn.jsdelivr.net/npm/rsuite/dist/styles/fonts/rsuite-icon-font.ttf') format('truetype'), url('https://cdn.jsdelivr.net/npm/rsuite/dist/styles/fonts/rsuite-icon-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

When compiled those absolute urls become:

http://localhost:8080/node_modules/rsuite/lib/styles/https://cdn.jsdelivr.net/npm/rsuite/dist/styles/fonts/rsuite-icon-font.woff

It seems the code is blindly just prepending whatever is in those url() declarations. I see no test for this here: https://github.com/vitejs/vite/blob/main/packages/playground/assets/css/css-url.css So it appears to be an overlooked scenario.