@webstudio-is/fonts 0.1.1 → 0.3.0

package/lib/index.server.js

@@ -1,20 +1,4 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+import { getFontData } from "./font-data";
+export {
+  getFontData
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFontData = void 0;
-var font_data_1 = require("./font-data");
-Object.defineProperty(exports, "getFontData", { enumerable: true, get: function () { return font_data_1.getFontData; } });
-__exportStar(require("./schema"), exports);

package/lib/schema.js

@@ -1,10 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FontMeta = void 0;
-const zod_1 = require("zod");
-const font_data_1 = require("./font-data");
-exports.FontMeta = zod_1.z.object({
-    family: zod_1.z.string(),
-    style: zod_1.z.enum(font_data_1.styles),
-    weight: zod_1.z.number(),
+import { z } from "zod";
+import { styles } from "./font-data";
+const FontFormat = z.union([
+  z.literal("ttf"),
+  z.literal("woff"),
+  z.literal("woff2"),
+  z.literal("otf")
+]);
+const FontMeta = z.object({
+  family: z.string(),
+  style: z.enum(styles),
+  weight: z.number()
 });
+export {
+  FontFormat,
+  FontMeta
+};

package/package.json

@@ -1,47 +1,48 @@
 {
   "name": "@webstudio-is/fonts",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Fonts utils",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
+  "type": "module",
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "test": "jest",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "checks": "yarn typecheck && yarn lint && yarn test",
-    "dev": "tsup --watch",
-    "build": "rm -fr lib tsconfig.tsbuildinfo && tsc",
-    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0"
+    "dev": "build-package --watch",
+    "build": "build-package",
+    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
+    "publish-to-npm": "bash ../../bin/publish-to-npm.sh"
   },
   "dependencies": {
     "fontkit": "^2.0.2"
   },
   "devDependencies": {
+    "@types/fontkit": "^2.0.0",
     "@webstudio-is/design-system": "*",
     "@webstudio-is/jest-config": "*",
-    "tsup": "^6.1.3",
+    "@webstudio-is/scripts": "*",
     "typescript": "4.7.4",
-    "@types/fontkit": "^1.8.0",
     "zod": "^3.19.1"
   },
   "peerDependencies": {
     "zod": "^3.19.1"
   },
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
+  "module": "./lib/index.js",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/cjs/index.cjs"
+    },
+    "./server": "./server.js"
+  },
+  "types": "src/index.ts",
   "files": [
     "lib/*",
-    "README.md",
+    "src/*",
     "!*.test.*"
   ],
   "license": "MIT",
   "private": false,
-  "sideEffects": false,
-  "tsup": {
-    "entry": [
-      "src/index.ts",
-      "src/index.server.ts"
-    ],
-    "format": "cjs",
-    "outDir": "lib"
-  }
+  "sideEffects": false
 }

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

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`getFontFaces() different formats 1`] = `
+[
+  {
+    "fontDisplay": "swap",
+    "fontFamily": "Roboto",
+    "fontStyle": "normal",
+    "fontWeight": 400,
+    "src": "url('/fonts/roboto.woff') format('woff'), url('/fonts/roboto.ttf') format('truetype')",
+  },
+]
+`;
+
+exports[`getFontFaces() different style 1`] = `
+[
+  {
+    "fontDisplay": "swap",
+    "fontFamily": "Roboto",
+    "fontStyle": "normal",
+    "fontWeight": 400,
+    "src": "url('/fonts/roboto.ttf') format('truetype')",
+  },
+  {
+    "fontDisplay": "swap",
+    "fontFamily": "Roboto",
+    "fontStyle": "italic",
+    "fontWeight": 400,
+    "src": "url('/fonts/roboto-italic.ttf') format('truetype')",
+  },
+]
+`;
+
+exports[`getFontFaces() different weight 1`] = `
+[
+  {
+    "fontDisplay": "swap",
+    "fontFamily": "Roboto",
+    "fontStyle": "normal",
+    "fontWeight": 400,
+    "src": "url('/fonts/roboto.ttf') format('truetype')",
+  },
+  {
+    "fontDisplay": "swap",
+    "fontFamily": "Roboto",
+    "fontStyle": "normal",
+    "fontWeight": 500,
+    "src": "url('/fonts/roboto-bold.ttf') format('truetype')",
+  },
+]
+`;

