@tamagui/web 1.11.1 → 1.12.0

package/dist/esm/helpers/insertStyleRule.mjs

@@ -1,3 +1,4 @@
+import { isClient } from "@tamagui/constants";
 const allSelectors = {};
 const allRules = {};
 const insertedTransforms = {};
@@ -10,7 +11,7 @@ function addTransform(identifier, css, rule) {
     if (process.env.NODE_ENV === "development") {
       console.error(`\u274C Invalid transform, likely used deg/% improperly ${identifier}`);
     }
-    return false;
+    return;
   }
   const startI = s + "transform:".length;
   const endI = css.indexOf(";");
@@ -19,47 +20,50 @@ function addTransform(identifier, css, rule) {
     insertedTransforms[identifier] = value;
     return true;
   }
-  return false;
 }
-const isClient = typeof document !== "undefined";
 const scannedCache = /* @__PURE__ */ new WeakMap();
-const totalSheetSelectors = /* @__PURE__ */ new Map();
+const totalSelectorsInserted = /* @__PURE__ */ new Map();
 function listenForSheetChanges() {
   if (!isClient)
     return;
-  function handleNode(node, remove = false) {
-    if (node instanceof HTMLStyleElement && node.sheet) {
-      updateSheetStyles(node.sheet, remove);
-    }
-  }
   const mo = new MutationObserver((entries) => {
     for (const entry of entries) {
-      entry.addedNodes.forEach((node) => handleNode(node));
-      entry.removedNodes.forEach((node) => handleNode(node, true));
+      if (entry instanceof HTMLStyleElement && entry.sheet || entry instanceof HTMLLinkElement && entry.href.endsWith(".css")) {
+        scanAllSheets();
+        break;
+      }
     }
   });
   mo.observe(document.head, {
     childList: true
   });
 }
