@tamagui/core 1.0.0-beta.222 → 1.0.0-beta.3

package/dist/esm/createTamagui.js

@@ -12,6 +12,14 @@ function createTamagui(config) {
   if (createdConfigs.has(config)) {
     return config;
   }
+  if (process.env.NODE_ENV === "development") {
+    if (!config.tokens) {
+      throw new Error(`No tokens provided to Tamagui config`);
+    }
+    if (!config.themes) {
+      throw new Error(`No themes provided to Tamagui config`);
+    }
+  }
   if (getHasConfigured()) {
     console.warn("Called createTamagui twice! Should never do so");
   }
@@ -20,7 +28,7 @@ function createTamagui(config) {
     defaultActive: config.mediaQueryDefaultActive
   });
   const themeConfig = (() => {
-    var _a, _b;
+    var _a, _b, _c;
     let cssRules = [];
     const varsByValue = /* @__PURE__ */ new Map();
     if (isWeb) {
@@ -67,13 +75,16 @@ function createTamagui(config) {
       }
       if (isWeb) {
         const isDarkOrLightBase = themeName === "dark" || themeName === "light";
-        const isDark = themeName.includes("dark_");
+        const isDark = themeName.startsWith("dark");
         const selector = `${CNP}${themeName}`;
-        const addDarkLightSels = hasDarkLight && !isDarkOrLightBase;
         const selectors = [selector];
-        if (addDarkLightSels) {
+        if (hasDarkLight) {
           const childSelector = `${CNP}${themeName.replace("dark_", "").replace("light_", "")}`;
-          const [stronger, weaker] = isDark ? ["dark", "light"] : ["light", "dark"];
+          const order = isDark ? ["dark", "light"] : ["light", "dark"];
+          if (isDarkOrLightBase) {
+            order.reverse();
+          }
+          const [stronger, weaker] = order;
           const max = (_b = config.maxDarkLightNesting) != null ? _b : 3;
           new Array(max * 2).fill(void 0).forEach((_, pi) => {
             if (pi % 2 === 1)
@@ -84,25 +95,56 @@ function createTamagui(config) {
             selectors.push(`${(parents.length > 1 ? parents.slice(1) : parents).join(" ")} ${childSelector}`);
           });
         }
-        const cssRule = `${selectors.join(", ")} {
-${vars}
-}`;
-        cssRules.push(cssRule);
+        const rootSep = config.themeClassNameOnRoot ? "" : " ";
+        cssRules.push(`${selectors.map((x) => `:root${rootSep}${x}`).join(", ")} {${vars}}`);
+        if ((_c = config.shouldAddPrefersColorThemes) != null ? _c : true) {
+          if (isDarkOrLightBase) {
+            cssRules.push(`@media(prefers-color-scheme: ${isDark ? "dark" : "light"}) {
+    body { background:${theme.background}; color: ${theme.color} }
+    :root {${vars} } 
+  }`);
+          }
+        }
       }
     }
     varsByValue.clear();
     Object.freeze(cssRules);
+    const css = cssRules.join("\n");
     return {
       cssRules,
-      css: cssRules.join("\n")
+      css
     };
   })();
   const tokensParsed = parseTokens(config.tokens);
+  const fontsParsed = (() => {
+    if (!config.fonts) {
+      throw new Error(`No fonts defined!`);
+    }
+    const res = {};
+    for (const familyName in config.fonts) {
+      const family = config.fonts[familyName];
+      const parsed = {};
+      for (const attrKey in family) {
+        const attr = family[attrKey];
+        if (attrKey === "family") {
+          parsed[attrKey] = attr;
+          continue;
+        }
+        parsed[attrKey] = Object.keys(attr).reduce((acc, cur) => {
+          acc[`$${cur}`] = attr[cur];
+          return acc;
+        }, {});
+      }
+      res[`$${familyName}`] = parsed;
+    }
+    return res;
+  })();
   const getCSS = /* @__PURE__ */ __name(() => {
     return `${themeConfig.css}
 ${getInsertedRules().join("\n")}`;
   }, "getCSS");
   const next = {
+    fonts: {},
     animations: {},
     shorthands: {},
     media: {},
@@ -112,6 +154,7 @@ ${getInsertedRules().join("\n")}`;
       defaultTheme: "light",
       ...config
     }),
+    fontsParsed,
     themeConfig,
     tokensParsed,
     parsed: true,
@@ -130,24 +173,6 @@ const parseTokens = /* @__PURE__ */ __name((tokens) => {
   const res = {};
   for (const key in tokens) {
     res[key] = {};
-    if (key === "font") {
-      for (const family in tokens.font) {
-        const obj = {};
-        res.font[`$${family}`] = obj;
-        for (const attrKey in tokens.font[family]) {
-          const attr = tokens.font[family][attrKey];
-          if (attrKey === "family") {
-            obj[attrKey] = attr;
-            continue;
-          }
-          obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {
-            acc[`$${cur}`] = attr[cur];
-            return acc;
-          }, {});
-        }
-      }
-      continue;
-    }
     for (const skey in tokens[key]) {
       res[key][`$${skey}`] = tokens[key][skey];
     }

package/dist/esm/createTamagui.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createTamagui.ts"],
-  "sourcesContent": ["import { configListeners, getHasConfigured, setConfig } from './conf'\nimport { THEME_CLASSNAME_PREFIX } from './constants/constants'\nimport { isWeb } from './constants/platform'\nimport { Variable, createCSSVariable, createVariable, isVariable } from './createVariable'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { getInsertedRules } from './helpers/insertStyleRule'\nimport { configureMedia } from './hooks/useMedia'\nimport {\n  AnimationDriver,\n  CreateTamaguiConfig,\n  GenericTamaguiConfig,\n  MediaQueryKey,\n  TamaguiInternalConfig,\n} from './types'\n\nexport type CreateTamaguiProps =\n  // user then re-defines the types after createTamagui returns the typed object they want\n  Partial<Omit<GenericTamaguiConfig, 'themes' | 'tokens' | 'animations'>> & {\n    animations?: AnimationDriver<any>\n    tokens: GenericTamaguiConfig['tokens']\n    themes: {\n      [key: string]: {\n        [key: string]: string | number | Variable\n      }\n    }\n\n    // for the first render, determines which media queries are true\n    // useful for SSR\n    mediaQueryDefaultActive?: MediaQueryKey[]\n\n    // what's between each CSS style rule, set to \"\\n\" to be easier to read\n    // defaults: \"\\n\" when NODE_ENV=development, \"\" otherwise\n    cssStyleSeparator?: string\n\n    // (Advanced)\n    // on the web, tamagui treats `dark` and `light` themes as special and\n    // generates extra CSS to avoid having to re-render the entire page.\n    // this CSS relies on specificity hacks that multiply by your sub-themes.\n    // this sets the maxiumum number of nested dark/light themes you can do\n    // defaults to 3 for a balance, but can be higher if you nest them deeply.\n    maxDarkLightNesting?: number\n  }\n\n// config is re-run by the @tamagui/static, dont double validate\nconst createdConfigs = new WeakMap<any, boolean>()\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n  config: Conf\n): Conf extends Partial<CreateTamaguiConfig<infer A, infer B, infer C, infer D, infer E>>\n  ? TamaguiInternalConfig<A, B, C, D, E>\n  : unknown {\n  if (createdConfigs.has(config)) {\n    return config as any\n  }\n\n  // test env loads a few times as it runs diff tests\n  if (getHasConfigured()) {\n    console.warn('Called createTamagui twice! Should never do so')\n    // throw new Error(`#000 createTamagui called twice`)\n  }\n\n  configureMedia({\n    queries: config.media as any,\n    defaultActive: config.mediaQueryDefaultActive,\n  })\n\n  const themeConfig = (() => {\n    let cssRules: string[] = []\n    const varsByValue = new Map<string, Variable>()\n\n    if (isWeb) {\n      // tokens\n      const tokenRules = new Set<string>()\n\n      const addVar = (v: Variable) => {\n        varsByValue[v.val] = v\n        const rule = `--${createCSSVariable(v.name, false)}:${\n          typeof v.val === 'number' ? `${v.val}px` : v.val\n        }`\n        tokenRules.add(rule)\n      }\n\n      for (const key in config.tokens) {\n        for (const skey in config.tokens[key]) {\n          const val = config.tokens[key][skey]\n          if (key === 'font') {\n            for (const fkey in val) {\n              if (fkey === 'family') {\n                addVar(val[fkey])\n              } else {\n                for (const fskey in val[fkey]) {\n                  addVar(val[fkey][fskey])\n                }\n              }\n            }\n          } else {\n            addVar(val)\n          }\n        }\n      }\n      const sep = process.env.NODE_ENV === 'development' ? config.cssStyleSeparator || ' ' : ''\n      cssRules.push(`:root {${sep}${[...tokenRules].join(`;${sep}`)}${sep}}`)\n    }\n\n    // special case for SSR\n    const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n    const CNP = `.${THEME_CLASSNAME_PREFIX}`\n\n    // themes\n    for (const themeName in config.themes) {\n      // to allow using the same theme with diff names, be sure we don't mutate!\n      const theme = { ...config.themes[themeName] }\n      config.themes[themeName] = theme\n\n      let vars = ''\n\n      for (const themeKey in theme) {\n        if (isWeb) {\n          const val = theme[themeKey]\n          // TODO sanity check is necessary\n          const varName = val instanceof Variable ? val.name : varsByValue[val]?.name\n          vars += `--${themeKey}:${varName ? createCSSVariable(varName) : `${val}`};`\n        }\n\n        // make sure properly names theme variables\n        ensureThemeVariable(theme, themeKey)\n      }\n\n      if (isWeb) {\n        const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n        const isDark = themeName.includes('dark_')\n        const selector = `${CNP}${themeName}`\n        const addDarkLightSels = hasDarkLight && !isDarkOrLightBase\n        const selectors = [selector]\n        // since we dont specify dark/light in classnames we have to do an awkward specificity war\n        // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n        if (addDarkLightSels) {\n          const childSelector = `${CNP}${themeName.replace('dark_', '').replace('light_', '')}`\n          const [stronger, weaker] = isDark ? ['dark', 'light'] : ['light', 'dark']\n          const max = config.maxDarkLightNesting ?? 3\n          new Array(max * 2).fill(undefined).forEach((_, pi) => {\n            if (pi % 2 === 1) return\n            const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {\n              return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n            })\n            selectors.push(\n              `${(parents.length > 1 ? parents.slice(1) : parents).join(' ')} ${childSelector}`\n            )\n          })\n        }\n        const cssRule = `${selectors.join(', ')} {\\n${vars}\\n}`\n        cssRules.push(cssRule)\n      }\n    }\n\n    varsByValue.clear()\n    Object.freeze(cssRules)\n\n    return {\n      cssRules,\n      css: cssRules.join('\\n'),\n    }\n  })()\n\n  // faster lookups token keys become $keys to match input\n  const tokensParsed: any = parseTokens(config.tokens)\n\n  const getCSS = () => {\n    return `${themeConfig.css}\\n${getInsertedRules().join('\\n')}`\n  }\n\n  const next: TamaguiInternalConfig = {\n    animations: {} as any,\n    shorthands: {},\n    media: {},\n    ...config,\n    Provider: createTamaguiProvider({\n      getCSS,\n      defaultTheme: 'light',\n      ...config,\n    }),\n    themeConfig,\n    tokensParsed,\n    parsed: true,\n    getCSS,\n  }\n\n  setConfig(next)\n\n  if (configListeners.size) {\n    configListeners.forEach((cb) => cb(next))\n    configListeners.clear()\n  }\n\n  createdConfigs.set(next, true)\n\n  // @ts-expect-error\n  return next\n}\n\nconst parseTokens = (tokens: any) => {\n  const res: any = {}\n  for (const key in tokens) {\n    res[key] = {}\n    if (key === 'font') {\n      for (const family in tokens.font) {\n        const obj = {}\n        res.font[`$${family}`] = obj\n        for (const attrKey in tokens.font[family]) {\n          const attr = tokens.font[family][attrKey]\n          if (attrKey === 'family') {\n            obj[attrKey] = attr\n            continue\n          }\n          obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {\n            acc[`$${cur}`] = attr[cur]\n            return acc\n          }, {})\n        }\n      }\n      continue\n    }\n    for (const skey in tokens[key]) {\n      res[key][`$${skey}`] = tokens[key][skey]\n    }\n  }\n\n  return res\n}\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nfunction ensureThemeVariable(theme: any, key: string) {\n  const val = theme[key]\n  if (!isVariable(val)) {\n    theme[key] = createVariable({\n      name: key,\n      val,\n    })\n  } else {\n    if (val.name !== key) {\n      // rename to theme name\n      theme[key] = createVariable({\n        name: key,\n        val: val.val,\n      })\n    }\n  }\n}\n\n// for quick testing types:\n// const x = createTamagui({\n//   shorthands: {},\n//   media: {},\n//   themes: {},\n//   tokens: {\n//     font: {},\n//     color: {},\n//     radius: {},\n//     size: {},\n//     space: {},\n//     zIndex: {},\n//   },\n// })\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { configListeners, getHasConfigured, setConfig } from './conf'\nimport { THEME_CLASSNAME_PREFIX } from './constants/constants'\nimport { isWeb } from './constants/platform'\nimport { Variable, createCSSVariable, createVariable, isVariable } from './createVariable'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { getInsertedRules } from './helpers/insertStyleRule'\nimport { configureMedia } from './hooks/useMedia'\nimport {\n  AnimationDriver,\n  CreateTamaguiConfig,\n  GenericTamaguiConfig,\n  MediaQueryKey,\n  TamaguiInternalConfig,\n} from './types'\n\nexport type CreateTamaguiProps =\n  // user then re-defines the types after createTamagui returns the typed object they want\n  Partial<Omit<GenericTamaguiConfig, 'themes' | 'tokens' | 'animations'>> & {\n    animations?: AnimationDriver<any>\n    tokens: GenericTamaguiConfig['tokens']\n    themes: {\n      [key: string]: {\n        [key: string]: string | number | Variable\n      }\n    }\n\n    // for the first render, determines which media queries are true\n    // useful for SSR\n    mediaQueryDefaultActive?: MediaQueryKey[]\n\n    // what's between each CSS style rule, set to \"\\n\" to be easier to read\n    // defaults: \"\\n\" when NODE_ENV=development, \"\" otherwise\n    cssStyleSeparator?: string\n\n    // (Advanced)\n    // on the web, tamagui treats `dark` and `light` themes as special and\n    // generates extra CSS to avoid having to re-render the entire page.\n    // this CSS relies on specificity hacks that multiply by your sub-themes.\n    // this sets the maxiumum number of nested dark/light themes you can do\n    // defaults to 3 for a balance, but can be higher if you nest them deeply.\n    maxDarkLightNesting?: number\n\n    // adds @media(prefers-color-scheme) media queries for dark/light\n    shouldAddPrefersColorThemes?: boolean\n\n    // only if you put the theme classname on the html element we have to generate diff\n    themeClassNameOnRoot?: boolean\n  }\n\n// config is re-run by the @tamagui/static, dont double validate\nconst createdConfigs = new WeakMap<any, boolean>()\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n  config: Conf\n): Conf extends Partial<CreateTamaguiConfig<infer A, infer B, infer C, infer D, infer E, infer F>>\n  ? TamaguiInternalConfig<A, B, C, D, E, F>\n  : unknown {\n  if (createdConfigs.has(config)) {\n    return config as any\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    if (!config.tokens) {\n      throw new Error(`No tokens provided to Tamagui config`)\n    }\n    if (!config.themes) {\n      throw new Error(`No themes provided to Tamagui config`)\n    }\n  }\n\n  // test env loads a few times as it runs diff tests\n  if (getHasConfigured()) {\n    console.warn('Called createTamagui twice! Should never do so')\n    // throw new Error(`#000 createTamagui called twice`)\n  }\n\n  configureMedia({\n    queries: config.media as any,\n    defaultActive: config.mediaQueryDefaultActive,\n  })\n\n  const themeConfig = (() => {\n    let cssRules: string[] = []\n    const varsByValue = new Map<string, Variable>()\n\n    if (isWeb) {\n      // tokens\n      const tokenRules = new Set<string>()\n\n      const addVar = (v: Variable) => {\n        varsByValue[v.val] = v\n        const rule = `--${createCSSVariable(v.name, false)}:${\n          typeof v.val === 'number' ? `${v.val}px` : v.val\n        }`\n        tokenRules.add(rule)\n      }\n\n      for (const key in config.tokens) {\n        for (const skey in config.tokens[key]) {\n          const val = config.tokens[key][skey]\n          if (key === 'font') {\n            for (const fkey in val) {\n              if (fkey === 'family') {\n                addVar(val[fkey])\n              } else {\n                for (const fskey in val[fkey]) {\n                  addVar(val[fkey][fskey])\n                }\n              }\n            }\n          } else {\n            addVar(val)\n          }\n        }\n      }\n      const sep = process.env.NODE_ENV === 'development' ? config.cssStyleSeparator || ' ' : ''\n      cssRules.push(`:root {${sep}${[...tokenRules].join(`;${sep}`)}${sep}}`)\n    }\n\n    // special case for SSR\n    const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n    const CNP = `.${THEME_CLASSNAME_PREFIX}`\n\n    // themes\n    for (const themeName in config.themes) {\n      // to allow using the same theme with diff names, be sure we don't mutate!\n      const theme = { ...config.themes[themeName] }\n      config.themes[themeName] = theme\n      let vars = ''\n\n      for (const themeKey in theme) {\n        if (isWeb) {\n          const val = theme[themeKey]\n          // TODO sanity check is necessary\n          const varName = val instanceof Variable ? val.name : varsByValue[val]?.name\n          vars += `--${themeKey}:${varName ? createCSSVariable(varName) : `${val}`};`\n        }\n        // make sure properly names theme variables\n        ensureThemeVariable(theme, themeKey)\n      }\n\n      if (isWeb) {\n        const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n        const isDark = themeName.startsWith('dark')\n        const selector = `${CNP}${themeName}`\n        const selectors = [selector]\n\n        // since we dont specify dark/light in classnames we have to do an awkward specificity war\n        // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n        if (hasDarkLight) {\n          const childSelector = `${CNP}${themeName.replace('dark_', '').replace('light_', '')}`\n          const order = isDark ? ['dark', 'light'] : ['light', 'dark']\n          if (isDarkOrLightBase) {\n            order.reverse()\n          }\n          const [stronger, weaker] = order\n          const max = config.maxDarkLightNesting ?? 3\n          new Array(max * 2).fill(undefined).forEach((_, pi) => {\n            if (pi % 2 === 1) return\n            const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {\n              return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n            })\n            selectors.push(\n              `${(parents.length > 1 ? parents.slice(1) : parents).join(' ')} ${childSelector}`\n            )\n          })\n        }\n\n        const rootSep = config.themeClassNameOnRoot ? '' : ' '\n        cssRules.push(`${selectors.map((x) => `:root${rootSep}${x}`).join(', ')} {${vars}}`)\n\n        if (config.shouldAddPrefersColorThemes ?? true) {\n          // add media prefers for dark/light base\n          if (isDarkOrLightBase) {\n            cssRules.push(\n              `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {\n    body { background:${theme.background}; color: ${theme.color} }\n    :root {${vars} } \n  }`\n            )\n          }\n        }\n      }\n    }\n\n    varsByValue.clear()\n    Object.freeze(cssRules)\n    const css = cssRules.join('\\n')\n\n    return {\n      cssRules,\n      css,\n    }\n  })()\n\n  // faster lookups token keys become $keys to match input\n  const tokensParsed: any = parseTokens(config.tokens)\n\n  const fontsParsed = (() => {\n    if (!config.fonts) {\n      throw new Error(`No fonts defined!`)\n    }\n    const res = {} as typeof config.fonts\n    for (const familyName in config.fonts) {\n      const family = config.fonts[familyName]\n      const parsed = {}\n      for (const attrKey in family) {\n        const attr = family[attrKey]\n        if (attrKey === 'family') {\n          parsed[attrKey] = attr\n          continue\n        }\n        parsed[attrKey] = Object.keys(attr).reduce((acc, cur) => {\n          acc[`$${cur}`] = attr[cur]\n          return acc\n        }, {})\n      }\n      res[`$${familyName}`] = parsed as any\n    }\n    return res!\n  })()\n\n  const getCSS = () => {\n    return `${themeConfig.css}\\n${getInsertedRules().join('\\n')}`\n  }\n\n  const next: TamaguiInternalConfig = {\n    fonts: {},\n    animations: {} as any,\n    shorthands: {},\n    media: {},\n    ...config,\n    Provider: createTamaguiProvider({\n      getCSS,\n      defaultTheme: 'light',\n      ...config,\n    }),\n    fontsParsed,\n    themeConfig,\n    tokensParsed,\n    parsed: true,\n    getCSS,\n  }\n\n  setConfig(next)\n\n  if (configListeners.size) {\n    configListeners.forEach((cb) => cb(next))\n    configListeners.clear()\n  }\n\n  createdConfigs.set(next, true)\n\n  // @ts-expect-error\n  return next\n}\n\nconst parseTokens = (tokens: any) => {\n  const res: any = {}\n  for (const key in tokens) {\n    res[key] = {}\n    for (const skey in tokens[key]) {\n      res[key][`$${skey}`] = tokens[key][skey]\n    }\n  }\n  return res\n}\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nfunction ensureThemeVariable(theme: any, key: string) {\n  const val = theme[key]\n  if (!isVariable(val)) {\n    theme[key] = createVariable({\n      name: key,\n      val,\n    })\n  } else {\n    if (val.name !== key) {\n      // rename to theme name\n      theme[key] = createVariable({\n        name: key,\n        val: val.val,\n      })\n    }\n  }\n}\n\n// for quick testing types:\n// const x = createTamagui({\n//   shorthands: {},\n//   media: {},\n//   themes: {},\n//   tokens: {\n//     font: {},\n//     color: {},\n//     radius: {},\n//     size: {},\n//     space: {},\n//     zIndex: {},\n//   },\n// })\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/createTokens.js

@@ -6,17 +6,13 @@ function createTokens(tokens) {
   if (process.env.NODE_ENV === "development") {
     validateTokens(tokens);
   }
-  return setupTokens(tokens);
-}
-__name(createTokens, "createTokens");
-function setupTokens(tokens) {
   return mapTokensToVariables(tokens);
 }
-__name(setupTokens, "setupTokens");
+__name(createTokens, "createTokens");
 const mapTokensToVariables = /* @__PURE__ */ __name((tokens, parentPath = "") => {
   const res = {};
   for (const key in tokens) {
-    const val = tokens[key];
+    let val = tokens[key];
     const name = parentPath ? `${parentPath}-${key}` : key;
     if (val && typeof val === "object") {
       res[key] = mapTokensToVariables(tokens[key], name);

package/dist/esm/createTokens.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createTokens.ts"],
-  "sourcesContent": ["import { Variable, createVariable } from './createVariable'\nimport { validateTokens } from './helpers/validate'\nimport { CreateTokens } from './types'\n\n// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }\n\nexport function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {\n  if (process.env.NODE_ENV === 'development') {\n    validateTokens(tokens)\n  }\n\n  return setupTokens(tokens) as any\n}\n\nfunction setupTokens(tokens: any) {\n  return mapTokensToVariables(tokens)\n}\n\nexport const mapTokensToVariables = (\n  tokens: CreateTokens,\n  parentPath = ''\n): CreateTokens<Variable> => {\n  const res = {}\n  for (const key in tokens) {\n    const val = tokens[key]\n    const name = parentPath ? `${parentPath}-${key}` : key\n    if (val && typeof val === 'object') {\n      res[key] = mapTokensToVariables(tokens[key], name)\n    } else {\n      res[key] = createVariable({ val, name })\n    }\n  }\n  // @ts-expect-error\n  return res\n}\n\n// verbose but gives us nice types...\ntype MakeTokens<T> = T extends {\n  font: {\n    [key in infer A]: {\n      size: infer B\n      lineHeight: infer C\n      letterSpacing: infer D\n      weight: infer Z\n      family: infer Y\n    }\n  }\n  color: infer E\n  space: infer F\n  size: infer G\n  radius: infer H\n  zIndex: infer J\n}\n  ? {\n      font: {\n        [key in A]: {\n          size: {\n            [key in keyof B]: Variable\n          }\n          lineHeight: {\n            [key in keyof C]: Variable\n          }\n          letterSpacing: {\n            [key in keyof D]: Variable\n          }\n          weight: {\n            [key in keyof Z]: Variable\n          }\n          family: Y\n        }\n      }\n      color: {\n        [key in keyof E]: Variable\n      }\n      space: {\n        [key in keyof F]: Variable\n      }\n      size: {\n        [key in keyof G]: Variable\n      }\n      radius: {\n        [key in keyof H]: Variable\n      }\n      zIndex: {\n        [key in keyof J]: Variable\n      }\n    }\n  : never\n"],
-  "mappings": ";;AAAA;AACA;AAKO,sBAA8C,QAA0B;AAC7E,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,mBAAe,MAAM;AAAA,EACvB;AAEA,SAAO,YAAY,MAAM;AAC3B;AANgB;AAQhB,qBAAqB,QAAa;AAChC,SAAO,qBAAqB,MAAM;AACpC;AAFS;AAIF,MAAM,uBAAuB,wBAClC,QACA,aAAa,OACc;AAC3B,QAAM,MAAM,CAAC;AACb,aAAW,OAAO,QAAQ;AACxB,UAAM,MAAM,OAAO;AACnB,UAAM,OAAO,aAAa,GAAG,cAAc,QAAQ;AACnD,QAAI,OAAO,OAAO,QAAQ,UAAU;AAClC,UAAI,OAAO,qBAAqB,OAAO,MAAM,IAAI;AAAA,IACnD,OAAO;AACL,UAAI,OAAO,eAAe,EAAE,KAAK,KAAK,CAAC;AAAA,IACzC;AAAA,EACF;AAEA,SAAO;AACT,GAhBoC;",
+  "sourcesContent": ["import { Variable, createVariable } from './createVariable'\nimport { validateTokens } from './helpers/validate'\nimport { CreateTokens } from './types'\n\n// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }\n\nexport function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {\n  if (process.env.NODE_ENV === 'development') {\n    validateTokens(tokens)\n  }\n  return mapTokensToVariables(tokens) as any\n}\n\nexport const mapTokensToVariables = (\n  tokens: CreateTokens,\n  parentPath = ''\n): CreateTokens<Variable> => {\n  const res = {}\n  for (const key in tokens) {\n    let val = tokens[key]\n    const name = parentPath ? `${parentPath}-${key}` : key\n    if (val && typeof val === 'object') {\n      res[key] = mapTokensToVariables(tokens[key], name)\n    } else {\n      res[key] = createVariable({ val, name })\n    }\n  }\n  // @ts-expect-error\n  return res\n}\n\n// verbose but gives us nice types...\ntype MakeTokens<T> = T extends {\n  color: infer E\n  space: infer F\n  size: infer G\n  radius: infer H\n  zIndex: infer J\n}\n  ? {\n      color: {\n        [key in keyof E]: Variable\n      }\n      space: {\n        [key in keyof F]: Variable\n      }\n      size: {\n        [key in keyof G]: Variable\n      }\n      radius: {\n        [key in keyof H]: Variable\n      }\n      zIndex: {\n        [key in keyof J]: Variable\n      }\n    }\n  : never\n"],
+  "mappings": ";;AAAA;AACA;AAKO,sBAA8C,QAA0B;AAC7E,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,mBAAe,MAAM;AAAA,EACvB;AACA,SAAO,qBAAqB,MAAM;AACpC;AALgB;AAOT,MAAM,uBAAuB,wBAClC,QACA,aAAa,OACc;AAC3B,QAAM,MAAM,CAAC;AACb,aAAW,OAAO,QAAQ;AACxB,QAAI,MAAM,OAAO;AACjB,UAAM,OAAO,aAAa,GAAG,cAAc,QAAQ;AACnD,QAAI,OAAO,OAAO,QAAQ,UAAU;AAClC,UAAI,OAAO,qBAAqB,OAAO,MAAM,IAAI;AAAA,IACnD,OAAO;AACL,UAAI,OAAO,eAAe,EAAE,KAAK,KAAK,CAAC;AAAA,IACzC;AAAA,EACF;AAEA,SAAO;AACT,GAhBoC;",
   "names": []
 }

package/dist/esm/createVariable.js

@@ -22,12 +22,17 @@ function isVariable(v) {
 }
 __name(isVariable, "isVariable");
 function getVariableValue(v) {
-  if (isVariable(v)) {
+  if (isVariable(v))
     return v.val;
-  }
   return v;
 }
 __name(getVariableValue, "getVariableValue");
+function getVariableName(v) {
+  if (isVariable(v))
+    return v.name;
+  return v;
+}
+__name(getVariableName, "getVariableName");
 const createCSSVariable = /* @__PURE__ */ __name((val, includeVar = true) => {
   const name = val.replace(/[^a-z0-9\_\-]+/i, "_");
   return includeVar ? `var(--${name})` : name;
@@ -37,6 +42,7 @@ export {
   Variable,
   createCSSVariable,
   createVariable,
+  getVariableName,
   getVariableValue,
   isVariable
 };

package/dist/esm/createVariable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createVariable.ts"],
-  "sourcesContent": ["import { isWeb } from './constants/platform'\n\nexport const IS_VARIABLE_SYMBOL = '__isVariable__'\n\nexport class Variable {\n  // because we have a separate node runtime we can't do instanceof\n  // ran into issues with this and it's potentially fixable but for now\n  // lets just do this\n  [IS_VARIABLE_SYMBOL] = true\n\n  name: string\n  val: string | number\n  variable: string | number\n\n  constructor({ val, name }: VariableIn) {\n    // converting to px breaks rn\n    this.val = isVariable(val) ? val.val : val\n    this.name = name\n    this.variable = isWeb ? createCSSVariable(name) : this.val\n  }\n\n  toString() {\n    return `${isWeb ? this.variable : this.val}`\n  }\n}\n\ntype VariableIn = { val: string | number | Variable; name: string }\n\nexport const createVariable = (props: VariableIn) => new Variable(props)\n\nexport function isVariable(v: Variable | any): v is Variable {\n  return v instanceof Variable || (v && v[IS_VARIABLE_SYMBOL])\n}\n\nexport function getVariableValue(v: Variable | any) {\n  if (isVariable(v)) {\n    return v.val\n  }\n  return v\n}\n\n// bugfix { space: { 0.5: 10 } } was generating var(--space-0.5) (invalid CSS):\nexport const createCSSVariable = (val: string, includeVar = true) => {\n  const name = val.replace(/[^a-z0-9\\_\\-]+/i, '_')\n  return includeVar ? `var(--${name})` : name\n}\n"],
-  "mappings": ";;AAAA;AAAA;AAEO,MAAM,qBAAqB;AAE3B,MAAM,SAAS;AAAA,EAUpB,YAAY,EAAE,KAAK,QAAoB;AANtC,eAAsB;AAQrB,SAAK,MAAM,WAAW,GAAG,IAAI,IAAI,MAAM;AACvC,SAAK,OAAO;AACZ,SAAK,WAAW,QAAQ,kBAAkB,IAAI,IAAI,KAAK;AAAA,EACzD;AAAA,EAEA,WAAW;AACT,WAAO,GAAG,QAAQ,KAAK,WAAW,KAAK;AAAA,EACzC;AACF;AApBO;AAJP,AAQG;AAoBI,MAAM,iBAAiB,wBAAC,UAAsB,IAAI,SAAS,KAAK,GAAzC;AAEvB,oBAAoB,GAAkC;AAC3D,SAAO,aAAa,YAAa,KAAK,EAAE;AAC1C;AAFgB;AAIT,0BAA0B,GAAmB;AAClD,MAAI,WAAW,CAAC,GAAG;AACjB,WAAO,EAAE;AAAA,EACX;AACA,SAAO;AACT;AALgB;AAQT,MAAM,oBAAoB,wBAAC,KAAa,aAAa,SAAS;AACnE,QAAM,OAAO,IAAI,QAAQ,mBAAmB,GAAG;AAC/C,SAAO,aAAa,SAAS,UAAU;AACzC,GAHiC;",
+  "sourcesContent": ["import { isWeb } from './constants/platform'\n\nexport const IS_VARIABLE_SYMBOL = '__isVariable__'\n\nexport class Variable {\n  // because we have a separate node runtime we can't do instanceof\n  // ran into issues with this and it's potentially fixable but for now\n  // lets just do this\n  [IS_VARIABLE_SYMBOL] = true\n\n  name: string\n  val: string | number\n  variable: string | number\n\n  constructor({ val, name }: VariableIn) {\n    // converting to px breaks rn\n    this.val = isVariable(val) ? val.val : val\n    this.name = name\n    this.variable = isWeb ? createCSSVariable(name) : this.val\n  }\n\n  toString() {\n    return `${isWeb ? this.variable : this.val}`\n  }\n}\n\ntype VariableIn = { val: string | number | Variable; name: string }\n\nexport const createVariable = (props: VariableIn) => new Variable(props)\n\nexport function isVariable(v: Variable | any): v is Variable {\n  return v instanceof Variable || (v && v[IS_VARIABLE_SYMBOL])\n}\n\nexport function getVariableValue(v: Variable | any) {\n  if (isVariable(v)) return v.val\n  return v\n}\n\nexport function getVariableName(v: Variable | any) {\n  if (isVariable(v)) return v.name\n  return v\n}\n\n// bugfix { space: { 0.5: 10 } } was generating var(--space-0.5) (invalid CSS):\nexport const createCSSVariable = (val: string, includeVar = true) => {\n  const name = val.replace(/[^a-z0-9\\_\\-]+/i, '_')\n  return includeVar ? `var(--${name})` : name\n}\n"],
+  "mappings": ";;AAAA;AAAA;AAEO,MAAM,qBAAqB;AAE3B,MAAM,SAAS;AAAA,EAUpB,YAAY,EAAE,KAAK,QAAoB;AANtC,eAAsB;AAQrB,SAAK,MAAM,WAAW,GAAG,IAAI,IAAI,MAAM;AACvC,SAAK,OAAO;AACZ,SAAK,WAAW,QAAQ,kBAAkB,IAAI,IAAI,KAAK;AAAA,EACzD;AAAA,EAEA,WAAW;AACT,WAAO,GAAG,QAAQ,KAAK,WAAW,KAAK;AAAA,EACzC;AACF;AApBO;AAJP,AAQG;AAoBI,MAAM,iBAAiB,wBAAC,UAAsB,IAAI,SAAS,KAAK,GAAzC;AAEvB,oBAAoB,GAAkC;AAC3D,SAAO,aAAa,YAAa,KAAK,EAAE;AAC1C;AAFgB;AAIT,0BAA0B,GAAmB;AAClD,MAAI,WAAW,CAAC;AAAG,WAAO,EAAE;AAC5B,SAAO;AACT;AAHgB;AAKT,yBAAyB,GAAmB;AACjD,MAAI,WAAW,CAAC;AAAG,WAAO,EAAE;AAC5B,SAAO;AACT;AAHgB;AAMT,MAAM,oBAAoB,wBAAC,KAAa,aAAa,SAAS;AACnE,QAAM,OAAO,IAAI,QAAQ,mBAAmB,GAAG;AAC/C,SAAO,aAAa,SAAS,UAAU;AACzC,GAHiC;",
   "names": []
 }

package/dist/esm/helpers/addStylesUsingClassname.js

@@ -1,26 +1,24 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { useInsertionEffect } from "react";
+import { useInsertionEffect, useLayoutEffect } from "react";
 import { getStylesAtomic } from "./getStylesAtomic";
-import { insertStyleRule } from "./insertStyleRule";
+import { insertStyleRule, updateInsertedCache } from "./insertStyleRule";
 let added = /* @__PURE__ */ new Set();
+const effect = useInsertionEffect || useLayoutEffect;
 function useStylesAsClassname(styles, disable = false, debug = false) {
-  if (!useInsertionEffect) {
-    return addStylesUsingClassname(disable ? styles : [], debug);
-  } else {
-    const insertions = [];
-    const className = addStylesUsingClassname(disable ? [] : styles, debug, (identifier, rules) => {
-      for (const rule of rules) {
-        insertions.push({ identifier, rule });
-      }
-    });
-    useInsertionEffect(() => {
-      for (const { identifier, rule } of insertions) {
-        insertStyleRule(identifier, rule);
-      }
-    });
-    return className;
-  }
+  const insertions = [];
+  const className = addStylesUsingClassname(disable ? [] : styles, debug, (identifier, rules) => {
+    for (const rule of rules) {
+      insertions.push({ identifier, rule });
+      updateInsertedCache(identifier, rule);
+    }
+  });
+  effect(() => {
+    for (const { identifier, rule } of insertions) {
+      insertStyleRule(identifier, rule);
+    }
+  }, [className]);
+  return className;
 }
 __name(useStylesAsClassname, "useStylesAsClassname");
 function addStylesUsingClassname(styles, debug = false, onAdd) {

package/dist/esm/helpers/addStylesUsingClassname.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/addStylesUsingClassname.tsx"],
-  "sourcesContent": ["// @ts-ignore\nimport { useInsertionEffect } from 'react'\n\nimport { getStylesAtomic } from './getStylesAtomic'\nimport { insertStyleRule } from './insertStyleRule'\n\n// TODO can drop most of this code once we drop support for 17\n// uses new useInsertionEffect for better perf if available\n\n// could be cleared occasionally\nlet added = new Set<string>()\n\nexport function useStylesAsClassname(styles: any[], disable = false, debug = false) {\n  if (!useInsertionEffect) {\n    return addStylesUsingClassname(disable ? styles : [], debug)\n  } else {\n    const insertions: any[] = []\n    const className = addStylesUsingClassname(disable ? [] : styles, debug, (identifier, rules) => {\n      for (const rule of rules) {\n        insertions.push({ identifier, rule })\n      }\n    })\n    useInsertionEffect(() => {\n      for (const { identifier, rule } of insertions) {\n        insertStyleRule(identifier, rule)\n      }\n    })\n    return className\n  }\n}\n\nexport function addStylesUsingClassname(\n  styles: any[],\n  debug: boolean | 'verbose' = false,\n  onAdd?: (identifier: string, rules: string[]) => any\n) {\n  let className = ''\n  for (const style of styles) {\n    if (!style) continue\n    if (Array.isArray(style)) {\n      className += ' ' + addStylesUsingClassname(style)\n      continue\n    }\n    const atomicStyles = getStylesAtomic(style)\n    if (process.env.NODE_ENV === 'development') {\n      if (debug === 'verbose') {\n        console.log(' atomicStyles ', atomicStyles)\n      }\n    }\n    for (const { identifier, rules } of atomicStyles) {\n      className += ` ${identifier}`\n      if (added.has(identifier)) {\n        continue\n      }\n      added.add(identifier)\n      if (onAdd) {\n        onAdd(identifier, rules)\n      } else {\n        insertStyleRule(identifier, rules[0])\n      }\n    }\n  }\n  return className\n}\n"],
-  "mappings": ";;AACA;AAEA;AACA;AAMA,IAAI,QAAQ,oBAAI,IAAY;AAErB,8BAA8B,QAAe,UAAU,OAAO,QAAQ,OAAO;AAClF,MAAI,CAAC,oBAAoB;AACvB,WAAO,wBAAwB,UAAU,SAAS,CAAC,GAAG,KAAK;AAAA,EAC7D,OAAO;AACL,UAAM,aAAoB,CAAC;AAC3B,UAAM,YAAY,wBAAwB,UAAU,CAAC,IAAI,QAAQ,OAAO,CAAC,YAAY,UAAU;AAC7F,iBAAW,QAAQ,OAAO;AACxB,mBAAW,KAAK,EAAE,YAAY,KAAK,CAAC;AAAA,MACtC;AAAA,IACF,CAAC;AACD,uBAAmB,MAAM;AACvB,iBAAW,EAAE,YAAY,UAAU,YAAY;AAC7C,wBAAgB,YAAY,IAAI;AAAA,MAClC;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT;AACF;AAjBgB;AAmBT,iCACL,QACA,QAA6B,OAC7B,OACA;AACA,MAAI,YAAY;AAChB,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC;AAAO;AACZ,QAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,mBAAa,MAAM,wBAAwB,KAAK;AAChD;AAAA,IACF;AACA,UAAM,eAAe,gBAAgB,KAAK;AAC1C,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAI,UAAU,WAAW;AACvB,gBAAQ,IAAI,kBAAkB,YAAY;AAAA,MAC5C;AAAA,IACF;AACA,eAAW,EAAE,YAAY,WAAW,cAAc;AAChD,mBAAa,IAAI;AACjB,UAAI,MAAM,IAAI,UAAU,GAAG;AACzB;AAAA,MACF;AACA,YAAM,IAAI,UAAU;AACpB,UAAI,OAAO;AACT,cAAM,YAAY,KAAK;AAAA,MACzB,OAAO;AACL,wBAAgB,YAAY,MAAM,EAAE;AAAA,MACtC;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAhCgB;",
+  "sourcesContent": ["// @ts-ignore\nimport { useInsertionEffect, useLayoutEffect } from 'react'\n\nimport { getStylesAtomic } from './getStylesAtomic'\nimport { insertStyleRule, updateInsertedCache } from './insertStyleRule'\n\n// could be cleared occasionally\nlet added = new Set<string>()\n\nconst effect = useInsertionEffect || useLayoutEffect\n\nexport function useStylesAsClassname(styles: any[], disable = false, debug = false) {\n  const insertions: any[] = []\n  const className = addStylesUsingClassname(disable ? [] : styles, debug, (identifier, rules) => {\n    for (const rule of rules) {\n      insertions.push({ identifier, rule })\n      updateInsertedCache(identifier, rule)\n    }\n  })\n  effect(() => {\n    for (const { identifier, rule } of insertions) {\n      insertStyleRule(identifier, rule)\n    }\n  }, [className])\n  return className\n}\n\nexport function addStylesUsingClassname(\n  styles: any[],\n  debug: boolean | 'verbose' = false,\n  onAdd?: (identifier: string, rules: string[]) => any\n) {\n  let className = ''\n  for (const style of styles) {\n    if (!style) continue\n    if (Array.isArray(style)) {\n      className += ' ' + addStylesUsingClassname(style)\n      continue\n    }\n    const atomicStyles = getStylesAtomic(style)\n    if (process.env.NODE_ENV === 'development') {\n      if (debug === 'verbose') {\n        console.log(' atomicStyles ', atomicStyles)\n      }\n    }\n    for (const { identifier, rules } of atomicStyles) {\n      className += ` ${identifier}`\n      if (added.has(identifier)) {\n        continue\n      }\n      added.add(identifier)\n      if (onAdd) {\n        onAdd(identifier, rules)\n      } else {\n        insertStyleRule(identifier, rules[0])\n      }\n    }\n  }\n  return className\n}\n"],
+  "mappings": ";;AACA;AAEA;AACA;AAGA,IAAI,QAAQ,oBAAI,IAAY;AAE5B,MAAM,SAAS,sBAAsB;AAE9B,8BAA8B,QAAe,UAAU,OAAO,QAAQ,OAAO;AAClF,QAAM,aAAoB,CAAC;AAC3B,QAAM,YAAY,wBAAwB,UAAU,CAAC,IAAI,QAAQ,OAAO,CAAC,YAAY,UAAU;AAC7F,eAAW,QAAQ,OAAO;AACxB,iBAAW,KAAK,EAAE,YAAY,KAAK,CAAC;AACpC,0BAAoB,YAAY,IAAI;AAAA,IACtC;AAAA,EACF,CAAC;AACD,SAAO,MAAM;AACX,eAAW,EAAE,YAAY,UAAU,YAAY;AAC7C,sBAAgB,YAAY,IAAI;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AACd,SAAO;AACT;AAdgB;AAgBT,iCACL,QACA,QAA6B,OAC7B,OACA;AACA,MAAI,YAAY;AAChB,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC;AAAO;AACZ,QAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,mBAAa,MAAM,wBAAwB,KAAK;AAChD;AAAA,IACF;AACA,UAAM,eAAe,gBAAgB,KAAK;AAC1C,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAI,UAAU,WAAW;AACvB,gBAAQ,IAAI,kBAAkB,YAAY;AAAA,MAC5C;AAAA,IACF;AACA,eAAW,EAAE,YAAY,WAAW,cAAc;AAChD,mBAAa,IAAI;AACjB,UAAI,MAAM,IAAI,UAAU,GAAG;AACzB;AAAA,MACF;AACA,YAAM,IAAI,UAAU;AACpB,UAAI,OAAO;AACT,cAAM,YAAY,KAAK;AAAA,MACzB,OAAO;AACL,wBAAgB,YAAY,MAAM,EAAE;AAAA,MACtC;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAhCgB;",
   "names": []
 }

package/dist/esm/helpers/createMediaStyle.js

@@ -13,8 +13,6 @@ const createMediaStyle = /* @__PURE__ */ __name(({ identifier, rules }, mediaKey
   const mediaSelector = mediaObjectToString(mediaQueries[mediaKey]);
   const mediaQuery = `${screenStr} and ${mediaSelector}`;
   const styleInner = rules[0].replace(identifier, nextIdentifier);
-  if (styleInner.includes("2:r;"))
-    debugger;
   let styleRule = "";
   if (styleInner.includes("@media")) {
     styleRule = styleInner.replace("{", ` and ${mediaQuery} {`);

package/dist/esm/helpers/createMediaStyle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/createMediaStyle.ts"],
-  "sourcesContent": ["import { StyleObject } from '@tamagui/helpers'\n\nimport { mediaObjectToString } from '../hooks/useMedia'\nimport { MediaQueries } from '../types'\n\n// TODO have this be used by extractMediaStyle in tamagui static\n// not synced to static/constants for now\nexport const MEDIA_SEP = '_'\n\nexport const createMediaStyle = (\n  { identifier, rules }: StyleObject,\n  mediaKey: string,\n  mediaQueries: MediaQueries,\n  negate?: boolean,\n  importance?: number\n) => {\n  const mediaKeys = Object.keys(mediaQueries)\n  const importance_ = Math.max(\n    0,\n    importance == undefined ? mediaKeys.indexOf(mediaKey) : importance || 0\n  )\n  const precendencePrefix = new Array(importance_ + 1).fill(':root').join('')\n  const negKey = negate ? '0' : ''\n  const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)\n  const nextIdentifier = `${identifier.replace(\n    ogPrefix,\n    `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`\n  )}`\n  const screenStr = negate ? 'not all' : 'screen'\n  const mediaSelector = mediaObjectToString(mediaQueries[mediaKey])\n  const mediaQuery = `${screenStr} and ${mediaSelector}`\n  const styleInner = rules[0].replace(identifier, nextIdentifier)\n  if (styleInner.includes('2:r;')) debugger\n  // combines media queries if they already exist\n  let styleRule = ''\n  if (styleInner.includes('@media')) {\n    // combine\n    styleRule = styleInner.replace('{', ` and ${mediaQuery} {`)\n  } else {\n    styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`\n  }\n  return {\n    styleRule,\n    identifier: nextIdentifier,\n  }\n}\n"],
-  "mappings": ";;AAEA;AAKO,MAAM,YAAY;AAElB,MAAM,mBAAmB,wBAC9B,EAAE,YAAY,SACd,UACA,cACA,QACA,eACG;AACH,QAAM,YAAY,OAAO,KAAK,YAAY;AAC1C,QAAM,cAAc,KAAK,IACvB,GACA,cAAc,SAAY,UAAU,QAAQ,QAAQ,IAAI,cAAc,CACxE;AACA,QAAM,oBAAoB,IAAI,MAAM,cAAc,CAAC,EAAE,KAAK,OAAO,EAAE,KAAK,EAAE;AAC1E,QAAM,SAAS,SAAS,MAAM;AAC9B,QAAM,WAAW,WAAW,MAAM,GAAG,WAAW,QAAQ,GAAG,IAAI,CAAC;AAChE,QAAM,iBAAiB,GAAG,WAAW,QACnC,UACA,GAAG,WAAW,YAAY,WAAW,SAAS,WAChD;AACA,QAAM,YAAY,SAAS,YAAY;AACvC,QAAM,gBAAgB,oBAAoB,aAAa,SAAS;AAChE,QAAM,aAAa,GAAG,iBAAiB;AACvC,QAAM,aAAa,MAAM,GAAG,QAAQ,YAAY,cAAc;AAC9D,MAAI,WAAW,SAAS,MAAM;AAAG;AAEjC,MAAI,YAAY;AAChB,MAAI,WAAW,SAAS,QAAQ,GAAG;AAEjC,gBAAY,WAAW,QAAQ,KAAK,QAAQ,cAAc;AAAA,EAC5D,OAAO;AACL,gBAAY,UAAU,gBAAgB,qBAAqB;AAAA,EAC7D;AACA,SAAO;AAAA,IACL;AAAA,IACA,YAAY;AAAA,EACd;AACF,GApCgC;",
+  "sourcesContent": ["import { StyleObject } from '@tamagui/helpers'\n\nimport { mediaObjectToString } from '../hooks/useMedia'\nimport { MediaQueries } from '../types'\n\n// TODO have this be used by extractMediaStyle in tamagui static\n// not synced to static/constants for now\nexport const MEDIA_SEP = '_'\n\nexport const createMediaStyle = (\n  { identifier, rules }: StyleObject,\n  mediaKey: string,\n  mediaQueries: MediaQueries,\n  negate?: boolean,\n  importance?: number\n) => {\n  const mediaKeys = Object.keys(mediaQueries)\n  const importance_ = Math.max(\n    0,\n    importance == undefined ? mediaKeys.indexOf(mediaKey) : importance || 0\n  )\n  const precendencePrefix = new Array(importance_ + 1).fill(':root').join('')\n  const negKey = negate ? '0' : ''\n  const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)\n  const nextIdentifier = `${identifier.replace(\n    ogPrefix,\n    `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`\n  )}`\n  const screenStr = negate ? 'not all' : 'screen'\n  const mediaSelector = mediaObjectToString(mediaQueries[mediaKey])\n  const mediaQuery = `${screenStr} and ${mediaSelector}`\n  const styleInner = rules[0].replace(identifier, nextIdentifier)\n  // combines media queries if they already exist\n  let styleRule = ''\n  if (styleInner.includes('@media')) {\n    // combine\n    styleRule = styleInner.replace('{', ` and ${mediaQuery} {`)\n  } else {\n    styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`\n  }\n  return {\n    styleRule,\n    identifier: nextIdentifier,\n  }\n}\n"],
+  "mappings": ";;AAEA;AAKO,MAAM,YAAY;AAElB,MAAM,mBAAmB,wBAC9B,EAAE,YAAY,SACd,UACA,cACA,QACA,eACG;AACH,QAAM,YAAY,OAAO,KAAK,YAAY;AAC1C,QAAM,cAAc,KAAK,IACvB,GACA,cAAc,SAAY,UAAU,QAAQ,QAAQ,IAAI,cAAc,CACxE;AACA,QAAM,oBAAoB,IAAI,MAAM,cAAc,CAAC,EAAE,KAAK,OAAO,EAAE,KAAK,EAAE;AAC1E,QAAM,SAAS,SAAS,MAAM;AAC9B,QAAM,WAAW,WAAW,MAAM,GAAG,WAAW,QAAQ,GAAG,IAAI,CAAC;AAChE,QAAM,iBAAiB,GAAG,WAAW,QACnC,UACA,GAAG,WAAW,YAAY,WAAW,SAAS,WAChD;AACA,QAAM,YAAY,SAAS,YAAY;AACvC,QAAM,gBAAgB,oBAAoB,aAAa,SAAS;AAChE,QAAM,aAAa,GAAG,iBAAiB;AACvC,QAAM,aAAa,MAAM,GAAG,QAAQ,YAAY,cAAc;AAE9D,MAAI,YAAY;AAChB,MAAI,WAAW,SAAS,QAAQ,GAAG;AAEjC,gBAAY,WAAW,QAAQ,KAAK,QAAQ,cAAc;AAAA,EAC5D,OAAO;AACL,gBAAY,UAAU,gBAAgB,qBAAqB;AAAA,EAC7D;AACA,SAAO;AAAA,IACL;AAAA,IACA,YAAY;AAAA,EACd;AACF,GAnCgC;",
   "names": []
 }

package/dist/esm/helpers/createPropMapper.js

@@ -4,29 +4,32 @@ import { getConfig } from "../conf";
 import { isWeb } from "../constants/platform";
 import { isVariable } from "../createVariable";
 import { isObj } from "./isObj";
-const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
-  const variants = staticConfig.variants || {};
-  function getVariantFunction(variant, key, value) {
-    for (const cat in tokenCategories) {
-      if (key in tokenCategories[cat]) {
-        const spreadVariant = variant[`...${cat}`];
-        if (spreadVariant) {
-          return spreadVariant;
-        }
+function getVariantFunction(variant, key, value) {
+  if (typeof variant === "function") {
+    return variant;
+  }
+  for (const cat in tokenCategories) {
+    if (key in tokenCategories[cat]) {
+      const spreadVariant = variant[`...${cat}`];
+      if (spreadVariant) {
+        return spreadVariant;
       }
     }
-    let fn;
-    if (typeof value === "number") {
-      fn = variant[":number"];
-    } else if (typeof value === "string") {
-      fn = variant[":string"];
-    } else if (value === true || value === false) {
-      fn = variant[":boolean"];
-    }
-    fn = fn || variant[value];
-    return fn || variant["..."] || variant["...size"];
   }
-  __name(getVariantFunction, "getVariantFunction");
+  let fn;
+  if (typeof value === "number") {
+    fn = variant[":number"];
+  } else if (typeof value === "string") {
+    fn = variant[":string"];
+  } else if (value === true || value === false) {
+    fn = variant[":boolean"];
+  }
+  fn = fn || variant[value];
+  return fn || variant["..."] || variant["...size"];
+}
+__name(getVariantFunction, "getVariantFunction");
+const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
+  const variants = staticConfig.variants || {};
   const defaultProps = staticConfig.defaultProps || {};
   return (key, value, theme, props, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
     const conf = getConfig();
@@ -34,13 +37,15 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
       console.trace("no conf! err");
       return;
     }
-    let fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
+    const fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
     const variant = variants && variants[key];
     if (variant && value !== void 0) {
       let variantValue = getVariantFunction(variant, key, value);
       if (variantValue) {
         if (typeof variantValue === "function") {
-          variantValue = variantValue(value, {
+          const fn = variantValue;
+          variantValue = fn(value, {
+            fonts: conf.fontsParsed,
             tokens: conf.tokensParsed,
             theme,
             props: avoidDefaultProps ? props : new Proxy(props, {
@@ -48,8 +53,8 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
                 if (Reflect.has(target, key2)) {
                   return Reflect.get(target, key2);
                 }
-                if (staticConfig.defaultProps) {
-                  return Reflect.get(staticConfig.defaultProps, key2);
+                if (defaultProps) {
+                  return Reflect.get(defaultProps, key2);
                 }
               }
             })
@@ -107,34 +112,28 @@ const resolveTokens = /* @__PURE__ */ __name((input, conf, theme, fontFamily, re
   }
   return res;
 }, "resolveTokens");
-const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed }, theme, fontFamily = "$body", resolveAs) => {
-  var _a, _b, _c, _d, _e;
+const fontShorthand = {
+  fontSize: "size",
+  fontWeight: "weight"
+};
+const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, fontsParsed }, theme, fontFamily = "$body", resolveAs) => {
+  var _a, _b, _c;
   let valOrVar;
   let hasSet = false;
-  const valueName = value[0] === "$" ? value.slice(1) : value;
-  if (valueName in theme) {
-    valOrVar = theme[valueName];
+  if (value in theme) {
+    valOrVar = theme[value];
     hasSet = true;
   } else {
     switch (key) {
       case "fontFamily":
-        valOrVar = ((_a = tokensParsed.font[value]) == null ? void 0 : _a.family) || value;
+        valOrVar = ((_a = fontsParsed[value]) == null ? void 0 : _a.family) || value;
         hasSet = true;
         break;
       case "fontSize":
-        valOrVar = ((_b = tokensParsed.font[fontFamily]) == null ? void 0 : _b.size[value]) || value;
-        hasSet = true;
-        break;
       case "lineHeight":
-        valOrVar = ((_c = tokensParsed.font[fontFamily]) == null ? void 0 : _c.lineHeight[value]) || value;
-        hasSet = true;
-        break;
       case "letterSpacing":
-        valOrVar = ((_d = tokensParsed.font[fontFamily]) == null ? void 0 : _d.letterSpacing[value]) || value;
-        hasSet = true;
-        break;
       case "fontWeight":
-        valOrVar = ((_e = tokensParsed.font[fontFamily]) == null ? void 0 : _e.weight[value]) || value;
+        valOrVar = ((_c = (_b = fontsParsed[fontFamily]) == null ? void 0 : _b[fontShorthand[key] || key]) == null ? void 0 : _c[value]) || value;
         hasSet = true;
         break;
     }
@@ -160,7 +159,7 @@ const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed }, theme, fo
   }
   if (process.env.NODE_ENV === "development") {
     if (value && value[0] === "$") {
-      console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, value);
+      console.warn(`\u26A0\uFE0F Missing token:`, key, value, fontFamily, theme, fontsParsed);
       return null;
     }
   }

package/dist/esm/helpers/createPropMapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/createPropMapper.ts"],
-  "sourcesContent": ["import { getConfig } from '../conf'\nimport { isWeb } from '../constants/platform'\nimport { Variable, isVariable } from '../createVariable'\nimport { StaticConfig, TamaguiInternalConfig } from '../types'\nimport { isObj } from './isObj'\n\nexport type ResolveVariableTypes = 'auto' | 'value' | 'variable' | 'both'\n\nexport const createPropMapper = (staticConfig: StaticConfig) => {\n  const variants = staticConfig.variants || {}\n\n  // goes through specificity finding best matching variant function\n  function getVariantFunction(variant: any, key: string, value: any) {\n    for (const cat in tokenCategories) {\n      if (key in tokenCategories[cat]) {\n        const spreadVariant = variant[`...${cat}`]\n        if (spreadVariant) {\n          return spreadVariant\n        }\n      }\n    }\n    let fn: any\n    if (typeof value === 'number') {\n      fn = variant[':number']\n    } else if (typeof value === 'string') {\n      fn = variant[':string']\n    } else if (value === true || value === false) {\n      fn = variant[':boolean']\n    }\n    fn = fn || variant[value]\n    // fallback to size ultimately - could do token level detection\n    return fn || variant['...'] || variant['...size']\n  }\n\n  const defaultProps = staticConfig.defaultProps || {}\n\n  return (\n    key: string,\n    value: any,\n    theme: any,\n    props: any,\n    returnVariablesAs: ResolveVariableTypes = !!props.animation ? 'value' : 'auto',\n    avoidDefaultProps = false\n  ) => {\n    const conf = getConfig()\n    if (!conf) {\n      console.trace('no conf! err')\n      return\n    }\n\n    // handled here because we need to resolve this off tokens, its the only one-off like this\n    let fontFamily = props.fontFamily || defaultProps.fontFamily || '$body'\n\n    // expand variants\n    const variant = variants && variants[key]\n\n    if (variant && value !== undefined) {\n      let variantValue = getVariantFunction(variant, key, value)\n\n      if (variantValue) {\n        if (typeof variantValue === 'function') {\n          variantValue = variantValue(value, {\n            tokens: conf.tokensParsed,\n            theme,\n            // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n            props: avoidDefaultProps\n              ? props\n              : new Proxy(props, {\n                  get(target, key) {\n                    if (Reflect.has(target, key)) {\n                      return Reflect.get(target, key)\n                    }\n                    // these props may be extracted into classNames, but we still want to access them\n                    // at runtime, so we proxy back to defaultProps but don't pass them\n                    if (staticConfig.defaultProps) {\n                      return Reflect.get(staticConfig.defaultProps, key)\n                    }\n                  },\n                }),\n          })\n        }\n\n        if (isObj(variantValue)) {\n          variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs)\n        }\n\n        return variantValue\n      }\n    }\n\n    let shouldReturn = false\n\n    // handle shorthands\n    if (conf.shorthands[key]) {\n      shouldReturn = true\n      key = conf.shorthands[key]\n    }\n\n    if (value) {\n      shouldReturn = true\n      if (value[0] === '$') {\n        value = getToken(key, value, conf, theme, fontFamily, returnVariablesAs)\n      } else if (isVariable(value)) {\n        value = getVariableValue(value, returnVariablesAs)\n      }\n    }\n\n    if (shouldReturn) {\n      return {\n        [key]: value,\n      }\n    }\n  }\n}\n\nconst resolveTokens = (\n  input: Object,\n  conf: TamaguiInternalConfig,\n  theme: any,\n  fontFamily: any,\n  resolveAs?: ResolveVariableTypes\n) => {\n  let res = {}\n  for (const rKey in input) {\n    const fKey = conf.shorthands[rKey] || rKey\n    const val = input[rKey]\n    if (isVariable(val)) {\n      res[fKey] =\n        resolveAs === 'variable' ? val : !isWeb || resolveAs === 'value' ? val.val : val.variable\n    } else if (typeof val === 'string') {\n      const fVal = val[0] === '$' ? getToken(fKey, val, conf, theme, fontFamily, resolveAs) : val\n      res[fKey] = fVal\n    } else {\n      if (isObj(val)) {\n        // for things like shadowOffset, hoverStyle which is a sub-object\n        res[fKey] = resolveTokens(val, conf, theme, fontFamily, resolveAs)\n      } else {\n        // nullish values cant be tokens so need no exrta parsing\n        res[fKey] = input[fKey]\n      }\n    }\n    if (process.env.NODE_ENV === 'development') {\n      if (res[fKey]?.[0] === '$') {\n        console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, fKey, res[fKey])\n      }\n    }\n  }\n  return res\n}\n\nconst getToken = (\n  key: string,\n  value: string,\n  { tokensParsed }: TamaguiInternalConfig,\n  theme: any,\n  fontFamily: string | undefined = '$body',\n  resolveAs?: ResolveVariableTypes\n) => {\n  let valOrVar: any\n  let hasSet = false\n  const valueName = value[0] === '$' ? value.slice(1) : value\n  if (valueName in theme) {\n    valOrVar = theme[valueName]\n    hasSet = true\n  } else {\n    switch (key) {\n      case 'fontFamily':\n        valOrVar = tokensParsed.font[value]?.family || value\n        hasSet = true\n        break\n      case 'fontSize':\n        valOrVar = tokensParsed.font[fontFamily]?.size[value] || value\n        hasSet = true\n        break\n      case 'lineHeight':\n        valOrVar = tokensParsed.font[fontFamily]?.lineHeight[value] || value\n        hasSet = true\n        break\n      case 'letterSpacing':\n        valOrVar = tokensParsed.font[fontFamily]?.letterSpacing[value] || value\n        hasSet = true\n        break\n      case 'fontWeight':\n        valOrVar = tokensParsed.font[fontFamily]?.weight[value] || value\n        hasSet = true\n        break\n    }\n    for (const cat in tokenCategories) {\n      if (key in tokenCategories[cat]) {\n        const res = tokensParsed[cat][value]\n        if (res) {\n          valOrVar = res\n          hasSet = true\n        }\n      }\n    }\n    if (!hasSet) {\n      const spaceVar = tokensParsed.space[value]\n      if (spaceVar) {\n        valOrVar = spaceVar\n        hasSet = true\n      }\n    }\n  }\n  if (hasSet) {\n    return getVariableValue(valOrVar, resolveAs)\n  }\n  if (process.env.NODE_ENV === 'development') {\n    if (value && value[0] === '$') {\n      console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, value)\n      return null\n    }\n  }\n  return value\n}\n\nfunction getVariableValue(valOrVar: Variable | any, resolveAs: ResolveVariableTypes = 'auto') {\n  if (isVariable(valOrVar)) {\n    if (resolveAs === 'variable') {\n      return valOrVar\n    }\n    if (!isWeb || resolveAs === 'value') {\n      return valOrVar.val\n    }\n    return valOrVar.variable\n  }\n  return valOrVar\n}\n\n// just specificy the least costly, all else go to `space` (most keys - we can exclude)\nconst tokenCategories = {\n  radius: {\n    borderRadius: true,\n  },\n  size: {\n    width: true,\n    height: true,\n    minWidth: true,\n    minHeight: true,\n    maxWidth: true,\n    maxHeight: true,\n  },\n  color: {\n    color: true,\n    backgroundColor: true,\n    borderColor: true,\n    borderBottomColor: true,\n    borderTopColor: true,\n    borderLeftColor: true,\n    borderRightColor: true,\n  },\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { getConfig } from '../conf'\nimport { isWeb } from '../constants/platform'\nimport { Variable, isVariable } from '../createVariable'\nimport { StaticConfig, TamaguiInternalConfig, VariantSpreadFunction } from '../types'\nimport { isObj } from './isObj'\n\nexport type ResolveVariableTypes = 'auto' | 'value' | 'variable' | 'both'\n\n// goes through specificity finding best matching variant function\nfunction getVariantFunction(variant: any, key: string, value: any) {\n  if (typeof variant === 'function') {\n    return variant\n  }\n  for (const cat in tokenCategories) {\n    if (key in tokenCategories[cat]) {\n      const spreadVariant = variant[`...${cat}`]\n      if (spreadVariant) {\n        return spreadVariant\n      }\n    }\n  }\n  let fn: any\n  if (typeof value === 'number') {\n    fn = variant[':number']\n  } else if (typeof value === 'string') {\n    fn = variant[':string']\n  } else if (value === true || value === false) {\n    fn = variant[':boolean']\n  }\n  fn = fn || variant[value]\n  // fallback to size ultimately - could do token level detection\n  return fn || variant['...'] || variant['...size']\n}\n\nexport const createPropMapper = (staticConfig: Partial<StaticConfig>) => {\n  const variants = staticConfig.variants || {}\n  const defaultProps = staticConfig.defaultProps || {}\n\n  return (\n    key: string,\n    value: any,\n    theme: any,\n    props: any,\n    returnVariablesAs: ResolveVariableTypes = !!props.animation ? 'value' : 'auto',\n    avoidDefaultProps = false\n  ) => {\n    const conf = getConfig()\n    if (!conf) {\n      console.trace('no conf! err')\n      return\n    }\n\n    // handled here because we need to resolve this off tokens, its the only one-off like this\n    const fontFamily = props.fontFamily || defaultProps.fontFamily || '$body'\n    const variant = variants && variants[key]\n\n    if (variant && value !== undefined) {\n      let variantValue = getVariantFunction(variant, key, value)\n\n      if (variantValue) {\n        if (typeof variantValue === 'function') {\n          const fn = variantValue as VariantSpreadFunction<any>\n          variantValue = fn(value, {\n            fonts: conf.fontsParsed,\n            tokens: conf.tokensParsed,\n            theme,\n            // TODO do this in splitstlye\n            // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n            props: avoidDefaultProps\n              ? props\n              : new Proxy(props, {\n                  get(target, key) {\n                    if (Reflect.has(target, key)) {\n                      return Reflect.get(target, key)\n                    }\n                    // these props may be extracted into classNames, but we still want to access them\n                    // at runtime, so we proxy back to defaultProps but don't pass them\n                    if (defaultProps) {\n                      return Reflect.get(defaultProps, key)\n                    }\n                  },\n                }),\n          })\n        }\n\n        if (isObj(variantValue)) {\n          variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs)\n        }\n\n        return variantValue\n      }\n    }\n\n    let shouldReturn = false\n\n    // handle shorthands\n    if (conf.shorthands[key]) {\n      shouldReturn = true\n      key = conf.shorthands[key]\n    }\n\n    if (value) {\n      shouldReturn = true\n      if (value[0] === '$') {\n        value = getToken(key, value, conf, theme, fontFamily, returnVariablesAs)\n      } else if (isVariable(value)) {\n        value = getVariableValue(value, returnVariablesAs)\n      }\n    }\n\n    if (shouldReturn) {\n      return {\n        [key]: value,\n      }\n    }\n  }\n}\n\nconst resolveTokens = (\n  input: Object,\n  conf: TamaguiInternalConfig,\n  theme: any,\n  fontFamily: any,\n  resolveAs?: ResolveVariableTypes\n) => {\n  let res = {}\n  for (const rKey in input) {\n    const fKey = conf.shorthands[rKey] || rKey\n    const val = input[rKey]\n    if (isVariable(val)) {\n      res[fKey] =\n        resolveAs === 'variable' ? val : !isWeb || resolveAs === 'value' ? val.val : val.variable\n    } else if (typeof val === 'string') {\n      const fVal = val[0] === '$' ? getToken(fKey, val, conf, theme, fontFamily, resolveAs) : val\n      res[fKey] = fVal\n    } else {\n      if (isObj(val)) {\n        // for things like shadowOffset, hoverStyle which is a sub-object\n        res[fKey] = resolveTokens(val, conf, theme, fontFamily, resolveAs)\n      } else {\n        // nullish values cant be tokens so need no exrta parsing\n        res[fKey] = input[fKey]\n      }\n    }\n    if (process.env.NODE_ENV === 'development') {\n      if (res[fKey]?.[0] === '$') {\n        console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, fKey, res[fKey])\n      }\n    }\n  }\n  return res\n}\n\nconst fontShorthand = {\n  fontSize: 'size',\n  fontWeight: 'weight',\n}\n\nconst getToken = (\n  key: string,\n  value: string,\n  { tokensParsed, fontsParsed }: TamaguiInternalConfig,\n  theme: any,\n  fontFamily: string | undefined = '$body',\n  resolveAs?: ResolveVariableTypes\n) => {\n  let valOrVar: any\n  let hasSet = false\n  if (value in theme) {\n    valOrVar = theme[value]\n    hasSet = true\n  } else {\n    switch (key) {\n      case 'fontFamily':\n        valOrVar = fontsParsed[value]?.family || value\n        hasSet = true\n        break\n      case 'fontSize':\n      case 'lineHeight':\n      case 'letterSpacing':\n      case 'fontWeight':\n        valOrVar = fontsParsed[fontFamily]?.[fontShorthand[key] || key]?.[value] || value\n        hasSet = true\n        break\n    }\n    for (const cat in tokenCategories) {\n      if (key in tokenCategories[cat]) {\n        const res = tokensParsed[cat][value]\n        if (res) {\n          valOrVar = res\n          hasSet = true\n        }\n      }\n    }\n    if (!hasSet) {\n      const spaceVar = tokensParsed.space[value]\n      if (spaceVar) {\n        valOrVar = spaceVar\n        hasSet = true\n      }\n    }\n  }\n  if (hasSet) {\n    return getVariableValue(valOrVar, resolveAs)\n  }\n  if (process.env.NODE_ENV === 'development') {\n    if (value && value[0] === '$') {\n      console.warn(`\u26A0\uFE0F Missing token:`, key, value, fontFamily, theme, fontsParsed)\n      return null\n    }\n  }\n  return value\n}\n\nfunction getVariableValue(valOrVar: Variable | any, resolveAs: ResolveVariableTypes = 'auto') {\n  if (isVariable(valOrVar)) {\n    if (resolveAs === 'variable') {\n      return valOrVar\n    }\n    if (!isWeb || resolveAs === 'value') {\n      return valOrVar.val\n    }\n    return valOrVar.variable\n  }\n  return valOrVar\n}\n\n// just specificy the least costly, all else go to `space` (most keys - we can exclude)\nconst tokenCategories = {\n  radius: {\n    borderRadius: true,\n  },\n  size: {\n    width: true,\n    height: true,\n    minWidth: true,\n    minHeight: true,\n    maxWidth: true,\n    maxHeight: true,\n  },\n  color: {\n    color: true,\n    backgroundColor: true,\n    borderColor: true,\n    borderBottomColor: true,\n    borderTopColor: true,\n    borderLeftColor: true,\n    borderRightColor: true,\n  },\n}\n"],
+  "mappings": "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",
   "names": []
 }