package/src/constants.ts

@@ -0,0 +1,21 @@
+import type { FontFormat } from "./schema";
+
+export const SYSTEM_FONTS = new Map([
+  ["Arial", ["sans-serif"]],
+  ["Times New Roman", ["sans"]],
+  ["Courier New", ["monospace"]],
+  ["system-ui", []],
+]);
+
+export const DEFAULT_FONT_FALLBACK = "sans-serif";
+
+export const FONT_FORMATS: Map<FontFormat, string> = new Map([
+  ["woff", "woff"],
+  ["woff2", "woff2"],
+  ["ttf", "truetype"],
+  ["otf", "opentype"],
+]);
+
+export const FONT_MIME_TYPES = Array.from(FONT_FORMATS.keys())
+  .map((format) => `.${format}`)
+  .join(", ");

package/src/font-data.test.ts

@@ -0,0 +1,69 @@
+import { parseSubfamily, normalizeFamily } from "./font-data";
+
+describe("font-data", () => {
+  describe("parseSubfamily()", () => {
+    test("Black Italic", () => {
+      expect(parseSubfamily("Black Italic")).toEqual({
+        style: "italic",
+        weight: 900,
+      });
+    });
+    test("Bold", () => {
+      expect(parseSubfamily("Bold")).toEqual({
+        style: "normal",
+        weight: 700,
+      });
+    });
+    test("Demi Bold Italic", () => {
+      expect(parseSubfamily("Demi Bold Italic")).toEqual({
+        style: "italic",
+        weight: 600,
+      });
+    });
+    test("Light", () => {
+      expect(parseSubfamily("Light")).toEqual({
+        style: "normal",
+        weight: 300,
+      });
+    });
+    test("Extra Light", () => {
+      expect(parseSubfamily("Extra Light")).toEqual({
+        style: "normal",
+        weight: 200,
+      });
+    });
+    test("Extra Light Italic", () => {
+      expect(parseSubfamily("Extra Light Italic")).toEqual({
+        style: "italic",
+        weight: 200,
+      });
+    });
+    test("Heavy Italic", () => {
+      expect(parseSubfamily("Heavy Italic")).toEqual({
+        style: "italic",
+        weight: 900,
+      });
+    });
+    test("Medium Italic", () => {
+      expect(parseSubfamily("Medium Italic")).toEqual({
+        style: "italic",
+        weight: 500,
+      });
+    });
+  });
+
+  describe("normalizeFamily()", () => {
+    test("basic", () => {
+      expect(normalizeFamily("Roboto Black", "Black")).toBe("Roboto");
+      expect(normalizeFamily("Roboto Light", "Light Italic")).toBe("Roboto");
+      expect(normalizeFamily("Robolder Bold", "Bold")).toBe("Robolder");
+      expect(normalizeFamily(" Roboto X Bold ", "Bold")).toBe("Roboto X");
+      expect(normalizeFamily(" 'Roboto X' Bold ", "Bold")).toBe("'Roboto X'");
+      expect(normalizeFamily(` "Roboto X" Bold `, "Bold")).toBe(`"Roboto X"`);
+      expect(normalizeFamily(`"Roboto Bold"`, "Bold")).toBe(`"Roboto Bold"`);
+      expect(normalizeFamily(`"Roboto Bold" Bold`, "Bold")).toBe(
+        `"Roboto Bold"`
+      );
+    });
+  });
+});

package/src/font-data.ts

