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

package/dist/jsx/helpers/createPropMapper.js

@@ -4,63 +4,65 @@ import { getConfig } from "../conf";
 import { isWeb } from "../constants/platform";
 import { isVariable } from "../createVariable";
 import { isObj } from "./isObj";
-const createPropMapper = /* @__PURE__ */ __name((c) => {
-  const variants = c.variants || {};
-  function getVariantFunction(variant, key, value) {
-    for (const cat in tokenCategories) {
-      if (key in tokenCategories[cat]) {
-        const spreadVariant = variant[`...${cat}`];
-        if (spreadVariant) {
-          return spreadVariant;
-        }
+function getVariantFunction(variant, key, value) {
+  if (typeof variant === "function") {
+    return variant;
+  }
+  for (const cat in tokenCategories) {
+    if (key in tokenCategories[cat]) {
+      const spreadVariant = variant[`...${cat}`];
+      if (spreadVariant) {
+        return spreadVariant;
       }
     }
-    let fn;
-    if (typeof value === "number") {
-      fn = variant[":number"];
-    } else if (typeof value === "string") {
-      fn = variant[":string"];
-    } else if (value === true || value === false) {
-      fn = variant[":boolean"];
-    }
-    fn = fn || variant[value];
-    return fn || variant["..."] || variant["...size"];
   }
-  __name(getVariantFunction, "getVariantFunction");
-  const defaultProps = c.defaultProps || {};
-  return (key, value, theme, props, staticConfig, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
+  let fn;
+  if (typeof value === "number") {
+    fn = variant[":number"];
+  } else if (typeof value === "string") {
+    fn = variant[":string"];
+  } else if (value === true || value === false) {
+    fn = variant[":boolean"];
+  }
+  fn = fn || variant[value];
+  return fn || variant["..."] || variant["...size"];
+}
+__name(getVariantFunction, "getVariantFunction");
+const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
+  const variants = staticConfig.variants || {};
+  const defaultProps = staticConfig.defaultProps || {};
+  return (key, value, theme, props, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
     const conf = getConfig();
     if (!conf) {
       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);
-      if (!variantValue) {
-        return value;
-      }
-      if (typeof variantValue === "function") {
-        variantValue = variantValue(value, {
-          tokens: conf.tokensParsed,
-          theme,
-          props: avoidDefaultProps ? props : new Proxy(props, {
-            get(target, key2) {
-              if (Reflect.has(target, key2)) {
-                return Reflect.get(target, key2);
+      if (variantValue) {
+        if (typeof variantValue === "function") {
+          variantValue = variantValue(value, {
+            tokens: conf.tokensParsed,
+            theme,
+            props: avoidDefaultProps ? props : new Proxy(props, {
+              get(target, key2) {
+                if (Reflect.has(target, key2)) {
+                  return Reflect.get(target, key2);
+                }
+                if (defaultProps) {
+                  return Reflect.get(defaultProps, key2);
+                }
               }
-              if (staticConfig.defaultProps) {
-                return Reflect.get(staticConfig.defaultProps, key2);
-              }
-            }
-          })
-        });
-      }
-      if (isObj(variantValue)) {
-        variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
+            })
+          });
+        }
+        if (isObj(variantValue)) {
+          variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
+        }
+        return variantValue;
       }
-      return variantValue;
     }
     let shouldReturn = false;
     if (conf.shorthands[key]) {
@@ -108,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;
@@ -123,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;
     }
@@ -161,7 +158,7 @@ const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed }, theme, fo
   }
   if (process.env.NODE_ENV === "development") {
     if (value && value[0] === "$") {
-      console.warn(`\u26A0\uFE0F Missing token in theme:`, value, theme);
+      console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, value);
       return null;
     }
   }

package/dist/jsx/helpers/createShallowUpdate.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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");
+export {
+  createShallowUpdate
+};

package/dist/jsx/helpers/createTamaguiProvider.js

@@ -10,7 +10,6 @@ function createTamaguiProvider({
 }) {
   return /* @__PURE__ */ __name(function TamaguiProvider({
     injectCSS,
-    fallback,
     children,
     ...themePropsProvider
   }) {
@@ -26,7 +25,7 @@ function createTamaguiProvider({
         };
       }, []);
     }
-    return <ButtonInsideButtonContext.Provider value={false}><TextAncestorProvider><ThemeProvider {...themeProps} {...themePropsProvider}><React.Suspense fallback={fallback || null}>{children}</React.Suspense></ThemeProvider></TextAncestorProvider></ButtonInsideButtonContext.Provider>;
+    return <ButtonInsideButtonContext.Provider value={false}><TextAncestorProvider><ThemeProvider {...themeProps} {...themePropsProvider}>{children}</ThemeProvider></TextAncestorProvider></ButtonInsideButtonContext.Provider>;
   }, "TamaguiProvider");
 }
 __name(createTamaguiProvider, "createTamaguiProvider");

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,34 +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, _b, _c;
+  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 = {};
@@ -51,14 +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 && !isMedia;
+      const isPsuedo = isMediaOrPseudo && key[11] === "0" || key.endsWith("Style");
       const namespace = isMedia ? key.split("_")[2] : isPsuedo ? key.split("-")[1] : "transform";
-      if (!insertedTransforms[val]) {
+      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 });
+      }
+      if (process.env.NODE_ENV === "development") {
+        if (!transform) {
+          console.log("NO TRANSFORM?", { key, val, transform });
+        }
       }
-      const transform = insertedTransforms[val];
       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;
@@ -69,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) {
@@ -79,7 +91,8 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
           style[atomicStyle.property] = atomicStyle.value;
         }
       }
