@tamagui/web 1.125.2 → 1.125.4

package/dist/cjs/helpers/getSplitStyles.cjs

@@ -45,6 +45,7 @@ var import_constants = require("@tamagui/constants"),
   import_constants2 = require("../constants/constants.cjs"),
   import_isDevTools = require("../constants/isDevTools.cjs"),
   import_useMedia = require("../hooks/useMedia.cjs"),
+  import_consoleLog = require("./consoleLog.cjs"),
   import_createMediaStyle = require("./createMediaStyle.cjs"),
   import_expandStyles = require("./expandStyles.cjs"),
   import_getCSSStylesAtomic = require("./getCSSStylesAtomic.cjs"),
@@ -59,7 +60,6 @@ var import_constants = require("@tamagui/constants"),
   import_skipProps = require("./skipProps.cjs"),
   import_sortString = require("./sortString.cjs"),
   import_transformsToString = require("./transformsToString.cjs");
-const consoleGroupCollapsed = import_constants.isWeb ? console.groupCollapsed : console.info;
 let conf;
 const PROP_SPLIT = "-";
 function isValidStyleKey(key, validStyles, accept) {
@@ -86,8 +86,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     usedKeys = {},
     shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClass,
     rulesToInsert = {},
-    classNames = {},
-    transforms = {};
+    classNames = {};
   let pseudos = null,
     space = props.space,
     hasMedia = !1,
@@ -122,7 +121,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       }
     }));
   }
-  process.env.NODE_ENV === "development" && debug === "profile" && time`style-state`, process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants.isClient && (consoleGroupCollapsed("getSplitStyles (collapsed)"), (0, import_log.log)({
+  process.env.NODE_ENV === "development" && debug === "profile" && time`style-state`, process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants.isClient && ((0, import_consoleLog.groupCollapsed)("getSplitStyles (collapsed)"), (0, import_log.log)({
     props,
     staticConfig,
     shouldDoClasses,
@@ -133,7 +132,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     theme: {
       ...theme
     }
-  }), console.groupEnd());
+  }), (0, import_consoleLog.groupEnd)());
   const {
       asChild
     } = props,
@@ -164,7 +163,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
         continue;
       }
     }
