@tamagui/core 1.0.0-alpha.9 → 1.0.0-beta.147

package/dist/cjs/helpers/getSplitStyles.js

@@ -1,9 +1,7 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -18,102 +16,195 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
-  getSplitStyles: () => getSplitStyles
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var getSplitStyles_exports = {};
+__export(getSplitStyles_exports, {
+  getSplitStyles: () => getSplitStyles,
+  getSubStyle: () => getSubStyle
 });
-var import_helpers = __toModule(require("@tamagui/helpers"));
-var import_platform = __toModule(require("../constants/platform"));
-var import_useMedia = __toModule(require("../hooks/useMedia"));
-var import_createMediaStyle = __toModule(require("./createMediaStyle"));
-var import_fixNativeShadow = __toModule(require("./fixNativeShadow"));
-var import_getStylesAtomic = __toModule(require("./getStylesAtomic"));
-var import_insertStyleRule = __toModule(require("./insertStyleRule"));
-const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, isSplittingDefaultProps) => {
+module.exports = __toCommonJS(getSplitStyles_exports);
+var import_helpers = require("@tamagui/helpers");
+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 = {
+  animation: true,
+  animated: true,
+  children: true,
+  key: true,
+  ref: 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");
+const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames) => {
   const validStyleProps = staticConfig.isText ? import_helpers.stylePropsText : import_helpers.validStyles;
   const viewProps = {};
-  const style = [];
-  let pseudos = null;
+  const style = {};
+  const classNames = __spreadValues({}, defaultClassNames);
+  const pseudos = {};
+  const medias = {};
   let cur = null;
-  let classNames = null;
-  for (const keyInit in props) {
-    const valInit = props[keyInit];
-    if (keyInit[0] === "$") {
-      const mediaKey = keyInit.slice(1);
-      if (!import_useMedia.mediaQueryConfig[mediaKey]) {
-        viewProps[keyInit] = valInit;
-        continue;
+  let transforms = {};
+  function mergeClassName(key, val) {
+    if (!val)
+      return;
+    if (val.startsWith("_transform-")) {
+      const isMediaOrPseudo = key !== "transform";
+      const isMedia = isMediaOrPseudo && key[11] === "_";
+      const isPsuedo = isMediaOrPseudo && key[11] === "0";
+      const namespace = isMedia ? key.split("_")[2] : isPsuedo ? key.split("-")[1] : "transform";
+      let transform = import_insertStyleRule.insertedTransforms[val];
+      if (!transform) {
+        (0, import_insertStyleRule.updateInserted)();
       }
-      const mediaProps = __spreadValues(__spreadValues({}, props), valInit);
-      const mediaStyle = getSubStyle(valInit, staticConfig, theme, props);
-      if (import_platform.isWeb) {
-        const mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle);
-        if (process.env.NODE_ENV === "development") {
-          if (props["debug"]) {
-            console.log("mediaStyles", keyInit, { mediaProps, mediaStyle, mediaStyles });
-          }
-        }
-        for (const style2 of mediaStyles) {
-          const out2 = (0, import_createMediaStyle.createMediaStyle)(style2, mediaKey, import_useMedia.mediaQueryConfig);
-          classNames = classNames || [];
-          classNames.push(out2.identifier);
-          import_helpers.AllRules.add(out2.styleRule);
-          (0, import_insertStyleRule.insertStyleRule)(out2.styleRule);
-          if (process.env.NODE_ENV === "development" && props["debug"]) {
-            console.log("mediaProp", style2.identifier, out2, mediaProps, mediaStyle, mediaStyles);
-          }
+      transform = import_insertStyleRule.insertedTransforms[val];
+      if (!transform || transform === "undefined") {
+        console.log("NO TRANSFORM", { key, val, transform });
+        return;
+      }
+      transforms[namespace] = transforms[namespace] || ["", ""];
+      transforms[namespace][0] += val.replace("_transform", "");
+      transforms[namespace][1] += transform;
+    } else {
+      classNames[key] = val;
+    }
+  }
+  __name(mergeClassName, "mergeClassName");
+  function push() {
+    if (!cur)
+      return;
+    normalizeStyleObject(cur);
+    if (import_platform.isWeb && !state.noClassNames) {
+      const atomic = (0, import_getStylesAtomic.getStylesAtomic)(cur);
+      for (const atomicStyle of atomic) {
+        if (!state.noClassNames) {
+          mergeClassName(atomicStyle.property, atomicStyle.identifier);
+          (0, import_insertStyleRule.insertStyleRule)(atomicStyle.identifier, atomicStyle.rules[0]);
+        } else {
+          style[atomicStyle.property] = atomicStyle.value;
         }
-      } else {
-        if (import_useMedia.mediaState[mediaKey]) {
-          style.push(mediaStyle);
+      }
+    }
+    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]);
+        } else {
+          style[key] = cur[key];
         }
       }
+    }
+    cur = null;
+  }
+  __name(push, "push");
+  for (const keyInit in props) {
+    const valInit = props[keyInit];
+    if (skipKeys[keyInit]) {
+      viewProps[keyInit] = valInit;
       continue;
     }
-    if (import_helpers.validStylesPseudo[keyInit]) {
-      if (!valInit)
-        continue;
-      pseudos = pseudos || {};
-      pseudos[keyInit] = getSubStyle(valInit, staticConfig, theme, props);
+    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;
     }
-    const out = staticConfig.propMapper(keyInit, valInit, theme, props);
+    let isMedia = keyInit[0] === "$";
+    let isPseudo = import_helpers.validPseudoKeys[keyInit];
+    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("split style", keyInit, expanded);
+    }
     for (const [key, val] of expanded) {
-      const keyFirstChar = key[0];
-      if (key === "style" || keyFirstChar === "_" && key.startsWith("_style")) {
-        if (cur) {
-          (0, import_fixNativeShadow.fixNativeShadow)(cur);
-          style.push(cur);
-          cur = null;
+      if (val === void 0) {
+        continue;
+      }
+      if (key !== "target" && val && val[0] === "_") {
+        mergeClassName(key, val);
+        continue;
+      }
+      isMedia = key[0] === "$";
+      isPseudo = import_helpers.validPseudoKeys[key];
+      if (staticConfig.deoptProps && staticConfig.deoptProps.has(key) || staticConfig.inlineProps && staticConfig.inlineProps.has(key)) {
+        viewProps[key] = val;
+      }
+      if (isPseudo) {
+        if (!val)
+          continue;
+        if (key === "enterStyle" && state.mounted) {
+          continue;
+        }
+        pseudos[key] = pseudos[key] || {};
+        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
+        if (import_platform.isWeb && !state.noClassNames) {
+          const pseudoStyles = (0, import_getStylesAtomic.getStylesAtomic)({ [key]: pseudos[key] });
+          for (const style2 of pseudoStyles) {
+            mergeClassName(`${style2.property}-${key}`, style2.identifier);
+            (0, import_insertStyleRule.insertStyleRule)(style2.identifier, style2.rules[0]);
+          }
         }
-        (0, import_fixNativeShadow.fixNativeShadow)(val);
-        style.push(val);
         continue;
       }
-      if (key === "flex") {
-        cur = cur || {};
-        Object.assign(cur, {
-          flexGrow: val,
-          flexShrink: 1
-        });
+      if (isMedia) {
+        const mediaKey = key;
+        if (!import_useMedia.mediaQueryConfig[mediaKey.slice(1)]) {
+          viewProps[key] = val;
+          continue;
+        }
+        const mediaStyle = getSubStyle(val, staticConfig, theme, props, state, true);
+        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.slice(1), import_useMedia.mediaQueryConfig);
+            mergeClassName(`${out2.identifier}-${mediaKey}`, out2.identifier);
+            (0, import_insertStyleRule.insertStyleRule)(out2.identifier, out2.styleRule);
+          }
+        } else {
+          if (import_useMedia.mediaState[mediaKey]) {
+            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") {
@@ -121,60 +212,56 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, isSpl
         continue;
       }
       if (validStyleProps[key]) {
-        if (key in import_helpers.stylePropsTransform) {
-          cur = cur || {};
-          mergeTransform(cur, key, val);
-          continue;
-        }
         cur = cur || {};
         cur[key] = val;
         continue;
       }
       if (!staticConfig.variants || !(key in staticConfig.variants)) {
-        viewProps[key] = val;
+        if (key !== "animation" && key !== "debug") {
+          push();
+          viewProps[key] = val;
+        }
       }
     }
   }
-  if (cur) {
-    (0, import_fixNativeShadow.fixNativeShadow)(cur);
-    style.push(cur);
-  }
-  if (process.env.NODE_ENV === "development") {
-    if (props["debug"]) {
-      console.log(" \u{1F95A} splitProps:", { props, viewProps, style });
+  push();
+  if (transforms) {
+    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);
+      }
+      classNames[namespace] = identifier;
     }
   }
+  if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+    console.log("out", { style, pseudos, medias, classNames, viewProps });
+  }
   return {
     viewProps,
     style,
+    medias,
     pseudos,
     classNames
   };
 }, "getSplitStyles");
