cloudflare / cloudflare/vinext

Font CSS rewrite fails on Windows due to path separator mismatch (backslash vs forward slash)

Open Beginner friendly
#3,061 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.