-    if (process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd(), disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || asChild && import_constants2.webViewFlexCompatStyles[keyInit] === valInit) continue;
+    if (process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_consoleLog.groupEnd)(), disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || asChild && import_constants2.webViewFlexCompatStyles[keyInit] === valInit) continue;
     if (keyInit in import_skipProps.skipProps && !noSkip && !isHOC) {
       if (keyInit === "group") {
         const identifier = `t_group_${valInit}`,
@@ -179,17 +178,6 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       keyInit = keyInit.replace("data-", ""), viewProps.dataSet ||= {}, viewProps.dataSet[keyInit] = valInit;
       continue;
     }
-    if (isValidStyleKeyInit && valInitType === "string" && valInit[0] === "_") {
-      const isValidClassName = keyInit in validStyles,
-        isMediaOrPseudo2 = !isValidClassName &&
-        // media are flattened for some reason to color-hover keys,
-        // we should probably just leave them in place to avoid extra complexity
-        keyInit.includes(PROP_SPLIT) && validStyles[keyInit.split(PROP_SPLIT)[0]];
-      if (isValidClassName || isMediaOrPseudo2) {
-        shouldDoClasses ? (mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo2), styleState.style && delete styleState.style[keyInit]) : (styleState.style ||= {}, styleState.style[keyInit] = (0, import_normalizeValueWithProperty.reverseMapClassNameToValue)(keyInit, valInit), delete classNames[keyInit]);
-        continue;
-      }
-    }
     if (keyInit === "dataSet") {
       for (const keyInit2 in valInit) viewProps[`data-${hyphenate(keyInit2)}`] = valInit[keyInit2];
       continue;
@@ -277,7 +265,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       parentVariant = parentVariants?.[keyInit],
       isHOCShouldPassThrough = !!(isHOC && (isValidStyleKeyInit || isMediaOrPseudo || parentVariant || keyInit in import_skipProps.skipProps)),
       shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
-    if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupEnd(), console.groupEnd(), consoleGroupCollapsed(`  \u{1F511} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""}`), (0, import_log.log)({
+    if (process.env.NODE_ENV === "development" && debug === "verbose" && ((0, import_consoleLog.groupEnd)(), (0, import_consoleLog.groupEnd)(), (0, import_consoleLog.groupCollapsed)(`  \u{1F511} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""}`), (0, import_log.log)({
       isVariant,
       valInit,
       shouldPassProp
@@ -295,23 +283,23 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
         viewProps[key] = val;
         return;
       }
-      if (process.env.NODE_ENV === "development" && debug === "verbose" && (consoleGroupCollapsed("  \u{1F4A0} expanded", keyInit, "=>", key), (0, import_log.log)(val), console.groupEnd()), val == null || key in usedKeys) return;
+      if (process.env.NODE_ENV === "development" && debug === "verbose" && ((0, import_consoleLog.groupCollapsed)("  \u{1F4A0} expanded", keyInit, "=>", key), (0, import_log.log)(val), (0, import_consoleLog.groupEnd)()), val == null || key in usedKeys) return;
       if (!isHOC && isValidStyleKey(key, validStyles, accept)) {
         mergeStyle(styleState, key, val);
         return;
       }
       if (isPseudo = key in import_helpers.validPseudoKeys, isMedia = !isPseudo && (0, import_useMedia.isMediaKey)(key), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants && key in variants, (inlineProps?.has(key) || process.env.IS_STATIC === "is_static" && inlineWhenUnflattened?.has(key)) && (viewProps[key] = props[key] ?? val), styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || parentStaticConfig?.variants?.[keyInit])) {
-        passDownProp(viewProps, key, val, isMediaOrPseudo), process.env.NODE_ENV === "development" && debug === "verbose" && (consoleGroupCollapsed(` - passing down prop ${key}`), (0, import_log.log)({
+        passDownProp(viewProps, key, val, isMediaOrPseudo), process.env.NODE_ENV === "development" && debug === "verbose" && ((0, import_consoleLog.groupCollapsed)(` - passing down prop ${key}`), (0, import_log.log)({
           val,
           after: {
             ...viewProps[key]
           }
-        }), console.groupEnd());
+        }), (0, import_consoleLog.groupEnd)());
         return;
       }
       if (isPseudo) {
         if (!val) return;
-        const pseudoStyleObject = getSubStyle(styleState, key, val, styleProps.noClass);
+        const pseudoStyleObject = getSubStyle(styleState, key, val, styleProps.noClass && process.env.IS_STATIC !== "is_static");
         if ((!shouldDoClasses || process.env.IS_STATIC === "is_static") && (pseudos ||= {}, pseudos[key] ||= {}, process.env.IS_STATIC === "is_static")) {
           Object.assign(pseudos[key], pseudoStyleObject);
           return;
@@ -322,26 +310,23 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
         if (!descriptor) return;
         if (shouldDoClasses && !isExit) {
           const pseudoStyles = (0, import_getCSSStylesAtomic.getStyleAtomic)(pseudoStyleObject, descriptor);
-          process.env.NODE_ENV === "development" && debug === "verbose" && (consoleGroupCollapsed("pseudo (classes)", key), (0, import_log.log)({
-            pseudoStyleObject,
-            pseudoStyles
-          }), console.groupEnd());
+          process.env.NODE_ENV === "development" && debug === "verbose" && console.info("pseudo:", key, pseudoStyleObject, pseudoStyles);
           for (const psuedoStyle of pseudoStyles) {
             const fullKey = `${psuedoStyle[import_helpers.StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`;
-            fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle), mergeClassName(transforms, classNames, fullKey, psuedoStyle[import_helpers.StyleObjectIdentifier], isMediaOrPseudo, !0));
+            fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle), classNames[fullKey] = psuedoStyle[import_helpers.StyleObjectIdentifier]);
           }
         }
         if (!shouldDoClasses || isExit || isEnter) {
           const descriptorKey = descriptor.stateKey || descriptor.name;
           let isDisabled = componentState[descriptorKey] === !1;
-          isExit && (isDisabled = !styleProps.isExiting), isEnter && componentState.unmounted === !1 && (isDisabled = !0), process.env.NODE_ENV === "development" && debug === "verbose" && (consoleGroupCollapsed("pseudo", key, {
+          isExit && (isDisabled = !styleProps.isExiting), isEnter && componentState.unmounted === !1 && (isDisabled = !0), process.env.NODE_ENV === "development" && debug === "verbose" && ((0, import_consoleLog.groupCollapsed)("pseudo", key, {
             isDisabled
           }), (0, import_log.log)({
             pseudoStyleObject,
             isDisabled,
             descriptor,
             componentState
-          }), console.groupEnd());
+          }), (0, import_consoleLog.groupEnd)());
           const importance = descriptor.priority;
           for (const pkey in pseudoStyleObject) {
             const val2 = pseudoStyleObject[pkey];
@@ -393,7 +378,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
             process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("\u{1F4FA} media style:", out);
             const subKey = isSubStyle ? style[2] : "",
               fullKey = `${style[import_helpers.StyleObjectProperty]}${subKey}${PROP_SPLIT}${mediaKeyShort}${style[import_helpers.StyleObjectPseudo] || ""}`;
-            fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, out), mergeClassName(transforms, classNames, fullKey, out[import_helpers.StyleObjectIdentifier], !0, !0));
+            fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, out), classNames[fullKey] = out[import_helpers.StyleObjectIdentifier]);
           }
         } else {
           let mergeMediaStyle = function (key2, val2) {
@@ -467,18 +452,14 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       try {
         (0, import_log.log)(" \u2714\uFE0F expand complete", keyInit), (0, import_log.log)("style", {
           ...styleState.style
-        }), (0, import_log.log)("transforms", {
-          ...transforms
         }), (0, import_log.log)("viewProps", {
           ...viewProps
         });
       } catch {}
-      console.groupEnd();
+      (0, import_consoleLog.groupEnd)();
     }
   }