@@ -0,0 +1,74 @@
+import type { FontFormat } from "./schema";
+import { create as createFontKit } from "fontkit";
+import { FontWeight, fontWeights } from "./font-weights";
+
+// @todo sumbit this to definitely typed, they are not up to date
+declare module "fontkit" {
+  export interface Font {
+    type: string;
+    getName: (name: string) => string;
+  }
+}
+
+export const styles = ["normal", "italic", "oblique"] as const;
+type Style = typeof styles[number];
+
+export const parseSubfamily = (subfamily: string) => {
+  const subfamilyLow = subfamily.toLowerCase();
+  let style: Style = "normal";
+  for (const possibleStyle of styles) {
+    if (subfamilyLow.includes(possibleStyle)) {
+      style = possibleStyle;
+      break;
+    }
+  }
+
+  let weight: FontWeight = "400";
+  for (weight in fontWeights) {
+    const { name } = fontWeights[weight];
+    const { alt } = fontWeights[weight];
+    if (subfamilyLow.includes(name) || subfamilyLow.includes(alt)) {
+      break;
+    }
+  }
+  return { style, weight: Number(weight) };
+};
+
+const splitAndTrim = (string: string) =>
+  string
+    .split(" ")
+    .map((part) => part.trim())
+    .filter(Boolean);
+
+// Family name can contain additional information like "Roboto Black" or "Roboto Bold", though we need pure family name "Roboto", because the rest is already encoded in weight and style.
+// We need a name we can reference in CSS font-family property, while CSS matches it with the right font-face considering the weight and style.
+export const normalizeFamily = (family: string, subfamily: string) => {
+  const familyParts = splitAndTrim(family);
+  const subfamilyParts = splitAndTrim(subfamily.toLowerCase());
+  const familyPartsNormalized = familyParts.filter(
+    (familyPart) => subfamilyParts.includes(familyPart.toLowerCase()) === false
+  );
+  return familyPartsNormalized.join(" ");
+};
+
+type FontData = {
+  format: FontFormat;
+  family: string;
+  style: Style;
+  weight: number;
+};
+
+export const getFontData = (data: Uint8Array): FontData => {
+  const font = createFontKit(data as Buffer);
+  const format = font.type.toLowerCase() as FontData["format"];
+  const originalFamily = font.getName("fontFamily");
+  const subfamily =
+    font.getName("preferredSubfamily") ?? font.getName("fontSubfamily");
+  const parsedSubfamily = parseSubfamily(subfamily);
+  const family = normalizeFamily(originalFamily, subfamily);
+  return {
+    format,
+    family,
+    ...parsedSubfamily,
+  };
+};

package/src/font-weights.ts

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

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

@@ -0,0 +1,75 @@
+import { getFontFaces, type PartialFontAsset } from "./get-font-faces";
+
+describe("getFontFaces()", () => {
+  test("different formats", () => {
+    const assets: Array<PartialFontAsset> = [
+      {
+        format: "woff",
+        meta: {
+          family: "Roboto",
+          style: "normal",
+          weight: 400,
+        },
+        path: "/fonts/roboto.woff",
+      },
+      {
+        format: "ttf",
+        meta: {
+          family: "Roboto",
+          style: "normal",
+          weight: 400,
+        },
+        path: "/fonts/roboto.ttf",
+      },
+    ];
+    expect(getFontFaces(assets)).toMatchSnapshot();
+  });
+
+  test("different style", () => {
+    const assets: Array<PartialFontAsset> = [
+      {
+        format: "ttf",
+        meta: {
+          family: "Roboto",
+          style: "normal",
+          weight: 400,
+        },
+        path: "/fonts/roboto.ttf",
+      },
+      {
+        format: "ttf",
+        meta: {
+          family: "Roboto",
+          style: "italic",
+          weight: 400,
+        },
+        path: "/fonts/roboto-italic.ttf",
+      },
+    ];
+    expect(getFontFaces(assets)).toMatchSnapshot();
+  });
+
+  test("different weight", () => {
+    const assets: Array<PartialFontAsset> = [
+      {
+        format: "ttf",
+        meta: {
+          family: "Roboto",
+          style: "normal",
+          weight: 400,
+        },
+        path: "/fonts/roboto.ttf",
+      },
+      {
+        format: "ttf",
+        meta: {
+          family: "Roboto",
+          style: "normal",
+          weight: 500,
+        },
+        path: "/fonts/roboto-bold.ttf",
+      },
+    ];
+    expect(getFontFaces(assets)).toMatchSnapshot();
+  });
+});

