@tamagui/web 2.4.1 → 2.4.2

package/.turbo/turbo-build.log

@@ -1,2 +1,2 @@
 $ tamagui-build
-built @tamagui/web in 26283 ms
+built @tamagui/web in 2178 ms

package/dist/cjs/helpers/wrapStyleTags.cjs

@@ -27,16 +27,40 @@ __export(wrapStyleTags_exports, {
 module.exports = __toCommonJS(wrapStyleTags_exports);
 var import_helpers = require("@tamagui/helpers");
 var import_jsx_runtime = require("react/jsx-runtime");
-function getStyleTags(styles) {
-  if (styles.length) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
-    children: styles.map(styleObject => {
-      const identifier = styleObject[import_helpers.StyleObjectIdentifier];
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)("style", {
-        href: `t_${identifier}`,
-        precedence: "default",
-        suppressHydrationWarning: true,
-        children: styleObject[import_helpers.StyleObjectRules].join("\n")
-      }, identifier);
-    })
+const styleTagCache = /* @__PURE__ */new Map();
+let clearStyleTagCacheQueued = false;
+function queueStyleTagCacheClear() {
+  if (clearStyleTagCacheQueued) return;
+  clearStyleTagCacheQueued = true;
+  queueMicrotask(() => {
+    styleTagCache.clear();
+    clearStyleTagCacheQueued = false;
+  });
+}
+function getCachedStyleTag(styleObject) {
+  const identifier = styleObject[import_helpers.StyleObjectIdentifier];
+  const rules = styleObject[import_helpers.StyleObjectRules];
+  const cached = styleTagCache.get(identifier);
+  if (cached && cached.len === rules.length && cached.first === rules[0] && cached.last === rules[rules.length - 1]) return cached.element;
+  const element = /* @__PURE__ */(0, import_jsx_runtime.jsx)("style", {
+    href: `t_${identifier}`,
+    precedence: "default",
+    suppressHydrationWarning: true,
+    children: rules.join("\n")
+  }, identifier);
+  styleTagCache.set(identifier, {
+    element,
+    len: rules.length,
+    first: rules[0],
+    last: rules[rules.length - 1]
   });
+  return element;
+}
+function getStyleTags(styles) {
+  if (styles.length) {
+    queueStyleTagCacheClear();
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+      children: styles.map(getCachedStyleTag)
+    });
+  }
 }

