@tamagui/web 1.101.0 → 1.101.2

package/dist/esm/helpers/getSplitStyles.mjs

@@ -1,5 +1,5 @@
 import { currentPlatform, isClient, isServer, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { stylePropsText, stylePropsTransform, tokenCategories, validPseudoKeys, validStyles } from "@tamagui/helpers";
+import { StyleObjectIdentifier, StyleObjectProperty, StyleObjectPseudo, StyleObjectRules, stylePropsText, stylePropsTransform, tokenCategories, validPseudoKeys, validStyles } from "@tamagui/helpers";
 import { useInsertionEffect } from "react";
 import { getConfig } from "../config.mjs";
 import { accessibilityDirectMap } from "../constants/accessibilityDirectMap.mjs";
@@ -17,7 +17,6 @@ import { getPropMappedFontFamily, propMapper } from "./propMapper.mjs";
 import { pseudoDescriptors, pseudoPriorities } from "./pseudoDescriptors.mjs";
 import { skipProps } from "./skipProps.mjs";
 import { transformsToString } from "./transformsToString.mjs";
-const IS_STATIC = process.env.IS_STATIC === "is_static";
 let conf;
 const PROP_SPLIT = "-";
 function isValidStyleKey(key, staticConfig) {
@@ -53,9 +52,17 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     pseudoGroups,
     mediaGroups,
     className = props.className || "",
-    mediaStylesSeen = 0;
+    mediaStylesSeen = 0,
+    curPropsState;
   const styleState = {
-    curProps: {},
+    // this should go away, right now we're doing really crazy cumulative props,
+    // as variants are resolved basically we go back and merge the results onto
+    // the curProps, so that each following variant function recieves the current
+    // "styles" with variants expanded. powerful, but i think too fancy
+    // there's some part of the ui kit that depends on it we'd have to find and fix
+    get curProps() {
+      return curPropsState ||= {}, curPropsState;
+    },
     classNames,
     conf,
     props,
@@ -81,24 +88,36 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       ...theme
     }
   }), console.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[keyOg];