-  if (process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-propsend`, !(styleProps.noNormalize === !1) && (styleState.style && ((0, import_expandStyles.fixStyles)(styleState.style), !styleProps.noExpand && !styleProps.noMergeStyle && import_constants.isWeb && !isReactNative && (0, import_getCSSStylesAtomic.styleToCSS)(styleState.style)), styleState.flatTransforms && (styleState.style ||= {}, Object.entries(styleState.flatTransforms).sort(([a], [b]) => (0, import_sortString.sortString)(a, b)).forEach(([key, val]) => {
-    mergeTransform(styleState.style, key, val, !0);
-  })), parentSplitStyles)) {
+  if (process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-propsend`, !(styleProps.noNormalize === !1) && (styleState.style && ((0, import_expandStyles.fixStyles)(styleState.style), !styleProps.noExpand && !styleProps.noMergeStyle && import_constants.isWeb && !isReactNative && (0, import_getCSSStylesAtomic.styleToCSS)(styleState.style)), styleState.flatTransforms && (styleState.style ||= {}, mergeFlatTransforms(styleState.style, styleState.flatTransforms)), parentSplitStyles)) {
     if (shouldDoClasses) for (const key in parentSplitStyles.classNames) {
       const val = parentSplitStyles.classNames[key];
       styleState.style && key in styleState.style || key in classNames || (classNames[key] = val);
@@ -494,22 +475,9 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
         const [key, value, identifier] = atomicStyle,
           isAnimatedAndAnimateOnly = styleProps.isAnimated && styleProps.noClass && props.animateOnly?.includes(key),
           nonAnimatedAnimateOnly = !isAnimatedAndAnimateOnly && !styleProps.isAnimated && props.animateOnly?.includes(key);
-        isAnimatedAndAnimateOnly ? (retainedStyles ||= {}, retainedStyles[key] = styleState.style[key]) : nonAnimatedAnimateOnly ? (retainedStyles ||= {}, retainedStyles[key] = value, shouldRetain = !0) : (addStyleToInsertRules(rulesToInsert, atomicStyle), mergeClassName(transforms, classNames, key, identifier, !1, !0));
-      }
-      process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupEnd(), consoleGroupCollapsed("\u{1F539} getSplitStyles final style object"), console.info(styleState.style), console.info("retainedStyles", retainedStyles), console.groupEnd()), (shouldRetain || process.env.IS_STATIC !== "is_static") && (styleState.style = retainedStyles || {});
-    }
-    if (transforms) for (const namespace in transforms) {
-      if (!transforms[namespace]) {
-        process.env.NODE_ENV === "development" && (0, import_log.log)("Error no transform", transforms, namespace);
-        continue;
-      }
-      const [hash, val] = transforms[namespace],
-        identifier = `_transform${hash}`;
-      if (import_constants.isClient && !import_insertStyleRule.insertedTransforms[identifier]) {
-        const rule = `.${identifier} { transform: ${val}; }`;
-        addStyleToInsertRules(rulesToInsert, [namespace, val, identifier, void 0, [rule]]);
+        isAnimatedAndAnimateOnly ? (retainedStyles ||= {}, retainedStyles[key] = styleState.style[key]) : nonAnimatedAnimateOnly ? (retainedStyles ||= {}, retainedStyles[key] = value, shouldRetain = !0) : (addStyleToInsertRules(rulesToInsert, atomicStyle), classNames[key] = identifier);
       }
-      classNames[namespace] = identifier;
+      process.env.NODE_ENV === "development" && props.debug === "verbose" && ((0, import_consoleLog.groupEnd)(), (0, import_consoleLog.groupCollapsed)("\u{1F539} getSplitStyles final style object"), console.info(styleState.style), console.info("retainedStyles", retainedStyles), (0, import_consoleLog.groupEnd)()), (shouldRetain || process.env.IS_STATIC !== "is_static") && (styleState.style = retainedStyles || {});
     }
   }
   if (isReactNative) viewProps.tabIndex === 0 && (viewProps.accessible ??= !0);else if (viewProps.tabIndex == null) {
@@ -570,42 +538,40 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     }
   }
   if (process.env.NODE_ENV === "development" && debug === "verbose" && import_isDevTools.isDevTools) {
-    consoleGroupCollapsed("\u{1F539} getSplitStyles ===>");
+    (0, import_consoleLog.groupCollapsed)("\u{1F539} getSplitStyles ===>");
     try {
       const logs = {
         ...result,
         className,
         componentState,
-        transforms,
         viewProps,
         rulesToInsert,
         parentSplitStyles
       };
       for (const key in logs) (0, import_log.log)(key, logs[key]);
     } catch {}
-    console.groupEnd();
+    (0, import_consoleLog.groupEnd)();
   }
   return process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-done`, result;
 };
-function mergeClassName(transforms, classNames, key, val, isMediaOrPseudo = !1, isInsertingNow = !1) {
-  if (val) if (!isInsertingNow && val[0] === "_" && val.startsWith("_transform-")) {
-    const ns = isMediaOrPseudo ? key : "transform";
-    let transform = import_insertStyleRule.insertedTransforms[val];
-    import_constants.isClient && !transform && ((0, import_insertStyleRule.scanAllSheets)(), transform = import_insertStyleRule.insertedTransforms[val], !transform && import_constants.isWeb && val[0] !== "_" && (transform = val)), transforms[ns] ||= ["", ""], transforms[ns][0] += val.replace("_transform", ""), transform && (transforms[ns][1] += transform);
-  } else classNames[key] = val;
+function mergeFlatTransforms(target, flatTransforms) {
+  Object.entries(flatTransforms).sort(([a], [b]) => (0, import_sortString.sortString)(a, b)).forEach(([key, val]) => {
+    mergeTransform(target, key, val, !0);
+  });
 }
 function mergeStyle(styleState, key, val, disableNormalize = !1) {
   const {
-    classNames,
     viewProps,
-    usedKeys,
     styleProps,
     staticConfig
   } = styleState;
-  if (import_constants.isWeb && val?.[0] === "_") classNames[key] = val, usedKeys[key] ||= 1;else if (key in import_helpers.stylePropsTransform) styleState.flatTransforms ||= {}, styleState.flatTransforms[key] = val;else {
+  if (key in import_helpers.stylePropsTransform) styleState.flatTransforms ||= {}, styleState.flatTransforms[key] = val;else {
     const out = import_constants.isWeb && !disableNormalize && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
     // accept is for props not styles
-    staticConfig.accept && key in staticConfig.accept ? viewProps[key] = out : (styleState.style ||= {}, styleState.style[key] = out);
+    staticConfig.accept && key in staticConfig.accept ? viewProps[key] = out : (styleState.style ||= {}, styleState.style[key] =
+    // if you dont do this you'll be passing props.transform arrays directly here and then mutating them
+    // if theres any flatTransforms later, causing issues (mutating props is bad, in strict mode styles get borked)
+    key === "transform" && Array.isArray(out) ? [...out] : out);
   }
 }
 const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
@@ -621,6 +587,13 @@ const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
         skey in import_helpers.validPseudoKeys && (sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)), !avoidMergeTransform && skey in import_helpers.stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
       });
     }
+    if (!avoidMergeTransform) {
+      if (Array.isArray(styleOut.transform)) {
+        const parentTransform = styleState.style?.transform;
+        parentTransform && (styleOut.transform = [...parentTransform, ...styleOut.transform]);
+      }
+      styleState.flatTransforms && mergeFlatTransforms(styleOut, styleState.flatTransforms);
+    }
     return styleProps.noNormalize || (0, import_expandStyles.fixStyles)(styleOut), styleOut;
   },
   useInsertEffectCompat = import_constants.isWeb ? import_react.default.useInsertionEffect || import_constants.useIsomorphicLayoutEffect : () => {},

package/dist/cjs/helpers/getSplitStyles.js

@@ -28,8 +28,7 @@ __export(getSplitStyles_exports, {
   useSplitStyles: () => useSplitStyles
 });
 module.exports = __toCommonJS(getSplitStyles_exports);
-var import_constants = require("@tamagui/constants"), import_helpers = require("@tamagui/helpers"), import_react = __toESM(require("react")), import_config = require("../config"), import_accessibilityDirectMap = require("../constants/accessibilityDirectMap"), import_constants2 = require("../constants/constants"), import_isDevTools = require("../constants/isDevTools"), import_useMedia = require("../hooks/useMedia"), import_createMediaStyle = require("./createMediaStyle"), import_expandStyles = require("./expandStyles"), import_getCSSStylesAtomic = require("./getCSSStylesAtomic"), import_getGroupPropParts = require("./getGroupPropParts"), import_insertStyleRule = require("./insertStyleRule"), import_isActivePlatform = require("./isActivePlatform"), import_isActiveTheme = require("./isActiveTheme"), import_log = require("./log"), import_normalizeValueWithProperty = require("./normalizeValueWithProperty"), import_propMapper = require("./propMapper"), import_pseudoDescriptors = require("./pseudoDescriptors"), import_skipProps = require("./skipProps"), import_sortString = require("./sortString"), import_transformsToString = require("./transformsToString");
-const consoleGroupCollapsed = import_constants.isWeb ? console.groupCollapsed : console.info;
+var import_constants = require("@tamagui/constants"), import_helpers = require("@tamagui/helpers"), import_react = __toESM(require("react")), import_config = require("../config"), import_accessibilityDirectMap = require("../constants/accessibilityDirectMap"), import_constants2 = require("../constants/constants"), import_isDevTools = require("../constants/isDevTools"), import_useMedia = require("../hooks/useMedia"), import_consoleLog = require("./consoleLog"), import_createMediaStyle = require("./createMediaStyle"), import_expandStyles = require("./expandStyles"), import_getCSSStylesAtomic = require("./getCSSStylesAtomic"), import_getGroupPropParts = require("./getGroupPropParts"), import_insertStyleRule = require("./insertStyleRule"), import_isActivePlatform = require("./isActivePlatform"), import_isActiveTheme = require("./isActiveTheme"), import_log = require("./log"), import_normalizeValueWithProperty = require("./normalizeValueWithProperty"), import_propMapper = require("./propMapper"), import_pseudoDescriptors = require("./pseudoDescriptors"), import_skipProps = require("./skipProps"), import_sortString = require("./sortString"), import_transformsToString = require("./transformsToString");
 let conf;
 const PROP_SPLIT = "-";
 function isValidStyleKey(key, validStyles, accept) {
@@ -47,7 +46,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     inlineWhenUnflattened,
     parentStaticConfig,
     acceptsClassName
-  } = staticConfig, viewProps = {}, mediaState = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClass, rulesToInsert = {}, classNames = {}, transforms = {};
+  } = staticConfig, viewProps = {}, mediaState = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClass, rulesToInsert = {}, classNames = {};
   let pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0;
   const validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles);
   process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-setup`;