package/dist/cjs/helpers/wrapStyleTags.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["to","__toCommonJS","mod","__copyProps","__defProp","value","wrapStyleTags_exports","__export","getStyleTags","module","exports","require","styles"],"sources":["../../../src/helpers/wrapStyleTags.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;EAAA;EAAA,OAAAA,EAAA;AAAA;AAAA,IAAAC,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,qBAAA;AAAAC,QAAA,CAAAD,qBAAwD;EAAAE,YAAA,EAAAA,CAAA,KAAAA;AAAA;AAShDC,MAAA,CAAAC,OAAA,GAAAT,YAAA,CAAAK,qBAAA;AAJDK,OAAA,oBAAsB;AAC3BA,OAAI,mBAAY;AACd,SAAIH,YAAOA,CAAAI,MAAQ","ignoreList":[]}
+{"version":3,"names":["to","__toCommonJS","mod","__copyProps","__defProp","value","wrapStyleTags_exports","__export","getStyleTags","module","exports","require","styles"],"sources":["../../../src/helpers/wrapStyleTags.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;EAAA;EAAA,OAAAA,EAAA;AAAA;AAAA,IAAAC,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,qBAAA;AACAC,QAAA,CAAAD,qBAAwD;EAAAE,YAAA,EAAAA,CAAA,KAAAA;AAAA;AA0CpDC,MAAA,CAAAC,OAAA,GAAAT,YAAA,CAAAK,qBAAA;AArCJK,OAAM,oBAAgB;AAUtBA,OAAI;AAEJ,SAASH,aAAAI,MAAA","ignoreList":[]}

package/dist/esm/helpers/wrapStyleTags.mjs

@@ -1,17 +1,41 @@
 import { StyleObjectIdentifier, StyleObjectRules } from "@tamagui/helpers";
 import { Fragment, jsx } from "react/jsx-runtime";
-function getStyleTags(styles) {
-  if (styles.length) return /* @__PURE__ */jsx(Fragment, {
-    children: styles.map(styleObject => {
-      const identifier = styleObject[StyleObjectIdentifier];
-      return /* @__PURE__ */jsx("style", {
-        href: `t_${identifier}`,
-        precedence: "default",
-        suppressHydrationWarning: true,
-        children: styleObject[StyleObjectRules].join("\n")
-      }, identifier);
-    })
+const styleTagCache = /* @__PURE__ */new Map();
+let clearStyleTagCacheQueued = false;
+function queueStyleTagCacheClear() {
+  if (clearStyleTagCacheQueued) return;
+  clearStyleTagCacheQueued = true;
+  queueMicrotask(() => {
+    styleTagCache.clear();
+    clearStyleTagCacheQueued = false;
+  });
+}
+function getCachedStyleTag(styleObject) {
+  const identifier = styleObject[StyleObjectIdentifier];
+  const rules = styleObject[StyleObjectRules];
+  const cached = styleTagCache.get(identifier);
+  if (cached && cached.len === rules.length && cached.first === rules[0] && cached.last === rules[rules.length - 1]) return cached.element;
+  const element = /* @__PURE__ */jsx("style", {
+    href: `t_${identifier}`,
+    precedence: "default",
+    suppressHydrationWarning: true,
+    children: rules.join("\n")
+  }, identifier);
+  styleTagCache.set(identifier, {
+    element,
+    len: rules.length,
+    first: rules[0],
+    last: rules[rules.length - 1]
   });
+  return element;
+}
+function getStyleTags(styles) {
+  if (styles.length) {
+    queueStyleTagCacheClear();
+    return /* @__PURE__ */jsx(Fragment, {
+      children: styles.map(getCachedStyleTag)
+    });
+  }
 }
 export { getStyleTags };
 //# sourceMappingURL=wrapStyleTags.mjs.map

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

@@ -1 +1 @@
-{"version":3,"names":["StyleObjectIdentifier","StyleObjectRules","Fragment","jsx","getStyleTags","styles","length","children","map","styleObject","identifier","href","precedence","suppressHydrationWarning","join"],"sources":["wrapStyleTags.mjs"],"sourcesContent":["import { StyleObjectIdentifier, StyleObjectRules } from \"@tamagui/helpers\";\nimport { Fragment, jsx } from \"react/jsx-runtime\";\n\nfunction getStyleTags(styles) {\n\tif (styles.length) return /* @__PURE__ */ jsx(Fragment, { children: styles.map((styleObject) => {\n\t\tconst identifier = styleObject[StyleObjectIdentifier];\n\t\treturn /* @__PURE__ */ jsx(\"style\", {\n\t\t\thref: `t_${identifier}`,\n\t\t\tprecedence: \"default\",\n\t\t\tsuppressHydrationWarning: true,\n\t\t\tchildren: styleObject[StyleObjectRules].join(\"\\n\")\n\t\t}, identifier);\n\t}) });\n}\n\nexport { getStyleTags };"],"mappings":"AAAA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,kBAAkB;AAC1E,SAASC,QAAQ,EAAEC,GAAG,QAAQ,mBAAmB;AAEjD,SAASC,YAAYA,CAACC,MAAM,EAAE;EAC7B,IAAIA,MAAM,CAACC,MAAM,EAAE,OAAO,eAAgBH,GAAG,CAACD,QAAQ,EAAE;IAAEK,QAAQ,EAAEF,MAAM,CAACG,GAAG,CAAEC,WAAW,IAAK;MAC/F,MAAMC,UAAU,GAAGD,WAAW,CAACT,qBAAqB,CAAC;MACrD,OAAO,eAAgBG,GAAG,CAAC,OAAO,EAAE;QACnCQ,IAAI,EAAE,KAAKD,UAAU,EAAE;QACvBE,UAAU,EAAE,SAAS;QACrBC,wBAAwB,EAAE,IAAI;QAC9BN,QAAQ,EAAEE,WAAW,CAACR,gBAAgB,CAAC,CAACa,IAAI,CAAC,IAAI;MAClD,CAAC,EAAEJ,UAAU,CAAC;IACf,CAAC;EAAE,CAAC,CAAC;AACN;AAEA,SAASN,YAAY","ignoreList":[]}
+{"version":3,"names":["StyleObjectIdentifier","StyleObjectRules","Fragment","jsx","styleTagCache","Map","clearStyleTagCacheQueued","queueStyleTagCacheClear","queueMicrotask","clear","getCachedStyleTag","styleObject","identifier","rules","cached","get","len","length","first","last","element","href","precedence","suppressHydrationWarning","children","join","set","getStyleTags","styles","map"],"sources":["wrapStyleTags.mjs"],"sourcesContent":["import { StyleObjectIdentifier, StyleObjectRules } from \"@tamagui/helpers\";\nimport { Fragment, jsx } from \"react/jsx-runtime\";\n\nconst styleTagCache = /* @__PURE__ */ new Map();\nlet clearStyleTagCacheQueued = false;\nfunction queueStyleTagCacheClear() {\n\tif (clearStyleTagCacheQueued) return;\n\tclearStyleTagCacheQueued = true;\n\tqueueMicrotask(() => {\n\t\tstyleTagCache.clear();\n\t\tclearStyleTagCacheQueued = false;\n\t});\n}\nfunction getCachedStyleTag(styleObject) {\n\tconst identifier = styleObject[StyleObjectIdentifier];\n\tconst rules = styleObject[StyleObjectRules];\n\tconst cached = styleTagCache.get(identifier);\n\tif (cached && cached.len === rules.length && cached.first === rules[0] && cached.last === rules[rules.length - 1]) return cached.element;\n\tconst element = /* @__PURE__ */ jsx(\"style\", {\n\t\thref: `t_${identifier}`,\n\t\tprecedence: \"default\",\n\t\tsuppressHydrationWarning: true,\n\t\tchildren: rules.join(\"\\n\")\n\t}, identifier);\n\tstyleTagCache.set(identifier, {\n\t\telement,\n\t\tlen: rules.length,\n\t\tfirst: rules[0],\n\t\tlast: rules[rules.length - 1]\n\t});\n\treturn element;\n}\nfunction getStyleTags(styles) {\n\tif (styles.length) {\n\t\tqueueStyleTagCacheClear();\n\t\treturn /* @__PURE__ */ jsx(Fragment, { children: styles.map(getCachedStyleTag) });\n\t}\n}\n\nexport { getStyleTags };"],"mappings":"AAAA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,kBAAkB;AAC1E,SAASC,QAAQ,EAAEC,GAAG,QAAQ,mBAAmB;AAEjD,MAAMC,aAAa,GAAG,eAAgB,IAAIC,GAAG,CAAC,CAAC;AAC/C,IAAIC,wBAAwB,GAAG,KAAK;AACpC,SAASC,uBAAuBA,CAAA,EAAG;EAClC,IAAID,wBAAwB,EAAE;EAC9BA,wBAAwB,GAAG,IAAI;EAC/BE,cAAc,CAAC,MAAM;IACpBJ,aAAa,CAACK,KAAK,CAAC,CAAC;IACrBH,wBAAwB,GAAG,KAAK;EACjC,CAAC,CAAC;AACH;AACA,SAASI,iBAAiBA,CAACC,WAAW,EAAE;EACvC,MAAMC,UAAU,GAAGD,WAAW,CAACX,qBAAqB,CAAC;EACrD,MAAMa,KAAK,GAAGF,WAAW,CAACV,gBAAgB,CAAC;EAC3C,MAAMa,MAAM,GAAGV,aAAa,CAACW,GAAG,CAACH,UAAU,CAAC;EAC5C,IAAIE,MAAM,IAAIA,MAAM,CAACE,GAAG,KAAKH,KAAK,CAACI,MAAM,IAAIH,MAAM,CAACI,KAAK,KAAKL,KAAK,CAAC,CAAC,CAAC,IAAIC,MAAM,CAACK,IAAI,KAAKN,KAAK,CAACA,KAAK,CAACI,MAAM,GAAG,CAAC,CAAC,EAAE,OAAOH,MAAM,CAACM,OAAO;EACxI,MAAMA,OAAO,GAAG,eAAgBjB,GAAG,CAAC,OAAO,EAAE;IAC5CkB,IAAI,EAAE,KAAKT,UAAU,EAAE;IACvBU,UAAU,EAAE,SAAS;IACrBC,wBAAwB,EAAE,IAAI;IAC9BC,QAAQ,EAAEX,KAAK,CAACY,IAAI,CAAC,IAAI;EAC1B,CAAC,EAAEb,UAAU,CAAC;EACdR,aAAa,CAACsB,GAAG,CAACd,UAAU,EAAE;IAC7BQ,OAAO;IACPJ,GAAG,EAAEH,KAAK,CAACI,MAAM;IACjBC,KAAK,EAAEL,KAAK,CAAC,CAAC,CAAC;IACfM,IAAI,EAAEN,KAAK,CAACA,KAAK,CAACI,MAAM,GAAG,CAAC;EAC7B,CAAC,CAAC;EACF,OAAOG,OAAO;AACf;AACA,SAASO,YAAYA,CAACC,MAAM,EAAE;EAC7B,IAAIA,MAAM,CAACX,MAAM,EAAE;IAClBV,uBAAuB,CAAC,CAAC;IACzB,OAAO,eAAgBJ,GAAG,CAACD,QAAQ,EAAE;MAAEsB,QAAQ,EAAEI,MAAM,CAACC,GAAG,CAACnB,iBAAiB;IAAE,CAAC,CAAC;EAClF;AACD;AAEA,SAASiB,YAAY","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "license": "MIT",
   "author": {
     "name": "Nate Wienert"
@@ -51,20 +51,20 @@
     "test:web": "vitest --typecheck --run"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "2.4.1",
-    "@tamagui/constants": "2.4.1",
-    "@tamagui/helpers": "2.4.1",
-    "@tamagui/is-equal-shallow": "2.4.1",
-    "@tamagui/native": "2.4.1",
-    "@tamagui/normalize-css-color": "2.4.1",
-    "@tamagui/timer": "2.4.1",
-    "@tamagui/types": "2.4.1",
-    "@tamagui/use-did-finish-ssr": "2.4.1",
-    "@tamagui/use-event": "2.4.1",
-    "@tamagui/use-force-update": "2.4.1"
+    "@tamagui/compose-refs": "2.4.2",
+    "@tamagui/constants": "2.4.2",
+    "@tamagui/helpers": "2.4.2",
+    "@tamagui/is-equal-shallow": "2.4.2",
+    "@tamagui/native": "2.4.2",
+    "@tamagui/normalize-css-color": "2.4.2",
+    "@tamagui/timer": "2.4.2",
+    "@tamagui/types": "2.4.2",
+    "@tamagui/use-did-finish-ssr": "2.4.2",
+    "@tamagui/use-event": "2.4.2",
+    "@tamagui/use-force-update": "2.4.2"
   },
   "devDependencies": {
-    "@tamagui/build": "2.4.1",
+    "@tamagui/build": "2.4.2",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": ">=19",

package/src/helpers/wrapStyleTags.tsx

@@ -1,31 +1,74 @@
+import type { ReactNode } from 'react'
 import { StyleObjectIdentifier, StyleObjectRules } from '@tamagui/helpers'
 import type { StyleObject } from '../types'
 
 // turns out this is pretty slow, creating a bunch of extra tags...
 
+const styleTagCache = new Map<
+  string,
+  {
+    element: ReactNode
+    len: number
+    first: string | undefined
+    last: string | undefined
+  }
+>()
+
+let clearStyleTagCacheQueued = false
+
+function queueStyleTagCacheClear() {
+  if (clearStyleTagCacheQueued) return
+
+  clearStyleTagCacheQueued = true
+  queueMicrotask(() => {
+    styleTagCache.clear()
+    clearStyleTagCacheQueued = false
+  })
+}
+
+function getCachedStyleTag(styleObject: StyleObject) {
+  const identifier = styleObject[StyleObjectIdentifier]
+  const rules = styleObject[StyleObjectRules]
+  const cached = styleTagCache.get(identifier)
+
+  if (
+    cached &&
+    cached.len === rules.length &&
+    cached.first === rules[0] &&
+    cached.last === rules[rules.length - 1]
+  ) {
+    return cached.element
+  }
+
+  const element = (
+    <style
+      key={identifier}
+      // @ts-ignore
+      href={`t_${identifier}`}
+      // @ts-ignore
+      precedence="default"
+      // we remove after first render in favor of inserting to a global stylesheet (faster)
+      suppressHydrationWarning
+    >
+      {rules.join('\n')}
+    </style>
+  )
+
+  styleTagCache.set(identifier, {
+    element,
+    len: rules.length,
+    first: rules[0],
+    last: rules[rules.length - 1],
+  })
+
+  return element
+}
+
 export function getStyleTags(styles: StyleObject[]) {
   if (process.env.TAMAGUI_TARGET !== 'native') {
     if (styles.length) {
-      return (
-        <>
-          {styles.map((styleObject) => {
-            const identifier = styleObject[StyleObjectIdentifier]
-            return (
-              <style
-                key={identifier}
-                // @ts-ignore
-                href={`t_${identifier}`}
-                // @ts-ignore
-                precedence="default"
-                // we remove after first render in favor of inserting to a global stylesheet (faster)
-                suppressHydrationWarning
-              >
-                {styleObject[StyleObjectRules].join('\n')}
-              </style>
-            )
-          })}
-        </>
-      )
+      queueStyleTagCacheClear()
+      return <>{styles.map(getCachedStyleTag)}</>
     }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"wrapStyleTags.d.ts","sourceRoot":"","sources":["../../src/helpers/wrapStyleTags.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAI3C,wBAAgB,YAAY,CAAC,MAAM,EAAE,WAAW,EAAE,uDAyBjD"}
+{"version":3,"file":"wrapStyleTags.d.ts","sourceRoot":"","sources":["../../src/helpers/wrapStyleTags.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAgE3C,wBAAgB,YAAY,CAAC,MAAM,EAAE,WAAW,EAAE,uDAOjD"}