-const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props) => {
+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);
+    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) {
-        mergeTransform(styleOut, skey, sval);
+        (0, import_helpers.mergeTransform)(styleOut, skey, sval);
       } else {
         styleOut[skey] = sval;
       }
     }
   }
-  (0, import_fixNativeShadow.fixNativeShadow)(styleOut);
+  normalizeStyleObject(styleOut);
   return styleOut;
 }, "getSubStyle");
-const mapTransformKeys = {
-  x: "translateX",
-  y: "translateY"
-};
-const mergeTransform = /* @__PURE__ */ __name((obj, key, val) => {
-  const transform = obj.transform ? Array.isArray(obj.transform) ? obj.transform : [obj.transform] : [];
-  transform.push({ [mapTransformKeys[key] || key]: val });
-  obj.transform = transform;
-}, "mergeTransform");
 //# 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  AllRules,\n  stylePropsText,\n  stylePropsTransform,\n  validStyles,\n  validStylesPseudo,\n} from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { isWeb } from '../constants/platform'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport { StaticConfigParsed, ThemeObject } from '../types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { fixNativeShadow } from './fixNativeShadow'\nimport { getStylesAtomic } from './getStylesAtomic'\nimport { insertStyleRule } from './insertStyleRule'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\n\n// TODO run over this, should be able to cut it down quite a bit\n\nexport const getSplitStyles = (\n  props: { [key: string]: any },\n  staticConfig: StaticConfigParsed,\n  theme: ThemeObject,\n  isSplittingDefaultProps?: boolean\n) => {\n  const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n  const viewProps: Record<string, any> = {}\n  const style: any[] = []\n\n  let pseudos: { hoverStyle?: ViewStyle; pressStyle?: ViewStyle } | null = null\n  let cur: ViewStyle | null = null\n  let classNames: string[] | null = null\n\n  for (const keyInit in props) {\n    // be sure to sync next few lines below to getSubStyle (*1)\n    const valInit = props[keyInit]\n\n    // media\n    if (keyInit[0] === '$') {\n      const mediaKey = keyInit.slice(1)\n\n      if (!mediaQueryConfig[mediaKey]) {\n        // this isn't a media key, pass through\n        viewProps[keyInit] = 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      const mediaProps = { ...props, ...valInit }\n      // TODO media + hover\n      const mediaStyle = getSubStyle(valInit, staticConfig, theme, props)\n\n      if (isWeb) {\n        const mediaStyles = getStylesAtomic(mediaStyle)\n        if (process.env.NODE_ENV === 'development') {\n          if (props['debug']) {\n            console.log('mediaStyles', keyInit, { mediaProps, mediaStyle, mediaStyles })\n          }\n        }\n        for (const style of mediaStyles) {\n          const out = createMediaStyle(style, mediaKey, mediaQueryConfig)\n          classNames = classNames || []\n          classNames.push(out.identifier)\n          AllRules.add(out.styleRule)\n          insertStyleRule(out.styleRule)\n          if (process.env.NODE_ENV === 'development' && props['debug']) {\n            console.log('mediaProp', style.identifier, out, mediaProps, mediaStyle, mediaStyles)\n          }\n        }\n      } else {\n        if (mediaState[mediaKey]) {\n          style.push(mediaStyle)\n        }\n      }\n      continue\n    }\n\n    // pseudo\n    if (validStylesPseudo[keyInit]) {\n      if (!valInit) continue\n      pseudos = pseudos || {}\n      pseudos[keyInit] = getSubStyle(valInit, staticConfig, theme, props)\n      continue\n    }\n\n    const out = staticConfig.propMapper(keyInit, valInit, theme, props)\n\n    const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out)\n\n    for (const [key, val] of expanded) {\n      // const val = valueMap(valInit) ?? valInit\n      const keyFirstChar = key[0]\n      if (key === 'style' || (keyFirstChar === '_' && key.startsWith('_style'))) {\n        if (cur) {\n          // process last\n          fixNativeShadow(cur)\n          style.push(cur)\n          cur = null\n        }\n        fixNativeShadow(val)\n        style.push(val)\n        continue\n      }\n      // expand flex so it merged with flexShrink etc properly\n      // TODO this shouldn't be here...\n      if (key === 'flex') {\n        cur = cur || {}\n        // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n        // TODO this fixed a behavior but need to find / document / test\n        Object.assign(cur, {\n          flexGrow: val,\n          flexShrink: 1,\n        })\n        continue\n      }\n      if (!isWeb && key === 'pointerEvents') {\n        viewProps[key] = val\n        continue\n      }\n      if (validStyleProps[key]) {\n        // transforms\n        if (key in stylePropsTransform) {\n          cur = cur || {}\n          mergeTransform(cur, key, val)\n          continue\n        }\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        viewProps[key] = val\n      }\n    }\n  }\n  // push last style\n  if (cur) {\n    fixNativeShadow(cur)\n    style.push(cur)\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props['debug']) {\n      console.log(' \uD83E\uDD5A splitProps:', { props, viewProps, style })\n    }\n  }\n\n  return {\n    viewProps,\n    style,\n    pseudos,\n    classNames,\n  }\n}\n\nconst getSubStyle = (\n  styleIn: Object,\n  staticConfig: StaticConfigParsed,\n  theme: ThemeObject,\n  props: any\n): ViewStyle => {\n  const styleOut: ViewStyle = {}\n  for (const key in styleIn) {\n    // be sure to sync next few lines below to loop above (*1)\n    const val = styleIn[key]\n    const out = staticConfig.propMapper(key, val, theme, props)\n    const expanded = out === true || !out ? [[key, val]] : Object.entries(out)\n    for (const [skey, sval] of expanded) {\n      // const sval = valueMap(valInit)\n      if (skey in stylePropsTransform) {\n        mergeTransform(styleOut, skey, sval)\n      } else {\n        styleOut[skey] = sval\n      }\n    }\n  }\n  fixNativeShadow(styleOut)\n  return styleOut\n}\n\nconst mapTransformKeys = {\n  x: 'translateX',\n  y: 'translateY',\n}\n\nconst mergeTransform = (obj: ViewStyle, key: string, val: any) => {\n  const transform: any[] = obj.transform\n    ? Array.isArray(obj.transform)\n      ? obj.transform\n      : [obj.transform]\n    : []\n  transform.push({ [mapTransformKeys[key] || key]: val })\n  obj.transform = transform\n}\n"],
