@webstudio-is/fonts 0.56.0 → 0.58.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/lib/types/get-font-faces.d.ts

@@ -2,7 +2,7 @@ import type { FontMeta, FontFormat, FontMetaStatic } from "./schema";
 export type PartialFontAsset = {
     format: FontFormat;
     meta: FontMeta;
-    path: string;
+    name: string;
 };
 export type FontFace = {
     fontFamily: string;
@@ -12,4 +12,6 @@ export type FontFace = {
     fontWeight?: number | string;
     fontStretch?: string;
 };
-export declare const getFontFaces: (assets: Array<PartialFontAsset>) => Array<FontFace>;
+export declare const getFontFaces: (assets: Array<PartialFontAsset>, options: {
+    assetBaseUrl: string;
+}) => Array<FontFace>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/fonts",
-  "version": "0.56.0",
+  "version": "0.58.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.56.0",
-    "@webstudio-is/jest-config": "^1.0.2",
+    "@webstudio-is/design-system": "^0.58.0",
+    "@webstudio-is/jest-config": "^1.0.5",
     "@webstudio-is/scripts": "^0.0.0",
-    "@webstudio-is/tsconfig": "^1.0.3"
+    "@webstudio-is/tsconfig": "^1.0.5"
   },
   "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 --declarationDir lib/types",
     "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());
 };