@@ -73,7 +72,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       }
     }));
   }
-  process.env.NODE_ENV === "development" && debug === "profile" && time`style-state`, process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants.isClient && (consoleGroupCollapsed("getSplitStyles (collapsed)"), (0, import_log.log)({
+  process.env.NODE_ENV === "development" && debug === "profile" && time`style-state`, process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants.isClient && ((0, import_consoleLog.groupCollapsed)("getSplitStyles (collapsed)"), (0, import_log.log)({
     props,
     staticConfig,
     shouldDoClasses,
@@ -82,7 +81,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     componentState,
     styleState,
     theme: { ...theme }
-  }), console.groupEnd());
+  }), (0, import_consoleLog.groupEnd)());
   const { asChild } = props, { accept } = staticConfig, { noSkip, disableExpandShorthands, noExpand } = styleProps, { webContainerType } = conf.settings, parentVariants = parentStaticConfig?.variants;
   for (const keyOg in props) {
     let keyInit = keyOg, valInit = props[keyInit];
@@ -99,7 +98,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
         continue;
       }
     }
-    if (process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd(), disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || asChild && import_constants2.webViewFlexCompatStyles[keyInit] === valInit)
+    if (process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_consoleLog.groupEnd)(), disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || asChild && import_constants2.webViewFlexCompatStyles[keyInit] === valInit)
       continue;
     if (keyInit in import_skipProps.skipProps && !noSkip && !isHOC) {
       if (keyInit === "group") {
@@ -122,15 +121,6 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       keyInit = keyInit.replace("data-", ""), viewProps.dataSet ||= {}, viewProps.dataSet[keyInit] = valInit;
       continue;
     }
-    if (isValidStyleKeyInit && valInitType === "string" && valInit[0] === "_") {
-      const isValidClassName = keyInit in validStyles, isMediaOrPseudo2 = !isValidClassName && // media are flattened for some reason to color-hover keys,
-      // we should probably just leave them in place to avoid extra complexity
-      keyInit.includes(PROP_SPLIT) && validStyles[keyInit.split(PROP_SPLIT)[0]];
-      if (isValidClassName || isMediaOrPseudo2) {
-        shouldDoClasses ? (mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo2), styleState.style && delete styleState.style[keyInit]) : (styleState.style ||= {}, styleState.style[keyInit] = (0, import_normalizeValueWithProperty.reverseMapClassNameToValue)(keyInit, valInit), delete classNames[keyInit]);
-        continue;
-      }
-    }
     if (keyInit === "dataSet") {
       for (const keyInit2 in valInit)
         viewProps[`data-${hyphenate(keyInit2)}`] = valInit[keyInit2];
@@ -211,7 +201,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       continue;
     const shouldPassProp = !isStyleProp && isHOC || // is in parent variants
     isHOC && parentVariants && keyInit in parentVariants || inlineProps?.has(keyInit), parentVariant = parentVariants?.[keyInit], isHOCShouldPassThrough = !!(isHOC && (isValidStyleKeyInit || isMediaOrPseudo || parentVariant || keyInit in import_skipProps.skipProps)), shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
-    if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupEnd(), console.groupEnd(), consoleGroupCollapsed(
+    if (process.env.NODE_ENV === "development" && debug === "verbose" && ((0, import_consoleLog.groupEnd)(), (0, import_consoleLog.groupEnd)(), (0, import_consoleLog.groupCollapsed)(
       `  \u{1F511} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""}`
     ), (0, import_log.log)({ isVariant, valInit, shouldPassProp }), import_constants.isClient && (0, import_log.log)({
       variants,
@@ -228,18 +218,23 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
         viewProps[key] = val;
         return;
       }
-      if (process.env.NODE_ENV === "development" && debug === "verbose" && (consoleGroupCollapsed("  \u{1F4A0} expanded", keyInit, "=>", key), (0, import_log.log)(val), console.groupEnd()), val == null || key in usedKeys) return;
+      if (process.env.NODE_ENV === "development" && debug === "verbose" && ((0, import_consoleLog.groupCollapsed)("  \u{1F4A0} expanded", keyInit, "=>", key), (0, import_log.log)(val), (0, import_consoleLog.groupEnd)()), val == null || key in usedKeys) return;
       if (!isHOC && isValidStyleKey(key, validStyles, accept)) {
         mergeStyle(styleState, key, val);
         return;
       }
       if (isPseudo = key in import_helpers.validPseudoKeys, isMedia = !isPseudo && (0, import_useMedia.isMediaKey)(key), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants && key in variants, (inlineProps?.has(key) || process.env.IS_STATIC === "is_static" && inlineWhenUnflattened?.has(key)) && (viewProps[key] = props[key] ?? val), styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || parentStaticConfig?.variants?.[keyInit])) {
-        passDownProp(viewProps, key, val, isMediaOrPseudo), process.env.NODE_ENV === "development" && debug === "verbose" && (consoleGroupCollapsed(` - passing down prop ${key}`), (0, import_log.log)({ val, after: { ...viewProps[key] } }), console.groupEnd());
+        passDownProp(viewProps, key, val, isMediaOrPseudo), process.env.NODE_ENV === "development" && debug === "verbose" && ((0, import_consoleLog.groupCollapsed)(` - passing down prop ${key}`), (0, import_log.log)({ val, after: { ...viewProps[key] } }), (0, import_consoleLog.groupEnd)());
         return;
       }
       if (isPseudo) {
         if (!val) return;
-        const pseudoStyleObject = getSubStyle(styleState, key, val, styleProps.noClass);
+        const pseudoStyleObject = getSubStyle(
+          styleState,
+          key,
+          val,
+          styleProps.noClass && process.env.IS_STATIC !== "is_static"
+        );
         if ((!shouldDoClasses || process.env.IS_STATIC === "is_static") && (pseudos ||= {}, pseudos[key] ||= {}, process.env.IS_STATIC === "is_static")) {
           Object.assign(pseudos[key], pseudoStyleObject);
           return;
@@ -249,23 +244,16 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
           return;
         if (shouldDoClasses && !isExit) {
           const pseudoStyles = (0, import_getCSSStylesAtomic.getStyleAtomic)(pseudoStyleObject, descriptor);
-          process.env.NODE_ENV === "development" && debug === "verbose" && (consoleGroupCollapsed("pseudo (classes)", key), (0, import_log.log)({ pseudoStyleObject, pseudoStyles }), console.groupEnd());
+          process.env.NODE_ENV === "development" && debug === "verbose" && console.info("pseudo:", key, pseudoStyleObject, pseudoStyles);
           for (const psuedoStyle of pseudoStyles) {
             const fullKey = `${psuedoStyle[import_helpers.StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`;
-            fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle), mergeClassName(
-              transforms,
-              classNames,
-              fullKey,
-              psuedoStyle[import_helpers.StyleObjectIdentifier],
-              isMediaOrPseudo,
-              !0
-            ));
+            fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle), classNames[fullKey] = psuedoStyle[import_helpers.StyleObjectIdentifier]);
           }
         }
         if (!shouldDoClasses || isExit || isEnter) {
           const descriptorKey = descriptor.stateKey || descriptor.name;
           let isDisabled = componentState[descriptorKey] === !1;
-          isExit && (isDisabled = !styleProps.isExiting), isEnter && componentState.unmounted === !1 && (isDisabled = !0), process.env.NODE_ENV === "development" && debug === "verbose" && (consoleGroupCollapsed("pseudo", key, { isDisabled }), (0, import_log.log)({ pseudoStyleObject, isDisabled, descriptor, componentState }), console.groupEnd());
+          isExit && (isDisabled = !styleProps.isExiting), isEnter && componentState.unmounted === !1 && (isDisabled = !0), process.env.NODE_ENV === "development" && debug === "verbose" && ((0, import_consoleLog.groupCollapsed)("pseudo", key, { isDisabled }), (0, import_log.log)({ pseudoStyleObject, isDisabled, descriptor, componentState }), (0, import_consoleLog.groupEnd)());
           const importance = descriptor.priority;
           for (const pkey in pseudoStyleObject) {
             const val2 = pseudoStyleObject[pkey];
@@ -331,14 +319,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
             );
             process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("\u{1F4FA} media style:", out);
             const subKey = isSubStyle ? style[2] : "", fullKey = `${style[import_helpers.StyleObjectProperty]}${subKey}${PROP_SPLIT}${mediaKeyShort}${style[import_helpers.StyleObjectPseudo] || ""}`;
-            fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, out), mergeClassName(
-              transforms,
-              classNames,
-              fullKey,
-              out[import_helpers.StyleObjectIdentifier],
-              !0,
-              !0
-            ));
+            fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, out), classNames[fullKey] = out[import_helpers.StyleObjectIdentifier]);
           }
         } else {
           let mergeMediaStyle = function(key2, val2) {
@@ -420,15 +401,13 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       }
     }), process.env.NODE_ENV === "development" && debug === "verbose") {
       try {
-        (0, import_log.log)(" \u2714\uFE0F expand complete", keyInit), (0, import_log.log)("style", { ...styleState.style }), (0, import_log.log)("transforms", { ...transforms }), (0, import_log.log)("viewProps", { ...viewProps });
+        (0, import_log.log)(" \u2714\uFE0F expand complete", keyInit), (0, import_log.log)("style", { ...styleState.style }), (0, import_log.log)("viewProps", { ...viewProps });
       } catch {
       }
-      console.groupEnd();
+      (0, import_consoleLog.groupEnd)();
     }
   }