-  "mappings": "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",
+  "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 { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport {\n  MediaKeys,\n  MediaQueryKey,\n  PseudoStyles,\n  PsuedoPropKeys,\n  SplitStyleState,\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 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: SplitStyleState,\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 && key[11] === '0'\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 (!transform) {\n        // HMR or loaded a new chunk\n        updateInserted()\n      }\n      transform = insertedTransforms[val]\n      if (!transform || transform === 'undefined') {\n        console.log('NO TRANSFORM', { key, val, transform })\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\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    }\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    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            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('split style', 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            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\n\n        if (!mediaQueryConfig[mediaKey.slice(1)]) {\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, true)\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, mediaKey.slice(1), mediaQueryConfig)\n            mergeClassName(`${out.identifier}-${mediaKey}`, out.identifier)\n            insertStyleRule(out.identifier, out.styleRule)\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      // 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  if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n    console.log('out', { style, pseudos, medias, classNames, viewProps })\n  }\n\n  return {\n    viewProps,\n    style,\n    medias,\n    pseudos,\n    classNames,\n  }\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"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/helpers/getStylesAtomic.js

@@ -1,9 +1,9 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -18,59 +18,69 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
-  getStylesAtomic: () => getStylesAtomic
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var getStylesAtomic_exports = {};
+__export(getStylesAtomic_exports, {
+  getStylesAtomic: () => getStylesAtomic,
+  pseudos: () => pseudos
 });
