@capsizecss/core - npm Package Compare versions

Comparing version 0.0.0-createfontstack-20221107222828 to 0.0.0-createfontstack-20221108001254

dist/capsizecss-core.browser.cjs.js

@@ -201,10 +201,19 @@ 'use strict';
 const formatValue = value => toPercent(round(value * 100));
-
-// TODO: Should core package take dependency on unpack?
-
-const calculateOverrideValues = (metrics
-// TODO: fallbackMetrics: UnpackedMetrics,
-) => {
+const calculateOverrideValues = _ref => {
+  let {
+    metrics,
+    fallbackMetrics,
+    sizeAdjustStrategy
+  } = _ref;
   // Calculate size adjust
-  const sizeAdjust = 1; // TODO: metrics.xAvgCharWidth / fallbackMetrics.xAvgCharWidth;
+  let sizeAdjust = 1;
+  if (sizeAdjustStrategy) {
+    // @ts-expect-error TODO Don't ignore when final metric naming is released
+    const preferredFontAvgWidth = metrics[sizeAdjustStrategy];
+    // @ts-expect-error TODO Don't ignore when final metric naming is released
+    const fallbackFontAvgWidth = fallbackMetrics[sizeAdjustStrategy];
+    if (preferredFontAvgWidth && fallbackFontAvgWidth) {
+      sizeAdjust = preferredFontAvgWidth / fallbackFontAvgWidth;
+    }
+  }
   const adjustedEmSquare = metrics.unitsPerEm * sizeAdjust;
@@ -228,6 +237,9 @@
   }
+  if (sizeAdjust !== 1) {
+    fontFace['sizeAdjust'] = formatValue(sizeAdjust);
+  }
   return fontFace;
 };
 const toCSSString = fontFaces => {
-  return fontFaces.map(_ref => {
+  return fontFaces.map(_ref2 => {
     let {
@@ -242,3 +254,3 @@ '@font-face': {
       }
-    } = _ref;
+    } = _ref2;
     const fontFace = ['@font-face {', "  font-family: ".concat(fontFamily, ";"), "  src: ".concat(src, ";")];
@@ -276,11 +288,27 @@ if (ascentOverride) {
 
-function createFontStack(_ref2) {
-  let [fontMetrics, ...fallbacks] = _ref2;
+function createFontStack(_ref3) {
+  let [metrics, ...fallbacks] = _ref3;
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const {
     familyName
-  } = fontMetrics;
+  } = metrics;
   const fontFamilys = [quoteIfNeeded(familyName)];
   const fontFaces = [];
-  fallbacks.forEach(fallbackMetrics => {
-    const fontFamily = "'".concat(familyName, " Fallback: ").concat(fallbackMetrics.familyName, "'");
+  if (options.sizeAdjust) {
+    fallbacks.forEach(fallbackMetrics => {
+      const fontFamily = "'".concat(familyName, " Fallback: ").concat(fallbackMetrics.familyName, "'");
+      fontFamilys.push(fontFamily);
+      fontFaces.push({
+        '@font-face': _objectSpread2({
+          fontFamily,
+          src: "local('".concat(fallbackMetrics.familyName, "')")
+        }, calculateOverrideValues({
+          metrics,
+          fallbackMetrics,
+          sizeAdjustStrategy: options.sizeAdjust
+        }))
+      });
+    });
+  } else {
+    const fontFamily = "'".concat(familyName, " Fallback'");
     fontFamilys.push(fontFamily);
@@ -290,7 +318,13 @@ fontFaces.push({
         fontFamily,
-        src: "local('".concat(fallbackMetrics.familyName, "')")
-      }, calculateOverrideValues(fontMetrics /* TODO: pass fallbackMetrics as second arg */))
+        src: fallbacks.map(_ref4 => {
+          let {
+            familyName: fallbackName
+          } = _ref4;
+          return "local('".concat(fallbackName, "')");
+        }).join(', ')
+      }, calculateOverrideValues({
+        metrics
+      }))
     });
-  });
-
+  }
   return {
@@ -297,0 +331,0 @@ fontFamily: fontFamilys.join(', '),

dist/capsizecss-core.browser.esm.js

@@ -197,10 +197,19 @@ function normaliseOptions(options) {
 const formatValue = value => toPercent(round(value * 100));
-
-// TODO: Should core package take dependency on unpack?
-
-const calculateOverrideValues = (metrics
-// TODO: fallbackMetrics: UnpackedMetrics,
-) => {
+const calculateOverrideValues = _ref => {
+  let {
+    metrics,
+    fallbackMetrics,
+    sizeAdjustStrategy
+  } = _ref;
   // Calculate size adjust
-  const sizeAdjust = 1; // TODO: metrics.xAvgCharWidth / fallbackMetrics.xAvgCharWidth;
+  let sizeAdjust = 1;
+  if (sizeAdjustStrategy) {
+    // @ts-expect-error TODO Don't ignore when final metric naming is released
+    const preferredFontAvgWidth = metrics[sizeAdjustStrategy];
+    // @ts-expect-error TODO Don't ignore when final metric naming is released
+    const fallbackFontAvgWidth = fallbackMetrics[sizeAdjustStrategy];
+    if (preferredFontAvgWidth && fallbackFontAvgWidth) {
+      sizeAdjust = preferredFontAvgWidth / fallbackFontAvgWidth;
+    }
+  }
   const adjustedEmSquare = metrics.unitsPerEm * sizeAdjust;
@@ -224,6 +233,9 @@
   }
+  if (sizeAdjust !== 1) {
+    fontFace['sizeAdjust'] = formatValue(sizeAdjust);
+  }
   return fontFace;
 };
 const toCSSString = fontFaces => {
-  return fontFaces.map(_ref => {
+  return fontFaces.map(_ref2 => {
     let {
@@ -238,3 +250,3 @@ '@font-face': {
       }
-    } = _ref;
+    } = _ref2;
     const fontFace = ['@font-face {', "  font-family: ".concat(fontFamily, ";"), "  src: ".concat(src, ";")];
@@ -272,11 +284,27 @@ if (ascentOverride) {
 
-function createFontStack(_ref2) {
-  let [fontMetrics, ...fallbacks] = _ref2;
+function createFontStack(_ref3) {
+  let [metrics, ...fallbacks] = _ref3;
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const {
     familyName
-  } = fontMetrics;
+  } = metrics;
   const fontFamilys = [quoteIfNeeded(familyName)];
   const fontFaces = [];
-  fallbacks.forEach(fallbackMetrics => {
-    const fontFamily = "'".concat(familyName, " Fallback: ").concat(fallbackMetrics.familyName, "'");
+  if (options.sizeAdjust) {
+    fallbacks.forEach(fallbackMetrics => {
+      const fontFamily = "'".concat(familyName, " Fallback: ").concat(fallbackMetrics.familyName, "'");
+      fontFamilys.push(fontFamily);
+      fontFaces.push({
+        '@font-face': _objectSpread2({
+          fontFamily,
+          src: "local('".concat(fallbackMetrics.familyName, "')")
+        }, calculateOverrideValues({
+          metrics,
+          fallbackMetrics,
+          sizeAdjustStrategy: options.sizeAdjust
+        }))
+      });
+    });
+  } else {
+    const fontFamily = "'".concat(familyName, " Fallback'");
     fontFamilys.push(fontFamily);
@@ -286,7 +314,13 @@ fontFaces.push({
         fontFamily,
-        src: "local('".concat(fallbackMetrics.familyName, "')")
-      }, calculateOverrideValues(fontMetrics /* TODO: pass fallbackMetrics as second arg */))
+        src: fallbacks.map(_ref4 => {
+          let {
+            familyName: fallbackName
+          } = _ref4;
+          return "local('".concat(fallbackName, "')");
+        }).join(', ')
+      }, calculateOverrideValues({
+        metrics
+      }))
     });
-  });
-
+  }
   return {
@@ -293,0 +327,0 @@ fontFamily: fontFamilys.join(', '),

dist/capsizecss-core.cjs.dev.js

@@ -201,10 +201,19 @@ 'use strict';
 const formatValue = value => toPercent(round(value * 100));
-
-// TODO: Should core package take dependency on unpack?
-
-const calculateOverrideValues = (metrics
-// TODO: fallbackMetrics: UnpackedMetrics,
-) => {
+const calculateOverrideValues = _ref => {
+  let {
+    metrics,
+    fallbackMetrics,
+    sizeAdjustStrategy
+  } = _ref;
   // Calculate size adjust
-  const sizeAdjust = 1; // TODO: metrics.xAvgCharWidth / fallbackMetrics.xAvgCharWidth;
+  let sizeAdjust = 1;
+  if (sizeAdjustStrategy) {
+    // @ts-expect-error TODO Don't ignore when final metric naming is released
+    const preferredFontAvgWidth = metrics[sizeAdjustStrategy];
+    // @ts-expect-error TODO Don't ignore when final metric naming is released
+    const fallbackFontAvgWidth = fallbackMetrics[sizeAdjustStrategy];
+    if (preferredFontAvgWidth && fallbackFontAvgWidth) {
+      sizeAdjust = preferredFontAvgWidth / fallbackFontAvgWidth;
+    }
+  }
   const adjustedEmSquare = metrics.unitsPerEm * sizeAdjust;
@@ -228,6 +237,9 @@
   }
+  if (sizeAdjust !== 1) {
+    fontFace['sizeAdjust'] = formatValue(sizeAdjust);
+  }
   return fontFace;
 };
 const toCSSString = fontFaces => {
-  return fontFaces.map(_ref => {
+  return fontFaces.map(_ref2 => {
     let {
@@ -242,3 +254,3 @@ '@font-face': {
       }
-    } = _ref;
+    } = _ref2;
     const fontFace = ['@font-face {', "  font-family: ".concat(fontFamily, ";"), "  src: ".concat(src, ";")];
@@ -276,11 +288,27 @@ if (ascentOverride) {
 
-function createFontStack(_ref2) {
-  let [fontMetrics, ...fallbacks] = _ref2;
+function createFontStack(_ref3) {
+  let [metrics, ...fallbacks] = _ref3;
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const {
     familyName
-  } = fontMetrics;
+  } = metrics;
   const fontFamilys = [quoteIfNeeded(familyName)];
   const fontFaces = [];
-  fallbacks.forEach(fallbackMetrics => {
-    const fontFamily = "'".concat(familyName, " Fallback: ").concat(fallbackMetrics.familyName, "'");
+  if (options.sizeAdjust) {
+    fallbacks.forEach(fallbackMetrics => {
+      const fontFamily = "'".concat(familyName, " Fallback: ").concat(fallbackMetrics.familyName, "'");
+      fontFamilys.push(fontFamily);
+      fontFaces.push({
+        '@font-face': _objectSpread2({
+          fontFamily,
+          src: "local('".concat(fallbackMetrics.familyName, "')")
+        }, calculateOverrideValues({
+          metrics,
+          fallbackMetrics,
+          sizeAdjustStrategy: options.sizeAdjust
+        }))
+      });
+    });
+  } else {
+    const fontFamily = "'".concat(familyName, " Fallback'");
     fontFamilys.push(fontFamily);
@@ -290,7 +318,13 @@ fontFaces.push({
         fontFamily,
-        src: "local('".concat(fallbackMetrics.familyName, "')")
-      }, calculateOverrideValues(fontMetrics /* TODO: pass fallbackMetrics as second arg */))
+        src: fallbacks.map(_ref4 => {
+          let {
+            familyName: fallbackName
+          } = _ref4;
+          return "local('".concat(fallbackName, "')");
+        }).join(', ')
+      }, calculateOverrideValues({
+        metrics
+      }))
     });
-  });
-
+  }
   return {
@@ -297,0 +331,0 @@ fontFamily: fontFamilys.join(', '),

dist/capsizecss-core.cjs.prod.js

@@ -201,10 +201,19 @@ 'use strict';
 const formatValue = value => toPercent(round(value * 100));
-
-// TODO: Should core package take dependency on unpack?
-
-const calculateOverrideValues = (metrics
-// TODO: fallbackMetrics: UnpackedMetrics,
-) => {
+const calculateOverrideValues = _ref => {
+  let {
+    metrics,
+    fallbackMetrics,
+    sizeAdjustStrategy
+  } = _ref;
   // Calculate size adjust
-  const sizeAdjust = 1; // TODO: metrics.xAvgCharWidth / fallbackMetrics.xAvgCharWidth;
+  let sizeAdjust = 1;
+  if (sizeAdjustStrategy) {
+    // @ts-expect-error TODO Don't ignore when final metric naming is released
+    const preferredFontAvgWidth = metrics[sizeAdjustStrategy];
+    // @ts-expect-error TODO Don't ignore when final metric naming is released
+    const fallbackFontAvgWidth = fallbackMetrics[sizeAdjustStrategy];
+    if (preferredFontAvgWidth && fallbackFontAvgWidth) {
+      sizeAdjust = preferredFontAvgWidth / fallbackFontAvgWidth;
+    }
+  }
   const adjustedEmSquare = metrics.unitsPerEm * sizeAdjust;
@@ -228,6 +237,9 @@
   }
+  if (sizeAdjust !== 1) {
+    fontFace['sizeAdjust'] = formatValue(sizeAdjust);
+  }
   return fontFace;
 };
 const toCSSString = fontFaces => {
-  return fontFaces.map(_ref => {
+  return fontFaces.map(_ref2 => {
     let {
@@ -242,3 +254,3 @@ '@font-face': {
       }
-    } = _ref;
+    } = _ref2;
     const fontFace = ['@font-face {', "  font-family: ".concat(fontFamily, ";"), "  src: ".concat(src, ";")];
@@ -276,11 +288,27 @@ if (ascentOverride) {
 
-function createFontStack(_ref2) {
-  let [fontMetrics, ...fallbacks] = _ref2;
+function createFontStack(_ref3) {
+  let [metrics, ...fallbacks] = _ref3;
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const {
     familyName
-  } = fontMetrics;
+  } = metrics;
   const fontFamilys = [quoteIfNeeded(familyName)];
   const fontFaces = [];
-  fallbacks.forEach(fallbackMetrics => {
-    const fontFamily = "'".concat(familyName, " Fallback: ").concat(fallbackMetrics.familyName, "'");
+  if (options.sizeAdjust) {
+    fallbacks.forEach(fallbackMetrics => {
+      const fontFamily = "'".concat(familyName, " Fallback: ").concat(fallbackMetrics.familyName, "'");
+      fontFamilys.push(fontFamily);
+      fontFaces.push({
+        '@font-face': _objectSpread2({
+          fontFamily,
+          src: "local('".concat(fallbackMetrics.familyName, "')")
+        }, calculateOverrideValues({
+          metrics,
+          fallbackMetrics,
+          sizeAdjustStrategy: options.sizeAdjust
+        }))
+      });
+    });
+  } else {
+    const fontFamily = "'".concat(familyName, " Fallback'");
     fontFamilys.push(fontFamily);
@@ -290,7 +318,13 @@ fontFaces.push({
         fontFamily,
-        src: "local('".concat(fallbackMetrics.familyName, "')")
-      }, calculateOverrideValues(fontMetrics /* TODO: pass fallbackMetrics as second arg */))
+        src: fallbacks.map(_ref4 => {
+          let {
+            familyName: fallbackName
+          } = _ref4;
+          return "local('".concat(fallbackName, "')");
+        }).join(', ')
+      }, calculateOverrideValues({
+        metrics
+      }))
     });
-  });
-
+  }
   return {
@@ -297,0 +331,0 @@ fontFamily: fontFamilys.join(', '),

dist/capsizecss-core.esm.js

@@ -197,10 +197,19 @@ function normaliseOptions(options) {
 const formatValue = value => toPercent(round(value * 100));
-
-// TODO: Should core package take dependency on unpack?
-
-const calculateOverrideValues = (metrics
-// TODO: fallbackMetrics: UnpackedMetrics,
-) => {
+const calculateOverrideValues = _ref => {
+  let {
+    metrics,
+    fallbackMetrics,
+    sizeAdjustStrategy
+  } = _ref;
   // Calculate size adjust
-  const sizeAdjust = 1; // TODO: metrics.xAvgCharWidth / fallbackMetrics.xAvgCharWidth;
+  let sizeAdjust = 1;
+  if (sizeAdjustStrategy) {
+    // @ts-expect-error TODO Don't ignore when final metric naming is released
+    const preferredFontAvgWidth = metrics[sizeAdjustStrategy];
+    // @ts-expect-error TODO Don't ignore when final metric naming is released
+    const fallbackFontAvgWidth = fallbackMetrics[sizeAdjustStrategy];
+    if (preferredFontAvgWidth && fallbackFontAvgWidth) {
+      sizeAdjust = preferredFontAvgWidth / fallbackFontAvgWidth;
+    }
+  }
   const adjustedEmSquare = metrics.unitsPerEm * sizeAdjust;
@@ -224,6 +233,9 @@
   }
+  if (sizeAdjust !== 1) {
+    fontFace['sizeAdjust'] = formatValue(sizeAdjust);
+  }
   return fontFace;
 };
 const toCSSString = fontFaces => {
-  return fontFaces.map(_ref => {
+  return fontFaces.map(_ref2 => {
     let {
@@ -238,3 +250,3 @@ '@font-face': {
       }
-    } = _ref;
+    } = _ref2;
     const fontFace = ['@font-face {', "  font-family: ".concat(fontFamily, ";"), "  src: ".concat(src, ";")];
@@ -272,11 +284,27 @@ if (ascentOverride) {
 
-function createFontStack(_ref2) {
-  let [fontMetrics, ...fallbacks] = _ref2;
+function createFontStack(_ref3) {
+  let [metrics, ...fallbacks] = _ref3;
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const {
     familyName
-  } = fontMetrics;
+  } = metrics;
   const fontFamilys = [quoteIfNeeded(familyName)];
   const fontFaces = [];
-  fallbacks.forEach(fallbackMetrics => {
-    const fontFamily = "'".concat(familyName, " Fallback: ").concat(fallbackMetrics.familyName, "'");
+  if (options.sizeAdjust) {
+    fallbacks.forEach(fallbackMetrics => {
+      const fontFamily = "'".concat(familyName, " Fallback: ").concat(fallbackMetrics.familyName, "'");
+      fontFamilys.push(fontFamily);
+      fontFaces.push({
+        '@font-face': _objectSpread2({
+          fontFamily,
+          src: "local('".concat(fallbackMetrics.familyName, "')")
+        }, calculateOverrideValues({
+          metrics,
+          fallbackMetrics,
+          sizeAdjustStrategy: options.sizeAdjust
+        }))
+      });
+    });
+  } else {
+    const fontFamily = "'".concat(familyName, " Fallback'");
     fontFamilys.push(fontFamily);
@@ -286,7 +314,13 @@ fontFaces.push({
         fontFamily,
-        src: "local('".concat(fallbackMetrics.familyName, "')")
-      }, calculateOverrideValues(fontMetrics /* TODO: pass fallbackMetrics as second arg */))
+        src: fallbacks.map(_ref4 => {
+          let {
+            familyName: fallbackName
+          } = _ref4;
+          return "local('".concat(fallbackName, "')");
+        }).join(', ')
+      }, calculateOverrideValues({
+        metrics
+      }))
     });
-  });
-
+  }
   return {
@@ -293,0 +327,0 @@ fontFamily: fontFamilys.join(', '),

dist/declarations/src/createFontStack.d.ts

 import { FontMetrics } from './types';
 import { AtRule } from 'csstype';
+declare type SizeAdjustStrategy = 'xAvgCharWidth' | 'xAvgLowercase' | 'xAvgWeightedOs2' | 'xAvgWeightedWiki' | 'xAvgLetterFrequency';
 interface UnpackedMetrics extends FontMetrics {
@@ -9,3 +10,6 @@ familyName: string;
 };
-export declare function createFontStack([fontMetrics, ...fallbacks]: UnpackedMetrics[]): {
+interface CreateFontStackOptions {
+    sizeAdjust?: SizeAdjustStrategy;
+}
+export declare function createFontStack([metrics, ...fallbacks]: UnpackedMetrics[], options?: CreateFontStackOptions): {
     fontFamily: string;
@@ -12,0 +16,0 @@ fontFaces: FontFace[];

package.json

 {
   "name": "@capsizecss/core",
-  "version": "0.0.0-createfontstack-20221107222828",
+  "version": "0.0.0-createfontstack-20221108001254",
   "description": "Flipping how we define typography",
@@ -5,0 +5,0 @@ "main": "dist/capsizecss-core.cjs.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67102

increased by9.01%

Lines of code

1688

increased by12.61%

No dependency changes