-  if (process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-propsend`, !(styleProps.noNormalize === !1) && (styleState.style && ((0, import_expandStyles.fixStyles)(styleState.style), !styleProps.noExpand && !styleProps.noMergeStyle && import_constants.isWeb && !isReactNative && (0, import_getCSSStylesAtomic.styleToCSS)(styleState.style)), styleState.flatTransforms && (styleState.style ||= {}, Object.entries(styleState.flatTransforms).sort(([a], [b]) => (0, import_sortString.sortString)(a, b)).forEach(([key, val]) => {
-    mergeTransform(styleState.style, key, val, !0);
-  })), parentSplitStyles)) {
+  if (process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-propsend`, !(styleProps.noNormalize === !1) && (styleState.style && ((0, import_expandStyles.fixStyles)(styleState.style), !styleProps.noExpand && !styleProps.noMergeStyle && import_constants.isWeb && !isReactNative && (0, import_getCSSStylesAtomic.styleToCSS)(styleState.style)), styleState.flatTransforms && (styleState.style ||= {}, mergeFlatTransforms(styleState.style, styleState.flatTransforms)), parentSplitStyles)) {
     if (shouldDoClasses)
       for (const key in parentSplitStyles.classNames) {
         const val = parentSplitStyles.classNames[key];
@@ -444,29 +423,10 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       const atomic = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(styleState.style);
       for (const atomicStyle of atomic) {
         const [key, value, identifier] = atomicStyle, isAnimatedAndAnimateOnly = styleProps.isAnimated && styleProps.noClass && props.animateOnly?.includes(key), nonAnimatedAnimateOnly = !isAnimatedAndAnimateOnly && !styleProps.isAnimated && props.animateOnly?.includes(key);
-        isAnimatedAndAnimateOnly ? (retainedStyles ||= {}, retainedStyles[key] = styleState.style[key]) : nonAnimatedAnimateOnly ? (retainedStyles ||= {}, retainedStyles[key] = value, shouldRetain = !0) : (addStyleToInsertRules(rulesToInsert, atomicStyle), mergeClassName(transforms, classNames, key, identifier, !1, !0));
+        isAnimatedAndAnimateOnly ? (retainedStyles ||= {}, retainedStyles[key] = styleState.style[key]) : nonAnimatedAnimateOnly ? (retainedStyles ||= {}, retainedStyles[key] = value, shouldRetain = !0) : (addStyleToInsertRules(rulesToInsert, atomicStyle), classNames[key] = identifier);
       }
-      process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupEnd(), consoleGroupCollapsed("\u{1F539} getSplitStyles final style object"), console.info(styleState.style), console.info("retainedStyles", retainedStyles), console.groupEnd()), (shouldRetain || process.env.IS_STATIC !== "is_static") && (styleState.style = retainedStyles || {});
+      process.env.NODE_ENV === "development" && props.debug === "verbose" && ((0, import_consoleLog.groupEnd)(), (0, import_consoleLog.groupCollapsed)("\u{1F539} getSplitStyles final style object"), console.info(styleState.style), console.info("retainedStyles", retainedStyles), (0, import_consoleLog.groupEnd)()), (shouldRetain || process.env.IS_STATIC !== "is_static") && (styleState.style = retainedStyles || {});
     }
