@tamagui/core 1.0.0-beta.189 → 1.0.0-beta.193

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,34 @@ 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 { proxyThemeVariables } from "./helpers/proxyThemeVariables";
 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 +45,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");
+let initialTheme;
+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 initialTheme;
-  let splitStyleResult = null;
+  let defaultNativeStyleSheet;
+  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 +150,7 @@ function createComponent(configIn) {
       accessibilityRole,
       collapsable,
       focusable,
+      onClick,
       theme: _themeProp,
       defaultVariants,
       onLayout,
@@ -160,15 +166,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 +183,7 @@ function createComponent(configIn) {
         mouseUps.delete(unPress);
         internal.current.isMounted = false;
       };
-    }, []);
+    }, [hasEnterStyle, props.animation]);
     if (nativeID) {
       viewProps.id = nativeID;
     }
@@ -236,6 +241,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 +260,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 +301,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 +366,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 +386,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 +402,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 +429,28 @@ 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;
-    initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
-    splitStyleResult = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
+    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 = initialTheme || proxyThemeVariables(conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]);
+    initialSplitStyles = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
       mounted: true,
-      resolveVariablesAs: "variable"
+      hover: false,
+      press: false,
+      pressIn: false,
+      focus: false,
+      resolveVariablesAs: "both",
+      keepVariantsAsProps: true
     });
-    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 +459,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 +477,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 +573,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");
   }
@@ -39,6 +47,7 @@ function createTamagui(config) {
                 addVar(val[fkey]);
               } else {
                 for (const fskey in val[fkey]) {
+                  console.log("add", fkey, fskey, val[fkey][fskey]);
                   addVar(val[fkey][fskey]);
                 }
               }
@@ -98,11 +107,35 @@ ${vars}
     };
   })();
   const tokensParsed = parseTokens(config.tokens);
+  const fontsParsed = (() => {
+    if (!config.fonts) {
+      throw new Error(`No fonts defined!`);
+    }
+    const res = {};
+    for (const familyName in config.fonts) {
+      const family = config.fonts[familyName];
+      const parsed = {};
+      for (const attrKey in family) {
+        const attr = family[attrKey];
+        if (attrKey === "family") {
+          parsed[attrKey] = attr;
+          continue;
+        }
+        parsed[attrKey] = Object.keys(attr).reduce((acc, cur) => {
+          acc[`$${cur}`] = attr[cur];
+          return acc;
+        }, {});
+      }
+      res[`$${familyName}`] = parsed;
+    }
+    return res;
+  })();
   const getCSS = /* @__PURE__ */ __name(() => {
     return `${themeConfig.css}
 ${getInsertedRules().join("\n")}`;
   }, "getCSS");
   const next = {
+    fonts: {},
     animations: {},
     shorthands: {},
     media: {},
@@ -112,6 +145,7 @@ ${getInsertedRules().join("\n")}`;
       defaultTheme: "light",
       ...config
     }),
+    fontsParsed,
     themeConfig,
     tokensParsed,
     parsed: true,
@@ -130,24 +164,6 @@ const parseTokens = /* @__PURE__ */ __name((tokens) => {
   const res = {};
   for (const key in tokens) {
     res[key] = {};
-    if (key === "font") {
-      for (const family in tokens.font) {
-        const obj = {};
-        res.font[`$${family}`] = obj;
-        for (const attrKey in tokens.font[family]) {
-          const attr = tokens.font[family][attrKey];
-          if (attrKey === "family") {
-            obj[attrKey] = attr;
-            continue;
-          }
-          obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {
-            acc[`$${cur}`] = attr[cur];
-            return acc;
-          }, {});
-        }
-      }
-      continue;
-    }
     for (const skey in tokens[key]) {
       res[key][`$${skey}`] = tokens[key][skey];
     }

package/dist/jsx/createTokens.js

@@ -6,17 +6,13 @@ function createTokens(tokens) {
   if (process.env.NODE_ENV === "development") {
     validateTokens(tokens);
   }
-  return setupTokens(tokens);
-}
-__name(createTokens, "createTokens");
-function setupTokens(tokens) {
   return mapTokensToVariables(tokens);
 }
-__name(setupTokens, "setupTokens");
+__name(createTokens, "createTokens");
 const mapTokensToVariables = /* @__PURE__ */ __name((tokens, parentPath = "") => {
   const res = {};
   for (const key in tokens) {
-    const val = tokens[key];
+    let val = tokens[key];
     const name = parentPath ? `${parentPath}-${key}` : key;
     if (val && typeof val === "object") {
       res[key] = mapTokensToVariables(tokens[key], name);

package/dist/jsx/createVariable.js

@@ -22,12 +22,17 @@ function isVariable(v) {
 }
 __name(isVariable, "isVariable");
 function getVariableValue(v) {
-  if (isVariable(v)) {
+  if (isVariable(v))
     return v.val;
-  }
   return v;
 }
 __name(getVariableValue, "getVariableValue");
+function getVariableName(v) {
+  if (isVariable(v))
+    return v.name;
+  return v;
+}
+__name(getVariableName, "getVariableName");
 const createCSSVariable = /* @__PURE__ */ __name((val, includeVar = true) => {
   const name = val.replace(/[^a-z0-9\_\-]+/i, "_");
   return includeVar ? `var(--${name})` : name;
@@ -37,6 +42,7 @@ export {
   Variable,
   createCSSVariable,
   createVariable,
+  getVariableName,
   getVariableValue,
   isVariable
 };

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/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);