Remove font loading from the library; let apps load their own fonts
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Idoneità per principianti
- 74/100
- Tipo di issue
- Refactoring
- Chiarezza
- Specificata chiaramente
- Stato di attività
- Tranquilla
- Ambito
- documentation, frontend, release
Direzione di ricerca
Inizia da packages/raystack/styles/typography.css e verifica le variabili --rs-font-* che devono rimanere. Individua poi i punti di ingresso della README o della documentazione del progetto e del Changelog/Release Notes menzionati nell’issue, quindi controlla le indicazioni esistenti del package per Vite e Next.js. Il lavoro è completato quando gli import dei font sono stati rimossi, le indicazioni sull’utilizzo coprono entrambi i tipi di app, vengono indicati i font opzionali in stile tradizionale e la migrazione relativa al breaking change è documentata.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
Summary
The library loads fonts itself. packages/raystack/styles/typography.css starts with four Google Fonts @import calls:
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital@0;1&display=swap");
A component library should not decide how or where fonts load. That belongs to the app. We should remove these imports and keep only the --rs-font-* variables (the font-family names), then let each app load the fonts it needs.
Why this is a problem
- Consumers download fonts they never use. Any app that pulls in Apsara fetches Inter, Lora, Josefin Sans, and JetBrains Mono — even if it only uses Inter. Lora and Josefin Sans only apply under
[data-style="traditional"], so most apps pay for them for nothing. @importblocks render. Fonts inside a CSS@importare found late by the browser, which delays paint and causes a flash of unstyled text (FOUT).- Extra connections. Each
@importneeds DNS + TLS to Google's domains before the font even downloads. - No control for the app. The app can't
preloadthe font, can't setfont-display, and can't self-host. All of that is decided inside the library. - Blocks other improvements. We can't cleanly add a 600 weight or use Inter's optical-sizing (
opsz) axis, because the library pins the exact Google Fonts URL and weights.
Proposal
- Remove the four
@importlines frompackages/raystack/styles/typography.css. - Keep the
--rs-font-*variables (Inter, Lora, Josefin Sans, JetBrains Mono, Menlo) so component styles stay unchanged. - Document how consuming apps load the fonts, for example:
- Self-host with Fontsource —
@fontsource-variable/inter(variable font, all weights from one file). next/fontfor Next.js apps.- A plain
@font-faceor Google Fonts<link>for apps that want it.
- Self-host with Fontsource —
- Note the optional families (Lora, Josefin Sans) are only needed for the
traditionalstyle.
Breaking change
This is a breaking change. Apps that rely on Apsara loading fonts will render in a fallback font until they load the fonts themselves. The migration is small — install the fonts and import them once at the app entry — but it must be called out in release notes with a clear before/after.
Acceptance criteria
- No
@importof font files in the library CSS. -
--rs-font-*variables still present; components render identically once the app loads Inter. - Docs / README show how to load fonts in a plain Vite app and a Next.js app.
- Migration note added to the changelog / release notes.
- Lingua principale
- TypeScript
- Stelle
- 70
- Fork
- 13
- Merge medio
- 4g 6h
- PR unite (30g)
- 10
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di raystack/apsara
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
-
Difficoltà 3/5 1-2 giorni Idoneità per principianti 75/100
-
Docs: hand-duplicated props tables drift risk, missing a11y sections, no per-component changelog Apertaenhancement global
Difficoltà 4/5 3-5 giorni Idoneità per principianti 48/100
-
bug global
Difficoltà 4/5 3-5 giorni Idoneità per principianti 48/100
Tutte le issue di raystack/apsara
Issue simili
-
VerificationGate: ATTRIBUTION quote guard never matches a normal quotation (\b around the quote) Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
danielmiessler/LifeOS#2234 ·
-
T: Bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 65/100
-
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 85/100
-
Mend: dependency security vulnerability untriaged
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100