Vite does not resolve css url() paths correctly

[GustavoMelloGit]

Describe the bug

I am doing

Importing assets using css url() function does not work as expected on build.

In order to test, i have added fonts in both public (absolute path) folder and in src/assets (relative path). Neither of them work as expected.
This is my index.css file:

@font-face {
  font-family: Namian;
  src: url('/fonts/Namian-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  display: swap;
}

@font-face {
  font-family: Namian2;
  src: url('./assets/Namian-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  display: swap;
}

This is what is generated after running npm run build:
dist/assets/index-C8OGOnN2.css (formatted for better readability)

@font-face {
  font-family: Namian;
  src: url(/fonts/Namian-Regular.woff2) format('woff2');
  font-style: normal;
  font-weight: 400;
  display: swap;
}
@font-face {
  font-family: Namian2;
  src: url(/assets/Namian-Regular-Baaf_SnZ.woff2) format('woff2');
  font-style: normal;
  font-weight: 400;
  display: swap;
}

As you can see, the path was not resolved properly.

What i expect is

Vite be able to resolve paths inside css url() functions

What actually is happening is

Vite is not able do resolve paths inside css url() functions

Reproduction

https://github.com/GustavoMelloGit/vite-mre

Steps to reproduce

1. Clone repository
2. Run npm i
3. Run npm run build
4. Look at the files inside the dist folder

System Info

System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M2
    Memory: 86.63 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: 9.12.2 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 129.0.6668.101
    Safari: 18.0.1

Used Package Manager

npm

Logs

Click to expand!

> [email protected] build
> tsc -b && vite build --debug

  vite:config bundled config file loaded in 33.71ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:force-systemjs-wrap-complete',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { onwarn: [Function: onwarn] },
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     ssrEmitAssets: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true },
  vite:config     cssMinify: true
  vite:config   },
  vite:config   esbuild: { jsxDev: false, jsx: 'automatic', jsxImportSource: undefined },
  vite:config   optimizeDeps: {
  vite:config     holdUntilCrawlEnd: true,
  vite:config     esbuildOptions: { preserveSymlinks: false, jsx: 'automatic' },
  vite:config     include: [ 'react', 'react/jsx-dev-runtime', 'react/jsx-runtime' ]
  vite:config   },
  vite:config   resolve: {
  vite:config     mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ],
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [ 'react', 'react-dom' ],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   configFile: '/Users/gustavo/Documents/vite-bug/vite.config.ts',
  vite:config   configFileDependencies: [ '/Users/gustavo/Documents/vite-bug/vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/Users/gustavo/Documents/vite-bug',
  vite:config   base: '/',
  vite:config   decodedBase: '/',
  vite:config   rawBase: '/',
  vite:config   publicDir: '/Users/gustavo/Documents/vite-bug/public',
  vite:config   cacheDir: '/Users/gustavo/Documents/vite-bug/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   ssr: {
  vite:config     target: 'node',
  vite:config     optimizeDeps: { noDiscovery: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   bundleChain: [],
  vite:config   isProduction: true,
  vite:config   css: { lightningcss: undefined },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     sourcemapIgnoreList: [Function: isInNodeModules$1],
  vite:config     middlewareMode: false,
  vite:config     fs: {
  vite:config       strict: true,
  vite:config       allow: [Array],
  vite:config       deny: [Array],
  vite:config       cachedChecks: undefined
  vite:config     }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   envDir: '/Users/gustavo/Documents/vite-bug',
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(1) {
  vite:config     'fnpd_/Users/gustavo/Documents/vite-bug' => {
  vite:config       dir: '/Users/gustavo/Documents/vite-bug',
  vite:config       data: [Object],
  vite:config       hasSideEffects: [Function: hasSideEffects],
  vite:config       webResolvedImports: {},
  vite:config       nodeResolvedImports: {},
  vite:config       setResolvedCache: [Function: setResolvedCache],
  vite:config       getResolvedCache: [Function: getResolvedCache]
  vite:config     },
  vite:config     set: [Function (anonymous)]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +22ms
vite v5.4.9 building for production...
transforming (1) index.html  vite:resolve 0.23ms ./assets/Namian-Regular.woff2 -> /Users/gustavo/Documents/vite-bug/src/assets/Namian-Regular.woff2 +0ms
✓ 31 modules transformed.
dist/index.html                              0.46 kB │ gzip:  0.30 kB
dist/assets/Namian-Regular-Baaf_SnZ.woff2   17.06 kB
dist/assets/index-C8OGOnN2.css               0.27 kB │ gzip:  0.15 kB
dist/assets/index-BZJhLpLC.js              142.48 kB │ gzip: 45.74 kB
✓ built in 379ms```
</details>

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vite.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitejs/vite/issues) 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](https://github.com/vuejs/core) instead.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite/discussions) or join our [Discord Chat Server](https://chat.vite.dev/).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
```[tasklist]
### Tasks

[sapphi-red]

I don't see any problem with the build output. url(/fonts/Namian-Regular.woff2) points the dist/fonts/Namian-Regular.woff2 and url(/assets/Namian-Regular-Baaf_SnZ.woff2) points the dist/assets/Namian-Regular-Baaf_SnZ.woff2. Both of the files exists.
Would you expand on what you are expecting here?

[GustavoMelloGit]

I don't see any problem with the build output. url(/fonts/Namian-Regular.woff2) points the dist/fonts/Namian-Regular.woff2 and url(/assets/Namian-Regular-Baaf_SnZ.woff2) points the dist/assets/Namian-Regular-Baaf_SnZ.woff2. Both of the files exists. Would you expand on what you are expecting here?

The file exists, but the path to it is wrong. You can try ctrl clicking it and you are going to see that it does not work.

[sapphi-red]

I don't think the path is wrong. Vite expects the output directory to be served under / by default and output is correct in that case. It's just that your editor does not support ctrl clicking on paths starting with /.