cloudflare / cloudflare/vinext
Font CSS rewrite fails on Windows due to path separator mismatch (backslash vs forward slash)
- Dominant language
- TypeScript
- Stars
- 8.8k
- Forks
- 406
- Avg merge
- 2d 6h
- Merged PRs (30d)
- 120
Description
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used [patch-package](https://github.com/ds300/patch-package) to patch `vinext@0.0.50` for the project I'm working on.
Here is the diff that solved my problem:
```diff
diff --git a/node_modules/vinext/dist/plugins/fonts.js b/node_modules/vinext/dist/plugins/fonts.js
index b749585..665aae0 100644
--- a/node_modules/vinext/dist/plugins/fonts.js
+++ b/node_modules/vinext/dist/plugins/fonts.js
@@ -87,9 +87,15 @@ function formatGoogleFontsErrorBody(body) {
* filesystems.
*/
function _rewriteCachedFontCssToServedUrls(css, cacheDir, assetsDir = DEFAULT_ASSETS_DIR) {
- if (!cacheDir || !css.includes(cacheDir)) return css;
+ if (!cacheDir) return css;
+ // The cached CSS stores the font path with forward slashes (see
+ // fetchAndCacheFont), but `cacheDir` comes from path.join, which uses
+ // backslashes on Windows. Without matching the two, this returns early
+ // and the dev-machine absolute path ships to the browser.
+ const needle = cacheDir.replaceAll("\\", "/");
+ if (!css.includes(needle)) return css;
const prefix = assetsDir || DEFAULT_ASSETS_DIR;
- return css.split(cacheDir).join(`/${prefix}/${VINEXT_FONT_URL_NAMESPACE}`);
+ return css.split(needle).join(`/${prefix}/${VINEXT_FONT_URL_NAMESPACE}`);
}
/**
* Default Vite `build.assetsDir` — mirrors Vite's own default. Used as
```
This issue body was [partially generated by patch-package](https://github.com/ds300/patch-package/issues/296).
Contributor guide
Research direction
Start in dist/plugins/fonts.js at _rewriteCachedFontCssToServedUrls and compare the cached font paths with the Windows path handling described in the issue. Reproduce the font CSS rewrite on Windows or with backslash-based paths, then verify that served URLs are produced instead of absolute filesystem paths.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- build-system
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 76/100