@tamagui/core 1.0.0-beta.153 → 1.0.0-beta.181

package/dist/jsx/ThemeManager.js

@@ -16,9 +16,9 @@ var __privateMethod = (obj, member, method) => {
 var _getClassName, getClassName_fn;
 import { createContext } from "react";
 import { getThemes } from "./conf";
-import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from "./static";
+import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from "./constants/constants";
 class ThemeManager {
-  constructor(name = null, theme = null, parentManager = null) {
+  constructor(name = "", theme = null, parentManager = null) {
     this.name = name;
     this.theme = theme;
     this.parentManager = parentManager;
@@ -76,7 +76,7 @@ class ThemeManager {
       return false;
     }
     this.className = className || null;
-    this.name = name || null;
+    this.name = name || "";
     this.theme = theme;
     this.notifyListeners();
     return true;
@@ -85,10 +85,14 @@ class ThemeManager {
     const { themes = getThemes(), name, componentName } = opts;
     if (!name) {
       if (componentName) {
-        const name2 = `${this.name}_${componentName}`;
-        const theme2 = themes[name2];
-        if (theme2) {
-          return { name: name2, theme: theme2, className: __privateMethod(this, _getClassName, getClassName_fn).call(this, name2) };
+        const names = [
+          `${this.name}_${componentName}`,
+          `${withoutComponentName(this.name)}_${componentName}`
+        ];
+        for (const name2 of names) {
+          if (name2 in themes) {
+            return { name: name2, theme: themes[name2], className: __privateMethod(this, _getClassName, getClassName_fn).call(this, name2) };
+          }
         }
       }
       return {
@@ -113,9 +117,14 @@ class ThemeManager {
       parentName = parentName.slice(0, parentName.lastIndexOf(THEME_NAME_SEPARATOR));
     }
     if (componentName) {
-      const componentThemeName = `${nextName}_${componentName}`;
-      if (componentThemeName in themes) {
-        nextName = componentThemeName;
+      const names = [
+        `${nextName}_${componentName}`,
+        `${withoutComponentName(nextName)}_${componentName}`
+      ];
+      for (const name2 of names) {
+        if (name2 in themes) {
+          nextName = name2;
+        }
       }
     }
     let theme = themes[nextName];
@@ -123,7 +132,7 @@ class ThemeManager {
       theme = themes[`light_${nextName}`];
     }
     if (process.env.NODE_ENV === "development" && props && props["debug"]) {
-      console.log("getNextTheme", { opts, nextName, parentName }, this);
+      console.log("getNextTheme", { name: opts.name, nextName, parentName });
     }
     return {
       name: nextName,
@@ -169,6 +178,7 @@ getClassName_fn = /* @__PURE__ */ __name(function(name) {
 }, "#getClassName");
 const ThemeManagerContext = createContext(null);
 const emptyManager = new ThemeManager();
+const withoutComponentName = /* @__PURE__ */ __name((name) => name.replace(/\_[A-Z][a-z]+$/, ""), "withoutComponentName");
 export {
   ThemeManager,
   ThemeManagerContext,

package/dist/jsx/conf.js

@@ -21,7 +21,6 @@ const onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
     configListeners.add(cb);
   }
   if (!globalThis["Tamagui"]) {
-    Tamagui.config = conf;
     globalThis["Tamagui"] = Tamagui;
   }
 }, "onConfiguredOnce");

package/dist/jsx/createComponent.js

@@ -44,33 +44,37 @@ if (typeof document !== "undefined") {
     mouseUps.clear();
   });
 }
-function createComponent(configIn) {
-  let staticConfig;
-  if ("parsed" in configIn) {
-    staticConfig = configIn;
-  } else {
-    staticConfig = parseStaticConfig(configIn);
+function mergeShorthands({ defaultProps }, { shorthands }) {
+  for (const key in defaultProps) {
+    defaultProps[shorthands[key] || key] = defaultProps[key];
   }
-  const { Component, validStyles, isText, isZStack, componentName } = staticConfig;
-  const componentClassName = `is_${componentName}`;
-  const validStyleProps = validStyles || stylePropsView;
+}
+__name(mergeShorthands, "mergeShorthands");
+function createComponent(configIn, ParentComponent) {
+  const staticConfig = (() => {
+    const config = extendStaticConfig(configIn, ParentComponent);
+    if ("parsed" in config) {
+      return config;
+    } else {
+      return parseStaticConfig(config);
+    }
+  })();
+  const componentClassName = `is_${staticConfig.componentName}`;
   let tamaguiConfig;
   let AnimatedText;
   let AnimatedView;
   let avoidClasses = true;
-  let defaultPseudos = {};
   let defaultNativeStyle;
-  let defaultNativeStyleSheet = null;
-  let defaultsClassName = null;
+  let defaultNativeStyleSheet;
   let initialTheme;
-  let defaultSplitStyleResult = null;
+  let initialSplitStyles;
   function addPseudoToStyles(styles, name, pseudos) {
     const pseudoStyle = pseudos[name];
     const shouldNestObject = isWeb && name !== "enterStyle" && name !== "exitStyle";
     if (pseudoStyle) {
       styles.push(shouldNestObject ? { [name]: pseudoStyle } : pseudoStyle);
     }
-    const defaultPseudoStyle = defaultPseudos[name];
+    const defaultPseudoStyle = initialSplitStyles.pseudos[name];
     if (defaultPseudoStyle) {
       styles.push(shouldNestObject ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
     }
@@ -78,20 +82,21 @@ function createComponent(configIn) {
   __name(addPseudoToStyles, "addPseudoToStyles");
   const component = forwardRef((props, forwardedRef) => {
     var _a, _b, _c, _d;
+    const { Component, componentName, isText, isZStack } = staticConfig;
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.warn(componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
+        console.warn(staticConfig.componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
         console.log("props in:", props);
         if (props["debug"] === "break")
           debugger;
       }
     }
     const forceUpdate = useForceUpdate();
-    const theme = useTheme(props.theme, componentName, props, forceUpdate);
+    const theme = useTheme(props.theme, staticConfig.componentName, props, forceUpdate);
     const [state, set_] = useState(defaultComponentState);
     const setStateShallow = createShallowUpdate(set_);
     const shouldAvoidClasses = !!(props.animation && avoidClasses);
-    const splitStyles = getSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses ? null : defaultsClassName);
+    const splitStyles = getSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses ? null : initialSplitStyles.classNames);
     const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
     const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
@@ -144,6 +149,7 @@ function createComponent(configIn) {
       accessibilityRole,
       collapsable,
       focusable,
+      onClick,
       theme: _themeProp,
       defaultVariants,
       onLayout,
@@ -166,7 +172,7 @@ function createComponent(configIn) {
       };
     }
     useIsomorphicLayoutEffect(() => {
-      if (typeof window !== "undefined") {
+      if (typeof window !== "undefined" && (hasEnterStyle || props.animation)) {
         setStateShallow({
           mounted: true
         });
@@ -176,7 +182,7 @@ function createComponent(configIn) {
         mouseUps.delete(unPress);
         internal.current.isMounted = false;
       };
-    }, [hasEnterStyle]);
+    }, [hasEnterStyle, props.animation]);
     if (nativeID) {
       viewProps.id = nativeID;
     }
@@ -253,7 +259,7 @@ function createComponent(configIn) {
         const className = classList.join(" ");
         if (process.env.NODE_ENV === "development") {
           if (props["debug"]) {
-            console.log("  \xBB className", { isStringElement, pseudos, state, defaultsClassName, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) });
+            console.log("  \xBB className", { isStringElement, pseudos, state, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) });
           }
         }
         viewProps.className = className;
@@ -294,7 +300,8 @@ function createComponent(configIn) {
         viewProps.ref = forwardedRef;
       }
     }
-    const attachPress = !!(pseudos && pseudos.pressStyle || defaultPseudos && defaultPseudos.pressStyle || onPress || onPressOut || onPressIn);
+    const initialPseudos = initialSplitStyles.pseudos;
+    const attachPress = !!(pseudos && pseudos.pressStyle || initialPseudos && initialPseudos.pressStyle || onPress || onPressOut || onPressIn || onClick);
     const isHoverable = isWeb && !isTouchDevice;
     const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
     const pressEventKey = isStringElement ? "onClick" : "onPress";
@@ -358,6 +365,7 @@ function createComponent(configIn) {
         onPress == null ? void 0 : onPress(e);
         unPress();
         onPressOut == null ? void 0 : onPressOut(e);
+        onClick == null ? void 0 : onClick(e);
       } : null
     } : null;
     let childEls = !children ? children : wrapThemeManagerContext(spacedChildren({
@@ -409,7 +417,7 @@ function createComponent(configIn) {
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
         viewProps["debug"] = true;
-        console.log("  \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, state, splitStyles, defaultsClassName, animationStyles, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, defaultSplitStyleResult, ...typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null });
+        console.log("  \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, state, splitStyles, animationStyles, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles, ...typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null });
       }
     }
     if (features.length) {
@@ -420,18 +428,19 @@ function createComponent(configIn) {
     }
     return content;
   });
+  component.displayName = staticConfig.componentName;
   onConfiguredOnce((conf) => {
     var _a, _b, _c, _d;
     if (process.env.IS_STATIC === "is_static") {
       return;
     }
-    const shouldDebug = (_a = staticConfig.defaultProps) == null ? void 0 : _a.debug;
     tamaguiConfig = conf;
-    avoidClasses = !!((_b = tamaguiConfig.animations) == null ? void 0 : _b.avoidClasses);
-    AnimatedText = (_c = tamaguiConfig.animations) == null ? void 0 : _c.Text;
-    AnimatedView = (_d = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _d.View;
+    mergeShorthands(staticConfig, tamaguiConfig);
+    avoidClasses = !!((_a = tamaguiConfig.animations) == null ? void 0 : _a.avoidClasses);
+    AnimatedText = (_b = tamaguiConfig.animations) == null ? void 0 : _b.Text;
+    AnimatedView = (_c = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _c.View;
     initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
-    defaultSplitStyleResult = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
+    initialSplitStyles = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
       mounted: true,
       hover: false,
       press: false,
@@ -439,11 +448,7 @@ function createComponent(configIn) {
       focus: false,
       resolveVariablesAs: "both"
     });
-    const { classNames, pseudos, style, viewProps } = defaultSplitStyleResult;
-    if (isWeb) {
-      defaultsClassName = classNames;
-    }
-    defaultPseudos = pseudos;
+    const { style, viewProps } = initialSplitStyles;
     defaultNativeStyle = {};
     for (const key in style) {
       const v = style[key];
@@ -452,34 +457,41 @@ function createComponent(configIn) {
     defaultNativeStyleSheet = StyleSheet.create({
       base: defaultNativeStyle
     });
-    component.displayName = staticConfig.componentName;
     component.defaultProps = {
       ...viewProps,
       ...component.defaultProps
     };
-    if (process.env.NODE_ENV === "development" && shouldDebug && process.env.IS_STATIC !== "is_static") {
-      console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, { staticConfig, ...defaultSplitStyleResult });
+    if (process.env.NODE_ENV === "development" && ((_d = staticConfig.defaultProps) == null ? void 0 : _d.debug)) {
+      if (process.env.IS_STATIC !== "is_static") {
+        console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
+          staticConfig,
+          initialSplitStyles
+        });
+      }
     }
   });
   let res = component;
   if (configIn.memo) {
     res = memo(res);
   }
-  res["whyDidYouRender"] = true;
   res["staticConfig"] = {
-    validStyles: validStyleProps,
+    validStyles: staticConfig.validStyles || stylePropsView,
     ...staticConfig
   };
-  res["extractable"] = (Component2, conf) => {
-    Component2["staticConfig"] = extendStaticConfig(res, {
+  if (process.env.NODE_ENV === "development") {
+    res["whyDidYouRender"] = true;
+  }
+  res["extractable"] = (Component, conf) => {
+    Component["staticConfig"] = extendStaticConfig({
+      Component,
       ...conf,
       neverFlatten: true,
       defaultProps: {
-        ...Component2.defaultProps,
+        ...Component.defaultProps,
         ...conf == null ? void 0 : conf.defaultProps
       }
-    });
-    return Component2;
+    }, res);
+    return Component;
   };
   return res;
 }
@@ -559,18 +571,20 @@ function spacedChildren({
   return next;
 }
 __name(spacedChildren, "spacedChildren");
-const AbsoluteFill = /* @__PURE__ */ __name((props) => isWeb ? <div style={{
-  position: "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0
-}}>{props.children}</div> : <View style={StyleSheet.absoluteFill}>{props.child}</View>, "AbsoluteFill");
+function AbsoluteFill(props) {
+  return isWeb ? <div style={{
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }}>{props.children}</div> : <View style={StyleSheet.absoluteFill}>{props.child}</View>;
+}
+__name(AbsoluteFill, "AbsoluteFill");
 export {
   AbsoluteFill,
   Spacer,
   createComponent,
-  defaultComponentState,
   mouseUps,
   spacedChildren
 };

package/dist/jsx/helpers/addStylesUsingClassname.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { useInsertionEffect } from "react";
 import { getStylesAtomic } from "./getStylesAtomic";
-import { insertStyleRule } from "./insertStyleRule";
+import { insertStyleRule, updateInsertedCache } from "./insertStyleRule";
 let added = /* @__PURE__ */ new Set();
 function useStylesAsClassname(styles, disable = false, debug = false) {
   if (!useInsertionEffect) {
@@ -14,6 +14,9 @@ function useStylesAsClassname(styles, disable = false, debug = false) {
         insertions.push({ identifier, rule });
       }
     });
+    for (const { identifier, rule } of insertions) {
+      updateInsertedCache(identifier, rule);
+    }
     useInsertionEffect(() => {
       for (const { identifier, rule } of insertions) {
         insertStyleRule(identifier, rule);

package/dist/jsx/helpers/createMediaStyle.js

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

package/dist/jsx/helpers/createPropMapper.js

@@ -37,7 +37,7 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
       console.trace("no conf! err");
       return;
     }
-    let fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
+    const fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
     const variant = variants && variants[key];
     if (variant && value !== void 0) {
       let variantValue = getVariantFunction(variant, key, value);
@@ -110,8 +110,12 @@ const resolveTokens = /* @__PURE__ */ __name((input, conf, theme, fontFamily, re
   }
   return res;
 }, "resolveTokens");
+const fontShorthand = {
+  fontSize: "size",
+  fontWeight: "weight"
+};
 const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed }, theme, fontFamily = "$body", resolveAs) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c;
   let valOrVar;
   let hasSet = false;
   const valueName = value[0] === "$" ? value.slice(1) : value;
@@ -125,19 +129,10 @@ const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed }, theme, fo
         hasSet = true;
         break;
       case "fontSize":
-        valOrVar = ((_b = tokensParsed.font[fontFamily]) == null ? void 0 : _b.size[value]) || value;
-        hasSet = true;
-        break;
       case "lineHeight":
-        valOrVar = ((_c = tokensParsed.font[fontFamily]) == null ? void 0 : _c.lineHeight[value]) || value;
-        hasSet = true;
-        break;
       case "letterSpacing":
-        valOrVar = ((_d = tokensParsed.font[fontFamily]) == null ? void 0 : _d.letterSpacing[value]) || value;
-        hasSet = true;
-        break;
       case "fontWeight":
-        valOrVar = ((_e = tokensParsed.font[fontFamily]) == null ? void 0 : _e.weight[value]) || value;
+        valOrVar = ((_c = (_b = tokensParsed.font[fontFamily]) == null ? void 0 : _b[fontShorthand[key] || key]) == null ? void 0 : _c[value]) || value;
         hasSet = true;
         break;
     }

package/dist/jsx/helpers/extendStaticConfig.js

@@ -2,12 +2,9 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { stylePropsView } from "@tamagui/helpers";
 import { createPropMapper } from "./createPropMapper";
-function extendStaticConfig(parent, config = {}) {
+function extendStaticConfig(config, parent) {
   var _a;
-  if (!parent) {
-    throw new Error("no parent");
-  }
-  if (!("staticConfig" in parent)) {
+  if (!parent || !("staticConfig" in parent)) {
     return parseStaticConfig(config);
   }
   const variants = {
@@ -40,7 +37,9 @@ function extendStaticConfig(parent, config = {}) {
     } : parent.staticConfig.validStyles || stylePropsView,
     defaultProps: {
       ...parent.staticConfig.defaultProps,
-      ...config.defaultProps
+      ...parent.staticConfig.defaultVariants,
+      ...config.defaultProps,
+      ...config.defaultVariants
     }
   });
 }

package/dist/jsx/helpers/fixNativeShadow.native.js

@@ -18,8 +18,8 @@ function fixNativeShadow(props) {
   if ((c[0] === "r" || c[0] === "h") && c[3] === "a") {
     const [_, type, _1, _2, _3, a] = c.match(matchRgbaHsla) || [];
     if (typeof a !== "string") {
-      console.warn("invalid", c, type);
-      return;
+      console.trace("invalid", c, type);
+      throw new Error(`invalid style`);
     }
     props.shadowColor = `${type.replace("a", "")}(${_1},${_2},${_3})`;
     props.shadowOpacity = +a;

package/dist/jsx/helpers/getSplitStyles.js

@@ -7,33 +7,25 @@ import {
   validPseudoKeys,
   validStyles
 } from "@tamagui/helpers";
+import { getConfig } from "../conf";
 import { isWeb } from "../constants/platform";
 import { mediaQueryConfig, mediaState } from "../hooks/useMedia";
 import { createMediaStyle } from "./createMediaStyle";
 import { fixNativeShadow } from "./fixNativeShadow";
 import { getStylesAtomic } from "./getStylesAtomic";
 import { insertStyleRule, insertedTransforms, updateInserted } from "./insertStyleRule";
-const skipKeys = {
+const skipProps = {
   animation: true,
-  animated: true,
-  children: true,
-  key: true,
-  ref: true
+  animateOnly: true,
+  debug: true
 };
-function normalizeStyleObject(style) {
-  var _a, _b;
-  if (typeof style.flex === "number") {
-    const val = style.flex;
-    delete style.flex;
-    style.flexGrow = (_a = style.flexGrow) != null ? _a : val;
-    style.flexShrink = (_b = style.flexShrink) != null ? _b : 1;
-  }
-  if (!isWeb) {
-    fixNativeShadow(style);
-  }
-}
-__name(normalizeStyleObject, "normalizeStyleObject");
+let conf;
 const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames) => {
+  var _a;
+  if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+    console.log("  \xBB getSplitStyles", { props, state, defaultClassNames });
+  }
+  conf = conf || getConfig();
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
   const viewProps = {};
   const style = {};
@@ -50,19 +42,32 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
     if (val.startsWith("_transform-")) {
       const isMediaOrPseudo = key !== "transform";
       const isMedia = isMediaOrPseudo && key[11] === "_";
-      const isPsuedo = isMediaOrPseudo && key[11] === "0";
+      const isPsuedo = isMediaOrPseudo && key[11] === "0" || key.endsWith("Style");
       const namespace = isMedia ? key.split("_")[2] : isPsuedo ? key.split("-")[1] : "transform";
       let transform = insertedTransforms[val];
       if (!transform) {
         updateInserted();
+        transform = insertedTransforms[val];
+      }
+      if (!transform) {
+        if (isWeb && val[0] !== "_") {
+          transform = val;
+        } else {
+          console.log("?", key, val);
+        }
+      }
+      if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+        console.log("  \xBB getSplitStyles mergeClassName transform", { key, val, namespace, transform, insertedTransforms });
       }
-      transform = insertedTransforms[val];
-      if (!transform || transform === "undefined") {
-        console.log("NO TRANSFORM", { key, val, transform });
-        return;
+      if (process.env.NODE_ENV === "development") {
+        if (!transform) {
+          console.log("NO TRANSFORM?", { key, val, transform });
+        }
       }
       transforms[namespace] = transforms[namespace] || ["", ""];
-      transforms[namespace][0] += val.replace("_transform", "");
+      const identifier = val.replace("_transform", "");
+      console.warn("?bug2", key, val, transform, insertedTransforms[val]);
+      transforms[namespace][0] += identifier;
       transforms[namespace][1] += transform;
     } else {
       classNames[key] = val;
@@ -73,6 +78,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
     if (!cur)
       return;
     normalizeStyleObject(cur);
+    if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+      console.log("  \xBB getSplitStyles push", cur, state);
+    }
     if (isWeb && !state.noClassNames) {
       const atomic = getStylesAtomic(cur);
       for (const atomicStyle of atomic) {
@@ -97,11 +105,12 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
   }
   __name(push, "push");
   for (const keyInit in props) {
-    const valInit = props[keyInit];
-    if (skipKeys[keyInit]) {
-      viewProps[keyInit] = valInit;
+    if (skipProps[keyInit]) {
       continue;
     }
+    const valInit = props[keyInit];
+    let isMedia = keyInit[0] === "$";
+    let isPseudo = validPseudoKeys[keyInit];
     if (keyInit === "className" || validStyleProps[keyInit] && valInit && valInit[0] === "_") {
       push();
       mergeClassName(keyInit, valInit);
@@ -112,12 +121,14 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
       }
       continue;
     }
-    let isMedia = keyInit[0] === "$";
-    let isPseudo = validPseudoKeys[keyInit];
+    if (!isMedia && !isPseudo && !((_a = staticConfig.variants) == null ? void 0 : _a[keyInit]) && !validStyleProps[keyInit] && !conf.shorthands[keyInit]) {
+      viewProps[keyInit] = valInit;
+      continue;
+    }
     const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, state.fallbackProps || props, state.resolveVariablesAs);
     const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
     if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
-      console.log("split style", keyInit, expanded);
+      console.log("  \xBB getSplitStyles", keyInit, expanded);
     }
     for (const [key, val] of expanded) {
       if (val === void 0) {
@@ -151,16 +162,20 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
       }
       if (isMedia) {
         const mediaKey = key;
-        if (!mediaQueryConfig[mediaKey.slice(1)]) {
+        const mediaKeyShort = mediaKey.slice(1);
+        if (!mediaQueryConfig[mediaKeyShort]) {
           viewProps[key] = val;
           continue;
         }
-        const mediaStyle = getSubStyle(val, staticConfig, theme, props, state, true);
+        const mediaStyle = getSubStyle(val, staticConfig, theme, props, state);
+        if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+          console.log("  \xBB getSplitStyles mediaStyle", mediaKey, mediaStyle, props);
+        }
         const shouldDoClasses = isWeb && !state.noClassNames;
         if (shouldDoClasses) {
           const mediaStyles = getStylesAtomic(mediaStyle);
           for (const style2 of mediaStyles) {
-            const out2 = createMediaStyle(style2, mediaKey.slice(1), mediaQueryConfig);
+            const out2 = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
             mergeClassName(`${out2.identifier}-${mediaKey}`, out2.identifier);
             insertStyleRule(out2.identifier, out2.styleRule);
           }
@@ -204,13 +219,14 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
       const identifier = `_transform${hash}`;
       if (!insertedTransforms[identifier]) {
         const rule = `.${identifier} { transform: ${val}; }`;
+        console.log("insert", rule);
         insertStyleRule(identifier, rule);
       }
       classNames[namespace] = identifier;
     }
   }
   if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
-    console.log("out", { style, pseudos, medias, classNames, viewProps });
+    console.log("  \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
   }
   return {
     viewProps,
@@ -237,7 +253,21 @@ const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props,
   normalizeStyleObject(styleOut);
   return styleOut;
 }, "getSubStyle");
+function normalizeStyleObject(style) {
+  var _a, _b;
+  if (typeof style.flex === "number") {
+    const val = style.flex;
+    delete style.flex;
+    style.flexGrow = (_a = style.flexGrow) != null ? _a : val;
+    style.flexShrink = (_b = style.flexShrink) != null ? _b : 1;
+  }
+  if (!isWeb) {
+    fixNativeShadow(style);
+  }
+}
+__name(normalizeStyleObject, "normalizeStyleObject");
 export {
   getSplitStyles,
-  getSubStyle
+  getSubStyle,
+  normalizeStyleObject
 };