@tamagui/core 1.0.0-beta.187 → 1.0.0-beta.2

package/dist/cjs/helpers/getSize.js

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var getSize_exports = {};
+__export(getSize_exports, {
+  getSize: () => getSize
+});
+module.exports = __toCommonJS(getSize_exports);
+var import_conf = require("../conf");
+const getSize = /* @__PURE__ */ __name((size, sizeUpOrDownBy = 0) => {
+  const sizes = (0, import_conf.getTokens)().size;
+  const sizeNames = Object.keys(sizes);
+  const key = sizeNames[Math.max(0, sizeNames.indexOf(String(size || "$4")) + sizeUpOrDownBy)];
+  return sizes[key] || sizes["$4"];
+}, "getSize");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getSize
+});
+//# sourceMappingURL=getSize.js.map

package/dist/cjs/helpers/getSize.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/getSize.ts"],
+  "sourcesContent": ["import { getTokens } from '../conf'\nimport { SizeTokens } from '../types'\n\nexport const getSize = (size?: SizeTokens | undefined, sizeUpOrDownBy = 0) => {\n  const sizes = getTokens().size as any as SizeTokens\n  const sizeNames = Object.keys(sizes)\n  const key = sizeNames[Math.max(0, sizeNames.indexOf(String(size || '$4')) + sizeUpOrDownBy)]\n  return (sizes[key] || sizes['$4']) as SizeTokens\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA0B;AAGnB,MAAM,UAAU,wBAAC,MAA+B,iBAAiB,MAAM;AAC5E,QAAM,QAAQ,2BAAU,EAAE;AAC1B,QAAM,YAAY,OAAO,KAAK,KAAK;AACnC,QAAM,MAAM,UAAU,KAAK,IAAI,GAAG,UAAU,QAAQ,OAAO,QAAQ,IAAI,CAAC,IAAI,cAAc;AAC1F,SAAQ,MAAM,QAAQ,MAAM;AAC9B,GALuB;",
+  "names": []
+}

package/dist/cjs/helpers/getSplitStyles.js

@@ -32,60 +32,85 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var getSplitStyles_exports = {};
 __export(getSplitStyles_exports, {
-  getSplitStyles: () => getSplitStyles
+  getSplitStyles: () => getSplitStyles,
+  getSubStyle: () => getSubStyle,
+  insertSplitStyles: () => insertSplitStyles,
+  normalizeStyleObject: () => normalizeStyleObject,
+  useSplitStyles: () => useSplitStyles
 });
 module.exports = __toCommonJS(getSplitStyles_exports);
 var import_helpers = require("@tamagui/helpers");
+var import_react = require("react");
+var import_conf = require("../conf");
 var import_platform = require("../constants/platform");
 var import_useMedia = require("../hooks/useMedia");
 var import_createMediaStyle = require("./createMediaStyle");
 var import_fixNativeShadow = require("./fixNativeShadow");
 var import_getStylesAtomic = require("./getStylesAtomic");
 var import_insertStyleRule = require("./insertStyleRule");
-const skipKeys = {
+const skipProps = {
   animation: true,
-  animated: true,
-  children: true,
-  key: true,
-  ref: true
+  animateOnly: true,
+  debug: true
 };
-function normalizeStyleObject(style) {
-  if (typeof style.flex === "number") {
-    const val = style.flex;
-    delete style.flex;
-    style.flexGrow = style.flexGrow ?? val;
-    style.flexShrink = style.flexShrink ?? 1;
-  }
-  if (!import_platform.isWeb) {
-    (0, import_fixNativeShadow.fixNativeShadow)(style);
-  }
-}
-__name(normalizeStyleObject, "normalizeStyleObject");
+let conf;
 const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames) => {
-  var _a, _b, _c;
+  var _a;
+  if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+    console.log("  \xBB getSplitStyles", { props, state, defaultClassNames });
+  }
+  conf = conf || (0, import_conf.getConfig)();
   const validStyleProps = staticConfig.isText ? import_helpers.stylePropsText : import_helpers.validStyles;
   const viewProps = {};
   const style = {};
   const classNames = __spreadValues({}, defaultClassNames);
   const pseudos = {};
   const medias = {};