+let lastScannedSheets = null;
 function scanAllSheets() {
   if (process.env.NODE_ENV === "test")
     return;
   if (!isClient)
     return;
-  const sheets = document.styleSheets;
-  if (!sheets)
-    return;
-  for (let i = 0; i < sheets.length; i++) {
-    const sheet2 = sheets[i];
-    if (!sheet2)
-      continue;
-    updateSheetStyles(sheet2);
+  const sheets = document.styleSheets || [];
+  const prev = lastScannedSheets;
+  const current = new Set(sheets);
+  if (document.styleSheets) {
+    for (const sheet2 of current) {
+      sheet2 && updateSheetStyles(sheet2);
+    }
+    lastScannedSheets = current;
+  }
+  if (prev) {
+    for (const sheet2 of prev) {
+      if (sheet2 && !current.has(sheet2)) {
+        updateSheetStyles(sheet2, true);
+      }
+    }
   }
 }
 function track(id, remove = false) {
-  const next = (totalSheetSelectors.get(id) || 0) + (remove ? -1 : 1);
-  totalSheetSelectors.set(id, next);
+  const next = (totalSelectorsInserted.get(id) || 0) + (remove ? -1 : 1);
+  totalSelectorsInserted.set(id, next);
   return next;
 }
 function updateSheetStyles(sheet2, remove = false) {
@@ -71,9 +75,6 @@ function updateSheetStyles(sheet2, remove = false) {
     return;
   }
   const firstSelector = (_a = getTamaguiSelector(rules[0])) == null ? void 0 : _a[0];
-  if (!firstSelector) {
-    return;
-  }
   const lastSelector = (_b = getTamaguiSelector(rules[rules.length - 1])) == null ? void 0 : _b[0];
   const cacheKey = `${rules.length}${firstSelector}${lastSelector}`;
   const lastScanned = scannedCache.get(sheet2);
@@ -83,11 +84,18 @@ function updateSheetStyles(sheet2, remove = false) {
     }
   }
   const len = rules.length;
+  let fails = 0;
   for (let i = 0; i < len; i++) {
     const rule = rules[i];
+    if (!(rule instanceof CSSStyleRule))
+      continue;
     const response = getTamaguiSelector(rule);
     if (!response) {
-      return;
+      fails++;
+      if (fails > 5) {
+        return;
+      }
+      continue;
     }
     const [identifier, cssRule] = response;
     const total = track(identifier, remove);
@@ -95,13 +103,11 @@ function updateSheetStyles(sheet2, remove = false) {
       if (total === 0) {
         delete allSelectors[identifier];
       }
-    } else {
-      if (!(identifier in allSelectors)) {
-        const isTransform = identifier.startsWith("_transform");
-        const shouldInsert = isTransform ? addTransform(identifier, cssRule.cssText, cssRule) : true;
-        if (shouldInsert) {
-          allSelectors[identifier] = cssRule.cssText;
-        }
+    } else if (!(identifier in allSelectors)) {
+      const isTransform = identifier.startsWith("_transform");
+      const shouldInsert = isTransform ? addTransform(identifier, cssRule.cssText, cssRule) : true;
+      if (shouldInsert) {
+        allSelectors[identifier] = cssRule.cssText;
       }
     }
   }
@@ -126,8 +132,9 @@ function getTamaguiSelector(rule) {
 const getIdentifierFromTamaguiSelector = (selector) => selector.replace(/(:root)+\s+/, "").replace(/:[a-z]+$/, "").slice(1);
 const sheet = isClient ? document.head.appendChild(document.createElement("style")).sheet : null;
 function updateRules(identifier, rules) {
-  if (allRules[identifier])
+  if (identifier in allRules) {
     return false;
+  }
   allRules[identifier] = rules.join(" ");
   if (identifier.startsWith("_transform")) {
     return addTransform(identifier, rules[0]);
@@ -135,42 +142,40 @@ function updateRules(identifier, rules) {
   return true;
 }
 function insertStyleRules(rulesToInsert) {
-  if (!rulesToInsert.length)
-    return;
-  if (isClient && !sheet) {
-    if (process.env.NODE_ENV === "development")
-      throw "impossible";
+  if (!rulesToInsert.length || !sheet) {
     return;
   }
   for (const { identifier, rules } of rulesToInsert) {
-    if (identifier in allSelectors)
+    if (!shouldInsertStyleRules(identifier)) {
       continue;
-    allSelectors[identifier] = process.env.NODE_ENV === "development" ? rules.join("\n") : " ";
+    }
+    allSelectors[identifier] = rules.join("\n");
+    track(identifier);
     updateRules(identifier, rules);
-    if (sheet) {
-      for (const rule of rules) {
+    for (const rule of rules) {
+      if (process.env.NODE_ENV === "production") {
+        sheet.insertRule(rule, sheet.cssRules.length);
+      } else {
         try {
           sheet.insertRule(rule, sheet.cssRules.length);
         } catch (err) {
-          if (process.env.NODE_ENV !== "production") {
-            console.groupCollapsed(
-              `Error inserting rule into CSSStyleSheet: ${String(err)}`
-            );
-            console.log({ rule, rulesToInsert });
-            console.trace();
-            console.groupEnd();
-          }
+          console.groupCollapsed(
+            `Error inserting rule into CSSStyleSheet: ${String(err)}`
+          );
+          console.log({ rule, rulesToInsert });
+          console.trace();
+          console.groupEnd();
         }
       }
     }
   }
 }
-const IS_STATIC = process.env.IS_STATIC === "is_static";
-function shouldInsertStyleRules(styleObject) {
-  if (IS_STATIC) {
+function shouldInsertStyleRules(identifier) {
+  if (process.env.IS_STATIC === "is_static") {
     return true;
   }
-  return !(styleObject.identifier in allSelectors);
+  const total = totalSelectorsInserted.get(identifier);
+  return total === void 0 || total < 2;
 }
 export {
   getAllRules,

package/dist/esm/helpers/insertStyleRule.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/insertStyleRule.tsx"],
-  "sourcesContent": ["import type { RulesToInsert, StyleObject } from '../types.js'\n\nconst allSelectors: Record<string, string> = {}\nconst allRules: Record<string, string> = {}\nexport const insertedTransforms = {}\n\nexport const getAllSelectors = () => allSelectors\nexport const getAllRules = () => Object.values(allRules)\nexport const getAllTransforms = () => insertedTransforms\n\n// keep transforms in map for merging later\nfunction addTransform(identifier: string, css: string, rule?: CSSRule) {\n  const s = css.indexOf('transform:')\n  if (s === -1) {\n    if (process.env.NODE_ENV === 'development') {\n      console.error(`\u274C Invalid transform, likely used deg/% improperly ${identifier}`)\n    }\n    return false\n  }\n  const startI = s + 'transform:'.length\n  const endI = css.indexOf(';')\n  const value = css.slice(startI, endI)\n  if (!insertedTransforms[identifier]) {\n    insertedTransforms[identifier] = value\n    return true\n  }\n  return false\n}\n\nconst isClient = typeof document !== 'undefined'\n\n// gets existing ones (client side)\n// takes ~0.1ms for a fairly large page\n// used now for three things:\n//   1. debugging at dev time\n//   2. avoid duplicate insert styles at runtime\n//   3. used now for merging transforms atomically\n\n// multiple sheets could have the same ids so we have to count\n\n// only cache tamagui styles\nconst scannedCache = new WeakMap<CSSStyleSheet, string>()\nconst totalSheetSelectors = new Map<string, number>()\n\nexport function listenForSheetChanges() {\n  if (!isClient) return\n  function handleNode(node: Node, remove = false) {\n    if (node instanceof HTMLStyleElement && node.sheet) {\n      updateSheetStyles(node.sheet, remove)\n    }\n  }\n  const mo = new MutationObserver((entries) => {\n    for (const entry of entries) {\n      entry.addedNodes.forEach((node) => handleNode(node))\n      entry.removedNodes.forEach((node) => handleNode(node, true))\n    }\n  })\n  mo.observe(document.head, {\n    childList: true,\n  })\n}\n\nexport function scanAllSheets() {\n  if (process.env.NODE_ENV === 'test') return\n  if (!isClient) return\n  const sheets = document.styleSheets\n  if (!sheets) return\n  for (let i = 0; i < sheets.length; i++) {\n    const sheet = sheets[i]\n    if (!sheet) continue\n    updateSheetStyles(sheet)\n  }\n}\n\nfunction track(id: string, remove = false) {\n  const next = (totalSheetSelectors.get(id) || 0) + (remove ? -1 : 1)\n  totalSheetSelectors.set(id, next)\n  return next\n}\n\nfunction updateSheetStyles(sheet: CSSStyleSheet, remove = false) {\n  // avoid errors on cross origin sheets\n  // https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property\n  let rules: CSSRuleList\n  try {\n    rules = sheet.cssRules\n  } catch {\n    return\n  }\n\n  // not tamagui stylesheet\n  const firstSelector = getTamaguiSelector(rules[0])?.[0]\n  if (!firstSelector) {\n    return\n  }\n\n  const lastSelector = getTamaguiSelector(rules[rules.length - 1])?.[0]\n\n  const cacheKey = `${rules.length}${firstSelector}${lastSelector}`\n  const lastScanned = scannedCache.get(sheet)\n  if (!remove) {\n    // avoid re-scanning\n    if (lastScanned === cacheKey) {\n      return\n    }\n  }\n\n  const len = rules.length\n  for (let i = 0; i < len; i++) {\n    const rule = rules[i]\n    const response = getTamaguiSelector(rule)\n    if (!response) {\n      return\n    }\n\n    const [identifier, cssRule] = response\n\n    // track references\n    const total = track(identifier, remove)\n\n    if (remove) {\n      if (total === 0) {\n        delete allSelectors[identifier]\n      }\n    } else {\n      if (!(identifier in allSelectors)) {\n        const isTransform = identifier.startsWith('_transform')\n        const shouldInsert = isTransform\n          ? addTransform(identifier, cssRule.cssText, cssRule)\n          : true\n        if (shouldInsert) {\n          allSelectors[identifier] = cssRule.cssText\n        }\n      }\n    }\n  }\n\n  scannedCache.set(sheet, cacheKey)\n}\n\nfunction getTamaguiSelector(\n  rule: CSSRule | null\n): readonly [string, CSSStyleRule] | null {\n  if (rule instanceof CSSStyleRule) {\n    const text = rule.selectorText\n    if (text[0] === '.' && text[1] === '_') {\n      return [text.slice(1), rule]\n    }\n    if (text.startsWith(':root') && text.includes('._')) {\n      return [getIdentifierFromTamaguiSelector(text), rule]\n    }\n  } else if (rule instanceof CSSMediaRule) {\n    // tamagui only ever inserts 1 rule per media\n    if (rule.cssRules.length > 1) return null\n    return getTamaguiSelector(rule.cssRules[0])\n  }\n  return null\n}\n\nconst getIdentifierFromTamaguiSelector = (selector: string) =>\n  selector\n    .replace(/(:root)+\\s+/, '')\n    .replace(/:[a-z]+$/, '')\n    .slice(1)\n\nconst sheet = isClient\n  ? document.head.appendChild(document.createElement('style')).sheet\n  : null\n\nexport function updateRules(identifier: string, rules: string[]) {\n  if (allRules[identifier]) return false\n  allRules[identifier] = rules.join(' ')\n  if (identifier.startsWith('_transform')) {\n    return addTransform(identifier, rules[0])\n  }\n  return true\n}\n\nexport function insertStyleRules(rulesToInsert: RulesToInsert) {\n  if (!rulesToInsert.length) return\n  if (isClient && !sheet) {\n    if (process.env.NODE_ENV === 'development') throw 'impossible'\n    return\n  }\n  for (const { identifier, rules } of rulesToInsert) {\n    if (identifier in allSelectors) continue\n    allSelectors[identifier] =\n      process.env.NODE_ENV === 'development' ? rules.join('\\n') : ' '\n    updateRules(identifier, rules)\n    if (sheet) {\n      for (const rule of rules) {\n        try {\n          sheet.insertRule(rule, sheet.cssRules.length)\n        } catch (err) {\n          if (process.env.NODE_ENV !== 'production') {\n            console.groupCollapsed(\n              `Error inserting rule into CSSStyleSheet: ${String(err)}`\n            )\n            console.log({ rule, rulesToInsert })\n            console.trace()\n            console.groupEnd()\n          }\n        }\n      }\n    }\n  }\n}\n\nconst IS_STATIC = process.env.IS_STATIC === 'is_static'\n\nexport function shouldInsertStyleRules(styleObject: StyleObject) {\n  if (IS_STATIC) {\n    return true\n  }\n  return !(styleObject.identifier in allSelectors)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { isClient } from '@tamagui/constants'\n\nimport type { RulesToInsert, StyleObject } from '../types.js'\n\nconst allSelectors: Record<string, string> = {}\nconst allRules: Record<string, string> = {}\nexport const insertedTransforms = {}\n\nexport const getAllSelectors = () => allSelectors\nexport const getAllRules = () => Object.values(allRules)\nexport const getAllTransforms = () => insertedTransforms\n\n// keep transforms in map for merging later\nfunction addTransform(identifier: string, css: string, rule?: CSSRule) {\n  const s = css.indexOf('transform:')\n  if (s === -1) {\n    if (process.env.NODE_ENV === 'development') {\n      console.error(`\u274C Invalid transform, likely used deg/% improperly ${identifier}`)\n    }\n    return\n  }\n  const startI = s + 'transform:'.length\n  const endI = css.indexOf(';')\n  const value = css.slice(startI, endI)\n  if (!insertedTransforms[identifier]) {\n    insertedTransforms[identifier] = value\n    return true\n  }\n}\n\n// gets existing ones (client side)\n// takes ~0.1ms for a fairly large page\n// used now for three things:\n//   1. debugging at dev time\n//   2. avoid duplicate insert styles at runtime\n//   3. used now for merging transforms atomically\n\n// multiple sheets could have the same ids so we have to count\n\n// only cache tamagui styles\nconst scannedCache = new WeakMap<CSSStyleSheet, string>()\nconst totalSelectorsInserted = new Map<string, number>()\n\nexport function listenForSheetChanges() {\n  if (!isClient) return\n\n  const mo = new MutationObserver((entries) => {\n    for (const entry of entries) {\n      if (\n        (entry instanceof HTMLStyleElement && entry.sheet) ||\n        (entry instanceof HTMLLinkElement && entry.href.endsWith('.css'))\n      ) {\n        scanAllSheets()\n        break\n      }\n    }\n  })\n\n  mo.observe(document.head, {\n    childList: true,\n  })\n}\n\nlet lastScannedSheets: Set<CSSStyleSheet> | null = null\n\nexport function scanAllSheets() {\n  if (process.env.NODE_ENV === 'test') return\n  if (!isClient) return\n\n  const sheets = document.styleSheets || []\n  const prev = lastScannedSheets\n  const current = new Set(sheets as any as CSSStyleSheet[])\n  if (document.styleSheets) {\n    for (const sheet of current) {\n      sheet && updateSheetStyles(sheet)\n    }\n    lastScannedSheets = current\n  }\n\n  if (prev) {\n    for (const sheet of prev) {\n      if (sheet && !current.has(sheet)) {\n        updateSheetStyles(sheet, true)\n      }\n    }\n  }\n}\n\nfunction track(id: string, remove = false) {\n  const next = (totalSelectorsInserted.get(id) || 0) + (remove ? -1 : 1)\n  totalSelectorsInserted.set(id, next)\n  return next\n}\n\nfunction updateSheetStyles(sheet: CSSStyleSheet, remove = false) {\n  // avoid errors on cross origin sheets\n  // https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property\n  let rules: CSSRuleList\n  try {\n    rules = sheet.cssRules\n  } catch {\n    return\n  }\n\n  const firstSelector = getTamaguiSelector(rules[0])?.[0]\n  const lastSelector = getTamaguiSelector(rules[rules.length - 1])?.[0]\n  const cacheKey = `${rules.length}${firstSelector}${lastSelector}`\n  const lastScanned = scannedCache.get(sheet)\n\n  if (!remove) {\n    // avoid re-scanning\n    if (lastScanned === cacheKey) {\n      return\n    }\n  }\n\n  const len = rules.length\n  let fails = 0\n\n  for (let i = 0; i < len; i++) {\n    const rule = rules[i]\n    if (!(rule instanceof CSSStyleRule)) continue\n\n    const response = getTamaguiSelector(rule)\n\n    if (!response) {\n      fails++\n      if (fails > 5) {\n        // conservatively bail out of non-tamagui sheets\n        return\n      }\n      continue\n    }\n\n    const [identifier, cssRule] = response\n\n    // track references\n    const total = track(identifier, remove)\n\n    if (remove) {\n      if (total === 0) {\n        delete allSelectors[identifier]\n      }\n    } else if (!(identifier in allSelectors)) {\n      const isTransform = identifier.startsWith('_transform')\n      const shouldInsert = isTransform\n        ? addTransform(identifier, cssRule.cssText, cssRule)\n        : true\n      if (shouldInsert) {\n        allSelectors[identifier] = cssRule.cssText\n      }\n    }\n  }\n\n  scannedCache.set(sheet, cacheKey)\n}\n\nfunction getTamaguiSelector(\n  rule: CSSRule | null\n): readonly [string, CSSStyleRule] | null {\n  if (rule instanceof CSSStyleRule) {\n    const text = rule.selectorText\n    if (text[0] === '.' && text[1] === '_') {\n      return [text.slice(1), rule]\n    }\n    if (text.startsWith(':root') && text.includes('._')) {\n      return [getIdentifierFromTamaguiSelector(text), rule]\n    }\n  } else if (rule instanceof CSSMediaRule) {\n    // tamagui only ever inserts 1 rule per media\n    if (rule.cssRules.length > 1) return null\n    return getTamaguiSelector(rule.cssRules[0])\n  }\n  return null\n}\n\nconst getIdentifierFromTamaguiSelector = (selector: string) =>\n  selector\n    .replace(/(:root)+\\s+/, '')\n    .replace(/:[a-z]+$/, '')\n    .slice(1)\n\nconst sheet = isClient\n  ? document.head.appendChild(document.createElement('style')).sheet\n  : null\n\nexport function updateRules(identifier: string, rules: string[]) {\n  if (identifier in allRules) {\n    return false\n  }\n  allRules[identifier] = rules.join(' ')\n  if (identifier.startsWith('_transform')) {\n    return addTransform(identifier, rules[0])\n  }\n  return true\n}\n\nexport function insertStyleRules(rulesToInsert: RulesToInsert) {\n  if (!rulesToInsert.length || !sheet) {\n    return\n  }\n\n  for (const { identifier, rules } of rulesToInsert) {\n    if (!shouldInsertStyleRules(identifier)) {\n      continue\n    }\n\n    allSelectors[identifier] = rules.join('\\n')\n    track(identifier)\n    updateRules(identifier, rules)\n\n    for (const rule of rules) {\n      if (process.env.NODE_ENV === 'production') {\n        sheet.insertRule(rule, sheet.cssRules.length)\n      } else {\n        try {\n          sheet.insertRule(rule, sheet.cssRules.length)\n        } catch (err) {\n          console.groupCollapsed(\n            `Error inserting rule into CSSStyleSheet: ${String(err)}`\n          )\n          console.log({ rule, rulesToInsert })\n          console.trace()\n          console.groupEnd()\n        }\n      }\n    }\n  }\n}\n\nexport function shouldInsertStyleRules(identifier: string) {\n  if (process.env.IS_STATIC === 'is_static') {\n    return true\n  }\n  const total = totalSelectorsInserted.get(identifier)\n  // note, -1, we are being conservative and leaving some in\n  return total === undefined || total < 2\n}\n"],
+  "mappings": "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",
   "names": ["sheet"]
 }

package/dist/esm/styled.js

@@ -1,23 +1,24 @@
 import { stylePropsAll } from "@tamagui/helpers";
 import { createComponent } from "./createComponent.js";
 import { ReactNativeStaticConfigs } from "./setupReactNative.js";
-function styled(Component, options, staticExtractionOptions) {
+function styled(ComponentIn, options, staticExtractionOptions) {
   if (process.env.NODE_ENV !== "production") {
-    if (!Component) {
+    if (!ComponentIn) {
       throw new Error(`No component given to styled()`);
     }
     if (options == null ? void 0 : options.variants) {
       for (const key in options.variants) {
         if (key in stylePropsAll) {
           console.error(
-            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`
+            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce complexity and confusion.`
           );
         }
       }
     }
   }
-  const parentStaticConfig = "staticConfig" in Component ? Component.staticConfig : null;
-  const isTamagui = !!parentStaticConfig;
+  const parentStaticConfig = "staticConfig" in ComponentIn ? ComponentIn.staticConfig : null;
+  const isPlainStyledComponent = !!parentStaticConfig && !(parentStaticConfig.isReactNative || parentStaticConfig.isHOC);
+  const Component = isPlainStyledComponent ? ComponentIn : (parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || ComponentIn;
   const isReactNative = Boolean(
     ReactNativeStaticConfigs.has(Component) || (staticExtractionOptions == null ? void 0 : staticExtractionOptions.isReactNative) || ReactNativeStaticConfigs.has(parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || (parentStaticConfig == null ? void 0 : parentStaticConfig.isReactNative)
   );
@@ -33,16 +34,15 @@ function styled(Component, options, staticExtractionOptions) {
       if (defaultVariants) {
         Object.assign(defaultProps, defaultVariants);
       }
-      const Comp = isReactNative ? (parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || Component : Component;
-      const nativeConf = isReactNative && ReactNativeStaticConfigs.get(Comp) || null;
+      const nativeConf = isReactNative && ReactNativeStaticConfigs.get(Component) || null;
       const isText = Boolean(
         (staticExtractionOptions == null ? void 0 : staticExtractionOptions.isText) || (parentStaticConfig == null ? void 0 : parentStaticConfig.isText)
       );
-      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative);
+      const acceptsClassName = acceptsClassNameProp ?? (isPlainStyledComponent || isReactNative);
       const conf = {
         ...staticExtractionOptions,
-        ...!isTamagui && {
-          Component: Comp
+        ...!isPlainStyledComponent && {
+          Component
         },
         // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above
         // take away the Partial<> and it's fine

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx"],
-  "sourcesContent": ["import { stylePropsAll } from '@tamagui/helpers'\nimport { forwardRef } from 'react'\n\nimport { createComponent } from './createComponent.js'\nimport { ReactNativeStaticConfigs } from './setupReactNative.js'\nimport type {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types.js'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\ntype GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer P\n>\n  ? P\n  : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer V\n>\n  ? V\n  : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV !== 'production') {\n    if (!Component) {\n      throw new Error(`No component given to styled()`)\n    }\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`\n          )\n        }\n      }\n    }\n  }\n\n  const parentStaticConfig =\n    'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n  const isTamagui = !!parentStaticConfig\n\n  const isReactNative = Boolean(\n    ReactNativeStaticConfigs.has(Component) ||\n      staticExtractionOptions?.isReactNative ||\n      ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n      parentStaticConfig?.isReactNative\n  )\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n\n      const Comp = isReactNative\n        ? parentStaticConfig?.Component || Component\n        : (Component as any)\n\n      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name || parentStaticConfig?.componentName,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n  })()\n\n  const component = createComponent(staticConfigProps || {}, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
-  "mappings": "AAAA,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AAuClC,SAAS,OAId,WAEA,SAOA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,WAAW;AACd,YAAM,IAAI,MAAM,gCAAgC;AAAA,IAClD;AACA,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,eAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAC3E,QAAM,YAAY,CAAC,CAAC;AAEpB,QAAM,gBAAgB;AAAA,IACpB,yBAAyB,IAAI,SAAS,MACpC,mEAAyB,kBACzB,yBAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB;AAAA,EACxB;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AAEA,YAAM,OAAO,iBACT,yDAAoB,cAAa,YAChC;AAEL,YAAM,aAAc,iBAAiB,yBAAyB,IAAI,IAAI,KAAM;AAE5E,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,SAAQ,yDAAoB;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,YAAY,gBAAgB,qBAAqB,CAAC,GAAG,SAAS;AAqCpE,SAAO;AACT;",
+  "sourcesContent": ["import { stylePropsAll } from '@tamagui/helpers'\nimport { forwardRef } from 'react'\n\nimport { createComponent } from './createComponent.js'\nimport { ReactNativeStaticConfigs } from './setupReactNative.js'\nimport type {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types.js'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\ntype GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer P\n>\n  ? P\n  : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer V\n>\n  ? V\n  : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  ComponentIn: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV !== 'production') {\n    if (!ComponentIn) {\n      throw new Error(`No component given to styled()`)\n    }\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce complexity and confusion.`\n          )\n        }\n      }\n    }\n  }\n\n  const parentStaticConfig =\n    'staticConfig' in ComponentIn ? (ComponentIn.staticConfig as StaticConfig) : null\n\n  const isPlainStyledComponent =\n    !!parentStaticConfig &&\n    !(parentStaticConfig.isReactNative || parentStaticConfig.isHOC)\n\n  const Component: any = isPlainStyledComponent\n    ? ComponentIn\n    : parentStaticConfig?.Component || ComponentIn\n\n  const isReactNative = Boolean(\n    ReactNativeStaticConfigs.has(Component) ||\n      staticExtractionOptions?.isReactNative ||\n      ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n      parentStaticConfig?.isReactNative\n  )\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n\n      const nativeConf =\n        (isReactNative && ReactNativeStaticConfigs.get(Component)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName =\n        acceptsClassNameProp ?? (isPlainStyledComponent || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isPlainStyledComponent && {\n          Component,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name || parentStaticConfig?.componentName,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n  })()\n\n  const component = createComponent(staticConfigProps || {}, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AAuClC,SAAS,OAId,aAEA,SAOA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,aAAa;AAChB,YAAM,IAAI,MAAM,gCAAgC;AAAA,IAClD;AACA,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,eAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBACJ,kBAAkB,cAAe,YAAY,eAAgC;AAE/E,QAAM,yBACJ,CAAC,CAAC,sBACF,EAAE,mBAAmB,iBAAiB,mBAAmB;AAE3D,QAAM,YAAiB,yBACnB,eACA,yDAAoB,cAAa;AAErC,QAAM,gBAAgB;AAAA,IACpB,yBAAyB,IAAI,SAAS,MACpC,mEAAyB,kBACzB,yBAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB;AAAA,EACxB;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AAEA,YAAM,aACH,iBAAiB,yBAAyB,IAAI,SAAS,KAAM;AAEhE,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBACJ,yBAAyB,0BAA0B;AAErD,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,0BAA0B;AAAA,UAC7B;AAAA,QACF;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,SAAQ,yDAAoB;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,YAAY,gBAAgB,qBAAqB,CAAC,GAAG,SAAS;AAqCpE,SAAO;AACT;",
   "names": []
 }

package/dist/esm/styled.mjs

@@ -1,23 +1,24 @@
 import { stylePropsAll } from "@tamagui/helpers";
 import { createComponent } from "./createComponent.js";
 import { ReactNativeStaticConfigs } from "./setupReactNative.js";
-function styled(Component, options, staticExtractionOptions) {
+function styled(ComponentIn, options, staticExtractionOptions) {
   if (process.env.NODE_ENV !== "production") {
-    if (!Component) {
+    if (!ComponentIn) {
       throw new Error(`No component given to styled()`);
     }
     if (options == null ? void 0 : options.variants) {
       for (const key in options.variants) {
         if (key in stylePropsAll) {
           console.error(
-            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`
+            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce complexity and confusion.`
           );
         }
       }
     }
   }
-  const parentStaticConfig = "staticConfig" in Component ? Component.staticConfig : null;
-  const isTamagui = !!parentStaticConfig;
+  const parentStaticConfig = "staticConfig" in ComponentIn ? ComponentIn.staticConfig : null;
+  const isPlainStyledComponent = !!parentStaticConfig && !(parentStaticConfig.isReactNative || parentStaticConfig.isHOC);
+  const Component = isPlainStyledComponent ? ComponentIn : (parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || ComponentIn;
   const isReactNative = Boolean(
     ReactNativeStaticConfigs.has(Component) || (staticExtractionOptions == null ? void 0 : staticExtractionOptions.isReactNative) || ReactNativeStaticConfigs.has(parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || (parentStaticConfig == null ? void 0 : parentStaticConfig.isReactNative)
   );
@@ -33,16 +34,15 @@ function styled(Component, options, staticExtractionOptions) {
       if (defaultVariants) {
         Object.assign(defaultProps, defaultVariants);
       }
-      const Comp = isReactNative ? (parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || Component : Component;
-      const nativeConf = isReactNative && ReactNativeStaticConfigs.get(Comp) || null;
+      const nativeConf = isReactNative && ReactNativeStaticConfigs.get(Component) || null;
       const isText = Boolean(
         (staticExtractionOptions == null ? void 0 : staticExtractionOptions.isText) || (parentStaticConfig == null ? void 0 : parentStaticConfig.isText)
       );
-      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative);
+      const acceptsClassName = acceptsClassNameProp ?? (isPlainStyledComponent || isReactNative);
       const conf = {
         ...staticExtractionOptions,
-        ...!isTamagui && {
-          Component: Comp
+        ...!isPlainStyledComponent && {
+          Component
         },
         // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above
         // take away the Partial<> and it's fine

package/dist/esm/styled.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx"],
-  "sourcesContent": ["import { stylePropsAll } from '@tamagui/helpers'\nimport { forwardRef } from 'react'\n\nimport { createComponent } from './createComponent.js'\nimport { ReactNativeStaticConfigs } from './setupReactNative.js'\nimport type {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types.js'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\ntype GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer P\n>\n  ? P\n  : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer V\n>\n  ? V\n  : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV !== 'production') {\n    if (!Component) {\n      throw new Error(`No component given to styled()`)\n    }\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`\n          )\n        }\n      }\n    }\n  }\n\n  const parentStaticConfig =\n    'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n  const isTamagui = !!parentStaticConfig\n\n  const isReactNative = Boolean(\n    ReactNativeStaticConfigs.has(Component) ||\n      staticExtractionOptions?.isReactNative ||\n      ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n      parentStaticConfig?.isReactNative\n  )\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n\n      const Comp = isReactNative\n        ? parentStaticConfig?.Component || Component\n        : (Component as any)\n\n      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name || parentStaticConfig?.componentName,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n  })()\n\n  const component = createComponent(staticConfigProps || {}, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
-  "mappings": "AAAA,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AAuClC,SAAS,OAId,WAEA,SAOA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,WAAW;AACd,YAAM,IAAI,MAAM,gCAAgC;AAAA,IAClD;AACA,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,eAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAC3E,QAAM,YAAY,CAAC,CAAC;AAEpB,QAAM,gBAAgB;AAAA,IACpB,yBAAyB,IAAI,SAAS,MACpC,mEAAyB,kBACzB,yBAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB;AAAA,EACxB;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AAEA,YAAM,OAAO,iBACT,yDAAoB,cAAa,YAChC;AAEL,YAAM,aAAc,iBAAiB,yBAAyB,IAAI,IAAI,KAAM;AAE5E,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,SAAQ,yDAAoB;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,YAAY,gBAAgB,qBAAqB,CAAC,GAAG,SAAS;AAqCpE,SAAO;AACT;",
+  "sourcesContent": ["import { stylePropsAll } from '@tamagui/helpers'\nimport { forwardRef } from 'react'\n\nimport { createComponent } from './createComponent.js'\nimport { ReactNativeStaticConfigs } from './setupReactNative.js'\nimport type {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types.js'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\ntype GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer P\n>\n  ? P\n  : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer V\n>\n  ? V\n  : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  ComponentIn: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV !== 'production') {\n    if (!ComponentIn) {\n      throw new Error(`No component given to styled()`)\n    }\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce complexity and confusion.`\n          )\n        }\n      }\n    }\n  }\n\n  const parentStaticConfig =\n    'staticConfig' in ComponentIn ? (ComponentIn.staticConfig as StaticConfig) : null\n\n  const isPlainStyledComponent =\n    !!parentStaticConfig &&\n    !(parentStaticConfig.isReactNative || parentStaticConfig.isHOC)\n\n  const Component: any = isPlainStyledComponent\n    ? ComponentIn\n    : parentStaticConfig?.Component || ComponentIn\n\n  const isReactNative = Boolean(\n    ReactNativeStaticConfigs.has(Component) ||\n      staticExtractionOptions?.isReactNative ||\n      ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n      parentStaticConfig?.isReactNative\n  )\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n\n      const nativeConf =\n        (isReactNative && ReactNativeStaticConfigs.get(Component)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName =\n        acceptsClassNameProp ?? (isPlainStyledComponent || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isPlainStyledComponent && {\n          Component,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name || parentStaticConfig?.componentName,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n  })()\n\n  const component = createComponent(staticConfigProps || {}, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AAuClC,SAAS,OAId,aAEA,SAOA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,aAAa;AAChB,YAAM,IAAI,MAAM,gCAAgC;AAAA,IAClD;AACA,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,eAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBACJ,kBAAkB,cAAe,YAAY,eAAgC;AAE/E,QAAM,yBACJ,CAAC,CAAC,sBACF,EAAE,mBAAmB,iBAAiB,mBAAmB;AAE3D,QAAM,YAAiB,yBACnB,eACA,yDAAoB,cAAa;AAErC,QAAM,gBAAgB;AAAA,IACpB,yBAAyB,IAAI,SAAS,MACpC,mEAAyB,kBACzB,yBAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB;AAAA,EACxB;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AAEA,YAAM,aACH,iBAAiB,yBAAyB,IAAI,SAAS,KAAM;AAEhE,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBACJ,yBAAyB,0BAA0B;AAErD,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,0BAA0B;AAAA,UAC7B;AAAA,QACF;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,SAAQ,yDAAoB;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,YAAY,gBAAgB,qBAAqB,CAAC,GAAG,SAAS;AAqCpE,SAAO;AACT;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,19 +27,19 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.11.1",
-    "@tamagui/constants": "1.11.1",
-    "@tamagui/helpers": "1.11.1",
-    "@tamagui/normalize-css-color": "1.11.1",
-    "@tamagui/use-did-finish-ssr": "1.11.1",
-    "@tamagui/use-event": "1.11.1",
-    "@tamagui/use-force-update": "1.11.1"
+    "@tamagui/compose-refs": "1.12.0",
+    "@tamagui/constants": "1.12.0",
+    "@tamagui/helpers": "1.12.0",
+    "@tamagui/normalize-css-color": "1.12.0",
+    "@tamagui/use-did-finish-ssr": "1.12.0",
+    "@tamagui/use-event": "1.12.0",
+    "@tamagui/use-force-update": "1.12.0"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.11.1",
+    "@tamagui/build": "1.12.0",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/createComponent.tsx

@@ -10,6 +10,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useId,
   useRef,
 } from 'react'
 
@@ -20,7 +21,6 @@ import { TextAncestorContext } from './contexts/TextAncestorContext.js'
 import { didGetVariableValue, setDidGetVariableValue } from './createVariable.js'
 import { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig.js'
 import { useSplitStyles } from './helpers/getSplitStyles.js'
-import { getAllSelectors } from './helpers/insertStyleRule.js'
 import { mergeProps } from './helpers/mergeProps.js'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables.js'
 import { useShallowSetState } from './helpers/useShallowSetState.js'
@@ -263,12 +263,14 @@ export function createComponent<
     const isReactNative = Boolean(staticConfig.isReactNative || isAnimatedReactNative)
 
     if (process.env.NODE_ENV === 'development') {
+      const id = useId()
+
       if (debugProp) {
         // prettier-ignore
         const name = `${componentName || Component?.displayName || Component?.name || '[Unnamed Component]'}`
         const type = isAnimatedReactNative ? '(animated)' : isReactNative ? '(rnw)' : ''
         const dataIs = propsIn['data-is'] || ''
-        const banner = `${name}${dataIs ? ` ${dataIs}` : ''} ${type}`
+        const banner = `${name}${dataIs ? ` ${dataIs}` : ''} ${type} id ${id}`
         console.group(`%c ${banner}`, 'background: yellow;')
         if (!isServer) {
           console.log('state', state)
@@ -760,7 +762,7 @@ export function createComponent<
         console.groupEnd()
         if (typeof window !== 'undefined') {
           // prettier-ignore
-          console.log({ state, themeState, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, styles, pseudos, content, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, staticConfig, tamaguiConfig, shouldForcePseudo, classNamesFull: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) })
+          console.log({ state, themeState, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, styles, pseudos, content, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, staticConfig, tamaguiConfig, shouldForcePseudo })
         }
         console.groupEnd()
       }

package/src/helpers/getSplitStyles.tsx

@@ -1126,12 +1126,6 @@ export const getSubStyle = (
   return styleOut
 }
 
-export const insertSplitStyles: StyleSplitter = (...args) => {
-  const res = getSplitStyles(...args)
-  insertStyleRules(res.rulesToInsert)
-  return res
-}
-
 // on native no need to insert any css
 const useInsertEffectCompat = isWeb
   ? useInsertionEffect || useIsomorphicLayoutEffect
@@ -1151,7 +1145,7 @@ export const useSplitStyles: StyleSplitter = (...args) => {
 
 function addStyleToInsertRules(rulesToInsert: RulesToInsert, styleObject: StyleObject) {
   if (process.env.TAMAGUI_TARGET === 'web') {
-    if (!shouldInsertStyleRules(styleObject)) {
+    if (!shouldInsertStyleRules(styleObject.identifier)) {
       return
     }
     updateRules(styleObject.identifier, styleObject.rules)