@webstudio-is/fonts 0.55.0 → 0.57.0

package/lib/cjs/get-font-faces.js

@@ -22,14 +22,14 @@ __export(get_font_faces_exports, {
 });
 module.exports = __toCommonJS(get_font_faces_exports);
 var import_constants = require("./constants");
-const formatFace = (asset, format) => {
+const formatFace = (asset, format, url) => {
   if ("variationAxes" in asset.meta) {
     const { wght, wdth } = asset.meta?.variationAxes ?? {};
     return {
       fontFamily: asset.meta.family,
       fontStyle: "normal",
       fontDisplay: "swap",
-      src: `url('${asset.path}') format('${format}')`,
+      src: `url('${url}') format('${format}')`,
       fontStretch: wdth ? `${wdth.min}% ${wdth.max}%` : void 0,
       fontWeight: wght ? `${wght.min} ${wght.max}` : void 0
     };
@@ -39,7 +39,7 @@ const formatFace = (asset, format) => {
     fontStyle: asset.meta.style,
     fontWeight: asset.meta.weight,
     fontDisplay: "swap",
-    src: `url('${asset.path}') format('${format}')`
+    src: `url('${url}') format('${format}')`
   };
 };
 const getKey = (asset) => {
@@ -48,9 +48,11 @@ const getKey = (asset) => {
   }
   return asset.meta.family + asset.meta.style + asset.meta.weight;
 };
-const getFontFaces = (assets) => {
+const getFontFaces = (assets, options) => {
+  const { assetBaseUrl } = options;
   const faces = /* @__PURE__ */ new Map();
   for (const asset of assets) {
+    const url = `${assetBaseUrl}${asset.name}`;
     const assetKey = getKey(asset);
     const face = faces.get(assetKey);
     const format = import_constants.FONT_FORMATS.get(asset.format);
@@ -58,11 +60,11 @@ const getFontFaces = (assets) => {
       continue;
     }
     if (face === void 0) {
-      const face2 = formatFace(asset, format);
+      const face2 = formatFace(asset, format, url);
       faces.set(assetKey, face2);
       continue;
     }
-    face.src += `, url('${asset.path}') format('${format}')`;
+    face.src += `, url('${url}') format('${format}')`;
   }
   return Array.from(faces.values());
 };

package/lib/get-font-faces.js

@@ -1,12 +1,12 @@
 import { FONT_FORMATS } from "./constants";
-const formatFace = (asset, format) => {
+const formatFace = (asset, format, url) => {
   if ("variationAxes" in asset.meta) {
     const { wght, wdth } = asset.meta?.variationAxes ?? {};
     return {
       fontFamily: asset.meta.family,
       fontStyle: "normal",
       fontDisplay: "swap",
-      src: `url('${asset.path}') format('${format}')`,
+      src: `url('${url}') format('${format}')`,
       fontStretch: wdth ? `${wdth.min}% ${wdth.max}%` : void 0,
       fontWeight: wght ? `${wght.min} ${wght.max}` : void 0
     };
@@ -16,7 +16,7 @@ const formatFace = (asset, format) => {
     fontStyle: asset.meta.style,
     fontWeight: asset.meta.weight,
     fontDisplay: "swap",
-    src: `url('${asset.path}') format('${format}')`
+    src: `url('${url}') format('${format}')`
   };
 };
 const getKey = (asset) => {
@@ -25,9 +25,11 @@ const getKey = (asset) => {
   }
   return asset.meta.family + asset.meta.style + asset.meta.weight;
 };
-const getFontFaces = (assets) => {
+const getFontFaces = (assets, options) => {
+  const { assetBaseUrl } = options;
   const faces = /* @__PURE__ */ new Map();
   for (const asset of assets) {
+    const url = `${assetBaseUrl}${asset.name}`;
     const assetKey = getKey(asset);
     const face = faces.get(assetKey);
     const format = FONT_FORMATS.get(asset.format);
@@ -35,11 +37,11 @@ const getFontFaces = (assets) => {
       continue;
     }
     if (face === void 0) {
-      const face2 = formatFace(asset, format);
+      const face2 = formatFace(asset, format, url);
       faces.set(assetKey, face2);
       continue;
     }
-    face.src += `, url('${asset.path}') format('${format}')`;
+    face.src += `, url('${url}') format('${format}')`;
   }
   return Array.from(faces.values());
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/fonts",
-  "version": "0.55.0",
+  "version": "0.57.0",
   "description": "Fonts utils",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -14,10 +14,10 @@
     "jest": "^29.3.1",
     "typescript": "5.0.3",
     "zod": "^3.19.1",
-    "@webstudio-is/design-system": "^0.55.0",
-    "@webstudio-is/jest-config": "^1.0.2",
+    "@webstudio-is/design-system": "^0.57.0",
+    "@webstudio-is/jest-config": "^1.0.4",
     "@webstudio-is/scripts": "^0.0.0",
-    "@webstudio-is/tsconfig": "^1.0.3"
+    "@webstudio-is/tsconfig": "^1.0.4"
   },
   "peerDependencies": {
     "zod": "^3.19.1"
@@ -44,12 +44,12 @@
   "private": false,
   "sideEffects": false,
   "scripts": {
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit --emitDeclarationOnly false",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "checks": "pnpm typecheck && pnpm lint && pnpm test",
     "dev": "build-package --watch",
     "build": "build-package",
-    "dts": "tsc --emitDeclarationOnly --declaration --declarationDir lib/types",
+    "dts": "tsc",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0"
   }
 }

package/src/get-font-faces.test.ts

@@ -11,7 +11,7 @@ describe("getFontFaces()", () => {
           style: "normal",
           weight: 400,
         },
-        path: "/fonts/roboto.woff",
+        name: "roboto.woff",
       },
       {
         format: "ttf",
@@ -20,10 +20,10 @@ describe("getFontFaces()", () => {
           style: "normal",
           weight: 400,
         },
-        path: "/fonts/roboto.ttf",
+        name: "roboto.ttf",
       },
     ];
-    expect(getFontFaces(assets)).toMatchSnapshot();
+    expect(getFontFaces(assets, { assetBaseUrl: "/fonts/" })).toMatchSnapshot();
   });
 
   test("different style", () => {
@@ -35,7 +35,7 @@ describe("getFontFaces()", () => {
           style: "normal",
           weight: 400,
         },
-        path: "/fonts/roboto.ttf",
+        name: "roboto.ttf",
       },
       {
         format: "ttf",
@@ -44,10 +44,10 @@ describe("getFontFaces()", () => {
           style: "italic",
           weight: 400,
         },
-        path: "/fonts/roboto-italic.ttf",
+        name: "roboto-italic.ttf",
       },
     ];
-    expect(getFontFaces(assets)).toMatchSnapshot();
+    expect(getFontFaces(assets, { assetBaseUrl: "/fonts/" })).toMatchSnapshot();
   });
 
   test("different weight", () => {
@@ -59,7 +59,7 @@ describe("getFontFaces()", () => {
           style: "normal",
           weight: 400,
         },
-        path: "/fonts/roboto.ttf",
+        name: "roboto.ttf",
       },
       {
         format: "ttf",
@@ -68,10 +68,10 @@ describe("getFontFaces()", () => {
           style: "normal",
           weight: 500,
         },
-        path: "/fonts/roboto-bold.ttf",
+        name: "roboto-bold.ttf",
       },
     ];
-    expect(getFontFaces(assets)).toMatchSnapshot();
+    expect(getFontFaces(assets, { assetBaseUrl: "/fonts/" })).toMatchSnapshot();
   });
 
   test("variable font", () => {
@@ -96,9 +96,9 @@ describe("getFontFaces()", () => {
             YTFI: { name: "YTFI", min: 560, default: 738, max: 788 },
           },
         },
-        path: "/fonts/inter.ttf",
+        name: "inter.ttf",
       },
     ];
-    expect(getFontFaces(assets)).toMatchSnapshot();
+    expect(getFontFaces(assets, { assetBaseUrl: "/fonts/" })).toMatchSnapshot();
   });
 });

