@tamagui/web 1.11.1 → 1.11.2

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "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.11.2",
+    "@tamagui/constants": "1.11.2",
+    "@tamagui/helpers": "1.11.2",
+    "@tamagui/normalize-css-color": "1.11.2",
+    "@tamagui/use-did-finish-ssr": "1.11.2",
+    "@tamagui/use-event": "1.11.2",
+    "@tamagui/use-force-update": "1.11.2"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.11.1",
+    "@tamagui/build": "1.11.2",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/createComponent.tsx

@@ -20,7 +20,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'
@@ -760,7 +759,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)

package/src/helpers/insertStyleRule.tsx

@@ -1,3 +1,5 @@
+import { isClient } from '@tamagui/constants'
+
 import type { RulesToInsert, StyleObject } from '../types.js'
 
 const allSelectors: Record<string, string> = {}
@@ -15,7 +17,7 @@ function addTransform(identifier: string, css: string, rule?: CSSRule) {
     if (process.env.NODE_ENV === 'development') {
       console.error(`❌ Invalid transform, likely used deg/% improperly ${identifier}`)
     }
-    return false
+    return
   }
   const startI = s + 'transform:'.length
   const endI = css.indexOf(';')
@@ -24,11 +26,8 @@ function addTransform(identifier: string, css: string, rule?: CSSRule) {
     insertedTransforms[identifier] = value
     return true
   }
-  return false
 }
 
-const isClient = typeof document !== 'undefined'
-
 // gets existing ones (client side)
 // takes ~0.1ms for a fairly large page
 // used now for three things:
@@ -40,41 +39,56 @@ const isClient = typeof document !== 'undefined'
 
 // only cache tamagui styles
 const scannedCache = new WeakMap<CSSStyleSheet, string>()
-const totalSheetSelectors = new Map<string, number>()
+const totalSelectorsInserted = new Map<string, number>()
 
 export function listenForSheetChanges() {
   if (!isClient) return
-  function handleNode(node: 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: Set<CSSStyleSheet> | null = null
+
 export 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 sheet = sheets[i]
-    if (!sheet) continue
-    updateSheetStyles(sheet)
+
+  const sheets = document.styleSheets || []
+  const prev = lastScannedSheets
+  const current = new Set(sheets as any as CSSStyleSheet[])
+  if (document.styleSheets) {
+    for (const sheet of current) {
+      sheet && updateSheetStyles(sheet)
+    }
+    lastScannedSheets = current
+  }
+
+  if (prev) {
+    for (const sheet of prev) {
+      if (sheet && !current.has(sheet)) {
+        updateSheetStyles(sheet, true)
+      }
+    }
   }
 }
 
 function track(id: string, 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
 }
 
@@ -88,16 +102,11 @@ function updateSheetStyles(sheet: CSSStyleSheet, remove = false) {
     return
   }
 
-  // not tamagui stylesheet
   const firstSelector = getTamaguiSelector(rules[0])?.[0]
-  if (!firstSelector) {
-    return
-  }
-
   const lastSelector = getTamaguiSelector(rules[rules.length - 1])?.[0]
-
   const cacheKey = `${rules.length}${firstSelector}${lastSelector}`
   const lastScanned = scannedCache.get(sheet)
+
   if (!remove) {
     // avoid re-scanning
     if (lastScanned === cacheKey) {
@@ -106,11 +115,21 @@ function updateSheetStyles(sheet: CSSStyleSheet, 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) {
+        // conservatively bail out of non-tamagui sheets
+        return
+      }
+      continue
     }
 
     const [identifier, cssRule] = response
@@ -122,15 +141,13 @@ function updateSheetStyles(sheet: CSSStyleSheet, 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
       }
     }
   }
