@oxyhq/bloom 0.5.0 → 0.5.1

package/src/fonts/apply-font-faces.web.ts

@@ -1,8 +1,9 @@
-/// <reference path="../assets.d.ts" />
-import blomusReg from './assets/BlomusModernus-Regular.woff2';
-import blomusBold from './assets/BlomusModernus-Bold.woff2';
-import interVar from './assets/InterVariable.woff2';
-import geistMono from './assets/GeistMono-Variable.woff2';
+import {
+  blomusModernusRegular,
+  blomusModernusBold,
+  interVariable,
+  geistMonoVariable,
+} from './font-data.web';
 import { fontFamilies } from './tokens';
 
 const STYLE_ID = 'bloom-fonts';
@@ -12,10 +13,17 @@ const STYLE_ID = 'bloom-fonts';
  *
  * Web-only. The native counterpart in `apply-font-faces.ts` is a no-op
  * stub — Metro cannot parse `.woff2` imports, so the file split keeps
- * those imports out of the native bundle entirely. Idempotent: safe to
+ * the font payload out of the native bundle entirely. Idempotent: safe to
  * call multiple times; subsequent calls early-return after the
  * `<style id="bloom-fonts">` tag has been mounted. SSR-safe via the
  * `typeof document === 'undefined'` guard.
+ *
+ * The font URLs come from `./font-data.web`, a generated module that
+ * embeds the woff2 bytes as base64 data URLs. Inlining (rather than
+ * relying on bundler asset loaders for `.woff2`) means consumers do not
+ * have to extend Metro's `assetExts` or add a webpack/Vite asset rule —
+ * the published JS is self-contained. See `scripts/generate-font-data.mjs`
+ * for the rationale and trade-offs.
  */
 export function applyFontFaces(): void {
   if (typeof document === 'undefined') return;
@@ -24,10 +32,10 @@ export function applyFontFaces(): void {
   const style = document.createElement('style');
   style.id = STYLE_ID;
   style.textContent = `
-    @font-face { font-family: 'BlomusModernus'; src: url(${blomusReg}) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
-    @font-face { font-family: 'BlomusModernus'; src: url(${blomusBold}) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
-    @font-face { font-family: 'Inter'; src: url(${interVar}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
-    @font-face { font-family: 'Geist Mono'; src: url(${geistMono}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'BlomusModernus'; src: url(${blomusModernusRegular}) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'BlomusModernus'; src: url(${blomusModernusBold}) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'Inter'; src: url(${interVariable}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'Geist Mono'; src: url(${geistMonoVariable}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
     :root {
       --bloom-font-display: ${fontFamilies.display};
       --bloom-font-sans: ${fontFamilies.sans};

package/src/fonts/font-assets.ts

@@ -5,8 +5,8 @@
 // covers all weights at runtime. `@fontsource(-variable)?/*` packages only
 // publish .woff2 for their variable axes — modern react-native font loading
 // requires .ttf, so we use the upstream variable TTFs instead. On web,
-// `apply-font-faces.web.ts` references the .woff2 variants directly and this
-// file is never imported.
+// `apply-font-faces.web.ts` inlines the .woff2 variants as base64 data URLs
+// (see `font-data.web.ts`) and this file is never imported.
 
 export const FONT_ASSETS = {
   BlomusModernus: require('./assets/BlomusModernus-Regular.ttf'),