package/src/get-font-faces.ts

@@ -4,7 +4,7 @@ import type { FontMeta, FontFormat, FontMetaStatic } from "./schema";
 export type PartialFontAsset = {
   format: FontFormat;
   meta: FontMeta;
-  path: string;
+  name: string;
 };
 
 export type FontFace = {
@@ -16,14 +16,18 @@ export type FontFace = {
   fontStretch?: string;
 };
 
-const formatFace = (asset: PartialFontAsset, format: string): FontFace => {
+const formatFace = (
+  asset: PartialFontAsset,
+  format: string,
+  url: string
+): FontFace => {
   if ("variationAxes" in asset.meta) {
     const { wght, wdth } = asset.meta?.variationAxes ?? {};
     return {
       fontFamily: asset.meta.family,
       fontStyle: "normal",
       fontDisplay: "swap",
-      src: `url('${asset.path}') format('${format}')`,
+      src: `url('${url}') format('${format}')`,
       fontStretch: wdth ? `${wdth.min}% ${wdth.max}%` : undefined,
       fontWeight: wght ? `${wght.min} ${wght.max}` : undefined,
     };
@@ -33,7 +37,7 @@ const formatFace = (asset: PartialFontAsset, format: string): FontFace => {
     fontStyle: asset.meta.style,
     fontWeight: asset.meta.weight,
     fontDisplay: "swap",
-    src: `url('${asset.path}') format('${format}')`,
+    src: `url('${url}') format('${format}')`,
   };
 };
 
@@ -45,10 +49,15 @@ const getKey = (asset: PartialFontAsset) => {
 };
 
 export const getFontFaces = (
-  assets: Array<PartialFontAsset>
+  assets: Array<PartialFontAsset>,
+  options: {
+    assetBaseUrl: string;
+  }
 ): Array<FontFace> => {
+  const { assetBaseUrl } = options;
   const faces = new Map();
   for (const asset of assets) {
+    const url = `${assetBaseUrl}${asset.name}`;
     const assetKey = getKey(asset);
     const face = faces.get(assetKey);
     const format = FONT_FORMATS.get(asset.format);
@@ -58,13 +67,13 @@ export const getFontFaces = (
     }
 
     if (face === undefined) {
-      const face = formatFace(asset, format);
+      const face = formatFace(asset, format, url);
       faces.set(assetKey, face);
       continue;
     }
 
     // We already have that font face, so we need to add the new src
-    face.src += `, url('${asset.path}') format('${format}')`;
+    face.src += `, url('${url}') format('${format}')`;
   }
   return Array.from(faces.values());
 };

package/lib/types/constants.d.ts

@@ -1,5 +0,0 @@
-import type { FontFormat } from "./schema";
-export declare const SYSTEM_FONTS: Map<string, string[]>;
-export declare const DEFAULT_FONT_FALLBACK = "sans-serif";
-export declare const FONT_FORMATS: Map<FontFormat, string>;
-export declare const FONT_MIME_TYPES: string;

package/lib/types/font-data.d.ts

@@ -1,29 +0,0 @@
-import type { FontFormat, VariationAxes } from "./schema";
-declare module "fontkit" {
-    interface Font {
-        type: string;
-        getName: (name: string) => string;
-        variationAxes: VariationAxes;
-    }
-}
-export declare const styles: readonly ["normal", "italic", "oblique"];
-type Style = (typeof styles)[number];
-export declare const parseSubfamily: (subfamily: string) => {
-    style: "normal" | "italic" | "oblique";
-    weight: number;
-};
-export declare const normalizeFamily: (family: string, subfamily: string) => string;
-type FontDataStatic = {
-    format: FontFormat;
-    family: string;
-    style: Style;
-    weight: number;
-};
-type FontDataVariable = {
-    format: FontFormat;
-    family: string;
-    variationAxes: VariationAxes;
-};
-type FontData = FontDataStatic | FontDataVariable;
-export declare const getFontData: (data: Uint8Array) => FontData;
-export {};

package/lib/types/font-data.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/types/font-weights.d.ts

@@ -1,49 +0,0 @@
-export declare const fontWeights: {
-    readonly "100": {
-        readonly label: "Thin";
-        readonly name: "thin";
-        readonly alt: "hairline";
-    };
-    readonly "200": {
-        readonly label: "Extra Light";
-        readonly name: "extra light";
-        readonly alt: "ultra light";
-    };
-    readonly "300": {
-        readonly label: "Light";
-        readonly name: "light";
-        readonly alt: "light";
-    };
-    readonly "400": {
-        readonly label: "Normal";
-        readonly name: "normal";
-        readonly alt: "normal";
-    };
-    readonly "500": {
-        readonly label: "Medium";
-        readonly name: "medium";
-        readonly alt: "medium";
-    };
-    readonly "600": {
-        readonly label: "Semi Bold";
-        readonly name: "semi bold";
-        readonly alt: "demi bold";
-    };
-    readonly "700": {
-        readonly label: "Bold";
-        readonly name: "bold";
-        readonly alt: "bold";
-    };
-    readonly "800": {
-        readonly label: "Extra Bold";
-        readonly name: "extra bold";
-        readonly alt: "ultra bold";
-    };
-    readonly "900": {
-        readonly label: "Black";
-        readonly name: "black";
-        readonly alt: "heavy";
-    };
-};
-export type FontWeight = keyof typeof fontWeights;
-export type FontWeightKeyword = (typeof fontWeights)[FontWeight]["name"] | (typeof fontWeights)[FontWeight]["alt"];

package/lib/types/get-font-faces.d.ts

@@ -1,15 +0,0 @@
-import type { FontMeta, FontFormat, FontMetaStatic } from "./schema";
-export type PartialFontAsset = {
-    format: FontFormat;
-    meta: FontMeta;
-    path: string;
-};
-export type FontFace = {
-    fontFamily: string;
-    fontDisplay: "swap" | "auto" | "block" | "fallback" | "optional";
-    src: string;
-    fontStyle?: FontMetaStatic["style"];
-    fontWeight?: number | string;
-    fontStretch?: string;
-};
-export declare const getFontFaces: (assets: Array<PartialFontAsset>) => Array<FontFace>;

package/lib/types/get-font-faces.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/types/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./constants";
-export * from "./get-font-faces";
-export * from "./schema";
-export * from "./font-weights";

package/lib/types/index.server.d.ts

@@ -1 +0,0 @@
-export { getFontData } from "./font-data";

package/lib/types/schema.d.ts

@@ -1,83 +0,0 @@
-import { z } from "zod";
-export declare const FontFormat: z.ZodUnion<[z.ZodLiteral<"ttf">, z.ZodLiteral<"woff">, z.ZodLiteral<"woff2">, z.ZodLiteral<"otf">]>;
-export type FontFormat = z.infer<typeof FontFormat>;
-declare const VariationAxes: z.ZodRecord<z.ZodEnum<["wght", "wdth", "slnt", "opsz", "ital", "GRAD", "XTRA", "XOPQ", "YOPQ", "YTLC", "YTUC", "YTAS", "YTDE", "YTFI"]>, z.ZodObject<{
-    name: z.ZodString;
-    min: z.ZodNumber;
-    default: z.ZodNumber;
-    max: z.ZodNumber;
-}, "strip", z.ZodTypeAny, {
-    name: string;
-    min: number;
-    default: number;
-    max: number;
-}, {
-    name: string;
-    min: number;
-    default: number;
-    max: number;
-}>>;
-export type VariationAxes = z.infer<typeof VariationAxes>;
-export declare const FontMetaStatic: z.ZodObject<{
-    family: z.ZodString;
-    style: z.ZodEnum<["normal", "italic", "oblique"]>;
-    weight: z.ZodNumber;
-}, "strip", z.ZodTypeAny, {
-    style: "normal" | "italic" | "oblique";
-    weight: number;
-    family: string;
-}, {
-    style: "normal" | "italic" | "oblique";
-    weight: number;
-    family: string;
-}>;
-export type FontMetaStatic = z.infer<typeof FontMetaStatic>;
-export declare const FontMeta: z.ZodUnion<[z.ZodObject<{
-    family: z.ZodString;
-    style: z.ZodEnum<["normal", "italic", "oblique"]>;
-    weight: z.ZodNumber;
-}, "strip", z.ZodTypeAny, {
-    style: "normal" | "italic" | "oblique";
-    weight: number;
-    family: string;
-}, {
-    style: "normal" | "italic" | "oblique";
-    weight: number;
-    family: string;
-}>, z.ZodObject<{
-    family: z.ZodString;
-    variationAxes: z.ZodRecord<z.ZodEnum<["wght", "wdth", "slnt", "opsz", "ital", "GRAD", "XTRA", "XOPQ", "YOPQ", "YTLC", "YTUC", "YTAS", "YTDE", "YTFI"]>, z.ZodObject<{
-        name: z.ZodString;
-        min: z.ZodNumber;
-        default: z.ZodNumber;
-        max: z.ZodNumber;
-    }, "strip", z.ZodTypeAny, {
-        name: string;
-        min: number;
-        default: number;
-        max: number;
-    }, {
-        name: string;
-        min: number;
-        default: number;
-        max: number;
-    }>>;
-}, "strip", z.ZodTypeAny, {
-    variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-        name: string;
-        min: number;
-        default: number;
-        max: number;
-    }>>;
-    family: string;
-}, {
-    variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-        name: string;
-        min: number;
-        default: number;
-        max: number;
-    }>>;
-    family: string;
-}>]>;
-export type FontMeta = z.infer<typeof FontMeta>;
-export {};