From bfb6038e087f8c29bbd5034f2163d7b5a8fd4074 Mon Sep 17 00:00:00 2001 From: Florian Lefebvre Date: Thu, 18 Jan 2024 16:30:45 +0100 Subject: [PATCH 1/3] fix: font weight issue and types improvements --- packages/astro-font/utils.ts | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/astro-font/utils.ts b/packages/astro-font/utils.ts index a537300..5ec4234 100644 --- a/packages/astro-font/utils.ts +++ b/packages/astro-font/utils.ts @@ -1,3 +1,5 @@ +/// + import { create } from 'fontkit' import { join } from 'node:path' import { relative } from 'pathe' @@ -11,17 +13,20 @@ interface Record { interface Source { path: string - css?: Record - style: string + css?: astroHTML.JSX.CSSProperties + // https://developer.mozilla.org/en-US/docs/Web/CSS/font-style + style: "normal" | "italic" | "oblique" | `oblique ${number}deg` preload?: boolean - weight?: string | number + // https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight + weight?: "normal" | "bold" | "lighter" | "bolder" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | number } interface Config { name: string src: Source[] fetch?: boolean - display: string + // https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display + display: "auto" | "block" | "swap" | "fallback" | "optional" selector?: string preload?: boolean cacheDir?: string @@ -29,7 +34,8 @@ interface Config { fallbackName?: string googleFontsURL?: string cssVariable?: string | boolean - fallback: 'serif' | 'sans-serif' + // https://developer.mozilla.org/fr/docs/Web/CSS/font-family + fallback: 'serif' | 'sans-serif' | 'monospace' | 'cursive' | 'fantasy' | 'system-ui' | 'emoji' | 'math' | 'fangsong' | 'inherit' | 'initial' | 'unset' } export interface Props { @@ -255,7 +261,7 @@ async function getFallbackFont(fontCollection: Config): Promise { if (res) { fonts.push({ style: i.style, - weight: i.weight, + weight: i.weight?.toString(), metadata: create(res), }) } From 2d4f64d0926091fb97c0242294afb00d270dc298 Mon Sep 17 00:00:00 2001 From: Florian Lefebvre Date: Fri, 19 Jan 2024 08:15:08 +0100 Subject: [PATCH 2/3] fix: ts types --- packages/astro-font/utils.ts | 20 +++++++++----------- src/pages/index.astro | 7 ++++--- src/pages/second.astro | 2 +- 3 files changed, 14 insertions(+), 15 deletions(-) diff --git a/packages/astro-font/utils.ts b/packages/astro-font/utils.ts index 5ec4234..ba2a04a 100644 --- a/packages/astro-font/utils.ts +++ b/packages/astro-font/utils.ts @@ -1,5 +1,3 @@ -/// - import { create } from 'fontkit' import { join } from 'node:path' import { relative } from 'pathe' @@ -7,18 +5,18 @@ import { Buffer } from 'node:buffer' import { getFallbackMetricsFromFontFile } from './font.ts' import { pickFontFileForFallbackGeneration } from './fallback.ts' -interface Record { - [property: string]: string -} +type GlobalValues = "inherit" | "initial" | "revert" | "revert-layer" | "unset" + +type FontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 interface Source { path: string - css?: astroHTML.JSX.CSSProperties + css?: Record // https://developer.mozilla.org/en-US/docs/Web/CSS/font-style - style: "normal" | "italic" | "oblique" | `oblique ${number}deg` + style: "normal" | "italic" | "oblique" | `oblique ${number}deg` | GlobalValues | {} preload?: boolean // https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight - weight?: "normal" | "bold" | "lighter" | "bolder" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | number + weight?: "normal" | "bold" | "lighter" | "bolder" | GlobalValues | FontWeight | `${FontWeight}` | {} } interface Config { @@ -26,7 +24,7 @@ interface Config { src: Source[] fetch?: boolean // https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display - display: "auto" | "block" | "swap" | "fallback" | "optional" + display: "auto" | "block" | "swap" | "fallback" | "optional" | {} selector?: string preload?: boolean cacheDir?: string @@ -35,7 +33,7 @@ interface Config { googleFontsURL?: string cssVariable?: string | boolean // https://developer.mozilla.org/fr/docs/Web/CSS/font-family - fallback: 'serif' | 'sans-serif' | 'monospace' | 'cursive' | 'fantasy' | 'system-ui' | 'emoji' | 'math' | 'fangsong' | 'inherit' | 'initial' | 'unset' + fallback: 'serif' | 'sans-serif' } export interface Props { @@ -232,7 +230,7 @@ export async function generateFonts(fontCollection: Config[]): Promise return duplicatedCollection } -async function getFallbackFont(fontCollection: Config): Promise { +async function getFallbackFont(fontCollection: Config): Promise> { const fonts: any[] = [] let writeAllowed, tmpDir, cachedFilePath, cacheDir const [os, fs] = await Promise.all([getOS(), getFS()]) diff --git a/src/pages/index.astro b/src/pages/index.astro index 8a910a5..32e2525 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -16,14 +16,15 @@ import { AstroFont } from 'astro-font' basePath: './public', src: [ { - style: 'bold', + style: 'normal', + weight: 'bold', // (Optional) but ensures that it is preloaded preload: true, path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2', }, { - weight: '500', - style: 'medium', + weight: 500, + style: 'normal', // (Optional) but does not preload this specifically preload: true, path: './public/fonts/Afacad-Medium.ttf', diff --git a/src/pages/second.astro b/src/pages/second.astro index 4fd66f9..459da33 100644 --- a/src/pages/second.astro +++ b/src/pages/second.astro @@ -25,7 +25,7 @@ import { AstroFont } from 'astro-font' // }, { weight: '500', - style: 'medium', + style: 'normal', // (Optional) but does not preload this specifically preload: false, path: join(process.cwd(), 'public', 'fonts', 'Afacad-Medium.ttf'), From 2c502150126fc889566ee37e7799c13ccba225a7 Mon Sep 17 00:00:00 2001 From: Rishi Raj Jain Date: Fri, 19 Jan 2024 17:52:18 +0530 Subject: [PATCH 3/3] Update utils.ts --- packages/astro-font/utils.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/astro-font/utils.ts b/packages/astro-font/utils.ts index 642b47d..43d26ae 100644 --- a/packages/astro-font/utils.ts +++ b/packages/astro-font/utils.ts @@ -25,7 +25,6 @@ interface Config { fetch?: boolean // https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display display: "auto" | "block" | "swap" | "fallback" | "optional" | {} - display: string verbose?: boolean selector?: string preload?: boolean