-    if (staticConfig.accept && (staticConfig.accept[keyInit] === "style" || staticConfig.accept[keyInit] === "textStyle") && typeof valInit == "object") {
-      const styleObject = getSubStyle(styleState, keyInit, valInit, styleProps.noClassNames);
-      viewProps[keyInit] = styleObject;
-      continue;
+      valInit = props[keyInit];
+    if (accept) {
+      const accepted = accept[keyInit];
+      if ((accepted === "style" || accepted === "textStyle") && valInit && typeof valInit == "object") {
+        viewProps[keyInit] = getSubStyle(styleState, keyInit, valInit, styleProps.noClassNames);
+        continue;
+      }
     }
-    if (process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd(), styleProps.disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || props.asChild && webViewFlexCompatStyles[keyInit] === valInit) continue;
-    if (keyInit in skipProps && !styleProps.noSkip && !isHOC) {
+    if (process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd(), disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || asChild && webViewFlexCompatStyles[keyInit] === valInit) continue;
+    if (keyInit in skipProps && !noSkip && !isHOC) {
       if (keyInit === "group") {
         const identifier = `t_group_${valInit}`,
-          containerType = conf.settings.webContainerType || "inline-size",
-          containerCSS = {
-            identifier,
-            property: "container",
-            rules: [`.${identifier} { container-name: ${valInit}; container-type: ${containerType}; }`]
-          };
+          containerCSS = ["continer", void 0, identifier, void 0, [`.${identifier} { container-name: ${valInit}; container-type: ${webContainerType || "inline-size"}; }`]];
         addStyleToInsertRules(rulesToInsert, containerCSS);
       }
       continue;
@@ -116,11 +135,11 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
         continue;
       }
     }
-    if (valInit !== props[keyInit] && (styleState.curProps[keyInit] = valInit), keyInit === "dataSet") {
+    if (keyInit === "dataSet") {
       for (const keyInit2 in valInit) viewProps[`data-${hyphenate(keyInit2)}`] = valInit[keyInit2];
       continue;
     }
-    if (!styleProps.noExpand) {
+    if (!noExpand) {
       if (keyInit === "disabled" && valInit === !0 && (viewProps["aria-disabled"] = !0, (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") && (viewProps.disabled = !0), !variants?.disabled)) continue;
       if (keyInit === "testID") {
         viewProps[isReactNative ? keyInit : "data-testid"] = valInit;
@@ -191,12 +210,12 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       const name = keyInit.split("-")[1];
       context?.groups.subscribe && !context?.groups.state[name] && (keyInit = keyInit.replace("$group-", "$group-true-"));
     }
-    const isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !styleProps.noExpand || isShorthand;
-    if (isStyleProp && (props.asChild === "except-style" || props.asChild === "except-style-web")) continue;
+    const isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !noExpand || isShorthand;
+    if (isStyleProp && (asChild === "except-style" || asChild === "except-style-web")) continue;
     const shouldPassProp = !isStyleProp ||
       // is in parent variants
-      isHOC && parentStaticConfig?.variants && keyInit in parentStaticConfig.variants || inlineProps?.has(keyInit),
-      parentVariant = parentStaticConfig?.variants?.[keyInit],
+      isHOC && parentVariants && keyInit in parentVariants || inlineProps?.has(keyInit),
+      parentVariant = parentVariants?.[keyInit],
       isHOCShouldPassThrough = !!(isHOC && (isShorthand || isValidStyleKeyInit || isMediaOrPseudo || parentVariant || keyInit in skipProps)),
       shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
     if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupEnd(), console.groupEnd(), console.groupCollapsed(`  \u{1F511} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""}`), log({
@@ -216,7 +235,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd();
       continue;
     }
-    if (!styleProps.noSkip && keyInit in skipProps) {
+    if (!noSkip && keyInit in skipProps) {
       process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd();
       continue;
     }
@@ -265,7 +284,7 @@ current`, {
         key = k, val = v;
       }
       if (val == null || key in usedKeys) continue;
-      if (isPseudo = key in validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && isMediaKey(key), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants && key in variants, (inlineProps?.has(key) || IS_STATIC && inlineWhenUnflattened?.has(key)) && (viewProps[key] = props[key] ?? val), styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || parentStaticConfig?.variants?.[keyInit])) {
+      if (isPseudo = key in validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && 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" && (console.groupCollapsed(` - passing down prop ${key}`), log({
           val,
           after: {
@@ -281,7 +300,7 @@ current`, {
           isEnter = key === "enterStyle",
           isExit = key === "exitStyle";
         if (!descriptor) continue;
-        if ((!shouldDoClasses || IS_STATIC) && (pseudos ||= {}, pseudos[key] ||= {}, IS_STATIC)) {
+        if ((!shouldDoClasses || process.env.IS_STATIC === "is_static") && (pseudos ||= {}, pseudos[key] ||= {}, process.env.IS_STATIC === "is_static")) {
           Object.assign(pseudos[key], pseudoStyleObject);
           continue;
         }
@@ -292,8 +311,8 @@ current`, {
             pseudoStyles
           }), console.groupEnd());
           for (const psuedoStyle of pseudoStyles) {
-            const fullKey = `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}`;
-            fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle), mergeClassName(transforms, classNames, fullKey, psuedoStyle.identifier, isMediaOrPseudo, !0));
+            const fullKey = `${psuedoStyle[StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`;
+            fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle), mergeClassName(transforms, classNames, fullKey, psuedoStyle[StyleObjectIdentifier], isMediaOrPseudo, !0));
           }
         }
         if (!shouldDoClasses || isExit || isEnter) {
@@ -333,7 +352,9 @@ current`, {
       }
       if (isMedia) {
         if (!val) continue;
-        if (isMedia === "platform") {
+        const hasSpace = val.space,
+          mediaKeyShort = key.slice(1);
+        if (hasMedia ||= !0, (hasSpace || !shouldDoClasses || styleProps.willBeAnimated) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), isMedia === "platform") {
           const platform = key.slice(10);
           if (
           // supports web, ios, android
@@ -341,18 +362,15 @@ current`, {
           // supports web, native
           platform !== "web") continue;
         }
-        hasMedia ||= !0;
-        const mediaKeyShort = key.slice(1);
-        process.env.NODE_ENV === "development" && debug === "verbose" && log(`  \u{1F4FA} ${key}`, {
+        if (process.env.NODE_ENV === "development" && debug === "verbose" && log(`  \u{1F4FA} ${key}`, {
           key,
           val,
           props,
           shouldDoClasses,
           acceptsClassName,
-          componentState
-        });
-        const hasSpace = val.space;
-        if ((hasSpace || !shouldDoClasses) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), shouldDoClasses) {
+          componentState,
+          mediaState
+        }), shouldDoClasses) {
           const mediaStyle = getSubStyle(styleState, key, val, !1);
           if (hasSpace && (delete mediaStyle.space, mediaState[mediaKeyShort])) {
             const importance = getMediaImportanceIfMoreImportant(mediaKeyShort, "space", usedKeys, !0);
@@ -364,14 +382,20 @@ current`, {
           for (const style of mediaStyles) {
             const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig, isMedia, !1, priority);
             process.env.NODE_ENV === "development" && debug === "verbose" && log("\u{1F4FA} media style:", out);
-            const fullKey = `${style.property}${PROP_SPLIT}${mediaKeyShort}${style.pseudo || ""}`;
-            fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, out), mergeClassName(transforms, classNames, fullKey, out.identifier, !0, !0));
+            const fullKey = `${style[StyleObjectProperty]}${PROP_SPLIT}${mediaKeyShort}${style[StyleObjectPseudo] || ""}`;
+            fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, out), mergeClassName(transforms, classNames, fullKey, out[StyleObjectIdentifier], !0, !0));
           }
         } else {
-          const mediaStyle = getSubStyle(styleState, key, val, !0),
-            isThemeMedia = isMedia === "theme",
+          const isThemeMedia = isMedia === "theme",
             isGroupMedia = isMedia === "group";
-          if (!isThemeMedia && !(isMedia === "platform") && !isGroupMedia && !mediaState[mediaKeyShort]) continue;
+          if (!isThemeMedia && !(isMedia === "platform") && !isGroupMedia) {
+            if (!mediaState[mediaKeyShort]) {
+              process.env.NODE_ENV === "development" && debug === "verbose" && log(`  \u{1F4FA} \u274C DISABLED ${mediaKeyShort}`);
+              continue;
+            }
+            process.env.NODE_ENV === "development" && debug === "verbose" && log(`  \u{1F4FA} \u2705 ENABLED ${mediaKeyShort}`);
+          }
+          const mediaStyle = getSubStyle(styleState, key, val, !0);
           let importanceBump = 0;
           if (isThemeMedia) {
             dynamicThemeAccess = !0;
@@ -434,7 +458,7 @@ current`, {
       console.groupEnd();
     }
   }
-  if (!(styleProps.noNormalize === !1) && (styleState.style && (fixStyles(styleState.style), isWeb && !staticConfig.isReactNative && styleToCSS(styleState.style)), styleState.flatTransforms && (styleState.style ||= {}, Object.entries(styleState.flatTransforms).sort(([a], [b]) => a.localeCompare(b)).forEach(([key, val]) => {
+  if (!(styleProps.noNormalize === !1) && (styleState.style && (fixStyles(styleState.style), isWeb && !isReactNative && styleToCSS(styleState.style)), styleState.flatTransforms && (styleState.style ||= {}, Object.entries(styleState.flatTransforms).sort(([a], [b]) => a.localeCompare(b)).forEach(([key, val]) => {
     mergeTransform(styleState.style, key, val, !0);
   })), parentSplitStyles)) {
     if (shouldDoClasses) for (const key in parentSplitStyles.classNames) {
@@ -449,12 +473,12 @@ current`, {
     if (!styleState.style.$$css) {
       const atomic = getStylesAtomic(styleState.style);
       for (const atomicStyle of atomic) {
-        const key = atomicStyle.property,
+        const [key, value, identifier] = atomicStyle,
           isAnimatedAndAnimateOnly = styleProps.isAnimated && styleProps.noClassNames && (!props.animateOnly || props.animateOnly.includes(key)),
           nonAnimatedAnimateOnly = !isAnimatedAndAnimateOnly && !styleProps.isAnimated && props.animateOnly?.includes(key);
-        isAnimatedAndAnimateOnly ? (retainedStyles ||= {}, retainedStyles[key] = styleState.style[key]) : nonAnimatedAnimateOnly ? (retainedStyles ||= {}, retainedStyles[key] = atomicStyle.value, shouldRetain = !0) : (addStyleToInsertRules(rulesToInsert, atomicStyle), mergeClassName(transforms, classNames, key, atomicStyle.identifier, !1, !0));
+        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(), console.groupCollapsed("\u{1F539} getSplitStyles final style object"), console.info(styleState.style), console.groupEnd()), (shouldRetain || !IS_STATIC) && (styleState.style = retainedStyles || {});
+      process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupEnd(), console.groupCollapsed("\u{1F539} getSplitStyles final style object"), console.info(styleState.style), console.groupEnd()), (shouldRetain || process.env.IS_STATIC !== "is_static") && (styleState.style = retainedStyles || {});
     }
     if (transforms) for (const namespace in transforms) {
       if (!transforms[namespace]) {
@@ -465,11 +489,7 @@ current`, {
         identifier = `_transform${hash}`;
       if (isClient && !insertedTransforms[identifier]) {
         const rule = `.${identifier} { transform: ${val}; }`;
-        addStyleToInsertRules(rulesToInsert, {
-          identifier,
-          rules: [rule],
-          property: namespace
-        });
+        addStyleToInsertRules(rulesToInsert, [namespace, val, identifier, void 0, [rule]]);
       }
       classNames[namespace] = identifier;
     }
@@ -496,19 +516,18 @@ current`, {
     }
   }
   const result = {
-      space,
-      hasMedia,
-      fontFamily: styleState.fontFamily,
-      viewProps,
-      style: styleState.style,
-      pseudos,
-      classNames,
-      rulesToInsert,
-      dynamicThemeAccess,
-      pseudoGroups,
-      mediaGroups
-    },
-    asChild = props.asChild;
+    space,
+    hasMedia,
+    fontFamily: styleState.fontFamily,
+    viewProps,
+    style: styleState.style,
+    pseudos,
+    classNames,
+    rulesToInsert,
+    dynamicThemeAccess,
+    pseudoGroups,
+    mediaGroups
+  };
   if (!(asChild === "except-style" || asChild === "except-style-web")) {
     const style = styleState.style;
     {
@@ -597,7 +616,7 @@ const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
     }, [res.rulesToInsert]), res;
   };
 function addStyleToInsertRules(rulesToInsert, styleObject) {
-  shouldInsertStyleRules(styleObject.identifier) && (process.env.TAMAGUI_REACT_19 || updateRules(styleObject.identifier, styleObject.rules), rulesToInsert.push(styleObject));
+  shouldInsertStyleRules(styleObject[StyleObjectIdentifier]) && (process.env.TAMAGUI_REACT_19 || updateRules(styleObject[StyleObjectIdentifier], styleObject[StyleObjectRules]), rulesToInsert.push(styleObject));
 }
 function processIDRefList(idRefList) {
   return Array.isArray(idRefList) ? idRefList.join(" ") : idRefList;

package/dist/esm/helpers/getSplitStyles.native.js

@@ -1,5 +1,5 @@
 import { currentPlatform, isAndroid, isClient, isServer, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { stylePropsText, stylePropsTransform, tokenCategories, validPseudoKeys, validStyles } from "@tamagui/helpers";
+import { StyleObjectIdentifier, StyleObjectProperty, StyleObjectPseudo, stylePropsText, stylePropsTransform, tokenCategories, validPseudoKeys, validStyles } from "@tamagui/helpers";
 import { useInsertionEffect } from "react";
 import { getConfig, getFont } from "../config";
 import "../constants/accessibilityDirectMap";
@@ -96,15 +96,22 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
   }
 }
-var IS_STATIC = process.env.IS_STATIC === "is_static", conf, PROP_SPLIT = "-";
+var conf, PROP_SPLIT = "-";
 function isValidStyleKey(key, staticConfig) {
   var _staticConfig_accept, validStyleProps = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStyles);
   return validStyleProps[key] || ((_staticConfig_accept = staticConfig.accept) === null || _staticConfig_accept === void 0 ? void 0 : _staticConfig_accept[key]);
 }
 var getSplitStyles = function(props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug, skipThemeTokenResolution) {
   conf = conf || getConfig(), isWeb && styleProps.isAnimated && conf.animations.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
-  var shorthands = conf.shorthands, isHOC = staticConfig.isHOC, isText = staticConfig.isText, isInput = staticConfig.isInput, variants = staticConfig.variants, isReactNative = staticConfig.isReactNative, inlineProps = staticConfig.inlineProps, inlineWhenUnflattened = staticConfig.inlineWhenUnflattened, parentStaticConfig = staticConfig.parentStaticConfig, acceptsClassName = staticConfig.acceptsClassName, viewProps = {}, mediaState = styleProps.mediaState || globalMediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && isWeb && !styleProps.noClassNames, rulesToInsert = void 0, classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, styleState = {
-    curProps: {},
+  var shorthands = conf.shorthands, isHOC = staticConfig.isHOC, isText = staticConfig.isText, isInput = staticConfig.isInput, variants = staticConfig.variants, isReactNative = staticConfig.isReactNative, inlineProps = staticConfig.inlineProps, inlineWhenUnflattened = staticConfig.inlineWhenUnflattened, parentStaticConfig = staticConfig.parentStaticConfig, acceptsClassName = staticConfig.acceptsClassName, viewProps = {}, mediaState = styleProps.mediaState || globalMediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && isWeb && !styleProps.noClassNames, rulesToInsert = void 0, classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, curPropsState, styleState = {
+    // this should go away, right now we're doing really crazy cumulative props,
+    // as variants are resolved basically we go back and merge the results onto
+    // the curProps, so that each following variant function recieves the current
+    // "styles" with variants expanded. powerful, but i think too fancy
+    // there's some part of the ui kit that depends on it we'd have to find and fix
+    get curProps() {
+      return curPropsState || (curPropsState = {}), curPropsState;
+    },
     classNames,
     conf,
     props,
@@ -128,15 +135,18 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
     styleState,
     theme: _object_spread({}, theme)
   }), console.groupEnd());
+  var asChild = props.asChild, accept = staticConfig.accept, noSkip = styleProps.noSkip, disableExpandShorthands = styleProps.disableExpandShorthands, noExpand = styleProps.noExpand, webContainerType = conf.settings.webContainerType, parentVariants = parentStaticConfig == null ? void 0 : parentStaticConfig.variants;
   for (var keyOg in props) {
-    var _parentStaticConfig_variants, keyInit = keyOg, valInit = props[keyOg];
-    if (staticConfig.accept && (staticConfig.accept[keyInit] === "style" || staticConfig.accept[keyInit] === "textStyle") && typeof valInit == "object") {
-      var styleObject = getSubStyle(styleState, keyInit, valInit, styleProps.noClassNames);
-      viewProps[keyInit] = styleObject;
-      continue;
+    var keyInit = keyOg, valInit = props[keyInit];
+    if (accept) {
+      var accepted = accept[keyInit];
+      if ((accepted === "style" || accepted === "textStyle") && valInit && typeof valInit == "object") {
+        viewProps[keyInit] = getSubStyle(styleState, keyInit, valInit, styleProps.noClassNames);
+        continue;
+      }
     }
-    if (process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd(), styleProps.disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit !== "className" && !(keyInit in usedKeys)) {
-      if (keyInit in skipProps && !styleProps.noSkip && !isHOC) {
+    if (process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd(), disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit !== "className" && !(keyInit in usedKeys)) {
+      if (keyInit in skipProps && !noSkip && !isHOC) {
         if (keyInit === "group" && 0)
           var identifier, containerType, containerCSS;
         continue;
@@ -147,7 +157,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
         if ((isValidClassName || isMediaOrPseudo) && !shouldDoClasses)
           var _styleState;
       }
-      if (valInit !== props[keyInit] && (styleState.curProps[keyInit] = valInit), !isValidStyleKeyInit) {
+      if (!isValidStyleKeyInit) {
         if (!isAndroid && keyInit === "elevationAndroid")
           continue;
         if (keyInit === "userSelect")
@@ -160,17 +170,17 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
           viewProps["data-".concat(hyphenate(keyInit1))] = valInit[keyInit1];
         continue;
       }
-      if (0 && !styleProps.noExpand)
+      if (0 && !noExpand)
         var didUseKeyInit;
       var isShorthand = keyInit in shorthands, isVariant = !isValidStyleKeyInit && variants && keyInit in variants, isStyleLikeKey = isShorthand || isValidStyleKeyInit || isVariant, isPseudo = keyInit in validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo && isMediaKey(keyInit), isMediaOrPseudo1 = !!(isMedia || isPseudo);
       if (isMediaOrPseudo1 && keyInit.startsWith("$group-")) {
         var name = keyInit.split("-")[1];
         context != null && context.groups.subscribe && !(context != null && context.groups.state[name]) && (keyInit = keyInit.replace("$group-", "$group-true-"));
       }
-      var isStyleProp = isValidStyleKeyInit || isMediaOrPseudo1 || isVariant && !styleProps.noExpand || isShorthand;
-      if (!(isStyleProp && (props.asChild === "except-style" || props.asChild === "except-style-web"))) {
+      var isStyleProp = isValidStyleKeyInit || isMediaOrPseudo1 || isVariant && !noExpand || isShorthand;
+      if (!(isStyleProp && (asChild === "except-style" || asChild === "except-style-web"))) {
         var shouldPassProp = !isStyleProp || // is in parent variants
-        isHOC && (parentStaticConfig == null ? void 0 : parentStaticConfig.variants) && keyInit in parentStaticConfig.variants || (inlineProps == null ? void 0 : inlineProps.has(keyInit)), parentVariant = parentStaticConfig == null || (_parentStaticConfig_variants = parentStaticConfig.variants) === null || _parentStaticConfig_variants === void 0 ? void 0 : _parentStaticConfig_variants[keyInit], isHOCShouldPassThrough = !!(isHOC && (isShorthand || isValidStyleKeyInit || isMediaOrPseudo1 || parentVariant || keyInit in skipProps)), shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
+        isHOC && parentVariants && keyInit in parentVariants || (inlineProps == null ? void 0 : inlineProps.has(keyInit)), parentVariant = parentVariants == null ? void 0 : parentVariants[keyInit], isHOCShouldPassThrough = !!(isHOC && (isShorthand || isValidStyleKeyInit || isMediaOrPseudo1 || parentVariant || keyInit in skipProps)), shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
         if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupEnd(), console.groupEnd(), console.groupCollapsed("  \u{1F511} ".concat(keyOg).concat(keyInit !== keyOg ? " (shorthand for ".concat(keyInit, ")") : "", " ").concat(shouldPassThrough ? "(pass)" : "")), log({
           isVariant,
           valInit,
@@ -186,7 +196,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
           process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd();
           continue;
         }
-        if (!styleProps.noSkip && keyInit in skipProps) {
+        if (!noSkip && keyInit in skipProps) {
           process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd();
           continue;
         }
@@ -219,17 +229,17 @@ current`, _object_spread({}, styleState.style)));
           console.groupEnd();
         }
         for (var key = keyInit, val = valInit, max = expanded ? expanded.length : 1, i = 0; i < max; i++) {
-          var _parentStaticConfig_variants1;
+          var _parentStaticConfig_variants;
           if (expanded) {
             var _expanded_i = _sliced_to_array(expanded[i], 2), k = _expanded_i[0], v = _expanded_i[1];
             key = k, val = v;
           }
           if (val != null && !(key in usedKeys)) {
-            if (isPseudo = key in validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && isMediaKey(key), isMediaOrPseudo1 = !!(isMedia || isPseudo), isVariant = variants && key in variants, inlineProps != null && inlineProps.has(key) || IS_STATIC && (inlineWhenUnflattened != null && inlineWhenUnflattened.has(key))) {
+            if (isPseudo = key in validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && isMediaKey(key), isMediaOrPseudo1 = !!(isMedia || isPseudo), isVariant = variants && key in variants, inlineProps != null && inlineProps.has(key) || process.env.IS_STATIC === "is_static" && (inlineWhenUnflattened != null && inlineWhenUnflattened.has(key))) {
               var _props_key;
               viewProps[key] = (_props_key = props[key]) !== null && _props_key !== void 0 ? _props_key : val;
             }
-            var shouldPassThrough1 = styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo1 || (parentStaticConfig == null || (_parentStaticConfig_variants1 = parentStaticConfig.variants) === null || _parentStaticConfig_variants1 === void 0 ? void 0 : _parentStaticConfig_variants1[keyInit]));
+            var shouldPassThrough1 = styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo1 || (parentStaticConfig == null || (_parentStaticConfig_variants = parentStaticConfig.variants) === null || _parentStaticConfig_variants === void 0 ? void 0 : _parentStaticConfig_variants[keyInit]));
             if (shouldPassThrough1) {
               passDownProp(viewProps, key, val, isMediaOrPseudo1), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(" - passing down prop ".concat(key)), log({
                 val,
@@ -242,9 +252,9 @@ current`, _object_spread({}, styleState.style)));
               var pseudoStyleObject = getSubStyle(styleState, key, val, styleProps.noClassNames), descriptor = pseudoDescriptors[key], isEnter = key === "enterStyle", isExit = key === "exitStyle";
               if (!descriptor)
                 continue;
-              if (!shouldDoClasses || IS_STATIC) {
+              if (!shouldDoClasses || process.env.IS_STATIC === "is_static") {
                 var _pseudos, _key;
-                if (pseudos || (pseudos = {}), (_pseudos = pseudos)[_key = key] || (_pseudos[_key] = {}), IS_STATIC) {
+                if (pseudos || (pseudos = {}), (_pseudos = pseudos)[_key = key] || (_pseudos[_key] = {}), process.env.IS_STATIC === "is_static") {
                   Object.assign(pseudos[key], pseudoStyleObject);
                   continue;
                 }
@@ -258,8 +268,8 @@ current`, _object_spread({}, styleState.style)));
                 var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
                 try {
                   for (var _iterator = pseudoStyles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-                    var psuedoStyle = _step.value, fullKey = "".concat(psuedoStyle.property).concat(PROP_SPLIT).concat(descriptor.name);
-                    fullKey in usedKeys || mergeClassName(transforms, classNames, fullKey, psuedoStyle.identifier, isMediaOrPseudo1, !0);
+                    var psuedoStyle = _step.value, fullKey = "".concat(psuedoStyle[StyleObjectProperty]).concat(PROP_SPLIT).concat(descriptor.name);
+                    fullKey in usedKeys || mergeClassName(transforms, classNames, fullKey, psuedoStyle[StyleObjectIdentifier], isMediaOrPseudo1, !0);
                   }
                 } catch (err) {
                   _didIteratorError = !0, _iteratorError = err;
@@ -312,7 +322,8 @@ current`, _object_spread({}, styleState.style)));
             }
             if (isMedia) {
               if (!val) continue;
-              if (isMedia === "platform") {
+              var hasSpace = val.space, mediaKeyShort = key.slice(1);
+              if (hasMedia || (hasMedia = !0), (hasSpace || !shouldDoClasses || styleProps.willBeAnimated) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), isMedia === "platform") {
                 var platform = key.slice(10);
                 if (
                   // supports web, ios, android
@@ -321,18 +332,15 @@ current`, _object_spread({}, styleState.style)));
                 )
                   continue;
               }
-              hasMedia || (hasMedia = !0);
-              var mediaKeyShort = key.slice(1);
-              process.env.NODE_ENV === "development" && debug === "verbose" && log("  \u{1F4FA} ".concat(key), {
+              if (process.env.NODE_ENV === "development" && debug === "verbose" && log("  \u{1F4FA} ".concat(key), {
                 key,
                 val,
                 props,
                 shouldDoClasses,
                 acceptsClassName,
-                componentState
-              });
-              var hasSpace = val.space;
-              if ((hasSpace || !shouldDoClasses) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), shouldDoClasses) {
+                componentState,
+                mediaState
+              }), shouldDoClasses) {
                 var mediaStyle = getSubStyle(styleState, key, val, !1);
                 if (hasSpace && (delete mediaStyle.space, mediaState[mediaKeyShort])) {
                   var importance1 = getMediaImportanceIfMoreImportant(mediaKeyShort, "space", usedKeys, !0);
@@ -345,8 +353,8 @@ current`, _object_spread({}, styleState.style)));
                   for (var _iterator1 = mediaStyles[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = !0) {
                     var style = _step1.value, out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig, isMedia, !1, priority);
                     process.env.NODE_ENV === "development" && debug === "verbose" && log("\u{1F4FA} media style:", out);
-                    var fullKey1 = "".concat(style.property).concat(PROP_SPLIT).concat(mediaKeyShort).concat(style.pseudo || "");
-                    fullKey1 in usedKeys || mergeClassName(transforms, classNames, fullKey1, out.identifier, !0, !0);
+                    var fullKey1 = "".concat(style[StyleObjectProperty]).concat(PROP_SPLIT).concat(mediaKeyShort).concat(style[StyleObjectPseudo] || "");
+                    fullKey1 in usedKeys || mergeClassName(transforms, classNames, fullKey1, out[StyleObjectIdentifier], !0, !0);
                   }
                 } catch (err) {
                   _didIteratorError1 = !0, _iteratorError1 = err;
@@ -359,10 +367,15 @@ current`, _object_spread({}, styleState.style)));
                   }
                 }
               } else {
-                var mediaStyle1 = getSubStyle(styleState, key, val, !0), isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
-                if (!isThemeMedia && !isPlatformMedia && !isGroupMedia && !mediaState[mediaKeyShort])
-                  continue;
-                var importanceBump = 0;
+                var isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
+                if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
+                  if (!mediaState[mediaKeyShort]) {
+                    process.env.NODE_ENV === "development" && debug === "verbose" && log("  \u{1F4FA} \u274C DISABLED ".concat(mediaKeyShort));
+                    continue;
+                  }
+                  process.env.NODE_ENV === "development" && debug === "verbose" && log("  \u{1F4FA} \u2705 ENABLED ".concat(mediaKeyShort));
+                }
+                var mediaStyle1 = getSubStyle(styleState, key, val, !0), importanceBump = 0;
                 if (isThemeMedia) {
                   dynamicThemeAccess = !0;
                   var mediaThemeName = mediaKeyShort.slice(6);
@@ -428,7 +441,7 @@ current`, _object_spread({}, styleState.style)));
   }
   var avoidNormalize = styleProps.noNormalize === !1;
   if (!avoidNormalize) {
-    if (styleState.style && (fixStyles(styleState.style), isWeb && !staticConfig.isReactNative && styleToCSS(styleState.style)), styleState.flatTransforms) {
+    if (styleState.style && (fixStyles(styleState.style), isWeb && !isReactNative && styleToCSS(styleState.style)), styleState.flatTransforms) {
       var _styleState2;
       (_styleState2 = styleState).style || (_styleState2.style = {}), Object.entries(styleState.flatTransforms).sort(function(param, param1) {
         var _param = _sliced_to_array(param, 1), a = _param[0], _param1 = _sliced_to_array(param1, 1), b = _param1[0];
@@ -458,7 +471,7 @@ current`, _object_spread({}, styleState.style)));
         var atomic, _iteratorNormalCompletion2, _didIteratorError2, _iteratorError2;
         try {
           for (var _iterator2, _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = !0)
-            var atomicStyle, _props_animateOnly, key4, isAnimatedAndAnimateOnly, nonAnimatedAnimateOnly;
+            var atomicStyle, _props_animateOnly, _atomicStyle, key4, value, identifier1, isAnimatedAndAnimateOnly, nonAnimatedAnimateOnly;
         } catch (err) {
         } finally {
           try {
@@ -468,8 +481,8 @@ current`, _object_spread({}, styleState.style)));
       }
       if (transforms)
         for (var namespace in transforms) {
-          var _transforms_namespace, hash, val3, identifier1;
-          if (isClient && !insertedTransforms[identifier1])
+          var _transforms_namespace, hash, val3, identifier2;
+          if (isClient && !insertedTransforms[identifier2])
             var rule;
         }
     }
@@ -512,7 +525,7 @@ current`, _object_spread({}, styleState.style)));
     dynamicThemeAccess,
     pseudoGroups,
     mediaGroups
-  }, asChild = props.asChild, asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
+  }, asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
   if (!asChildExceptStyleLike) {
     var style3 = styleState.style;
     if (0) {