@webstudio-is/fonts 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Webstudio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Fonts utils
+
+Fonts logic reusable across all systems.

package/lib/constants.d.ts

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1 @@
+{"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/constants.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FONT_MIME_TYPES = exports.FONT_FORMATS = exports.DEFAULT_FONT_FALLBACK = exports.SYSTEM_FONTS = void 0;
+exports.SYSTEM_FONTS = new Map([
+    ["Arial", ["sans-serif"]],
+    ["Times New Roman", ["sans"]],
+    ["Courier New", ["monospace"]],
+    ["system-ui", []],
+]);
+exports.DEFAULT_FONT_FALLBACK = "sans-serif";
+exports.FONT_FORMATS = new Map([
+    ["woff", "woff"],
+    ["woff2", "woff2"],
+    ["ttf", "truetype"],
+    ["otf", "opentype"],
+]);
+exports.FONT_MIME_TYPES = Array.from(exports.FONT_FORMATS.keys())
+    .map((format) => `.${format}`)
+    .join(", ");

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

@@ -0,0 +1,40 @@
+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];
+declare const weights: {
+    readonly thin: 100;
+    readonly hairline: 100;
+    readonly "extra light": 200;
+    readonly "ultra light": 200;
+    readonly light: 300;
+    readonly normal: 400;
+    readonly medium: 500;
+    readonly "semi bold": 600;
+    readonly "demi bold": 600;
+    readonly bold: 700;
+    readonly "extra bold": 800;
+    readonly "ultra bold": 800;
+    readonly black: 900;
+    readonly heavy: 900;
+};
+declare type WeightKey = keyof typeof weights;
+declare type WeightValue = typeof weights[WeightKey];
+export declare const parseSubfamily: (subfamily: string) => {
+    style: "normal" | "italic" | "oblique";
+    weight: WeightValue;
+};
+declare type FontData = {
+    format: FontFormat;
+    family: string;
+    style: Style;
+    weight: WeightValue;
+};
+export declare const getFontData: (data: Uint8Array) => FontData;
+export {};
+//# sourceMappingURL=get-font-data.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"get-font-data.d.ts","sourceRoot":"","sources":["../src/get-font-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,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,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;CAeH,CAAC;AAEX,aAAK,SAAS,GAAG,MAAM,OAAO,OAAO,CAAC;AACtC,aAAK,WAAW,GAAG,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC;AAE7C,eAAO,MAAM,cAAc,cAAe,MAAM;;;CAkB/C,CAAC;AAEF,aAAK,QAAQ,GAAG;IACd,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,UAAU,KAAG,QAa9C,CAAC"}

package/lib/get-font-data.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFontData = exports.parseSubfamily = exports.styles = void 0;
+const fontkit_1 = __importDefault(require("fontkit"));
+exports.styles = ["normal", "italic", "oblique"];
+const weights = {
+    thin: 100,
+    hairline: 100,
+    "extra light": 200,
+    "ultra light": 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    "semi bold": 600,
+    "demi bold": 600,
+    bold: 700,
+    "extra bold": 800,
+    "ultra bold": 800,
+    black: 900,
+    heavy: 900,
+};
+const parseSubfamily = (subfamily) => {
+    const subfamilyLow = subfamily.toLowerCase();
+    let style = "normal";
+    for (const possibleStyle of exports.styles) {
+        if (subfamilyLow.includes(possibleStyle)) {
+            style = possibleStyle;
+            break;
+        }
+    }
+    let weight = weights.normal;
+    let possibleWeight;
+    for (possibleWeight in weights) {
+        if (subfamilyLow.includes(possibleWeight)) {
+            weight = weights[possibleWeight];
+            break;
+        }
+    }
+    return { style, weight };
+};
+exports.parseSubfamily = parseSubfamily;
+const getFontData = (data) => {
+    const font = fontkit_1.default.create(data);
+    const format = font.type.toLowerCase();
+    const family = font.getName("fontFamily");
+    const subfamily = font.getName("preferredSubfamily") ?? font.getName("fontSubfamily");
+    const parsedSubfamily = (0, exports.parseSubfamily)(subfamily);
+    return {
+        format,
+        family,
+        ...parsedSubfamily,
+    };
+};
+exports.getFontData = getFontData;

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

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

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

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