@@ -168,7 +185,9 @@ const sheet = isClient
   : null
 
 export function updateRules(identifier: string, rules: string[]) {
-  if (allRules[identifier]) return false
+  if (identifier in allRules) {
+    return false
+  }
   allRules[identifier] = rules.join(' ')
   if (identifier.startsWith('_transform')) {
     return addTransform(identifier, rules[0])
@@ -177,40 +196,43 @@ export function updateRules(identifier: string, rules: string[]) {
 }
 
 export function insertStyleRules(rulesToInsert: 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) continue
-    allSelectors[identifier] =
-      process.env.NODE_ENV === 'development' ? rules.join('\n') : ' '
+    if (!shouldInsertStyleRules(identifier)) {
+      continue
+    }
+
+    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'
-
-export function shouldInsertStyleRules(styleObject: StyleObject) {
-  if (IS_STATIC) {
+export function shouldInsertStyleRules(identifier: string) {
+  if (process.env.IS_STATIC === 'is_static') {
     return true
   }
-  return !(styleObject.identifier in allSelectors)
+  const total = totalSelectorsInserted.get(identifier)
+  // note, -1, we are being conservative and leaving some in
+  return total === undefined || total < 2
 }

package/types/createComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAUN,MAAM,OAAO,CAAA;AAkBd,OAAO,EACL,SAAS,EACT,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAEhB,qBAAqB,EAErB,cAAc,EAIf,MAAM,SAAS,CAAA;AAqBhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAeD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AA8B3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EAEjB,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,EACpD,eAAe,CAAC,EAAE,iBAAiB,4DAowBpC;AAGD,eAAO,MAAM,QAAQ;YAAW;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAAmB,CAAA;AAMrE,eAAO,MAAM,MAAM,0DA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAiGxD"}
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAUN,MAAM,OAAO,CAAA;AAiBd,OAAO,EACL,SAAS,EACT,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAEhB,qBAAqB,EAErB,cAAc,EAIf,MAAM,SAAS,CAAA;AAqBhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAeD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AA8B3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EAEjB,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,EACpD,eAAe,CAAC,EAAE,iBAAiB,4DAowBpC;AAGD,eAAO,MAAM,QAAQ;YAAW;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAAmB,CAAA;AAMrE,eAAO,MAAM,MAAM,0DA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAiGxD"}

package/types/helpers/getSplitStyles.d.ts

@@ -22,7 +22,6 @@ type StyleSplitter = (props: {
 export declare const PROP_SPLIT = "-";
 export declare const getSplitStyles: StyleSplitter;
 export declare const getSubStyle: (styleState: GetStyleState, subKey: string, styleIn: Object, avoidDefaultProps?: boolean, avoidMergeTransform?: boolean) => TextStyleProps;
-export declare const insertSplitStyles: StyleSplitter;
 export declare const useSplitStyles: StyleSplitter;
 export type FlatTransforms = Record<string, any>;
 export {};

package/types/helpers/getSplitStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EACV,gBAAgB,EAChB,SAAS,EACT,cAAc,EAMd,eAAe,EACf,kBAAkB,EAElB,qBAAqB,EACrB,cAAc,EACd,WAAW,EAEZ,MAAM,aAAa,CAAA;AACpB,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,gCAAgC,CAAA;AAkBvC,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,cAAc,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,UAAU,EAAE,gBAAgB,CAAA;IAC5B,YAAY,EAAE,kBAAkB,CAAA;IAChC,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC9B,KAAK,EAAE,eAAe,CAAA;IACtB,IAAI,EAAE,qBAAqB,CAAA;IAC3B,eAAe,CAAC,EAAE,iBAAiB,CAAA;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAsFhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,kBAAkB,EAChC,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,eAAe,EACtB,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,eAAe,CAAC,EAAE,mBAAmB,EAErC,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,KACd,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AAqB7B,eAAO,MAAM,cAAc,EAAE,aAgyB5B,CAAA;AA0FD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,sBACK,OAAO,wBACL,OAAO,KAC5B,cA6BF,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,aAI/B,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,aAU5B,CAAA;AA2BD,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA"}
+{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EACV,gBAAgB,EAChB,SAAS,EACT,cAAc,EAMd,eAAe,EACf,kBAAkB,EAElB,qBAAqB,EACrB,cAAc,EACd,WAAW,EAEZ,MAAM,aAAa,CAAA;AACpB,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,gCAAgC,CAAA;AAkBvC,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,cAAc,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,UAAU,EAAE,gBAAgB,CAAA;IAC5B,YAAY,EAAE,kBAAkB,CAAA;IAChC,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC9B,KAAK,EAAE,eAAe,CAAA;IACtB,IAAI,EAAE,qBAAqB,CAAA;IAC3B,eAAe,CAAC,EAAE,iBAAiB,CAAA;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAsFhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,kBAAkB,EAChC,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,eAAe,EACtB,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,eAAe,CAAC,EAAE,mBAAmB,EAErC,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,KACd,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AAqB7B,eAAO,MAAM,cAAc,EAAE,aAgyB5B,CAAA;AA0FD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,sBACK,OAAO,wBACL,OAAO,KAC5B,cA6BF,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,aAU5B,CAAA;AA2BD,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA"}

package/types/helpers/insertStyleRule.d.ts

@@ -1,11 +1,11 @@
-import type { RulesToInsert, StyleObject } from '../types.js';
+import type { RulesToInsert } from '../types.js';
 export declare const insertedTransforms: {};
 export declare const getAllSelectors: () => Record<string, string>;
 export declare const getAllRules: () => string[];
 export declare const getAllTransforms: () => {};
 export declare function listenForSheetChanges(): void;
 export declare function scanAllSheets(): void;
-export declare function updateRules(identifier: string, rules: string[]): boolean;
+export declare function updateRules(identifier: string, rules: string[]): boolean | undefined;
 export declare function insertStyleRules(rulesToInsert: RulesToInsert): void;
-export declare function shouldInsertStyleRules(styleObject: StyleObject): boolean;
+export declare function shouldInsertStyleRules(identifier: string): boolean;
 //# sourceMappingURL=insertStyleRule.d.ts.map

package/types/helpers/insertStyleRule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"insertStyleRule.d.ts","sourceRoot":"","sources":["../../src/helpers/insertStyleRule.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAI7D,eAAO,MAAM,kBAAkB,IAAK,CAAA;AAEpC,eAAO,MAAM,eAAe,8BAAqB,CAAA;AACjD,eAAO,MAAM,WAAW,gBAAgC,CAAA;AACxD,eAAO,MAAM,gBAAgB,UAA2B,CAAA;AAoCxD,wBAAgB,qBAAqB,SAgBpC;AAED,wBAAgB,aAAa,SAU5B;AAiGD,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAO9D;AAED,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,aAAa,QA4B5D;AAID,wBAAgB,sBAAsB,CAAC,WAAW,EAAE,WAAW,WAK9D"}
+{"version":3,"file":"insertStyleRule.d.ts","sourceRoot":"","sources":["../../src/helpers/insertStyleRule.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAe,MAAM,aAAa,CAAA;AAI7D,eAAO,MAAM,kBAAkB,IAAK,CAAA;AAEpC,eAAO,MAAM,eAAe,8BAAqB,CAAA;AACjD,eAAO,MAAM,WAAW,gBAAgC,CAAA;AACxD,eAAO,MAAM,gBAAgB,UAA2B,CAAA;AAiCxD,wBAAgB,qBAAqB,SAkBpC;AAID,wBAAgB,aAAa,SAqB5B;AAoGD,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,uBAS9D;AAED,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,aAAa,QA+B5D;AAED,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,WAOxD"}