Crash when adding dependencies containing # in the filename

[philipp-spiess]

Describe the bug

When using addWatchFile(…) inside a transform hook on CSS files to watch a file containing a number sign (#), Vite errors and the file is not going to be watched.

This can be reproduced by a plugin like this:

function plugin(): Plugin {
  return {
    name: "my-plugin",
    async transform(content: string | undefined, id: string) {
      if (id.endsWith("index.css")) {
        this.addWatchFile(
          fileURLToPath(new URL("./public/c%23.svg", import.meta.url))
        );
        return `/* ${Math.random()} */\n${content}`;
      }
    },
  };
}

Which will result into an error like:

1:07:01 PM [vite] (client) Pre-transform error: ENOENT: no such file or directory, open '/Users/philipp/dev/vite-css-dependency-number-sign/public/c'
  Plugin: vite:css-analysis
  File: /Users/philipp/dev/vite-css-dependency-number-sign/src/index.css

I ensured that the return value of fileURLToPath contains the proper number sign and I also tried replacing it with %23 or \# before calling into addWatchFile or even appending a number sign (so the url reads something like /root/public/c#.svg#), however no scenarios I tried causes the file to be watched.

Reproduction

https://github.com/philipp-spiess/vite-css-dependency-number-sign

Steps to reproduce

pnpm build
pnpm vite dev # An error will be printed to the console
touch public/c#.svg # Does nothing

System Info

System:
  OS: macOS 15.3.1
  CPU: (16) arm64 Apple M4 Max
  Memory: 168.77 MB / 48.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 22.11.0 - ~/.local/share/mise/installs/node/22.11.0/bin/node
  Yarn: 1.22.22 - ~/.local/share/mise/installs/node/22.11.0/bin/yarn
  npm: 10.9.0 - ~/.local/share/mise/installs/node/22.11.0/bin/npm
  pnpm: 9.14.4 - ~/.local/share/mise/installs/pnpm/9.14.4/bin/pnpm
  bun: 1.1.34 - ~/.local/share/mise/installs/bun/1.1.34/bin/bun
Browsers:
  Brave Browser: 133.1.75.180
  Chrome: 133.0.6943.127
  Safari: 18.3
  Safari Technology Preview: 18.2
npmPackages:
  vite: ^6.2.0 => 6.2.0

Used Package Manager

npm

Logs

In a different repro containing storybook, we're seeing a slightly longer stack trace that might be of help

Click to expand!

12:39:00 PM [vite] Internal server error: ENOENT: no such file or directory, open '/Users/philipp/dev/throwaway/storybook-vite-issue-reproduction/public/c\'
  Plugin: vite:css-analysis
  File: /Users/philipp/dev/throwaway/storybook-vite-issue-reproduction/styles/globals.css
      at async open (node:internal/fs/promises:638:25)
      at async Object.readFile (node:internal/fs/promises:1238:14)
      at async fileToDevUrl (file:///Users/philipp/dev/throwaway/storybook-vite-issue-reproduction/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-ByPKlqZ5.js:13596:21)
      at async TransformPluginContext.transform (file:///Users/philipp/dev/throwaway/storybook-vite-issue-reproduction/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-ByPKlqZ5.js:48826:27)
      at async EnvironmentPluginContainer.transform (file:///Users/philipp/dev/throwaway/storybook-vite-issue-reproduction/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-ByPKlqZ5.js:47630:18)
      at async loadAndTransform (file:///Users/philipp/dev/throwaway/storybook-vite-issue-reproduction/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-ByPKlqZ5.js:41318:27)
12:39:00 PM [vite] (client) Pre-transform error: ENOENT: no such file or directory, open '/Users/philipp/dev/throwaway/storybook-vite-issue-reproduction/public/c\'
  Plugin: vite:css-analysis
  File: /Users/philipp/dev/throwaway/storybook-vite-issue-reproduction/styles/globals.css
</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.

[OnlyWick]

This is a problem with cleanUrl. In files, allow ? and # as part of the file name, but in URLs, there may be too many variations. Simply replacing # and ? may not meet all requirements.

Similarly, import "./in#.css"; cannot be handled correctly.

vite/packages/vite/src/shared/utils.ts

Lines 31 to 34 in db5fb48

	const postfixRE = /[?#].*$/
	export function cleanUrl(url: string): string {
	return url.replace(postfixRE, '')
	}

[OnlyWick]

Similarly, import "./in#.css"; cannot be handled correctly.

I took a look, when the file name contains a #, the browser does not send anything after the # to the server. For example, when accessing /c#.svg, the browser will only send /c to the server. So even if the matching issue with cleanUrl is fixed, there is still no way to find the corresponding file based on the URL transmitted by the browser.