Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fixes an issue where the next-font plugin would not work on windows #20

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+7 −5
Open

fix: fixes an issue where the next-font plugin would not work on windows #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c1cefd7
fix: fixes an issue where the next-font plugin would not work on windows
GeeWizWow Sep 14, 2024
ccecafc
fix: further fixes around windows paths
GeeWizWow Sep 14, 2024
e1cfec2
chore: 2 spaces for tabs
GeeWizWow Sep 14, 2024
8be60a6
fix: remove @fs/ declaration
GeeWizWow Sep 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/plugins/next-font/local/get-font-face-declarations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions) {
if ("fontReferenceId" in localFontSrc) {
return dedent`@font-face {
font-family: ${id};
src: url(${localFontSrc.fontReferenceId ? getPlaceholderFontUrl(localFontSrc.fontReferenceId) : `/@fs${localFontSrc.fontPath}`})
src: url(${localFontSrc.fontReferenceId ? getPlaceholderFontUrl(localFontSrc.fontReferenceId) : `${localFontSrc.fontPath}`})
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately, this breaks local fonts in Vitest.

Reproduction:

  • Go to example/.storybook/vitest.config.mts and set headless: true (line 25)
  • Run pnpm run dev
  • Go to example and run pnpm run test:all in a separate terminal window
  • Got to Vitest inspector (http://localhost:5173/), wait for the test result to finish, and rerun the Font.stories.ts tests.

You can observe, that the local fonts are not correctly rendered.

Bildschirmfoto 2024-11-04 um 10 29 54

${fontDeclarations}
}`;
}
Expand All @@ -86,7 +86,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions) {
.map((font) => {
return dedent`@font-face {
font-family: ${id};
src: url(${font.path.fontReferenceId ? getPlaceholderFontUrl(font.path.fontReferenceId) : `/@fs${font.path.fontPath}`});
src: url(${font.path.fontReferenceId ? getPlaceholderFontUrl(font.path.fontReferenceId) : `${font.path.fontPath}`});
${font.weight ? `font-weight: ${font.weight};` : ""}
${font.style ? `font-style: ${font.style};` : ""}
${fontDeclarations}
Expand Down
8 changes: 5 additions & 3 deletions src/plugins/next-font/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export function vitePluginNextFont() {

let fontFaceDeclaration: FontFaceDeclaration | undefined;

const pathSep = path.sep;
const pathSep = path.posix.sep;

if (
sourceWithoutQuery.endsWith(
Expand All @@ -91,11 +91,13 @@ export function vitePluginNextFont() {
fontExtension,
);

const fontPath = path.join(importerDirPath, importerRelativeFontPath);
const fontPath = path
.join(importerDirPath, importerRelativeFontPath)
.replaceAll(path.win32.sep, path.posix.sep);

if (devMode) {
return {
fontPath: path.join(cwd, fontPath),
fontPath: fontPath,
fontReferenceId: undefined,
};
}
Expand Down