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

package/dist/jsx/Tamagui.js

@@ -1,11 +1,19 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import * as Helpers from "@tamagui/helpers";
+import { getConfig } from "./conf";
 import { rnw } from "./constants/rnw";
-import { getAllSelectors, getAllTransforms } from "./helpers/insertStyleRule";
+import { getAllSelectors, getAllTransforms, getInsertedRules } from "./helpers/insertStyleRule";
 class TamaguiManager {
   constructor() {
-    this.config = null;
     this.rnw = rnw;
+    this.Helpers = Helpers;
+  }
+  get config() {
+    return getConfig();
+  }
+  get insertedRules() {
+    return getInsertedRules();
   }
   get allSelectors() {
     return getAllSelectors();

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/constants/pseudos.js

@@ -0,0 +1,17 @@
+const pseudos = {
+  focusStyle: {
+    name: "focus",
+    priority: 3
+  },
+  pressStyle: {
+    name: "active",
+    priority: 2
+  },
+  hoverStyle: {
+    name: "hover",
+    priority: 1
+  }
+};
+export {
+  pseudos
+};

package/dist/jsx/createComponent.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { stylePropsView } from "@tamagui/helpers";
 import { useForceUpdate } from "@tamagui/use-force-update";
-import {
+import React, {
   Children,
   Fragment,
   createElement,
@@ -10,26 +10,33 @@ import {
   memo,
   useCallback,
   useContext,
-  useEffect,
   useRef,
   useState
 } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { onConfiguredOnce } from "./conf";
 import { stackDefaultStyles } from "./constants/constants";
-import { isAndroid, isTouchDevice, isWeb } from "./constants/platform";
+import { isAndroid, isTouchDevice, isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
 import { rnw } from "./constants/rnw";
 import { isVariable } from "./createVariable";
-import { defaultComponentState } from "./defaultComponentState";
+import { createShallowUpdate } from "./helpers/createShallowUpdate";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
-import {
-  getSplitStyles
-} from "./helpers/getSplitStyles";
+import { getSplitStyles } from "./helpers/getSplitStyles";
+import { getAllSelectors } from "./helpers/insertStyleRule";
 import { wrapThemeManagerContext } from "./helpers/wrapThemeManagerContext";
 import { useFeatures } from "./hooks/useFeatures";
 import { usePressable } from "./hooks/usePressable";
 import { getThemeManagerIfChanged, useTheme } from "./hooks/useTheme";
 import { TextAncestorContext } from "./views/TextAncestorContext";
+React["keep"];
+const defaultComponentState = {
+  hover: false,
+  press: false,
+  pressIn: false,
+  focus: false,
+  mounted: false,
+  animation: null
+};
 const mouseUps = /* @__PURE__ */ new Set();
 if (typeof document !== "undefined") {
   document.addEventListener("mouseup", () => {
@@ -37,76 +44,73 @@ if (typeof document !== "undefined") {
     mouseUps.clear();
   });
 }
-function createShallowUpdate(setter) {
-  return (next) => {
-    setter((prev) => {
-      for (const key in next) {
-        if (prev[key] !== next[key]) {
-          return { ...prev, ...next };
-        }
-      }
-      return prev;
-    });
-  };
-}
-__name(createShallowUpdate, "createShallowUpdate");
-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 = false;
-  let defaultPseudos = {};
+  let avoidClasses = true;
   let defaultNativeStyle;
-  let defaultNativeStyleSheet = null;
-  let defaultsClassName = null;
+  let defaultNativeStyleSheet;
   let initialTheme;
-  let splitStyleResult = null;
+  let initialSplitStyles;
   function addPseudoToStyles(styles, name, pseudos) {
     const pseudoStyle = pseudos[name];
+    const shouldNestObject = isWeb && name !== "enterStyle" && name !== "exitStyle";
     if (pseudoStyle) {
-      styles.push(isWeb ? { [name]: pseudoStyle } : pseudoStyle);
+      styles.push(shouldNestObject ? { [name]: pseudoStyle } : pseudoStyle);
     }
-    const defaultPseudoStyle = defaultPseudos[name];
+    const defaultPseudoStyle = initialSplitStyles.pseudos[name];
     if (defaultPseudoStyle) {
-      styles.push(isWeb ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
+      styles.push(shouldNestObject ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
     }
   }
   __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 prop on:", { props: Object.entries(props) });
+        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 = !!(state.animation && avoidClasses);
-    const splitInfo = getSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, defaultsClassName);
-    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitInfo;
+    const shouldAvoidClasses = !!(props.animation && avoidClasses);
+    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);
-    const styleWithPseudos = props.animation ? merge({ ...defaultNativeStyle, ...style }, state.hover && pseudos.hoverStyle, state.press && pseudos.pressStyle, state.focus && pseudos.focusStyle, ...Object.values(medias)) : null;
+    const hasEnterStyle = !!props.enterStyle;
     const features = useFeatures(props, {
       forceUpdate,
       setStateShallow,
       useAnimations,
       state,
-      style: styleWithPseudos,
-      pseudos
+      style: props.animation ? { ...defaultNativeStyle, ...style } : null,
+      pseudos,
+      staticConfig,
+      theme,
+      onDidAnimate: props.onDidAnimate
     });
     const {
       tag,
@@ -145,6 +149,7 @@ function createComponent(configIn) {
       accessibilityRole,
       collapsable,
       focusable,
+      onClick,
       theme: _themeProp,
       defaultVariants,
       onLayout,
@@ -160,15 +165,14 @@ function createComponent(configIn) {
     }
     const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false;
     const hostRef = useRef(null);
-    const hasEnterStyle = !!props.enterStyle;
     const internal = useRef();
     if (!internal.current) {
       internal.current = {
         isMounted: true
       };
     }
-    useEffect(() => {
-      if (hasEnterStyle) {
+    useIsomorphicLayoutEffect(() => {
+      if (typeof window !== "undefined" && (hasEnterStyle || props.animation)) {
         setStateShallow({
           mounted: true
         });
@@ -178,7 +182,7 @@ function createComponent(configIn) {
         mouseUps.delete(unPress);
         internal.current.isMounted = false;
       };
-    }, []);
+    }, [hasEnterStyle, props.animation]);
     if (nativeID) {
       viewProps.id = nativeID;
     }
@@ -236,6 +240,7 @@ function createComponent(configIn) {
         medias
       ];
       if (!animationStyles) {
+        !state.mounted && addPseudoToStyles(styles, "enterStyle", pseudos);
         state.hover && addPseudoToStyles(styles, "hoverStyle", pseudos);
         state.focus && addPseudoToStyles(styles, "focusStyle", pseudos);
         state.press && addPseudoToStyles(styles, "pressStyle", pseudos);
@@ -254,10 +259,11 @@ 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 });
+            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;
+        viewProps.style = animationStyles;
       } else {
         viewProps.style = styles;
       }
@@ -294,7 +300,8 @@ function createComponent(configIn) {
         viewProps.ref = forwardedRef;
       }
     }
-    const attachPress = !!(pseudos && pseudos.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({
@@ -377,18 +385,6 @@ function createComponent(configIn) {
     } : {
       disabled: true
     });
-    if (events) {
-      if (!isStringElement) {
-        Object.assign(viewProps, pressProps);
-      } else {
-        Object.assign(viewProps, events);
-      }
-      if (isWeb && isHoverable) {
-        childEls = <span style={{
-          display: "contents"
-        }} onMouseEnter={events.onMouseEnter} onMouseLeave={events.onMouseLeave}>{children}</span>;
-      }
-    }
     let content;
     if (isWeb) {
       if (staticConfig.isReactNativeWeb) {
@@ -405,11 +401,23 @@ function createComponent(configIn) {
         }
       }
     }
+    if (events) {
+      if (!isStringElement) {
+        Object.assign(viewProps, pressProps);
+      } else {
+        Object.assign(viewProps, events);
+      }
+    }
     content = createElement(ViewComponent, viewProps, childEls);
+    if (isWeb && events && attachHover) {
+      content = <span className="tui_Hoverable" style={{
+        display: "contents"
+      }} onMouseEnter={events.onMouseEnter} onMouseLeave={events.onMouseLeave}>{content}</span>;
+    }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
         viewProps["debug"] = true;
-        console.log("  \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, 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, state, styles, pseudos, content, childEls, shouldAvoidClasses, animation: props.animation, style, defaultNativeStyle, splitStyleResult, ...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,23 +428,27 @@ function createComponent(configIn) {
     }
     return content;
   });
+  component.displayName = staticConfig.componentName;
   onConfiguredOnce((conf) => {
     var _a, _b, _c, _d;
-    const shouldDebug = (_a = staticConfig.defaultProps) == null ? void 0 : _a.debug;
+    if (process.env.IS_STATIC === "is_static") {
+      return;
+    }
     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]];
-    splitStyleResult = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
+    initialSplitStyles = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
       mounted: true,
-      resolveVariablesAs: "variable"
+      hover: false,
+      press: false,
+      pressIn: false,
+      focus: false,
+      resolveVariablesAs: "both"
     });
-    const { classNames, pseudos, style, viewProps } = splitStyleResult;
-    if (isWeb) {
-      defaultsClassName = classNames;
-    }
-    defaultPseudos = pseudos;
+    const { style, viewProps } = initialSplitStyles;
     defaultNativeStyle = {};
     for (const key in style) {
       const v = style[key];
@@ -445,13 +457,17 @@ 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, ...splitStyleResult });
+    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;
@@ -459,25 +475,30 @@ function createComponent(configIn) {
     res = memo(res);
   }
   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;
 }
 __name(createComponent, "createComponent");
 const Spacer = createComponent({
   memo: true,
+  componentName: "Spacer",
   defaultProps: {
     ...stackDefaultStyles,
     size: true
@@ -550,45 +571,16 @@ function spacedChildren({
   return next;
 }
 __name(spacedChildren, "spacedChildren");
-const merge = /* @__PURE__ */ __name((...styles) => {
-  if (!styles[0])
-    return;
-  const res = {};
-  const len = styles.length;
-  for (let i = len - 1; i >= 0; i--) {
-    const cur = styles[i];
-    if (!cur)
-      continue;
-    for (const key in cur) {
-      const val = cur[key];
-      if (key !== "transform") {
-        if (!(key in res)) {
-          res[key] = val;
-        }
-        continue;
-      }
-      if (!res.transform) {
-        res.transform = val;
-        continue;
-      }
-      for (const t of val) {
-        const tkey = Object.keys(t)[0];
-        if (res.transform.find((existing) => tkey in existing)) {
-          continue;
-        }
-        res.transform.push(t);
-      }
-    }
-  }
-  return res;
-}, "merge");
-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,

package/dist/jsx/createTamagui.js

@@ -12,6 +12,14 @@ function createTamagui(config) {
   if (createdConfigs.has(config)) {
     return config;
   }
+  if (process.env.NODE_ENV === "development") {
+    if (!config.tokens) {
+      throw new Error(`No tokens provided to Tamagui config`);
+    }
+    if (!config.themes) {
+      throw new Error(`No themes provided to Tamagui config`);
+    }
+  }
   if (getHasConfigured()) {
     console.warn("Called createTamagui twice! Should never do so");
   }

package/dist/jsx/defaultComponentState.js

@@ -1,11 +0,0 @@
-const defaultComponentState = {
-  hover: false,
-  press: false,
-  pressIn: false,
-  focus: false,
-  mounted: false,
-  animation: null
-};
-export {
-  defaultComponentState
-};

package/dist/jsx/devtools.js

@@ -0,0 +1,13 @@
+import { onConfiguredOnce } from "./conf";
+import { insertedSelectors } from "./helpers/insertStyleRule";
+onConfiguredOnce((conf) => {
+  if (globalThis["Tamagui"]) {
+    return;
+  }
+  globalThis["Tamagui"] = {
+    ...conf,
+    get insertedCSS() {
+      return insertedSelectors;
+    }
+  };
+});

package/dist/jsx/helpers/RNComponents.js

@@ -0,0 +1,11 @@
+import * as ReactNative from "react-native";
+const RNComponents = /* @__PURE__ */ new WeakMap();
+for (const key of ["Image", "TextInput", "Text", "View"]) {
+  const val = ReactNative[key];
+  if (val && typeof val === "object") {
+    RNComponents.set(val, true);
+  }
+}
+export {
+  RNComponents
+};

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

@@ -2,19 +2,16 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { mediaObjectToString } from "../hooks/useMedia";
 const MEDIA_SEP = "_";
-const createMediaStyle = /* @__PURE__ */ __name(({ identifier, rules }, mediaKey, mediaQueries, negate, importance = 0) => {
+const createMediaStyle = /* @__PURE__ */ __name(({ identifier, rules }, mediaKey, mediaQueries, negate, importance) => {
   const mediaKeys = Object.keys(mediaQueries);
-  const mediaKeyPrecendence = mediaKeys.reduce((acc, cur, i) => {
-    acc[cur] = new Array(importance + 1).fill(":root").join("");
-    return acc;
-  }, {});
+  const importance_ = Math.max(0, importance == void 0 ? mediaKeys.indexOf(mediaKey) : importance || 0);
+  const precendencePrefix = new Array(importance_ + 1).fill(":root").join("");
   const negKey = negate ? "0" : "";
   const ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1);
   const nextIdentifier = `${identifier.replace(ogPrefix, `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`)}`;
   const screenStr = negate ? "not all" : "screen";
   const mediaSelector = mediaObjectToString(mediaQueries[mediaKey]);
   const mediaQuery = `${screenStr} and ${mediaSelector}`;
-  const precendencePrefix = mediaKeyPrecendence[mediaKey];
   const styleInner = rules[0].replace(identifier, nextIdentifier);
   let styleRule = "";
   if (styleInner.includes("@media")) {