-var import_helpers = __toModule(require("@tamagui/helpers"));
-var import_pseudos = __toModule(require("../constants/pseudos"));
-var import_rnw = __toModule(require("../constants/rnw"));
-const generateStyle = /* @__PURE__ */ __name((style) => {
-  const { atomic, createCompileableStyle, createReactDOMStyle, i18Style } = import_rnw.rnw;
-  return __spreadValues({}, atomic(createCompileableStyle(createReactDOMStyle(i18Style(style)))));
-}, "generateStyle");
-const borderDefaults = {
-  borderWidth: "borderStyle",
-  borderBottomWidth: "borderBottomStyle",
-  borderTopWidth: "borderTopStyle",
-  borderLeftWidth: "borderLeftStyle",
-  borderRightWidth: "borderRightStyle"
-};
-function getStylesAtomic(style, avoidCollection = false) {
-  const styles = {
-    base: {}
-  };
-  for (const key in style) {
-    if (!!import_pseudos.pseudos[key]) {
-      styles[key] = style[key];
-    } else {
-      styles.base[key] = style[key];
+module.exports = __toCommonJS(getStylesAtomic_exports);
+var import_helpers = require("@tamagui/helpers");
+var import_rnw = require("../constants/rnw");
+var import_createVariable = require("../createVariable");
+function getStylesAtomic(stylesIn, options = {}) {
+  const _a = stylesIn, { hoverStyle, pressStyle, focusStyle } = _a, base = __objRest(_a, ["hoverStyle", "pressStyle", "focusStyle"]);
+  let res = [];
+  for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {
+    if (!style || !Object.keys(style).length) {
+      continue;
+    }
+    const pseudo = pseudosOrdered[index];
+    for (const skey in style) {
+      const val = style[skey];
+      if ((0, import_createVariable.isVariable)(val)) {
+        style[skey] = val.toString();
+      }
+      if (import_helpers.stylePropsTransform[skey]) {
+        delete style[skey];
+        (0, import_helpers.mergeTransform)(style, skey, val);
+      }
     }
+    res = [...res, ...getAtomicStyle(style, pseudo, options)];
   }
-  return Object.keys(styles).map((key) => {
-    return getAtomicStyle(styles[key], import_pseudos.pseudos[key], avoidCollection);
-  }).flat();
+  return res;
 }
 __name(getStylesAtomic, "getStylesAtomic");
-const importantRegex = /\!important*/g;
-function getAtomicStyle(style, pseudo, avoidCollection) {
+const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
+  return import_rnw.rnw.atomic(import_rnw.rnw.createCompileableStyle(import_rnw.rnw.createReactDOMStyle(style)));
+}, "generateAtomicStyles");
+function getAtomicStyle(style, pseudo, options) {
   if (style == null || typeof style !== "object") {
     throw new Error(`Wrong style type: "${typeof style}": ${style}`);
   }
@@ -79,12 +89,28 @@ function getAtomicStyle(style, pseudo, avoidCollection) {
       style[borderDefaults[key]] = style[borderDefaults[key]] ?? "solid";
     }
   }
-  const all = generateStyle(style);
-  return Object.keys(all).map((key) => {
-    const val = all[key];
-    const hash = val.identifier.slice(`${val.identifier}`.lastIndexOf("-") + 1);
-    const psuedoPrefix = pseudo ? `-${pseudo.name}-` : "";
-    const identifier = `_${val.property}-${psuedoPrefix}${hash}`;
+  let atomicStyles = {};
+  if (options.splitTransforms && style.transform) {
+    let _a = style, { transform } = _a, rest = __objRest(_a, ["transform"]);
+    Object.assign(atomicStyles, generateAtomicStyles(rest));
+    for (const t of transform) {
+      const tKey = Object.keys(t)[0];
+      const transformProperty = import_helpers.invertMapTransformKeys[tKey] || tKey;
+      const out = generateAtomicStyles({ transform: [t] });
+      const key = Object.keys(out)[0];
+      atomicStyles[key] = __spreadProps(__spreadValues({}, out[key]), {
+        transformProperty
+      });
+      console.log("got", JSON.stringify({ t, tKey, out, key, atomicStyles }, null, 2));
+    }
+  } else {
+    atomicStyles = generateAtomicStyles(style);
+  }
+  return Object.keys(atomicStyles).map((key) => {
+    const val = atomicStyles[key];
+    const [_, ogProperty, hash] = val.identifier.split("-");
+    const psuedoPrefix = pseudo ? `0${pseudo.name}-` : "";
+    const identifier = `_${ogProperty}-${psuedoPrefix}${hash}`;
     const className = `.${identifier}`;
     const rules = val.rules.map((rule) => {
       if (pseudo) {
@@ -97,14 +123,8 @@ function getAtomicStyle(style, pseudo, avoidCollection) {
       }
       return rule.replace(`.${val.identifier}`, className).replace(importantRegex, "");
     });
-    if (!avoidCollection) {
-      if (rules.length > 1) {
-        console.warn("have never seen more than one, verifying");
-      }
-      import_helpers.AllRules.add(rules[0]);
-    }
     const result = {
-      property: val.property,
+      property: val.transformProperty || val.property,
       value: val.value,
       identifier,
       className,
@@ -114,4 +134,27 @@ function getAtomicStyle(style, pseudo, avoidCollection) {
   });
 }
 __name(getAtomicStyle, "getAtomicStyle");
+const importantRegex = /\!important*/g;
+const borderDefaults = {
+  borderWidth: "borderStyle",
+  borderBottomWidth: "borderBottomStyle",
+  borderTopWidth: "borderTopStyle",
+  borderLeftWidth: "borderLeftStyle",
+  borderRightWidth: "borderRightStyle"
+};
+const pseudos = {
+  hoverStyle: {
+    name: "hover",
+    priority: 1
+  },
+  pressStyle: {
+    name: "active",
+    priority: 2
+  },
+  focusStyle: {
+    name: "focus",
+    priority: 3
+  }
+};
+const pseudosOrdered = Object.values(pseudos);
 //# sourceMappingURL=getStylesAtomic.js.map