createFontStack: Ensure provided size-adjust is factored into overr…

…ides (#199)

.changeset/sour-mayflies-visit.md

@@ -0,0 +1,37 @@
+---
+'@capsizecss/core': patch
+---
+
+createFontStack: Ensure provided \`size-adjust\` is factored into metric overrides
+
+Ensures a custom `size-adjust` value provided via the `fontFaceProperties` option is factored into the calculations for the metric overrides.
+
+#### Example
+
+If a custom `size-adjust` value is provided:
+
+```ts
+createFontStack(
+  [ merriweatherSans, arial ],
+  {
+    fontFaceProperties: {
+      sizeAdjust: '300%'
+    }
+  },
+)
+```
+
+The resulting metric overrides are now adjusted accordingly:
+
+```diff
+ @font-face {
+   font-family: "Merriweather Sans Fallback";
+   src: local('Arial');
+-  ascent-override: 92.3409%;
++  ascent-override: 32.8%;
+-  descent-override: 25.619%;
++  descent-override: 9.1%;
+   line-gap-override: 0%;
+   size-adjust: 300%;
+ }
+```

packages/core/src/createFontStack.test.ts

@@ -509,10 +509,10 @@ describe('createFontStack', () => {
           "fontFaces": "@font-face {
           font-family: "Merriweather Sans Fallback";
           src: local('Arial');
-          size-adjust: 300%;
-          ascent-override: 92.3409%;
-          descent-override: 25.619%;
+          ascent-override: 32.8%;
+          descent-override: 9.1%;
           line-gap-override: 0%;
+          size-adjust: 300%;
         }",
           "fontFamily": ""Merriweather Sans", "Merriweather Sans Fallback", Arial",
         }

packages/core/src/createFontStack.ts

@@ -3,6 +3,7 @@ import { round } from './round';
 import type { FontMetrics, SupportedSubset } from './types';
 
 const toPercentString = (value: number) => `${round(value * 100)}%`;
+const fromPercentString = (value: string) => parseFloat(value) / 100;
 
 export const toCssProperty = (property: string) =>
   property.replace(/([A-Z])/g, (property) => `-${property.toLowerCase()}`);
@@ -40,23 +41,29 @@ interface OverrideValuesParams {
   metrics: FontStackMetrics;
   fallbackMetrics: FontStackMetrics;
   subset: SupportedSubset;
+  sizeAdjust?: AtRule.FontFace['sizeAdjust'];
 }
 const calculateOverrideValues = ({
   metrics,
   fallbackMetrics,
   subset,
+  sizeAdjust: sizeAdjustOverride,
 }: OverrideValuesParams): AtRule.FontFace => {
   // Calculate size adjust
   const preferredFontXAvgRatio =
     resolveXWidthAvg(metrics, subset) / metrics.unitsPerEm;
   const fallbackFontXAvgRatio =
     resolveXWidthAvg(fallbackMetrics, subset) / fallbackMetrics.unitsPerEm;
 
-  const sizeAdjust =
+  const calculatedSizeAdjust =
     preferredFontXAvgRatio && fallbackFontXAvgRatio
       ? preferredFontXAvgRatio / fallbackFontXAvgRatio
       : 1;
 
+  const sizeAdjust = sizeAdjustOverride
+    ? fromPercentString(sizeAdjustOverride)
+    : calculatedSizeAdjust;
+
   const adjustedEmSquare = metrics.unitsPerEm * sizeAdjust;
 
   // Calculate metric overrides for preferred font
@@ -185,12 +192,14 @@ type FontFaceFormatObject = {
 const resolveOptions = (options: Parameters<typeof createFontStack>[1]) => {
   const fontFaceFormat = options?.fontFaceFormat ?? 'styleString';
   const subset = options?.subset ?? 'latin';
-  const fontFaceProperties = options?.fontFaceProperties ?? {};
+  const { sizeAdjust, ...fontFaceProperties } =
+    options?.fontFaceProperties ?? {};
 
   return {
     fontFaceFormat,
     subset,
     fontFaceProperties,
+    sizeAdjust,
   } as const;
 };
 
@@ -206,7 +215,7 @@ export function createFontStack(
   [metrics, ...fallbackMetrics]: FontStackMetrics[],
   optionsArg: CreateFontStackOptions = {},
 ) {
-  const { fontFaceFormat, fontFaceProperties, subset } =
+  const { fontFaceFormat, fontFaceProperties, sizeAdjust, subset } =
     resolveOptions(optionsArg);
   const { familyName } = metrics;
 
@@ -230,10 +239,8 @@ export function createFontStack(
           metrics,
           fallbackMetrics: fallback,
           subset,
+          sizeAdjust,
         }),
-        ...(fontFaceProperties?.sizeAdjust
-          ? { sizeAdjust: fontFaceProperties.sizeAdjust }
-          : {}),
       },
     });
   });