package/lib/get-font-data.test.js

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

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

@@ -0,0 +1,9 @@
+import type { FontMeta } from "./schema";
+import type { FontFormat } from "./types";
+export declare type PartialFontAsset = {
+    format: FontFormat;
+    meta: FontMeta;
+    path: string;
+};
+export declare const getFontFaces: (assets: Array<PartialFontAsset>) => any[];
+//# sourceMappingURL=get-font-faces.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"get-font-faces.d.ts","sourceRoot":"","sources":["../src/get-font-faces.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,oBAAY,gBAAgB,GAAG;IAC7B,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,YAAY,WAAY,MAAM,gBAAgB,CAAC,UAqB3D,CAAC"}

package/lib/get-font-faces.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFontFaces = void 0;
+const constants_1 = require("./constants");
+const getFontFaces = (assets) => {
+    const faces = new Map();
+    for (const asset of assets) {
+        const face = faces.get(asset.meta.family);
+        const format = constants_1.FONT_FORMATS.get(asset.format);
+        if (face === undefined) {
+            faces.set(asset.meta.family, {
+                fontFamily: asset.meta.family,
+                fontStyle: asset.meta.style,
+                fontWeight: asset.meta.weight,
+                fontDisplay: "swap",
+                src: `url('${asset.path}') format('${format}')`,
+            });
+            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());
+};
+exports.getFontFaces = getFontFaces;

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

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

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

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

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const get_font_faces_1 = require("./get-font-faces");
+describe("getFontFaces()", () => {
+    test("same family, but different formats", () => {
+        const assets = [
+            {
+                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((0, get_font_faces_1.getFontFaces)(assets)).toMatchSnapshot();
+    });
+});

package/lib/index.d.ts

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

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC"}

package/lib/index.js

@@ -0,0 +1,19 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./constants"), exports);
+__exportStar(require("./get-font-faces"), exports);
+__exportStar(require("./types"), exports);

package/lib/schema.d.ts

@@ -0,0 +1,16 @@
+import { z } from "zod";
+export declare const FontMeta: z.ZodObject<{
+    family: z.ZodString;
+    style: z.ZodEnum<["normal", "italic", "oblique"]>;
+    weight: z.ZodNumber;
+}, "strip", z.ZodTypeAny, {
+    family: string;
+    style: "normal" | "italic" | "oblique";
+    weight: number;
+}, {
+    family: string;
+    style: "normal" | "italic" | "oblique";
+    weight: number;
+}>;
+export declare type FontMeta = z.infer<typeof FontMeta>;
+//# sourceMappingURL=schema.d.ts.map

package/lib/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../src/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,eAAO,MAAM,QAAQ;;;;;;;;;;;;EAInB,CAAC;AACH,oBAAY,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,QAAQ,CAAC,CAAC"}

package/lib/schema.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontMeta = void 0;
+const zod_1 = require("zod");
+const get_font_data_1 = require("./get-font-data");
+exports.FontMeta = zod_1.z.object({
+    family: zod_1.z.string(),
+    style: zod_1.z.enum(get_font_data_1.styles),
+    weight: zod_1.z.number(),
+});

package/lib/types.d.ts

@@ -0,0 +1,2 @@
+export declare type FontFormat = "ttf" | "woff" | "woff2" | "otf";
+//# sourceMappingURL=types.d.ts.map

package/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC"}

package/lib/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@webstudio-is/fonts",
+  "version": "0.1.0",
+  "description": "Fonts utils",
+  "author": "Webstudio <github@webstudio.is>",
+  "homepage": "https://webstudio.is",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "checks": "yarn typecheck && yarn lint && yarn test",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --out-dir=lib",
+    "build": "rm -fr lib tsconfig.tsbuildinfo && tsc",
+    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0"
+  },
+  "dependencies": {
+    "zod": "^3.19.1",
+    "fontkit": "^2.0.2"
+  },
+  "devDependencies": {
+    "@webstudio-is/design-system": "*",
+    "@webstudio-is/jest-config": "*",
+    "tsup": "^6.1.3",
+    "typescript": "4.7.4",
+    "@types/fontkit": "^1.8.0"
+  },
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib/*",
+    "README.md",
+    "!*.test.*"
+  ],
+  "license": "MIT",
+  "private": false
+}