package/src/get-font-faces.ts

@@ -0,0 +1,53 @@
+import { FONT_FORMATS } from "./constants";
+import type { FontMeta, FontFormat } from "./schema";
+
+export type PartialFontAsset = {
+  format: FontFormat;
+  meta: FontMeta;
+  path: string;
+};
+
+export type FontFace = {
+  fontFamily: string;
+  fontStyle: FontMeta["style"];
+  fontWeight: number;
+  fontDisplay: "swap" | "auto" | "block" | "fallback" | "optional";
+  src: string;
+};
+
+const formatFace = (asset: PartialFontAsset, format: string) => {
+  return {
+    fontFamily: asset.meta.family,
+    fontStyle: asset.meta.style,
+    fontWeight: asset.meta.weight,
+    fontDisplay: "swap",
+    src: `url('${asset.path}') format('${format}')`,
+  };
+};
+
+const getKey = (asset: PartialFontAsset) =>
+  asset.meta.family + asset.meta.style + asset.meta.weight;
+
+export const getFontFaces = (
+  assets: Array<PartialFontAsset>
+): Array<FontFace> => {
+  const faces = new Map();
+  for (const asset of assets) {
+    const face = faces.get(getKey(asset));
+    const format = FONT_FORMATS.get(asset.format);
+    if (format === undefined) {
+      // Should never happen since we allow only uploading formats we support
+      continue;
+    }
+
+    if (face === undefined) {
+      const face = formatFace(asset, format);
+      faces.set(getKey(asset), face);
+      continue;
+    }
+
+    // We already have that font face, so we need to add the new src
+    face.src += `, url('${asset.path}') format('${format}')`;
+  }
+  return Array.from(faces.values());
+};

package/src/index.server.ts

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

package/{lib/index.d.ts → src/index.ts}

@@ -1,5 +1,4 @@
 export * from "./constants";
 export * from "./get-font-faces";
-export * from "./types";
+export * from "./schema";
 export * from "./font-weights";
-//# sourceMappingURL=index.d.ts.map

package/src/schema.ts

@@ -0,0 +1,17 @@
+import { z } from "zod";
+import { styles } from "./font-data";
+
+export const FontFormat = z.union([
+  z.literal("ttf"),
+  z.literal("woff"),
+  z.literal("woff2"),
+  z.literal("otf"),
+]);
+export type FontFormat = z.infer<typeof FontFormat>;
+
+export const FontMeta = z.object({
+  family: z.string(),
+  style: z.enum(styles),
+  weight: z.number(),
+});
+export type FontMeta = z.infer<typeof FontMeta>;

package/lib/constants.d.ts

@@ -1,6 +0,0 @@
-import type { FontFormat } from "./types";
-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;
-//# sourceMappingURL=constants.d.ts.map

package/lib/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,eAAO,MAAM,YAAY,uBAKvB,CAAC;AAEH,eAAO,MAAM,qBAAqB,eAAe,CAAC;AAElD,eAAO,MAAM,YAAY,EAAE,GAAG,CAAC,UAAU,EAAE,MAAM,CAK/C,CAAC;AAEH,eAAO,MAAM,eAAe,QAEf,CAAC"}

package/lib/font-data.d.ts