+  const rulesToInsert = [];
+  function addStyle(prop, rule) {
+    rulesToInsert.push([prop, rule]);
+    (0, import_insertStyleRule.updateInsertedCache)(prop, rule);
+  }
+  __name(addStyle, "addStyle");
   let cur = null;
   let transforms = {};
   function mergeClassName(key, val) {
-    if (!val)
+    if (!val) {
       return;
+    }
     if (val.startsWith("_transform-")) {
       const isMediaOrPseudo = key !== "transform";
       const isMedia = isMediaOrPseudo && key[11] === "_";
-      const isPsuedo = isMediaOrPseudo && !isMedia;
+      const isPsuedo = isMediaOrPseudo && key[11] === "0" || key.endsWith("Style");
       const namespace = isMedia ? key.split("_")[2] : isPsuedo ? key.split("-")[1] : "transform";
-      if (!import_insertStyleRule.insertedTransforms[val]) {
-        (0, import_insertStyleRule.updateInserted)();
+      let transform = import_insertStyleRule.insertedTransforms[val];
+      if (import_platform.isClient) {
+        if (!transform) {
+          (0, import_insertStyleRule.updateInserted)();
+          transform = import_insertStyleRule.insertedTransforms[val];
+        }
+        if (!transform) {
+          if (import_platform.isWeb && val[0] !== "_") {
+            transform = val;
+          } else {
+            console.trace("?", key, val, cur, props, state);
+          }
+        }
+        if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+          console.log("  \xBB getSplitStyles mergeClassName transform", { key, val, namespace, transform, insertedTransforms: import_insertStyleRule.insertedTransforms });
+        }
+        if (process.env.NODE_ENV === "development") {
+          if (!transform) {
+            console.trace("NO TRANSFORM?", { key, val, transform });
+          }
+        }
       }
-      const transform = import_insertStyleRule.insertedTransforms[val];
       transforms[namespace] = transforms[namespace] || ["", ""];
-      transforms[namespace][0] += val.replace("_transform", "");
-      transforms[namespace][1] += transform;
+      const identifier = val.replace("_transform", "");
+      transforms[namespace][0] += identifier;
+      if (transform) {
+        transforms[namespace][1] += transform;
+      }
     } else {
       classNames[key] = val;
     }
@@ -95,17 +120,21 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
     if (!cur)
       return;
     normalizeStyleObject(cur);
+    if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+      console.log("  \xBB getSplitStyles push", cur, state);
+    }
     if (import_platform.isWeb && !state.noClassNames) {
       const atomic = (0, import_getStylesAtomic.getStylesAtomic)(cur);
       for (const atomicStyle of atomic) {
         if (!state.noClassNames) {
+          addStyle(atomicStyle.identifier, atomicStyle.rules[0]);
           mergeClassName(atomicStyle.property, atomicStyle.identifier);
-          (0, import_insertStyleRule.insertStyleRule)(atomicStyle.identifier, atomicStyle.rules[0]);
         } else {
           style[atomicStyle.property] = atomicStyle.value;
         }
       }
-    } else {
+    }
+    if (!import_platform.isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
       for (const key in cur) {
         if (key in import_helpers.stylePropsTransform) {
           (0, import_helpers.mergeTransform)(style, key, cur[key]);
@@ -118,30 +147,40 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
   }
   __name(push, "push");
   for (const keyInit in props) {
+    if (skipProps[keyInit]) {
+      continue;
+    }
     const valInit = props[keyInit];
-    if (skipKeys[keyInit]) {
-      viewProps[keyInit] = valInit;
+    if (keyInit === "style" || keyInit.startsWith("_style")) {
+      push();
+      cur = valInit;
+      push();
       continue;
     }
     if (keyInit === "className" || validStyleProps[keyInit] && valInit && valInit[0] === "_") {
       push();
       mergeClassName(keyInit, valInit);
-      if (cur) {
-        if (cur[keyInit])
-          console.warn("just want to see how used");
-        delete cur[keyInit];
-      }
       continue;
     }
+    if (state.keepVariantsAsProps && staticConfig.defaultVariants && keyInit in staticConfig.defaultVariants) {
+      viewProps[keyInit] = valInit;
+    }
     let isMedia = keyInit[0] === "$";
     let isPseudo = import_helpers.validPseudoKeys[keyInit];
-    const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, props, staticConfig, state.resolveVariablesAs);
+    if (!isMedia && !isPseudo && !((_a = staticConfig.variants) == null ? void 0 : _a[keyInit]) && !validStyleProps[keyInit] && !conf.shorthands[keyInit]) {
+      viewProps[keyInit] = valInit;
+      continue;
+    }
+    const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, state.fallbackProps || props, state.resolveVariablesAs);
     const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
+    if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+      console.log("  \xBB getSplitStyles", keyInit, expanded);
+    }
     for (const [key, val] of expanded) {
       if (val === void 0) {
         continue;
       }
-      if (val && val[0] === "_") {
+      if (key !== "target" && val && val[0] === "_") {
         mergeClassName(key, val);
         continue;
       }
@@ -157,48 +196,46 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
           continue;
         }
         pseudos[key] = pseudos[key] || {};
-        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state.resolveVariablesAs, true);
+        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
         if (import_platform.isWeb && !state.noClassNames) {
           const pseudoStyles = (0, import_getStylesAtomic.getStylesAtomic)({ [key]: pseudos[key] });
-          if ((_b = (_a = pseudoStyles[0]) == null ? void 0 : _a.identifier) == null ? void 0 : _b.includes("undefined")) {
-            console.warn("undefined bug?", (_c = pseudoStyles[0]) == null ? void 0 : _c.identifier);
-          }
           for (const style2 of pseudoStyles) {
+            addStyle(style2.identifier, style2.rules[0]);
             mergeClassName(`${style2.property}-${key}`, style2.identifier);
-            (0, import_insertStyleRule.insertStyleRule)(style2.identifier, style2.rules[0]);
           }
         }
         continue;
       }
       if (isMedia) {
-        const mediaKey = key.slice(1);
-        if (!import_useMedia.mediaQueryConfig[mediaKey]) {
-          viewProps[key] = valInit;
+        const mediaKey = key;
+        const mediaKeyShort = mediaKey.slice(1);
+        if (!import_useMedia.mediaQueryConfig[mediaKeyShort]) {
+          viewProps[key] = val;
           continue;
         }
-        const mediaStyle = getSubStyle(valInit, staticConfig, theme, props, state.resolveVariablesAs, true);
-        if (import_platform.isWeb) {
+        const mediaStyle = getSubStyle(val, staticConfig, theme, props, state);
+        if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+          console.log("  \xBB getSplitStyles mediaStyle", mediaKey, mediaStyle, props);
+        }
+        const shouldDoClasses = import_platform.isWeb && !state.noClassNames;
+        if (shouldDoClasses) {
           const mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle);
           for (const style2 of mediaStyles) {
-            const out2 = (0, import_createMediaStyle.createMediaStyle)(style2, mediaKey, import_useMedia.mediaQueryConfig);
+            const out2 = (0, import_createMediaStyle.createMediaStyle)(style2, mediaKeyShort, import_useMedia.mediaQueryConfig);
+            addStyle(out2.identifier, out2.styleRule);
             mergeClassName(`${out2.identifier}-${mediaKey}`, out2.identifier);
-            (0, import_insertStyleRule.insertStyleRule)(out2.identifier, out2.styleRule);
-          }
-          if (import_useMedia.mediaState[mediaKey]) {
-            Object.assign(medias, mediaStyle);
           }
         } else {
           if (import_useMedia.mediaState[mediaKey]) {
-            Object.assign(style, mediaStyle);
+            push();
+            if (process.env.NODE_ENV === "development" && props["debug"]) {
+              console.log("apply media style", mediaKey, import_useMedia.mediaState);
+            }
+            Object.assign(shouldDoClasses ? medias : style, mediaStyle);
           }
         }
         continue;
       }
-      if (key === "style" || key.startsWith("_style")) {
-        push();
-        Object.assign(style, val);
-        continue;
-      }
       if (!import_platform.isWeb && key === "pointerEvents") {
         viewProps[key] = val;
         continue;
@@ -221,26 +258,49 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
     for (const namespace in transforms) {
       const [hash, val] = transforms[namespace];
       const identifier = `_transform${hash}`;
-      if (!import_insertStyleRule.insertedTransforms[identifier]) {
-        const rule = `.${identifier} { transform: ${val}; }`;
-        (0, import_insertStyleRule.insertStyleRule)(identifier, rule);
+      if (import_platform.isClient) {
+        if (!import_insertStyleRule.insertedTransforms[identifier]) {
+          const rule = `.${identifier} { transform: ${val}; }`;
+          addStyle(identifier, rule);
+        }
       }
       classNames[namespace] = identifier;
     }
   }
+  if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+    console.log("  \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
+  }
   return {
     viewProps,
     style,
     medias,
     pseudos,
-    classNames
+    classNames,
+    rulesToInsert
   };
 }, "getSplitStyles");
