@webstudio-is/fonts 0.0.0-73cd6ea → 0.0.0-7a19155

package/lib/index.js

@@ -246,78 +246,98 @@ var FONT_STYLES = ["normal", "italic", "oblique"];
 
 // src/get-font-faces.ts
 var sanitizeCssUrl = (str) => JSON.stringify(str);
-var formatFace = (asset, format, url) => {
+var fontFormatOrder = Array.from(FONT_FORMATS.values());
+var getFontFormat = (asset) => {
+  const extension = asset.name.slice(asset.name.lastIndexOf(".") + 1);
+  return FONT_FORMATS.has(extension) ? FONT_FORMATS.get(extension) ?? asset.format : FONT_FORMATS.get(asset.format) ?? asset.format;
+};
+var formatFace = ({ asset, format, style, url }) => {
+  const face = {
+    fontFamily: asset.meta.family,
+    fontStyle: style,
+    fontDisplay: "swap",
+    src: `url(${sanitizeCssUrl(url)}) format("${format}")`
+  };
   if ("variationAxes" in asset.meta) {
-    const { wght, wdth } = asset.meta?.variationAxes ?? {};
+    const { wght, wdth } = asset.meta.variationAxes;
     return {
-      fontFamily: asset.meta.family,
-      fontStyle: "normal",
-      fontDisplay: "swap",
-      src: `url(${sanitizeCssUrl(url)}) format("${format}")`,
+      ...face,
       fontStretch: wdth ? `${wdth.min}% ${wdth.max}%` : void 0,
       fontWeight: wght ? `${wght.min} ${wght.max}` : void 0
     };
   }
   return {
-    fontFamily: asset.meta.family,
-    fontStyle: asset.meta.style,
-    fontWeight: asset.meta.weight,
-    fontDisplay: "swap",
-    src: `url(${sanitizeCssUrl(url)}) format("${format}")`
+    ...face,
+    fontWeight: asset.meta.weight
   };
 };
-var getKey = (asset) => {
+var getKey = (asset, style) => {
   if ("variationAxes" in asset.meta) {
-    return asset.meta.family + Object.values(asset.meta.variationAxes).join("");
+    const { wght, wdth } = asset.meta.variationAxes;
+    return JSON.stringify([asset.meta.family, style, wght, wdth]);
+  }
+  return JSON.stringify([asset.meta.family, style, asset.meta.weight]);
+};
+var getStyles = (meta) => {
+  const styles = /* @__PURE__ */ new Set([meta.style]);
+  if ("variationAxes" in meta) {
+    const { ital, slnt } = meta.variationAxes;
+    if (ital !== void 0 && ital.min <= 0 && ital.max >= 1) {
+      styles.add("normal");
+      styles.add("italic");
+    }
+    if (slnt !== void 0 && slnt.min < slnt.max && slnt.min <= 0 && slnt.max >= 0) {
+      styles.add("normal");
+      styles.add("oblique");
+    }
   }
-  return asset.meta.family + asset.meta.style + asset.meta.weight;
+  return Array.from(styles);
 };
 var getFontFaces = (assets, options) => {
   const { assetBaseUrl } = options;
   const faces = /* @__PURE__ */ new Map();
+  const seenSources = /* @__PURE__ */ new Set();
   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);
-    if (format === void 0) {
-      continue;
+    for (const style of getStyles(asset.meta)) {
+      const sourceKey = JSON.stringify([url, style]);
+      if (seenSources.has(sourceKey)) {
+        continue;
+      }
+      seenSources.add(sourceKey);
+      const assetKey = getKey(asset, style);
+      const format = getFontFormat(asset);
+      const sources = faces.get(assetKey) ?? /* @__PURE__ */ new Map();
+      const existing = sources.get(format);
+      if (existing === void 0 || url < existing.url) {
+        sources.set(format, { asset, format, style, url });
+      }
+      faces.set(assetKey, sources);
     }
-    if (face === void 0) {
-      const face2 = formatFace(asset, format, url);
-      faces.set(assetKey, face2);
-      continue;
-    }
-    face.src += `, url(${sanitizeCssUrl(url)}) format("${format}")`;
   }
-  return Array.from(faces.values());
+  return Array.from(faces.values(), (sources) => {
+    const [source, ...fallbacks] = Array.from(sources.values()).sort(
+      (left, right) => fontFormatOrder.indexOf(left.format) - fontFormatOrder.indexOf(right.format)
+    );
+    const face = formatFace(source);
+    face.src += fallbacks.map(
+      ({ format: fallbackFormat, url: fallbackUrl }) => `, url(${sanitizeCssUrl(fallbackUrl)}) format("${fallbackFormat}")`
+    ).join("");
+    return face;
+  });
 };
 
 // src/schema.ts
 import { z } from "zod";
-var FontFormat = z.union([
+var fontStyle = z.enum(FONT_STYLES);
+var fontFormat = z.union([
   z.literal("ttf"),
   z.literal("woff"),
   z.literal("woff2")
 ]);
-var AxisName = z.enum([
-  "wght",
-  "wdth",
-  "slnt",
-  "opsz",
-  "ital",
-  "GRAD",
-  "XTRA",
-  "XOPQ",
-  "YOPQ",
-  "YTLC",
-  "YTUC",
-  "YTAS",
-  "YTDE",
-  "YTFI"
-]);
-var VariationAxes = z.record(
-  AxisName,
+var axisName = z.string().regex(/^[A-Za-z][A-Za-z0-9]* *$/).length(4);
+var variationAxes = z.partialRecord(
+  axisName,
   z.object({
     name: z.string(),
     min: z.number(),
@@ -325,16 +345,48 @@ var VariationAxes = z.record(
     max: z.number()
   })
 );
-var FontMetaStatic = z.object({
+var fontMetaStatic = z.object({
   family: z.string(),
-  style: z.enum(FONT_STYLES),
+  style: fontStyle,
   weight: z.number()
 });
-var FontMetaVariable = z.object({
+var fontMetaVariable = z.object({
   family: z.string(),
-  variationAxes: VariationAxes
+  style: fontStyle.default("normal"),
+  variationAxes
 });
-var FontMeta = z.union([FontMetaStatic, FontMetaVariable]);
+var fontMeta = z.union([fontMetaStatic, fontMetaVariable]);
+var fontMetaUpdate = z.union([
+  fontMetaStatic.partial().strict(),
+  z.object({
+    family: fontMetaVariable.shape.family.optional(),
+    style: fontStyle.optional(),
+    variationAxes: fontMetaVariable.shape.variationAxes.optional()
+  }).strict()
+]);
+var mergeFontMeta = (current, override) => {
+  const result = fontMetaUpdate.safeParse(override);
+  if (result.success === false) {
+    return;
+  }
+  const { family, style } = result.data;
+  if ("variationAxes" in current) {
+    const variationAxes2 = "variationAxes" in result.data ? result.data.variationAxes : void 0;
+    return {
+      ...current,
+      ...family === void 0 ? {} : { family },
+      ...style === void 0 ? {} : { style },
+      ...variationAxes2 === void 0 ? {} : { variationAxes: variationAxes2 }
+    };
+  }
+  const weight = "weight" in result.data ? result.data.weight : void 0;
+  return {
+    ...current,
+    ...family === void 0 ? {} : { family },
+    ...style === void 0 ? {} : { style },
+    ...weight === void 0 ? {} : { weight }
+  };
+};
 
 // src/font-weights.ts
 var fontWeights = {
@@ -364,7 +416,7 @@ var fontWeights = {
   },
   "700": {
     label: "Bold",
-    names: ["bold", "bold"]
+    names: ["bold"]
   },
   "800": {
     label: "Extra Bold",
@@ -386,11 +438,14 @@ export {
   FONT_FORMATS,
   FONT_MIME_TYPES,
   FONT_STYLES,
-  FontFormat,
-  FontMeta,
-  FontMetaStatic,
   SYSTEM_FONTS,
+  fontFormat,
+  fontMeta,
+  fontMetaStatic,
+  fontMetaUpdate,
+  fontMetaVariable,
   fontWeightNames,
   fontWeights,
-  getFontFaces
+  getFontFaces,
+  mergeFontMeta
 };

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

@@ -25,7 +25,7 @@ export declare const fontWeights: {
     };
     readonly "700": {
         readonly label: "Bold";
-        readonly names: readonly ["bold", "bold"];
+        readonly names: readonly ["bold"];
     };
     readonly "800": {
         readonly label: "Extra Bold";

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

@@ -1,4 +1,5 @@
-import type { FontMeta, FontFormat, FontMetaStatic } from "./schema";
+import { type FontStyle } from "./constants";
+import type { FontMeta, FontFormat } from "./schema";
 export type PartialFontAsset = {
     format: FontFormat;
     meta: FontMeta;
@@ -8,7 +9,7 @@ export type FontFace = {
     fontFamily: string;
     fontDisplay: "swap" | "auto" | "block" | "fallback" | "optional";
     src: string;
-    fontStyle?: FontMetaStatic["style"];
+    fontStyle?: FontStyle;
     fontWeight?: number | string;
     fontStretch?: string;
 };

package/lib/types/schema.d.ts

@@ -1,83 +1,81 @@
 import { z } from "zod";
-export declare const FontFormat: z.ZodUnion<[z.ZodLiteral<"ttf">, z.ZodLiteral<"woff">, z.ZodLiteral<"woff2">]>;
-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<{
+export declare const fontFormat: z.ZodUnion<readonly [z.ZodLiteral<"ttf">, z.ZodLiteral<"woff">, z.ZodLiteral<"woff2">]>;
+export type FontFormat = z.infer<typeof fontFormat>;
+declare const variationAxes: z.ZodRecord<z.ZodString & z.core.$partial, 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<{
+}, z.core.$strip>>;
+export type VariationAxes = z.infer<typeof variationAxes>;
+export declare const fontMetaStatic: z.ZodObject<{
     family: z.ZodString;
-    style: z.ZodEnum<["normal", "italic", "oblique"]>;
+    style: z.ZodEnum<{
+        italic: "italic";
+        normal: "normal";
+        oblique: "oblique";
+    }>;
     weight: z.ZodNumber;
-}, "strip", z.ZodTypeAny, {
-    family: string;
-    style: "normal" | "italic" | "oblique";
-    weight: number;
-}, {
-    family: string;
-    style: "normal" | "italic" | "oblique";
-    weight: number;
-}>;
-export type FontMetaStatic = z.infer<typeof FontMetaStatic>;
-export declare const FontMeta: z.ZodUnion<[z.ZodObject<{
+}, z.core.$strip>;
+export type FontMetaStatic = z.infer<typeof fontMetaStatic>;
+export declare const fontMetaVariable: z.ZodObject<{
     family: z.ZodString;
-    style: z.ZodEnum<["normal", "italic", "oblique"]>;
+    style: z.ZodDefault<z.ZodEnum<{
+        italic: "italic";
+        normal: "normal";
+        oblique: "oblique";
+    }>>;
+    variationAxes: z.ZodRecord<z.ZodString & z.core.$partial, z.ZodObject<{
+        name: z.ZodString;
+        min: z.ZodNumber;
+        default: z.ZodNumber;
+        max: z.ZodNumber;
+    }, z.core.$strip>>;
+}, z.core.$strip>;
+export declare const fontMeta: z.ZodUnion<readonly [z.ZodObject<{
+    family: z.ZodString;
+    style: z.ZodEnum<{
+        italic: "italic";
+        normal: "normal";
+        oblique: "oblique";
+    }>;
     weight: z.ZodNumber;
-}, "strip", z.ZodTypeAny, {
-    family: string;
-    style: "normal" | "italic" | "oblique";
-    weight: number;
-}, {
-    family: string;
-    style: "normal" | "italic" | "oblique";
-    weight: number;
-}>, z.ZodObject<{
+}, z.core.$strip>, 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<{
+    style: z.ZodDefault<z.ZodEnum<{
+        italic: "italic";
+        normal: "normal";
+        oblique: "oblique";
+    }>>;
+    variationAxes: z.ZodRecord<z.ZodString & z.core.$partial, 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, {
-    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;
+    }, z.core.$strip>>;
+}, z.core.$strip>]>;
+export declare const fontMetaUpdate: z.ZodUnion<readonly [z.ZodObject<{
+    family: z.ZodOptional<z.ZodString>;
+    style: z.ZodOptional<z.ZodEnum<{
+        italic: "italic";
+        normal: "normal";
+        oblique: "oblique";
     }>>;
-}, {
-    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;
+    weight: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strict>, z.ZodObject<{
+    family: z.ZodOptional<z.ZodString>;
+    style: z.ZodOptional<z.ZodEnum<{
+        italic: "italic";
+        normal: "normal";
+        oblique: "oblique";
     }>>;
-}>]>;
-export type FontMeta = z.infer<typeof FontMeta>;
+    variationAxes: z.ZodOptional<z.ZodRecord<z.ZodString & z.core.$partial, z.ZodObject<{
+        name: z.ZodString;
+        min: z.ZodNumber;
+        default: z.ZodNumber;
+        max: z.ZodNumber;
+    }, z.core.$strip>>>;
+}, z.core.$strict>]>;
+export type FontMeta = z.infer<typeof fontMeta>;
+export declare const mergeFontMeta: (current: FontMeta, override: unknown) => FontMeta | undefined;
 export {};

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@webstudio-is/fonts",
-  "version": "0.0.0-73cd6ea",
+  "version": "0.0.0-7a19155",
   "description": "Fonts utils",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "devDependencies": {
     "vitest": "^3.1.2",
-    "zod": "^3.24.2",
+    "zod": "^4.4.3",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
-    "zod": "^3.19.1"
+    "zod": "^4.4.3"
   },
   "exports": {
     "webstudio": "./src/index.ts",
@@ -26,7 +26,7 @@
   "private": false,
   "sideEffects": false,
   "scripts": {
-    "typecheck": "tsc",
+    "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "build": "rm -rf lib && esbuild src/index.ts --outdir=lib --bundle --format=esm --packages=external",
     "dts": "tsc --project tsconfig.dts.json"

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

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