-    if (transforms)
-      for (const namespace in transforms) {
-        if (!transforms[namespace]) {
-          process.env.NODE_ENV === "development" && (0, import_log.log)("Error no transform", transforms, namespace);
-          continue;
-        }
-        const [hash, val] = transforms[namespace], identifier = `_transform${hash}`;
-        if (import_constants.isClient && !import_insertStyleRule.insertedTransforms[identifier]) {
-          const rule = `.${identifier} { transform: ${val}; }`;
-          addStyleToInsertRules(rulesToInsert, [
-            namespace,
-            val,
-            identifier,
-            void 0,
-            [rule]
-          ]);
-        }
-        classNames[namespace] = identifier;
-      }
   }
   if (isReactNative)
     viewProps.tabIndex === 0 && (viewProps.accessible ??= !0);
@@ -527,13 +487,12 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     }
   }
   if (process.env.NODE_ENV === "development" && debug === "verbose" && import_isDevTools.isDevTools) {
-    consoleGroupCollapsed("\u{1F539} getSplitStyles ===>");
+    (0, import_consoleLog.groupCollapsed)("\u{1F539} getSplitStyles ===>");
     try {
       const logs = {
         ...result,
         className,
         componentState,
-        transforms,
         viewProps,
         rulesToInsert,
         parentSplitStyles
@@ -542,29 +501,25 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
         (0, import_log.log)(key, logs[key]);
     } catch {
     }
-    console.groupEnd();
+    (0, import_consoleLog.groupEnd)();
   }
   return process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-done`, result;
 };
-function mergeClassName(transforms, classNames, key, val, isMediaOrPseudo = !1, isInsertingNow = !1) {
-  if (val)
-    if (!isInsertingNow && val[0] === "_" && val.startsWith("_transform-")) {
-      const ns = isMediaOrPseudo ? key : "transform";
-      let transform = import_insertStyleRule.insertedTransforms[val];
-      import_constants.isClient && !transform && ((0, import_insertStyleRule.scanAllSheets)(), transform = import_insertStyleRule.insertedTransforms[val], !transform && import_constants.isWeb && val[0] !== "_" && (transform = val)), transforms[ns] ||= ["", ""], transforms[ns][0] += val.replace("_transform", ""), transform && (transforms[ns][1] += transform);
-    } else
-      classNames[key] = val;
+function mergeFlatTransforms(target, flatTransforms) {
+  Object.entries(flatTransforms).sort(([a], [b]) => (0, import_sortString.sortString)(a, b)).forEach(([key, val]) => {
+    mergeTransform(target, key, val, !0);
+  });
 }
 function mergeStyle(styleState, key, val, disableNormalize = !1) {
-  const { classNames, viewProps, usedKeys, styleProps, staticConfig } = styleState;
-  if (import_constants.isWeb && val?.[0] === "_")
-    classNames[key] = val, usedKeys[key] ||= 1;
-  else if (key in import_helpers.stylePropsTransform)
+  const { viewProps, styleProps, staticConfig } = styleState;
+  if (key in import_helpers.stylePropsTransform)
     styleState.flatTransforms ||= {}, styleState.flatTransforms[key] = val;
   else {
     const out = import_constants.isWeb && !disableNormalize && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
     // accept is for props not styles
-    staticConfig.accept && key in staticConfig.accept ? viewProps[key] = out : (styleState.style ||= {}, styleState.style[key] = out);
+    staticConfig.accept && key in staticConfig.accept ? viewProps[key] = out : (styleState.style ||= {}, styleState.style[key] = // if you dont do this you'll be passing props.transform arrays directly here and then mutating them
+    // if theres any flatTransforms later, causing issues (mutating props is bad, in strict mode styles get borked)
+    key === "transform" && Array.isArray(out) ? [...out] : out);
   }
 }
 const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
@@ -575,6 +530,13 @@ const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
       skey in import_helpers.validPseudoKeys && (sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)), !avoidMergeTransform && skey in import_helpers.stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
     });
   }
+  if (!avoidMergeTransform) {
+    if (Array.isArray(styleOut.transform)) {
+      const parentTransform = styleState.style?.transform;
+      parentTransform && (styleOut.transform = [...parentTransform, ...styleOut.transform]);
+    }
+    styleState.flatTransforms && mergeFlatTransforms(styleOut, styleState.flatTransforms);
+  }
   return styleProps.noNormalize || (0, import_expandStyles.fixStyles)(styleOut), styleOut;
 }, useInsertEffectCompat = import_constants.isWeb ? import_react.default.useInsertionEffect || import_constants.useIsomorphicLayoutEffect : () => {
 }, useSplitStyles = (a, b, c, d, e, f, g, h, i, j) => {