-const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, resolveVariablesAs, avoidDefaultProps) => {
+const insertSplitStyles = /* @__PURE__ */ __name((...args) => {
+  const res = getSplitStyles(...args);
+  for (const [prop, rule] of res.rulesToInsert) {
+    (0, import_insertStyleRule.insertStyleRule)(prop, rule);
+  }
+  return res;
+}, "insertSplitStyles");
+const effect = import_react.useInsertionEffect || import_platform.useIsomorphicLayoutEffect;
+const useSplitStyles = /* @__PURE__ */ __name((...args) => {
+  const res = getSplitStyles(...args);
+  effect(() => {
+    for (const [prop, rule] of res.rulesToInsert) {
+      (0, import_insertStyleRule.insertStyleRule)(prop, rule);
+    }
+  });
+  return res;
+}, "useSplitStyles");
+const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, state, avoidDefaultProps) => {
   const styleOut = {};
   for (const key in styleIn) {
     const val = styleIn[key];
-    const out = staticConfig.propMapper(key, val, theme, props, staticConfig, resolveVariablesAs, avoidDefaultProps);
+    const out = staticConfig.propMapper(key, val, theme, state.fallbackProps || props, state.resolveVariablesAs, avoidDefaultProps);
     const expanded = out === true || !out ? [[key, val]] : Object.entries(out);
     for (const [skey, sval] of expanded) {
       if (skey in import_helpers.stylePropsTransform) {
@@ -253,4 +313,32 @@ const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props,
   normalizeStyleObject(styleOut);
   return styleOut;
 }, "getSubStyle");
+function normalizeStyleObject(style) {
+  if (style.padding) {
+    const val = style.padding;
+    delete style.padding;
+    style.paddingLeft = val;
+    style.paddingTop = val;
+    style.paddingRight = val;
+    style.paddingBottom = val;
+  }
+  if (typeof style.flex === "number") {
+    const val = style.flex;
+    delete style.flex;
+    style.flexGrow = style.flexGrow ?? val;
+    style.flexShrink = style.flexShrink ?? 1;
+  }
+  if (!import_platform.isWeb) {
+    (0, import_fixNativeShadow.fixNativeShadow)(style);
+  }
+}
+__name(normalizeStyleObject, "normalizeStyleObject");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getSplitStyles,
+  getSubStyle,
+  insertSplitStyles,
+  normalizeStyleObject,
+  useSplitStyles
+});
 //# sourceMappingURL=getSplitStyles.js.map

