@webstudio-is/fonts 0.2.0 → 0.3.0

package/lib/font-weights.js

@@ -1,47 +1,50 @@
-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",
-    },
+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"
+  }
+};
+export {
+  fontWeights
 };

package/lib/get-font-faces.js

@@ -1,30 +1,31 @@
 import { FONT_FORMATS } from "./constants";
 const formatFace = (asset, format) => {
-    return {
-        fontFamily: asset.meta.family,
-        fontStyle: asset.meta.style,
-        fontWeight: asset.meta.weight,
-        fontDisplay: "swap",
-        src: `url('${asset.path}') format('${format}')`,
-    };
+  return {
+    fontFamily: asset.meta.family,
+    fontStyle: asset.meta.style,
+    fontWeight: asset.meta.weight,
+    fontDisplay: "swap",
+    src: `url('${asset.path}') format('${format}')`
+  };
 };
 const getKey = (asset) => asset.meta.family + asset.meta.style + asset.meta.weight;
-export const getFontFaces = (assets) => {
-    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}')`;
+const getFontFaces = (assets) => {
+  const faces = /* @__PURE__ */ new Map();
+  for (const asset of assets) {
+    const face = faces.get(getKey(asset));
+    const format = FONT_FORMATS.get(asset.format);
+    if (format === void 0) {
+      continue;
     }
-    return Array.from(faces.values());
+    if (face === void 0) {
+      const face2 = formatFace(asset, format);
+      faces.set(getKey(asset), face2);
+      continue;
+    }
+    face.src += `, url('${asset.path}') format('${format}')`;
+  }
+  return Array.from(faces.values());
+};
+export {
+  getFontFaces
 };

package/lib/index.js

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

package/lib/index.server.js

@@ -1,2 +1,4 @@
-export { getFontData } from "./font-data";
-export * from "./schema";
+import { getFontData } from "./font-data";
+export {
+  getFontData
+};

package/lib/schema.js

@@ -1,7 +1,17 @@
 import { z } from "zod";
 import { styles } from "./font-data";
-export const FontMeta = z.object({
-    family: z.string(),
-    style: z.enum(styles),
-    weight: z.number(),
+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,6 +1,6 @@
 {
   "name": "@webstudio-is/fonts",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Fonts utils",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -9,9 +9,8 @@
     "typecheck": "tsc --noEmit",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "checks": "yarn typecheck && yarn lint && yarn test",
-    "dev": "tsup --watch",
-    "build:cjs": "tsc --module commonjs --outDir lib/cjs && find lib/cjs -name '*.js' | while read NAME; do mv $NAME ${NAME%.js}.cjs; done",
-    "build": "rm -fr lib tsconfig.tsbuildinfo && tsc && yarn build:cjs",
+    "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"
   },
@@ -22,7 +21,7 @@
     "@types/fontkit": "^2.0.0",
     "@webstudio-is/design-system": "*",
     "@webstudio-is/jest-config": "*",
-    "tsup": "^6.1.3",
+    "@webstudio-is/scripts": "*",
     "typescript": "4.7.4",
     "zod": "^3.19.1"
   },
@@ -37,21 +36,13 @@
     },
     "./server": "./server.js"
   },
-  "types": "lib/index.d.ts",
+  "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": "esm",
-    "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/cjs/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/cjs/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