From 12684bc134737304baadde2aa9a3bfb2f8640742 Mon Sep 17 00:00:00 2001 From: Sacha STAFYNIAK Date: Sun, 1 Dec 2024 17:11:28 +0100 Subject: [PATCH] feat: add fontBaseUrl and preconnectUrl on google font provider close #78 --- README.md | 12 +++++++++++ pnpm-lock.yaml | 42 ++++++++++++++++++++----------------- src/loaders/google-fonts.ts | 11 +++++----- src/types.ts | 8 +++++++ 4 files changed, 48 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 46820cc..3dc1a5c 100644 --- a/README.md +++ b/README.md @@ -266,6 +266,18 @@ Unfonts({ */ preconnect: false, + /** + * allow preconnect to be customized + * default: 'https://fonts.gstatic.com' + */ + preconnectUrl: 'https://fonts.gstatic.com', + + /** + * customizes the base URL for the font request + * default: 'https://fonts.googleapis.com/css2' + */ + fontBaseUrl: 'https://fonts.googleapis.com/css2', + /** * values: auto, block, swap(default), fallback, optional * default: 'swap' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6aaf47b..e79be3f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7548,7 +7548,7 @@ snapshots: '@astrojs/telemetry@3.1.0': dependencies: ci-info: 4.1.0 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 dlv: 1.1.3 dset: 3.1.4 is-docker: 3.0.0 @@ -7582,7 +7582,7 @@ snapshots: '@babel/traverse': 7.25.9 '@babel/types': 7.26.0 convert-source-map: 2.0.0 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 gensync: 1.0.0-beta.2 json5: 2.2.3 semver: 6.3.1 @@ -7753,7 +7753,7 @@ snapshots: '@babel/parser': 7.26.2 '@babel/template': 7.25.9 '@babel/types': 7.26.0 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 globals: 11.12.0 transitivePeerDependencies: - supports-color @@ -8263,7 +8263,7 @@ snapshots: '@eslint/config-array@0.19.0': dependencies: '@eslint/object-schema': 2.1.4 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 minimatch: 3.1.2 transitivePeerDependencies: - supports-color @@ -8273,7 +8273,7 @@ snapshots: '@eslint/eslintrc@3.2.0': dependencies: ajv: 6.12.6 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 espree: 10.3.0 globals: 14.0.0 ignore: 5.3.2 @@ -9131,7 +9131,7 @@ snapshots: '@typescript-eslint/types': 8.16.0 '@typescript-eslint/typescript-estree': 8.16.0(typescript@5.7.2) '@typescript-eslint/visitor-keys': 8.16.0 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 eslint: 9.16.0(jiti@2.4.1) optionalDependencies: typescript: 5.7.2 @@ -9147,7 +9147,7 @@ snapshots: dependencies: '@typescript-eslint/typescript-estree': 8.16.0(typescript@5.7.2) '@typescript-eslint/utils': 8.16.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2) - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 eslint: 9.16.0(jiti@2.4.1) ts-api-utils: 1.4.3(typescript@5.7.2) optionalDependencies: @@ -9161,7 +9161,7 @@ snapshots: dependencies: '@typescript-eslint/types': 8.16.0 '@typescript-eslint/visitor-keys': 8.16.0 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 fast-glob: 3.3.2 is-glob: 4.0.3 minimatch: 9.0.5 @@ -9882,7 +9882,7 @@ snapshots: common-ancestor-path: 1.0.1 cookie: 0.7.2 cssesc: 3.0.0 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 deterministic-object-hash: 2.0.2 devalue: 5.1.1 diff: 5.2.0 @@ -10561,6 +10561,10 @@ snapshots: dependencies: ms: 2.1.3 + debug@4.3.7: + dependencies: + ms: 2.1.3 + debug@4.3.7(supports-color@9.4.0): dependencies: ms: 2.1.3 @@ -10959,7 +10963,7 @@ snapshots: eslint-plugin-import-x@4.4.3(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2): dependencies: '@typescript-eslint/utils': 8.16.0(eslint@9.16.0(jiti@2.4.1))(typescript@5.7.2) - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 doctrine: 3.0.0 eslint: 9.16.0(jiti@2.4.1) eslint-import-resolver-node: 0.3.9 @@ -10978,7 +10982,7 @@ snapshots: '@es-joy/jsdoccomment': 0.49.0 are-docs-informative: 0.0.2 comment-parser: 1.4.1 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 escape-string-regexp: 4.0.0 eslint: 9.16.0(jiti@2.4.1) espree: 10.3.0 @@ -11041,7 +11045,7 @@ snapshots: eslint-plugin-toml@0.11.1(eslint@9.16.0(jiti@2.4.1)): dependencies: - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 eslint: 9.16.0(jiti@2.4.1) eslint-compat-utils: 0.5.1(eslint@9.16.0(jiti@2.4.1)) lodash: 4.17.21 @@ -11091,7 +11095,7 @@ snapshots: eslint-plugin-yml@1.16.0(eslint@9.16.0(jiti@2.4.1)): dependencies: - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 eslint: 9.16.0(jiti@2.4.1) eslint-compat-utils: 0.6.4(eslint@9.16.0(jiti@2.4.1)) lodash: 4.17.21 @@ -11141,7 +11145,7 @@ snapshots: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.6 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 escape-string-regexp: 4.0.0 eslint-scope: 8.2.0 eslint-visitor-keys: 4.2.0 @@ -12785,7 +12789,7 @@ snapshots: micromark@4.0.1: dependencies: '@types/debug': 4.1.12 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 decode-named-character-reference: 1.0.2 devlop: 1.1.0 micromark-core-commonmark: 2.0.2 @@ -14745,7 +14749,7 @@ snapshots: cac: 6.7.14 chokidar: 4.0.1 consola: 3.2.3 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 esbuild: 0.24.0 joycon: 3.1.1 picocolors: 1.1.1 @@ -15103,7 +15107,7 @@ snapshots: vite-node@2.1.6(@types/node@22.10.1)(jiti@2.4.1)(terser@5.36.0)(tsx@4.19.2)(yaml@2.6.1): dependencies: cac: 6.7.14 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 es-module-lexer: 1.5.4 pathe: 1.1.2 vite: 6.0.1(@types/node@22.10.1)(jiti@2.4.1)(terser@5.36.0)(tsx@4.19.2)(yaml@2.6.1) @@ -15281,7 +15285,7 @@ snapshots: '@vitest/spy': 2.1.6 '@vitest/utils': 2.1.6 chai: 5.1.2 - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 expect-type: 1.1.0 magic-string: 0.30.14 pathe: 1.1.2 @@ -15384,7 +15388,7 @@ snapshots: vue-eslint-parser@9.4.3(eslint@9.16.0(jiti@2.4.1)): dependencies: - debug: 4.3.7(supports-color@9.4.0) + debug: 4.3.7 eslint: 9.16.0(jiti@2.4.1) eslint-scope: 7.2.2 eslint-visitor-keys: 3.4.3 diff --git a/src/loaders/google-fonts.ts b/src/loaders/google-fonts.ts index 48a44ae..20ec917 100644 --- a/src/loaders/google-fonts.ts +++ b/src/loaders/google-fonts.ts @@ -1,15 +1,14 @@ import type { HtmlTagDescriptor } from 'vite' import type { GoogleFonts } from '../types' -const GoogleFontsBase = 'https://fonts.googleapis.com/css2' -const GStaticBase = 'https://fonts.gstatic.com/' - export function googleLoader({ families, text, preconnect = true, display = 'swap', injectTo = 'head-prepend', + fontBaseUrl = 'https://fonts.googleapis.com/css2', + preconnectUrl = 'https://fonts.gstatic.com/', }: GoogleFonts): HtmlTagDescriptor[] { const specs: string[] = [] const deferedSpecs: string[] = [] @@ -61,7 +60,7 @@ export function googleLoader({ injectTo, attrs: { rel: 'preconnect', - href: GStaticBase, + href: preconnectUrl, crossorigin: 'anonymous', }, }) @@ -70,7 +69,7 @@ export function googleLoader({ // defer loading font-faces definitions // @see https://web.dev/optimize-lcp/#defer-non-critical-css if (deferedSpecs.length > 0) { - let href = `${GoogleFontsBase}?family=${deferedSpecs.join('&family=')}` + let href = `${fontBaseUrl}?family=${deferedSpecs.join('&family=')}` if (typeof display === 'string' && display !== 'auto') href += `&display=${display}` @@ -91,7 +90,7 @@ export function googleLoader({ // load critical fonts if (specs.length > 0) { - let href = `${GoogleFontsBase}?family=${specs.join('&family=')}` + let href = `${fontBaseUrl}?family=${specs.join('&family=')}` if (typeof display === 'string' && display !== 'auto') href += `&display=${display}` diff --git a/src/types.ts b/src/types.ts index 00e111a..ca3429b 100644 --- a/src/types.ts +++ b/src/types.ts @@ -145,6 +145,14 @@ export interface GoogleFonts { * @default: 'head-prepend' */ injectTo?: 'head' | 'body' | 'head-prepend' | 'body-prepend' + /** + * @default: 'https://fonts.googleapis.com/css2' + */ + fontBaseUrl?: string + /** + * @default: 'https://fonts.gstatic.com/' + */ + preconnectUrl?: string } export interface TypeKitFonts {