package/dist/cjs/helpers/getSplitStyles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getSplitStyles.tsx"],
-  "sourcesContent": ["import {\n  mergeTransform,\n  stylePropsText,\n  stylePropsTransform,\n  validPseudoKeys,\n  validStyles,\n} from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { isWeb } from '../constants/platform'\nimport { ComponentState } from '../defaultComponentState'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport {\n  MediaKeys,\n  MediaQueryKey,\n  PsuedoPropKeys,\n  StackProps,\n  StaticConfigParsed,\n  ThemeObject,\n} from '../types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { ResolveVariableTypes } from './createPropMapper'\nimport { fixNativeShadow } from './fixNativeShadow'\nimport { ViewStyleWithPseudos, getStylesAtomic } from './getStylesAtomic'\nimport { insertStyleRule, insertedTransforms, updateInserted } from './insertStyleRule'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\n\nconst skipKeys = {\n  // could put events in here\n  animation: true,\n  animated: true,\n  children: true,\n  key: true,\n  ref: true,\n}\n\nexport type PseudoStyles = {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\n  enterStyle?: ViewStyle\n  exitStyle?: ViewStyle\n}\n\nexport type ClassNamesObject = Record<string, string>\n\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nfunction normalizeStyleObject(style: any) {\n  // fix flex to match web\n  // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n  if (typeof style.flex === 'number') {\n    const val = style.flex\n    delete style.flex\n    style.flexGrow = style.flexGrow ?? val\n    style.flexShrink = style.flexShrink ?? 1\n  }\n\n  if (!isWeb) {\n    fixNativeShadow(style)\n  }\n}\n\ntype TransformNamespaceKey = 'transform' | PsuedoPropKeys | MediaQueryKey\n\n// TODO can make a few of these objects lazy if profiling seems slow\n\nexport const getSplitStyles = (\n  props: { [key: string]: any },\n  staticConfig: StaticConfigParsed,\n  theme: ThemeObject,\n  state: Partial<ComponentState> & {\n    noClassNames?: boolean\n    resolveVariablesAs?: ResolveVariableTypes\n  },\n  defaultClassNames?: ClassNamesObject | null\n) => {\n  const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n  const viewProps: StackProps = {}\n  const style: ViewStyle = {}\n  const classNames: ClassNamesObject = {\n    ...defaultClassNames,\n  }\n  const pseudos: PseudoStyles = {}\n  const medias: Record<MediaKeys, ViewStyle> = {}\n  let cur: ViewStyleWithPseudos | null = null\n\n  // we need to gather these specific to each media query / pseudo\n  // value is [hash, val], so [\"-jnjad-asdnjk\", \"scaleX(1) rotate(10deg)\"]\n  let transforms: Record<TransformNamespaceKey, [string, string]> = {}\n\n  function mergeClassName(key: string, val: string) {\n    if (!val) return\n    if (val.startsWith('_transform-')) {\n      const isMediaOrPseudo = key !== 'transform'\n      const isMedia = isMediaOrPseudo && key[11] === '_'\n      const isPsuedo = isMediaOrPseudo && !isMedia\n      const namespace: TransformNamespaceKey = isMedia\n        ? key.split('_')[2]\n        : isPsuedo\n        ? key.split('-')[1]\n        : 'transform'\n      if (!insertedTransforms[val]) {\n        // HMR or loaded a new chunk\n        updateInserted()\n      }\n      const transform = insertedTransforms[val]\n      // if (!transform) {\n      //   console.error('NO TRANSFORM', key, val)\n      //   return\n      // }\n      transforms[namespace] = transforms[namespace] || ['', '']\n      transforms[namespace][0] += val.replace('_transform', '')\n      transforms[namespace][1] += transform\n    } else {\n      classNames[key] = val\n    }\n  }\n\n  function push() {\n    if (!cur) return\n    normalizeStyleObject(cur)\n    if (isWeb && !state.noClassNames) {\n      const atomic = getStylesAtomic(cur)\n      for (const atomicStyle of atomic) {\n        if (!state.noClassNames) {\n          mergeClassName(atomicStyle.property, atomicStyle.identifier)\n          insertStyleRule(atomicStyle.identifier, atomicStyle.rules[0])\n        } else {\n          style[atomicStyle.property] = atomicStyle.value\n        }\n      }\n    } else {\n      for (const key in cur) {\n        if (key in stylePropsTransform) {\n          mergeTransform(style, key, cur[key])\n        } else {\n          style[key] = cur[key]\n        }\n      }\n    }\n    // reset it for next group of styles\n    cur = null\n  }\n\n  for (const keyInit in props) {\n    const valInit = props[keyInit]\n\n    if (skipKeys[keyInit]) {\n      viewProps[keyInit] = valInit\n      continue\n    }\n\n    if (\n      // isPropClassName\n      keyInit === 'className' ||\n      // isExtractedClassName\n      (validStyleProps[keyInit] && valInit && valInit[0] === '_')\n    ) {\n      push()\n      mergeClassName(keyInit, valInit)\n      if (cur) {\n        if (cur[keyInit]) console.warn('just want to see how used')\n        delete cur[keyInit]\n      }\n      continue\n    }\n\n    let isMedia = keyInit[0] === '$'\n    let isPseudo = validPseudoKeys[keyInit]\n\n    const out =\n      isMedia || isPseudo\n        ? true\n        : staticConfig.propMapper(\n            keyInit,\n            valInit,\n            theme,\n            props,\n            staticConfig,\n            state.resolveVariablesAs\n          )\n\n    const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out)\n\n    for (const [key, val] of expanded) {\n      if (val === undefined) {\n        continue\n      }\n\n      if (val && val[0] === '_') {\n        mergeClassName(key, val)\n        continue\n      }\n\n      isMedia = key[0] === '$'\n      isPseudo = validPseudoKeys[key]\n\n      if (\n        (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||\n        (staticConfig.inlineProps && staticConfig.inlineProps.has(key))\n      ) {\n        viewProps[key] = val\n      }\n\n      // pseudo\n      if (isPseudo) {\n        if (!val) continue\n        if (key === 'enterStyle' && state.mounted) {\n          // once mounted we can ignore enterStyle\n          continue\n        }\n        pseudos[key] = pseudos[key] || {}\n        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state.resolveVariablesAs, true)\n        if (isWeb && !state.noClassNames) {\n          const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] })\n          if (pseudoStyles[0]?.identifier?.includes('undefined')) {\n            console.warn('undefined bug?', pseudoStyles[0]?.identifier)\n          }\n          for (const style of pseudoStyles) {\n            mergeClassName(`${style.property}-${key}`, style.identifier)\n            insertStyleRule(style.identifier, style.rules[0])\n          }\n        }\n        continue\n      }\n\n      // media\n      if (isMedia) {\n        const mediaKey = key.slice(1)\n\n        if (!mediaQueryConfig[mediaKey]) {\n          // this isn't a media key, pass through\n          viewProps[key] = valInit\n          continue\n        }\n\n        // dont check if media is active, we just apply *all* media styles\n        // we combine the media props on top regular props, could proxy this\n        // TODO test proxy here instead of merge\n        // THIS USED TO PROXY BACK TO REGULAR PROPS BUT THAT IS THE WRONG BEHAVIOR\n        // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n        const mediaStyle = getSubStyle(\n          valInit,\n          staticConfig,\n          theme,\n          props,\n          state.resolveVariablesAs,\n          true\n        )\n\n        if (isWeb) {\n          const mediaStyles = getStylesAtomic(mediaStyle)\n          for (const style of mediaStyles) {\n            const out = createMediaStyle(style, mediaKey, mediaQueryConfig)\n            mergeClassName(`${out.identifier}-${mediaKey}`, out.identifier)\n            insertStyleRule(out.identifier, out.styleRule)\n          }\n          if (mediaState[mediaKey]) {\n            Object.assign(medias, mediaStyle)\n          }\n        } else {\n          if (mediaState[mediaKey]) {\n            // TODO i think media + pseudo needs handling here\n            Object.assign(style, mediaStyle)\n          }\n        }\n        continue\n      }\n\n      // TODO\n      if (key === 'style' || key.startsWith('_style')) {\n        push()\n        Object.assign(style, val)\n        continue\n      }\n\n      if (!isWeb && key === 'pointerEvents') {\n        viewProps[key] = val\n        continue\n      }\n\n      if (validStyleProps[key]) {\n        cur = cur || {}\n        cur[key] = val\n        continue\n      }\n\n      // pass to view props\n      if (!staticConfig.variants || !(key in staticConfig.variants)) {\n        if (key !== 'animation' && key !== 'debug') {\n          push()\n          viewProps[key] = val\n        }\n      }\n    }\n  }\n\n  push()\n\n  if (transforms) {\n    for (const namespace in transforms) {\n      const [hash, val] = transforms[namespace]\n      const identifier = `_transform${hash}`\n      if (!insertedTransforms[identifier]) {\n        const rule = `.${identifier} { transform: ${val}; }`\n        insertStyleRule(identifier, rule)\n      }\n      classNames[namespace] = identifier\n    }\n  }\n\n  return {\n    viewProps,\n    style,\n    medias,\n    pseudos,\n    classNames,\n  }\n}\n\nconst getSubStyle = (\n  styleIn: Object,\n  staticConfig: StaticConfigParsed,\n  theme: ThemeObject,\n  props: any,\n  resolveVariablesAs?: ResolveVariableTypes,\n  avoidDefaultProps?: boolean\n): ViewStyle => {\n  const styleOut: ViewStyle = {}\n  for (const key in styleIn) {\n    const val = styleIn[key]\n    const out = staticConfig.propMapper(\n      key,\n      val,\n      theme,\n      props,\n      staticConfig,\n      resolveVariablesAs,\n      avoidDefaultProps\n    )\n    const expanded = out === true || !out ? [[key, val]] : Object.entries(out)\n    for (const [skey, sval] of expanded) {\n      if (skey in stylePropsTransform) {\n        mergeTransform(styleOut, skey, sval)\n      } else {\n        styleOut[skey] = sval\n      }\n    }\n  }\n  normalizeStyleObject(styleOut)\n  return styleOut\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  mergeTransform,\n  stylePropsText,\n  stylePropsTransform,\n  validPseudoKeys,\n  validStyles,\n} from '@tamagui/helpers'\n// @ts-ignore\nimport { useInsertionEffect } from 'react'\nimport { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { isClient, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport {\n  MediaKeys,\n  MediaQueryKey,\n  PseudoStyles,\n  PsuedoPropKeys,\n  SplitStyleState,\n  StackProps,\n  StaticConfigParsed,\n  TamaguiInternalConfig,\n  ThemeObject,\n} from '../types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { fixNativeShadow } from './fixNativeShadow'\nimport { ViewStyleWithPseudos, getStylesAtomic } from './getStylesAtomic'\nimport {\n  insertStyleRule,\n  insertedTransforms,\n  updateInserted,\n  updateInsertedCache,\n} from './insertStyleRule'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\nexport type ClassNamesObject = Record<string, string>\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nconst skipProps = {\n  animation: true,\n  animateOnly: true,\n  debug: true,\n}\n\ntype TransformNamespaceKey = 'transform' | PsuedoPropKeys | MediaQueryKey\n\n// TODO can make a few of these objects lazy if profiling seems slow\n\nlet conf: TamaguiInternalConfig\n\ntype StyleSplitter = (\n  props: { [key: string]: any },\n  staticConfig: StaticConfigParsed,\n  theme: ThemeObject,\n  state: SplitStyleState & {\n    keepVariantsAsProps?: boolean\n  },\n  defaultClassNames?: any\n) => {\n  pseudos: PseudoStyles\n  medias: Record<MediaKeys, ViewStyle>\n  style: ViewStyle\n  classNames: ClassNamesObject\n  rulesToInsert: [string, string][]\n  viewProps: StackProps\n}\n\nexport const getSplitStyles: StyleSplitter = (\n  props,\n  staticConfig,\n  theme,\n  state,\n  defaultClassNames\n) => {\n  if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n    console.log('  \u00BB getSplitStyles', { props, state, defaultClassNames })\n  }\n\n  conf = conf || getConfig()\n  const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n  const viewProps: StackProps = {}\n  const style: ViewStyle = {}\n  const classNames: ClassNamesObject = {\n    ...defaultClassNames,\n  }\n  const pseudos: PseudoStyles = {}\n  const medias: Record<MediaKeys, ViewStyle> = {}\n\n  const rulesToInsert: [string, string][] = []\n  function addStyle(prop: string, rule: string) {\n    rulesToInsert.push([prop, rule])\n    updateInsertedCache(prop, rule)\n  }\n\n  let cur: ViewStyleWithPseudos | null = null\n\n  // we need to gather these specific to each media query / pseudo\n  // value is [hash, val], so [\"-jnjad-asdnjk\", \"scaleX(1) rotate(10deg)\"]\n  let transforms: Record<TransformNamespaceKey, [string, string]> = {}\n\n  function mergeClassName(key: string, val: string) {\n    if (!val) {\n      // empty classnames passed by compiler sometimes\n      return\n    }\n    if (val.startsWith('_transform-')) {\n      const isMediaOrPseudo = key !== 'transform'\n      const isMedia = isMediaOrPseudo && key[11] === '_'\n      const isPsuedo = (isMediaOrPseudo && key[11] === '0') || key.endsWith('Style')\n      const namespace: TransformNamespaceKey = isMedia\n        ? key.split('_')[2]\n        : isPsuedo\n        ? key.split('-')[1]\n        : 'transform'\n\n      let transform = insertedTransforms[val]\n      if (isClient) {\n        if (!transform) {\n          // HMR or loaded a new chunk\n          updateInserted()\n          transform = insertedTransforms[val]\n        }\n        if (!transform) {\n          if (isWeb && val[0] !== '_') {\n            // runtime insert\n            transform = val\n          } else {\n            // error\n            console.trace('?', key, val, cur, props, state)\n          }\n        }\n        if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n          // prettier-ignore\n          console.log('  \u00BB getSplitStyles mergeClassName transform', { key, val, namespace, transform, insertedTransforms })\n        }\n        if (process.env.NODE_ENV === 'development') {\n          if (!transform) {\n            console.trace('NO TRANSFORM?', { key, val, transform })\n          }\n        }\n      }\n      transforms[namespace] = transforms[namespace] || ['', '']\n      const identifier = val.replace('_transform', '')\n      transforms[namespace][0] += identifier\n      // ssr doesn't need to do anything just make the right classname\n      if (transform) {\n        transforms[namespace][1] += transform\n      }\n    } else {\n      classNames[key] = val\n    }\n  }\n\n  function push() {\n    if (!cur) return\n    normalizeStyleObject(cur)\n\n    if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n      console.log('  \u00BB getSplitStyles push', cur, state)\n    }\n\n    if (isWeb && !state.noClassNames) {\n      const atomic = getStylesAtomic(cur)\n      for (const atomicStyle of atomic) {\n        if (!state.noClassNames) {\n          addStyle(atomicStyle.identifier, atomicStyle.rules[0])\n          mergeClassName(atomicStyle.property, atomicStyle.identifier)\n        } else {\n          style[atomicStyle.property] = atomicStyle.value\n        }\n      }\n    }\n\n    if (\n      !isWeb ||\n      state.noClassNames ||\n      state.resolveVariablesAs === 'value' ||\n      state.resolveVariablesAs === 'both'\n    ) {\n      for (const key in cur) {\n        if (key in stylePropsTransform) {\n          mergeTransform(style, key, cur[key])\n        } else {\n          style[key] = cur[key]\n        }\n      }\n    }\n\n    // reset it for next group of styles\n    cur = null\n  }\n\n  for (const keyInit in props) {\n    if (skipProps[keyInit]) {\n      continue\n    }\n\n    const valInit = props[keyInit]\n\n    // TODO\n    if (keyInit === 'style' || keyInit.startsWith('_style')) {\n      push()\n      cur = valInit\n      push()\n      continue\n    }\n\n    if (keyInit === 'className' || (validStyleProps[keyInit] && valInit && valInit[0] === '_')) {\n      push()\n      mergeClassName(keyInit, valInit)\n      continue\n    }\n\n    if (\n      state.keepVariantsAsProps &&\n      staticConfig.defaultVariants &&\n      keyInit in staticConfig.defaultVariants\n    ) {\n      viewProps[keyInit] = valInit\n    }\n\n    let isMedia = keyInit[0] === '$'\n    let isPseudo = validPseudoKeys[keyInit]\n\n    if (\n      !isMedia &&\n      !isPseudo &&\n      !staticConfig.variants?.[keyInit] &&\n      !validStyleProps[keyInit] &&\n      !conf.shorthands[keyInit]\n    ) {\n      viewProps[keyInit] = valInit\n      continue\n    }\n\n    const out =\n      isMedia || isPseudo\n        ? true\n        : staticConfig.propMapper(\n            keyInit,\n            valInit,\n            theme,\n            state.fallbackProps || props,\n            state.resolveVariablesAs\n          )\n\n    const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out)\n\n    if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n      console.log('  \u00BB getSplitStyles', keyInit, expanded)\n    }\n\n    for (const [key, val] of expanded) {\n      if (val === undefined) {\n        continue\n      }\n\n      if (key !== 'target' && val && val[0] === '_') {\n        mergeClassName(key, val)\n        continue\n      }\n\n      isMedia = key[0] === '$'\n      isPseudo = validPseudoKeys[key]\n\n      if (\n        (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||\n        (staticConfig.inlineProps && staticConfig.inlineProps.has(key))\n      ) {\n        viewProps[key] = val\n      }\n\n      // pseudo\n      if (isPseudo) {\n        if (!val) continue\n        if (key === 'enterStyle' && state.mounted) {\n          // once mounted we can ignore enterStyle\n          continue\n        }\n        pseudos[key] = pseudos[key] || {}\n        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true)\n        if (isWeb && !state.noClassNames) {\n          const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] })\n          for (const style of pseudoStyles) {\n            addStyle(style.identifier, style.rules[0])\n            mergeClassName(`${style.property}-${key}`, style.identifier)\n          }\n        }\n        continue\n      }\n\n      // media\n      if (isMedia) {\n        const mediaKey = key\n        const mediaKeyShort = mediaKey.slice(1)\n\n        if (!mediaQueryConfig[mediaKeyShort]) {\n          // this isn't a media key, pass through\n          viewProps[key] = val\n          continue\n        }\n\n        // dont check if media is active, we just apply *all* media styles\n        // we combine the media props on top regular props, could proxy this\n        // TODO test proxy here instead of merge\n        // THIS USED TO PROXY BACK TO REGULAR PROPS BUT THAT IS THE WRONG BEHAVIOR\n        // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n        const mediaStyle = getSubStyle(val, staticConfig, theme, props, state)\n\n        if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n          console.log('  \u00BB getSplitStyles mediaStyle', mediaKey, mediaStyle, props)\n        }\n\n        const shouldDoClasses = isWeb && !state.noClassNames\n        if (shouldDoClasses) {\n          const mediaStyles = getStylesAtomic(mediaStyle)\n          for (const style of mediaStyles) {\n            const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig)\n            addStyle(out.identifier, out.styleRule)\n            mergeClassName(`${out.identifier}-${mediaKey}`, out.identifier)\n          }\n        } else {\n          if (mediaState[mediaKey]) {\n            push()\n            if (process.env.NODE_ENV === 'development' && props['debug']) {\n              console.log('apply media style', mediaKey, mediaState)\n            }\n            Object.assign(shouldDoClasses ? medias : style, mediaStyle)\n          }\n        }\n        continue\n      }\n\n      if (!isWeb && key === 'pointerEvents') {\n        viewProps[key] = val\n        continue\n      }\n\n      if (validStyleProps[key]) {\n        cur = cur || {}\n        cur[key] = val\n        continue\n      }\n\n      // pass to view props\n      if (!staticConfig.variants || !(key in staticConfig.variants)) {\n        if (key !== 'animation' && key !== 'debug') {\n          push()\n          viewProps[key] = val\n        }\n      }\n    }\n  }\n\n  push()\n\n  if (transforms) {\n    for (const namespace in transforms) {\n      const [hash, val] = transforms[namespace]\n      const identifier = `_transform${hash}`\n      if (isClient) {\n        if (!insertedTransforms[identifier]) {\n          const rule = `.${identifier} { transform: ${val}; }`\n          addStyle(identifier, rule)\n        }\n      }\n      classNames[namespace] = identifier\n    }\n  }\n\n  if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n    console.log('  \u00BB getSplitStyles out', { style, pseudos, medias, classNames, viewProps, state })\n  }\n\n  return {\n    viewProps,\n    style,\n    medias,\n    pseudos,\n    classNames,\n    rulesToInsert,\n  }\n}\n\nexport const insertSplitStyles: StyleSplitter = (...args) => {\n  const res = getSplitStyles(...args)\n  for (const [prop, rule] of res.rulesToInsert) {\n    insertStyleRule(prop, rule)\n  }\n  return res\n}\n\nconst effect = useInsertionEffect || useIsomorphicLayoutEffect\nexport const useSplitStyles: StyleSplitter = (...args) => {\n  const res = getSplitStyles(...args)\n  effect(() => {\n    for (const [prop, rule] of res.rulesToInsert) {\n      insertStyleRule(prop, rule)\n    }\n  })\n  return res\n}\n\nexport const getSubStyle = (\n  styleIn: Object,\n  staticConfig: StaticConfigParsed,\n  theme: ThemeObject,\n  props: any,\n  state: SplitStyleState,\n  avoidDefaultProps?: boolean\n): ViewStyle => {\n  const styleOut: ViewStyle = {}\n  for (const key in styleIn) {\n    const val = styleIn[key]\n    const out = staticConfig.propMapper(\n      key,\n      val,\n      theme,\n      state.fallbackProps || props,\n      state.resolveVariablesAs,\n      avoidDefaultProps\n    )\n    const expanded = out === true || !out ? [[key, val]] : Object.entries(out)\n    for (const [skey, sval] of expanded) {\n      if (skey in stylePropsTransform) {\n        mergeTransform(styleOut, skey, sval)\n      } else {\n        styleOut[skey] = sval\n      }\n    }\n  }\n  normalizeStyleObject(styleOut)\n  return styleOut\n}\n\nexport function normalizeStyleObject(style: any) {\n  // fix padding expand i know this exists in rnw but it doesnt expand base padding\n  if (style.padding) {\n    const val = style.padding\n    delete style.padding\n    style.paddingLeft = val\n    style.paddingTop = val\n    style.paddingRight = val\n    style.paddingBottom = val\n  }\n\n  // fix flex to match web\n  // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n  if (typeof style.flex === 'number') {\n    const val = style.flex\n    delete style.flex\n    style.flexGrow = style.flexGrow ?? val\n    style.flexShrink = style.flexShrink ?? 1\n  }\n\n  if (!isWeb) {\n    fixNativeShadow(style)\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/helpers/getStylesAtomic.js

@@ -52,6 +52,7 @@ __export(getStylesAtomic_exports, {
 });
 module.exports = __toCommonJS(getStylesAtomic_exports);
 var import_helpers = require("@tamagui/helpers");
+var import_conf = require("../conf");
 var import_rnw = require("../constants/rnw");
 var import_createVariable = require("../createVariable");
 function getStylesAtomic(stylesIn, options = {}) {
@@ -80,6 +81,7 @@ __name(getStylesAtomic, "getStylesAtomic");
 const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
   return import_rnw.rnw.atomic(import_rnw.rnw.createCompileableStyle(import_rnw.rnw.createReactDOMStyle(style)));
 }, "generateAtomicStyles");