@@ -1,23 +0,0 @@
-import type { FontFormat } from "./types";
-declare module "fontkit" {
-    interface Font {
-        type: string;
-        getName: (name: string) => string;
-    }
-}
-export declare const styles: readonly ["normal", "italic", "oblique"];
-declare 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;
-declare type FontData = {
-    format: FontFormat;
-    family: string;
-    style: Style;
-    weight: number;
-};
-export declare const getFontData: (data: Uint8Array) => FontData;
-export {};
-//# sourceMappingURL=font-data.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"font-data.d.ts","sourceRoot":"","sources":["../src/font-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAK1C,OAAO,QAAQ,SAAS,CAAC;IACvB,UAAiB,IAAI;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;KACnC;CACF;AAED,eAAO,MAAM,MAAM,0CAA2C,CAAC;AAC/D,aAAK,KAAK,GAAG,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC;AAEnC,eAAO,MAAM,cAAc,cAAe,MAAM;;;CAmB/C,CAAC;AAUF,eAAO,MAAM,eAAe,WAAY,MAAM,aAAa,MAAM,WAOhE,CAAC;AAEF,aAAK,QAAQ,GAAG;IACd,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,UAAU,KAAG,QAa9C,CAAC"}

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

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=font-data.test.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"font-data.test.d.ts","sourceRoot":"","sources":["../src/font-data.test.ts"],"names":[],"mappings":""}

package/lib/font-data.test.js

@@ -1,67 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const font_data_1 = require("./font-data");
-describe("font-data", () => {
-    describe("parseSubfamily()", () => {
-        test("Black Italic", () => {
-            expect((0, font_data_1.parseSubfamily)("Black Italic")).toEqual({
-                style: "italic",
-                weight: 900,
-            });
-        });
-        test("Bold", () => {
-            expect((0, font_data_1.parseSubfamily)("Bold")).toEqual({
-                style: "normal",
-                weight: 700,
-            });
-        });
-        test("Demi Bold Italic", () => {
-            expect((0, font_data_1.parseSubfamily)("Demi Bold Italic")).toEqual({
-                style: "italic",
-                weight: 600,
-            });
-        });
-        test("Light", () => {
-            expect((0, font_data_1.parseSubfamily)("Light")).toEqual({
-                style: "normal",
-                weight: 300,
-            });
-        });
-        test("Extra Light", () => {
-            expect((0, font_data_1.parseSubfamily)("Extra Light")).toEqual({
-                style: "normal",
-                weight: 200,
-            });
-        });
-        test("Extra Light Italic", () => {
-            expect((0, font_data_1.parseSubfamily)("Extra Light Italic")).toEqual({
-                style: "italic",
-                weight: 200,
-            });
-        });
-        test("Heavy Italic", () => {
-            expect((0, font_data_1.parseSubfamily)("Heavy Italic")).toEqual({
-                style: "italic",
-                weight: 900,
-            });
-        });
-        test("Medium Italic", () => {
-            expect((0, font_data_1.parseSubfamily)("Medium Italic")).toEqual({
-                style: "italic",
-                weight: 500,
-            });
-        });
-    });
-    describe("normalizeFamily()", () => {
-        test("basic", () => {
-            expect((0, font_data_1.normalizeFamily)("Roboto Black", "Black")).toBe("Roboto");
-            expect((0, font_data_1.normalizeFamily)("Roboto Light", "Light Italic")).toBe("Roboto");
-            expect((0, font_data_1.normalizeFamily)("Robolder Bold", "Bold")).toBe("Robolder");
-            expect((0, font_data_1.normalizeFamily)(" Roboto X Bold ", "Bold")).toBe("Roboto X");
-            expect((0, font_data_1.normalizeFamily)(" 'Roboto X' Bold ", "Bold")).toBe("'Roboto X'");
-            expect((0, font_data_1.normalizeFamily)(` "Roboto X" Bold `, "Bold")).toBe(`"Roboto X"`);
-            expect((0, font_data_1.normalizeFamily)(`"Roboto Bold"`, "Bold")).toBe(`"Roboto Bold"`);
-            expect((0, font_data_1.normalizeFamily)(`"Roboto Bold" Bold`, "Bold")).toBe(`"Roboto Bold"`);
-        });
-    });
-});