-    } else {
+    }
+    if (!isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
       for (const key in cur) {
         if (key in stylePropsTransform) {
           mergeTransform(style, key, cur[key]);
@@ -92,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);
@@ -107,15 +121,20 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
       }
       continue;
     }
-    let isMedia = keyInit[0] === "$";
-    let isPseudo = validPseudoKeys[keyInit];
-    const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, props, staticConfig, state.resolveVariablesAs);
+    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("  \xBB getSplitStyles", keyInit, expanded);
+    }
     for (const [key, val] of expanded) {
       if (val === void 0) {
         continue;
       }
-      if (val && val[0] === "_") {
+      if (key !== "target" && val && val[0] === "_") {
         mergeClassName(key, val);
         continue;
       }
@@ -131,12 +150,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
           continue;
         }
         pseudos[key] = pseudos[key] || {};
-        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state.resolveVariablesAs, true);
+        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
         if (isWeb && !state.noClassNames) {
           const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] });
-          if ((_b = (_a = pseudoStyles[0]) == null ? void 0 : _a.identifier) == null ? void 0 : _b.includes("undefined")) {
-            console.warn("undefined bug?", (_c = pseudoStyles[0]) == null ? void 0 : _c.identifier);
-          }
           for (const style2 of pseudoStyles) {
             mergeClassName(`${style2.property}-${key}`, style2.identifier);
             insertStyleRule(style2.identifier, style2.rules[0]);
@@ -145,25 +161,31 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
         continue;
       }
       if (isMedia) {
-        const mediaKey = key.slice(1);
-        if (!mediaQueryConfig[mediaKey]) {
-          viewProps[key] = valInit;
+        const mediaKey = key;
+        const mediaKeyShort = mediaKey.slice(1);
+        if (!mediaQueryConfig[mediaKeyShort]) {
+          viewProps[key] = val;
           continue;
         }
-        const mediaStyle = getSubStyle(valInit, staticConfig, theme, props, state.resolveVariablesAs, true);
-        if (isWeb) {
+        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, mediaQueryConfig);
+            const out2 = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
             mergeClassName(`${out2.identifier}-${mediaKey}`, out2.identifier);
             insertStyleRule(out2.identifier, out2.styleRule);
           }
-          if (mediaState[mediaKey]) {
-            Object.assign(medias, mediaStyle);
-          }
         } else {
           if (mediaState[mediaKey]) {
-            Object.assign(style, mediaStyle);
+            push();
+            if (process.env.NODE_ENV === "development" && props["debug"]) {
+              console.log("apply media style", mediaKey, mediaState);
+            }
+            Object.assign(shouldDoClasses ? medias : style, mediaStyle);
           }
         }
         continue;