+let reversedShorthands = null;
 function getAtomicStyle(style, pseudo, options) {
   if (style == null || typeof style !== "object") {
     throw new Error(`Wrong style type: "${typeof style}": ${style}`);
@@ -105,11 +107,22 @@ function getAtomicStyle(style, pseudo, options) {
   } else {
     atomicStyles = generateAtomicStyles(style);
   }
+  if (!reversedShorthands) {
+    reversedShorthands = {};
+    const conf = (0, import_conf.getConfig)();
+    if (conf.shorthands) {
+      for (const key in conf.shorthands) {
+        reversedShorthands[conf.shorthands[key]] = key;
+      }
+    }
+  }
   return Object.keys(atomicStyles).map((key) => {
     const val = atomicStyles[key];
-    const [_, ogProperty, hash] = val.identifier.split("-");
+    const [_, a, b] = val.identifier.split("-");
+    const hash = b || a;
     const psuedoPrefix = pseudo ? `0${pseudo.name}-` : "";
-    const identifier = `_${ogProperty}-${psuedoPrefix}${hash}`;
+    const shortProp = reversedShorthands[val.property] || val.property;
+    const identifier = `_${shortProp}-${psuedoPrefix}${hash}`;
     const className = `.${identifier}`;
     const rules = val.rules.map((rule) => {
       if (pseudo) {
@@ -156,4 +169,9 @@ const pseudos = {
   }
 };
 const pseudosOrdered = Object.values(pseudos);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getStylesAtomic,
+  pseudos
+});
 //# sourceMappingURL=getStylesAtomic.js.map

package/dist/cjs/helpers/getStylesAtomic.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getStylesAtomic.ts"],
-  "sourcesContent": ["import {\n  StyleObject,\n  invertMapTransformKeys,\n  mergeTransform,\n  stylePropsTransform,\n} from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { rnw } from '../constants/rnw'\nimport { isVariable } from '../createVariable'\n\n// NOTE: going to refactor and merge getSplitStyles + getAtomicStyles into one\n// before i can do that need to not rely on rnw for generateAtomicStyles\n// will change that to not be external at all and just logically do it in the\n// merged getSplitStyles/getAtomicStyles file in one loop.\n\nexport type ViewStyleWithPseudos = ViewStyle & {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\n}\n\ntype AtomicStyleOptions = {\n  splitTransforms?: boolean\n}\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos, options: AtomicStyleOptions = {}) {\n  const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n  let res: StyleObject[] = []\n\n  // *1 order matched to *0\n  for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n    if (!style || !Object.keys(style).length) {\n      continue\n    }\n    const pseudo = pseudosOrdered[index]\n    for (const skey in style) {\n      const val = style[skey]\n      if (isVariable(val)) {\n        style[skey] = val.toString()\n      }\n      if (stylePropsTransform[skey]) {\n        delete style[skey]\n        mergeTransform(style, skey, val)\n      }\n    }\n    res = [...res, ...getAtomicStyle(style, pseudo, options)]\n  }\n\n  return res\n}\n\nconst generateAtomicStyles = (style: ViewStyle) => {\n  return rnw.atomic(rnw.createCompileableStyle(rnw.createReactDOMStyle(style))) as {\n    [key: string]: StyleObject\n  }\n}\n\nfunction getAtomicStyle(\n  style: ViewStyle,\n  pseudo: { name: string; priority: number } | undefined,\n  options: AtomicStyleOptions\n): StyleObject[] {\n  if (style == null || typeof style !== 'object') {\n    throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n  }\n\n  // why is this diff from react-native-web!? need to figure out\n  for (const key in borderDefaults) {\n    if (key in style) {\n      style[borderDefaults[key]] = style[borderDefaults[key]] ?? 'solid'\n    }\n  }\n\n  let atomicStyles: { [key: string]: StyleObject & { transformProperty?: string } } = {}\n\n  if (options.splitTransforms && style.transform) {\n    let { transform, ...rest } = style\n    Object.assign(atomicStyles, generateAtomicStyles(rest))\n    for (const t of transform) {\n      const tKey = Object.keys(t)[0]\n      const transformProperty = invertMapTransformKeys[tKey] || tKey\n      const out = generateAtomicStyles({ transform: [t] })\n      const key = Object.keys(out)[0]\n      atomicStyles[key] = {\n        ...out[key],\n        transformProperty,\n      }\n    }\n  } else {\n    // TODO we can do this all in one loop likely inside getSplitStyles in existing loop and avoid O(n^3)...\n    atomicStyles = generateAtomicStyles(style)\n  }\n\n  // TODO ... and then also avoid this loop! n^4\n  return Object.keys(atomicStyles).map((key) => {\n    const val = atomicStyles[key]\n    // r-transform-1ns13n\n    const [_, ogProperty, hash] = val.identifier.split('-')\n    // pseudos have a `--` to be easier to find with concatClassNames\n    const psuedoPrefix = pseudo ? `0${pseudo.name}-` : ''\n    const identifier = `_${ogProperty}-${psuedoPrefix}${hash}`\n    const className = `.${identifier}`\n    const rules = val.rules.map((rule) => {\n      if (pseudo) {\n        const psuedoPrefixSelect = [...Array(pseudo.priority)].map(() => ':root').join('') + ' '\n        let res = rule\n          .replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`)\n          .replace('{', `:${pseudo.name}{`)\n\n        if (pseudo.name === 'hover') {\n          // hover styles need to be conditional\n          // perhaps this can be generalized but for now lets just shortcut\n          // and hardcode for hover styles, if we need to later we can\n          // WEIRD SYNTAX, SEE:\n          //   https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover\n          res = `@media not all and (hover: none) { ${res} }`\n        }\n        return res\n      }\n      return rule.replace(`.${val.identifier}`, className).replace(importantRegex, '')\n    })\n\n    const result: StyleObject = {\n      property: val.transformProperty || val.property,\n      value: val.value,\n      identifier,\n      className,\n      rules,\n    }\n\n    return result\n  })\n}\n\nconst importantRegex = /\\!important*/g\n\nconst borderDefaults = {\n  borderWidth: 'borderStyle',\n  borderBottomWidth: 'borderBottomStyle',\n  borderTopWidth: 'borderTopStyle',\n  borderLeftWidth: 'borderLeftStyle',\n  borderRightWidth: 'borderRightStyle',\n}\n\n// *0 order matches to *1\nexport const pseudos = {\n  hoverStyle: {\n    name: 'hover',\n    priority: 1,\n  },\n  pressStyle: {\n    name: 'active',\n    priority: 2,\n  },\n  focusStyle: {\n    name: 'focus',\n    priority: 3,\n  },\n}\n\nconst pseudosOrdered = Object.values(pseudos)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  StyleObject,\n  invertMapTransformKeys,\n  mergeTransform,\n  stylePropsTransform,\n} from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { rnw } from '../constants/rnw'\nimport { isVariable } from '../createVariable'\n\n// NOTE: going to refactor and merge getSplitStyles + getAtomicStyles into one\n// before i can do that need to not rely on rnw for generateAtomicStyles\n// will change that to not be external at all and just logically do it in the\n// merged getSplitStyles/getAtomicStyles file in one loop.\n\nexport type ViewStyleWithPseudos = ViewStyle & {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\n}\n\ntype AtomicStyleOptions = {\n  splitTransforms?: boolean\n}\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos, options: AtomicStyleOptions = {}) {\n  const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n  let res: StyleObject[] = []\n\n  // *1 order matched to *0\n  for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n    if (!style || !Object.keys(style).length) {\n      continue\n    }\n    const pseudo = pseudosOrdered[index]\n    for (const skey in style) {\n      const val = style[skey]\n      if (isVariable(val)) {\n        style[skey] = val.toString()\n      }\n      if (stylePropsTransform[skey]) {\n        delete style[skey]\n        mergeTransform(style, skey, val)\n      }\n    }\n    res = [...res, ...getAtomicStyle(style, pseudo, options)]\n  }\n\n  return res\n}\n\nconst generateAtomicStyles = (style: ViewStyle) => {\n  return rnw.atomic(rnw.createCompileableStyle(rnw.createReactDOMStyle(style))) as {\n    [key: string]: StyleObject\n  }\n}\n\nlet reversedShorthands: Record<string, string> | null = null\n\nfunction getAtomicStyle(\n  style: ViewStyle,\n  pseudo: { name: string; priority: number } | undefined,\n  options: AtomicStyleOptions\n): StyleObject[] {\n  if (style == null || typeof style !== 'object') {\n    throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n  }\n\n  // why is this diff from react-native-web!? need to figure out\n  for (const key in borderDefaults) {\n    if (key in style) {\n      style[borderDefaults[key]] = style[borderDefaults[key]] ?? 'solid'\n    }\n  }\n\n  let atomicStyles: { [key: string]: StyleObject & { transformProperty?: string } } = {}\n\n  if (options.splitTransforms && style.transform) {\n    let { transform, ...rest } = style\n    Object.assign(atomicStyles, generateAtomicStyles(rest))\n    for (const t of transform) {\n      const tKey = Object.keys(t)[0]\n      const transformProperty = invertMapTransformKeys[tKey] || tKey\n      const out = generateAtomicStyles({ transform: [t] })\n      const key = Object.keys(out)[0]\n      atomicStyles[key] = {\n        ...out[key],\n        transformProperty,\n      }\n    }\n  } else {\n    // TODO we can do this all in one loop likely inside getSplitStyles in existing loop and avoid O(n^3)...\n    atomicStyles = generateAtomicStyles(style)\n  }\n\n  if (!reversedShorthands) {\n    reversedShorthands = {}\n    const conf = getConfig()\n    if (conf.shorthands) {\n      for (const key in conf.shorthands) {\n        reversedShorthands[conf.shorthands[key]] = key\n      }\n    }\n  }\n\n  // TODO ... and then also avoid this loop! n^4\n  return Object.keys(atomicStyles).map((key) => {\n    const val = atomicStyles[key]\n    // r-transform-1ns13n\n    const [_, a, b] = val.identifier.split('-')\n    // dev mode its \"r-transform-1ns13n\", prod its \"r-1ns13n\", normalize them\n    const hash = b || a\n    // pseudos have a `--` to be easier to find with concatClassNames\n    const psuedoPrefix = pseudo ? `0${pseudo.name}-` : ''\n    const shortProp = reversedShorthands![val.property] || val.property\n    const identifier = `_${shortProp}-${psuedoPrefix}${hash}`\n    const className = `.${identifier}`\n    const rules = val.rules.map((rule) => {\n      if (pseudo) {\n        const psuedoPrefixSelect = [...Array(pseudo.priority)].map(() => ':root').join('') + ' '\n        let res = rule\n          .replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`)\n          .replace('{', `:${pseudo.name}{`)\n\n        if (pseudo.name === 'hover') {\n          // hover styles need to be conditional\n          // perhaps this can be generalized but for now lets just shortcut\n          // and hardcode for hover styles, if we need to later we can\n          // WEIRD SYNTAX, SEE:\n          //   https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover\n          res = `@media not all and (hover: none) { ${res} }`\n        }\n        return res\n      }\n      return rule.replace(`.${val.identifier}`, className).replace(importantRegex, '')\n    })\n\n    const result: StyleObject = {\n      property: val.transformProperty || val.property,\n      value: val.value,\n      identifier,\n      className,\n      rules,\n    }\n\n    return result\n  })\n}\n\nconst importantRegex = /\\!important*/g\n\nconst borderDefaults = {\n  borderWidth: 'borderStyle',\n  borderBottomWidth: 'borderBottomStyle',\n  borderTopWidth: 'borderTopStyle',\n  borderLeftWidth: 'borderLeftStyle',\n  borderRightWidth: 'borderRightStyle',\n}\n\n// *0 order matches to *1\nexport const pseudos = {\n  hoverStyle: {\n    name: 'hover',\n    priority: 1,\n  },\n  pressStyle: {\n    name: 'active',\n    priority: 2,\n  },\n  focusStyle: {\n    name: 'focus',\n    priority: 3,\n  },\n}\n\nconst pseudosOrdered = Object.values(pseudos)\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/helpers/getStylesAtomic.native.js

@@ -25,4 +25,8 @@ function getStylesAtomic() {
   console.warn("no-op native");
 }
 __name(getStylesAtomic, "getStylesAtomic");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getStylesAtomic
+});
 //# sourceMappingURL=getStylesAtomic.native.js.map