@tamagui/get-font-sized - npm Package Compare versions

Comparing version 1.1.7 to 1.1.8

dist/cjs/index.js

@@ -25,3 +25,3 @@ "use strict";
 var import_core = require("@tamagui/core");
-const getFontSized = (val = "$true", { fonts, theme, props }) => {
+const getFontSized = (sizeTokenIn = "$true", { fonts, theme, props }) => {
   var _a, _b, _c;
@@ -35,3 +35,3 @@ const family = (0, import_core.getVariableValue)(props.fontFamily) || "$body";
         fontTokens: Object.keys(fonts),
-        val
+        sizeTokenIn
       });
@@ -42,9 +42,10 @@ }
   const fontFamily = font.family;
-  const fontSize = props.fontSize || font.size[val];
-  const lineHeight = props.lineHeight || font.lineHeight[val];
-  const fontWeight = props.fontWeight || font.weight[val];
-  const letterSpacing = props.letterSpacing || font.letterSpacing[val];
-  const fontStyle = props.fontStyle || ((_a = font.style) == null ? void 0 : _a[val]);
-  const textTransform = props.textTransform || ((_b = font.transform) == null ? void 0 : _b[val]);
-  const color = props.color || ((_c = font.color) == null ? void 0 : _c[val]) || theme.color;
+  const sizeToken = sizeTokenIn === "$true" ? getDefaultSizeToken(font) : sizeTokenIn;
+  const fontSize = props.fontSize || font.size[sizeToken];
+  const lineHeight = props.lineHeight || font.lineHeight[sizeToken];
+  const fontWeight = props.fontWeight || font.weight[sizeToken];
+  const letterSpacing = props.letterSpacing || font.letterSpacing[sizeToken];
+  const fontStyle = props.fontStyle || ((_a = font.style) == null ? void 0 : _a[sizeToken]);
+  const textTransform = props.textTransform || ((_b = font.transform) == null ? void 0 : _b[sizeToken]);
+  const color = props.color || ((_c = font.color) == null ? void 0 : _c[sizeToken]) || theme.color;
   const style = {
@@ -62,3 +63,3 @@ color,
     if (props["debug"]) {
-      console.groupCollapsed("  \u{1F539} getFont", val, props["fontWeight"], props["fow"]);
+      console.groupCollapsed("  \u{1F539} getFontSized", sizeTokenIn, sizeToken);
       console.log({ style, props, font });
@@ -70,2 +71,24 @@ console.groupEnd();
 };
+const cache = /* @__PURE__ */ new WeakMap();
+function getDefaultSizeToken(font) {
+  if (cache.has(font)) {
+    return cache.get(font);
+  }
+  const sizeTokens = "$true" in font.size ? font.size : (0, import_core.getTokens)(true).size;
+  const sizeDefault = sizeTokens["$true"];
+  const sizeDefaultSpecific = sizeDefault ? Object.keys(sizeTokens).find(
+    (x) => x !== "$true" && sizeTokens[x]["val"] === sizeDefault["val"]
+  ) : null;
+  if (!sizeDefault || !sizeDefaultSpecific) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(`No default size is set in your tokens for the "true" key, fonts will be inconsistent.
+
+      Fix this by having consistent tokens across fonts and sizes and setting a true key for your size tokens, or
+      set true keys for all your font tokens: "size", "lineHeight", "fontStyle", etc.`);
+    }
+    return Object.keys(font.size)[3];
+  }
+  cache.set(font, sizeDefaultSpecific);
+  return sizeDefaultSpecific;
+}
 // Annotate the CommonJS export names for ESM import in node:
@@ -72,0 +95,0 @@ 0 && (module.exports = {

dist/esm/index.js

@@ -1,3 +0,3 @@
-import { getVariableValue } from "@tamagui/core";
-const getFontSized = (val = "$true", { fonts, theme, props }) => {
+import { getTokens, getVariableValue } from "@tamagui/core";
+const getFontSized = (sizeTokenIn = "$true", { fonts, theme, props }) => {
   var _a, _b, _c;
@@ -11,3 +11,3 @@ const family = getVariableValue(props.fontFamily) || "$body";
         fontTokens: Object.keys(fonts),
-        val
+        sizeTokenIn
       });
@@ -18,9 +18,10 @@ }
   const fontFamily = font.family;
-  const fontSize = props.fontSize || font.size[val];
-  const lineHeight = props.lineHeight || font.lineHeight[val];
-  const fontWeight = props.fontWeight || font.weight[val];
-  const letterSpacing = props.letterSpacing || font.letterSpacing[val];
-  const fontStyle = props.fontStyle || ((_a = font.style) == null ? void 0 : _a[val]);
-  const textTransform = props.textTransform || ((_b = font.transform) == null ? void 0 : _b[val]);
-  const color = props.color || ((_c = font.color) == null ? void 0 : _c[val]) || theme.color;
+  const sizeToken = sizeTokenIn === "$true" ? getDefaultSizeToken(font) : sizeTokenIn;
+  const fontSize = props.fontSize || font.size[sizeToken];
+  const lineHeight = props.lineHeight || font.lineHeight[sizeToken];
+  const fontWeight = props.fontWeight || font.weight[sizeToken];
+  const letterSpacing = props.letterSpacing || font.letterSpacing[sizeToken];
+  const fontStyle = props.fontStyle || ((_a = font.style) == null ? void 0 : _a[sizeToken]);
+  const textTransform = props.textTransform || ((_b = font.transform) == null ? void 0 : _b[sizeToken]);
+  const color = props.color || ((_c = font.color) == null ? void 0 : _c[sizeToken]) || theme.color;
   const style = {
@@ -38,3 +39,3 @@ color,
     if (props["debug"]) {
-      console.groupCollapsed("  \u{1F539} getFont", val, props["fontWeight"], props["fow"]);
+      console.groupCollapsed("  \u{1F539} getFontSized", sizeTokenIn, sizeToken);
       console.log({ style, props, font });
@@ -46,2 +47,24 @@ console.groupEnd();
 };
+const cache = /* @__PURE__ */ new WeakMap();
+function getDefaultSizeToken(font) {
+  if (cache.has(font)) {
+    return cache.get(font);
+  }
+  const sizeTokens = "$true" in font.size ? font.size : getTokens(true).size;
+  const sizeDefault = sizeTokens["$true"];
+  const sizeDefaultSpecific = sizeDefault ? Object.keys(sizeTokens).find(
+    (x) => x !== "$true" && sizeTokens[x]["val"] === sizeDefault["val"]
+  ) : null;
+  if (!sizeDefault || !sizeDefaultSpecific) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(`No default size is set in your tokens for the "true" key, fonts will be inconsistent.
+
+      Fix this by having consistent tokens across fonts and sizes and setting a true key for your size tokens, or
+      set true keys for all your font tokens: "size", "lineHeight", "fontStyle", etc.`);
+    }
+    return Object.keys(font.size)[3];
+  }
+  cache.set(font, sizeDefaultSpecific);
+  return sizeDefaultSpecific;
+}
 export {
@@ -48,0 +71,0 @@ getFontSized

package.json

 {
   "name": "@tamagui/get-font-sized",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "types": "./types/index.d.ts",
@@ -21,7 +21,7 @@ "main": "dist/cjs",
   "dependencies": {
-    "@tamagui/core": "^1.1.7",
+    "@tamagui/core": "^1.1.8",
     "react": "^18.2.0"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.1.7",
+    "@tamagui/build": "^1.1.8",
     "@types/react": "^18.0.15"
@@ -28,0 +28,0 @@ },

src/index.ts

@@ -1,6 +0,11 @@
-import { getVariableValue } from '@tamagui/core'
-import type { FontSizeTokens, TextProps, VariantSpreadFunction } from '@tamagui/core'
+import { getTokens, getVariableValue } from '@tamagui/core'
+import type {
+  FontSizeTokens,
+  GenericFont,
+  TextProps,
+  VariantSpreadFunction,
+} from '@tamagui/core'
 
 export const getFontSized: VariantSpreadFunction<TextProps, FontSizeTokens> = (
-  val = '$true',
+  sizeTokenIn = '$true',
   { fonts, theme, props }
@@ -16,3 +21,3 @@ ) => {
         fontTokens: Object.keys(fonts),
-        val,
+        sizeTokenIn,
       })
@@ -23,9 +28,11 @@ }
   const fontFamily = font.family
-  const fontSize = props.fontSize || font.size[val]
-  const lineHeight = props.lineHeight || font.lineHeight[val]
-  const fontWeight = props.fontWeight || font.weight[val]
-  const letterSpacing = props.letterSpacing || font.letterSpacing[val]
-  const fontStyle = props.fontStyle || font.style?.[val]
-  const textTransform = props.textTransform || font.transform?.[val]
-  const color = props.color || font.color?.[val] || theme.color
+  const sizeToken = sizeTokenIn === '$true' ? getDefaultSizeToken(font) : sizeTokenIn
+  const fontSize = props.fontSize || font.size[sizeToken]
+  const lineHeight = props.lineHeight || font.lineHeight[sizeToken]
+  const fontWeight = props.fontWeight || font.weight[sizeToken]
+  const letterSpacing = props.letterSpacing || font.letterSpacing[sizeToken]
+  const fontStyle = props.fontStyle || font.style?.[sizeToken]
+  const textTransform = props.textTransform || font.transform?.[sizeToken]
+  const color = props.color || font.color?.[sizeToken] || theme.color
+
   const style = {
@@ -44,3 +51,3 @@ color,
       // eslint-disable-next-line no-console
-      console.groupCollapsed('  🔹 getFont', val, props['fontWeight'], props['fow'])
+      console.groupCollapsed('  🔹 getFontSized', sizeTokenIn, sizeToken)
       // eslint-disable-next-line no-console
@@ -54,1 +61,31 @@ console.log({ style, props, font })
 }
+
+const cache = new WeakMap<any, FontSizeTokens>()
+
+function getDefaultSizeToken(font: GenericFont) {
+  if (cache.has(font)) {
+    return cache.get(font)!
+  }
+
+  // use either font.size if it has true set, or fallback to tokens.size mapping to the same
+  const sizeTokens = '$true' in font.size ? font.size : getTokens(true).size
+  const sizeDefault = sizeTokens['$true']
+  const sizeDefaultSpecific = sizeDefault
+    ? Object.keys(sizeTokens).find(
+        (x) => x !== '$true' && sizeTokens[x]['val'] === sizeDefault['val']
+      )
+    : null
+
+  if (!sizeDefault || !sizeDefaultSpecific) {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn(`No default size is set in your tokens for the "true" key, fonts will be inconsistent.
+
+      Fix this by having consistent tokens across fonts and sizes and setting a true key for your size tokens, or
+      set true keys for all your font tokens: "size", "lineHeight", "fontStyle", etc.`)
+    }
+    return Object.keys(font.size)[3]
+  }
+
+  cache.set(font, sizeDefaultSpecific as FontSizeTokens)
+  return sizeDefaultSpecific
+}

No alert changes

Improved metrics

Total package byte prevSize

19246

increased by58.63%

Lines of code

241

increased by44.31%

Worsened metrics

Number of low supply chain risk alerts

7

increased by40%

Dependency changes

• Updated@tamagui/core@^1.1.8