@@ -197,11 +219,15 @@ 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("  \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
+  }
   return {
     viewProps,
     style,
@@ -210,11 +236,11 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
     classNames
   };
 }, "getSplitStyles");
-const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, resolveVariablesAs, avoidDefaultProps) => {
+const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, state, avoidDefaultProps) => {
   const styleOut = {};
   for (const key in styleIn) {
     const val = styleIn[key];
-    const out = staticConfig.propMapper(key, val, theme, props, staticConfig, resolveVariablesAs, avoidDefaultProps);
+    const out = staticConfig.propMapper(key, val, theme, state.fallbackProps || props, state.resolveVariablesAs, avoidDefaultProps);
     const expanded = out === true || !out ? [[key, val]] : Object.entries(out);
     for (const [skey, sval] of expanded) {
       if (skey in stylePropsTransform) {
@@ -227,6 +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
+  getSplitStyles,
+  getSubStyle,
+  normalizeStyleObject
 };

package/dist/jsx/helpers/getStylesAtomic.js

@@ -5,6 +5,7 @@ import {
   mergeTransform,
   stylePropsTransform
 } from "@tamagui/helpers";
+import { getConfig } from "../conf";
 import { rnw } from "../constants/rnw";
 import { isVariable } from "../createVariable";
 function getStylesAtomic(stylesIn, options = {}) {
@@ -33,6 +34,7 @@ __name(getStylesAtomic, "getStylesAtomic");
 const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
   return rnw.atomic(rnw.createCompileableStyle(rnw.createReactDOMStyle(style)));
 }, "generateAtomicStyles");
+let reversedShorthands = null;
 function getAtomicStyle(style, pseudo, options) {
   var _a;
   if (style == null || typeof style !== "object") {
@@ -60,11 +62,22 @@ function getAtomicStyle(style, pseudo, options) {
   } else {
     atomicStyles = generateAtomicStyles(style);
   }
+  if (!reversedShorthands) {
+    reversedShorthands = {};
+    const conf = getConfig();
+    if (conf.shorthands) {
+      for (const key in conf.shorthands) {
+        reversedShorthands[conf.shorthands[key]] = key;
+      }
+    }
+  }
   return Object.keys(atomicStyles).map((key) => {
     const val = atomicStyles[key];
-    const [_, ogProperty, hash] = val.identifier.split("-");
+    const [_, a, b] = val.identifier.split("-");
+    const hash = b || a;
     const psuedoPrefix = pseudo ? `0${pseudo.name}-` : "";
-    const identifier = `_${ogProperty}-${psuedoPrefix}${hash}`;
+    const shortProp = reversedShorthands[val.property] || val.property;
+    const identifier = `_${shortProp}-${psuedoPrefix}${hash}`;
     const className = `.${identifier}`;
     const rules = val.rules.map((rule) => {
       if (pseudo) {

package/dist/jsx/helpers/insertStyleRule.js

@@ -6,23 +6,30 @@ const insertedTransforms = {};
 const getAllSelectors = /* @__PURE__ */ __name(() => allSelectors, "getAllSelectors");
 const getInsertedRules = /* @__PURE__ */ __name(() => Object.values(insertedSelectors), "getInsertedRules");
 const getAllTransforms = /* @__PURE__ */ __name(() => insertedTransforms, "getAllTransforms");
-function addTransform(identifier, rule) {
-  const s = rule.indexOf("transform:");
+function addTransform(identifier, css, rule) {
+  const s = css.indexOf("transform:");
   if (s === -1) {
-    console.error(`not a transform ${identifier} ${rule}`);
+    if (process.env.NODE_ENV === "development") {
+      console.groupCollapsed(`\u274C Invalid transform, likely used deg/% improperly ${identifier}`);
+      console.log("rule:", rule);
+      console.trace();
+      console.groupEnd();
+    } else {
+      console.error(`Missing transform`, identifier);
+    }
     return;
   }
   const startI = s + "transform:".length;
-  const endI = rule.indexOf(";");
-  const value = rule.slice(startI, endI);
+  const endI = css.indexOf(";");
+  const value = css.slice(startI, endI);
   insertedTransforms[identifier] = value;
 }
 __name(addTransform, "addTransform");
+const isClient = typeof document !== "undefined";
 let hasInsertedSinceUpdate = true;
 function updateInserted() {
-  if (typeof document === "undefined") {
+  if (!isClient)
     return;
-  }
   if (!hasInsertedSinceUpdate) {
     console.warn("hasnt inserted since");
     return;
@@ -33,19 +40,22 @@ function updateInserted() {
   for (let i = 0; i < sheets.length; i++) {
     const rules = sheets[i].cssRules;
     const firstRule = rules[0];
-    if (!firstRule)
+    if (!(firstRule instanceof CSSStyleRule))
       continue;
-    const firstSelector = firstRule["selectorText"];
+    const firstSelector = firstRule.selectorText;
     if (!firstSelector)
       continue;
     if (firstSelector === ":root" || firstSelector.startsWith("._")) {
-      for (const rule of rules) {
-        if (!rule.selectorText)
+      for (let i2 = 0; i2 < rules.length; i2++) {
+        const rule = rules.item(i2);
+        if (!(rule instanceof CSSStyleRule))
           continue;
         const identifier = rule.selectorText.slice(1);
-        allSelectors[identifier] = true;
-        if (identifier.startsWith("_transform")) {
-          addTransform(identifier, rule.cssText);
+        if (!allSelectors[identifier]) {
+          allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule.cssText : true;
+          if (identifier.startsWith("_transform")) {
+            addTransform(identifier, rule.cssText, rule);
+          }
         }
       }
     }
@@ -54,23 +64,22 @@ function updateInserted() {
 }
 __name(updateInserted, "updateInserted");
 updateInserted();
-const newRulesStyleTag = typeof document !== "undefined" ? document.head.appendChild(document.createElement("style")) : null;
-function insertStyleRule(identifier, rule) {
-  if (allSelectors[identifier]) {
+const sheet = isClient ? document.head.appendChild(document.createElement("style")).sheet : null;
+function updateInsertedCache(identifier, rule) {
+  if (insertedSelectors[identifier])
     return;
-  }
-  hasInsertedSinceUpdate = true;
   insertedSelectors[identifier] = rule;
-  allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule : true;
   if (identifier.startsWith("_transform")) {
     addTransform(identifier, rule);
   }
-  if (!newRulesStyleTag) {
+}
+__name(updateInsertedCache, "updateInsertedCache");
+function insertStyleRule(identifier, rule) {
+  if (allSelectors[identifier])
     return;
-  }
-  const sheet = newRulesStyleTag.sheet;
-  sheet.insertRule(rule, sheet.cssRules.length);
-  return identifier;
+  hasInsertedSinceUpdate = true;
+  updateInsertedCache(identifier, rule);
+  sheet == null ? void 0 : sheet.insertRule(rule, sheet.cssRules.length);
 }
 __name(insertStyleRule, "insertStyleRule");
 export {
@@ -79,5 +88,6 @@ export {
   getInsertedRules,
   insertStyleRule,
   insertedTransforms,
-  updateInserted
+  updateInserted,
+  updateInsertedCache
 };

package/dist/jsx/helpers/themeable.js

@@ -3,14 +3,15 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import React, { forwardRef } from "react";
 import { Theme } from "../views/Theme";
 import { ThemeInverse } from "../views/ThemeInverse";
-function themeable(component) {
+function themeable(component, opts) {
   const withThemeComponent = forwardRef(/* @__PURE__ */ __name(function WithTheme({ themeInverse, theme, ...rest }, ref) {
     const element = React.createElement(component, { ...rest, ref });
     if (themeInverse) {
       return <ThemeInverse>{element}</ThemeInverse>;
     }
-    if (theme) {
-      return <Theme name={theme || null}>{element}</Theme>;
+    if (theme || opts) {
+      console.log("WHAT", opts == null ? void 0 : opts.componentName);
+      return <Theme componentName={opts == null ? void 0 : opts.componentName} name={theme || null}>{element}</Theme>;
     }
     return element;
   }, "WithTheme"));