@tamagui/react-native-web-lite 1.129.6 → 1.129.7

package/dist/cjs/createElement/index.cjs

@@ -34,18 +34,29 @@ __export(createElement_exports, {
   default: () => createElement_default
 });
 module.exports = __toCommonJS(createElement_exports);
-var import_react = __toESM(require("react")),
-  import_react_native_web_internals = require("@tamagui/react-native-web-internals"),
+var import_react_native_web_internals = require("@tamagui/react-native-web-internals"),
   import_web = require("@tamagui/web"),
+  import_react = __toESM(require("react")),
   import_jsx_runtime = require("react/jsx-runtime");
 const createElement = (component, props, options) => {
+  const isHydrated = (0, import_web.useDidFinishSSR)();
   let accessibilityComponent;
   component && component.constructor === String && (accessibilityComponent = import_react_native_web_internals.AccessibilityUtil.propsToAccessibilityComponent(props));
   const Component = accessibilityComponent || component,
     domProps = (0, import_react_native_web_internals.createDOMProps)(Component, props, options),
     styles = import_react_native_web_internals.stylesFromProps.get(domProps);
   let element = import_react.default.createElement(Component, domProps);
-  return styles && (element = (0, import_web.wrapStyleTags)(styles, element)), domProps.dir ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native_web_internals.LocaleProvider, {
+  const styleTags = (0, import_react.useMemo)(() => isHydrated || !styles ? null : (0, import_web.getStyleTags)(styles, element), [
+    // never changes
+  ]);
+  return element = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [element, styleTags]
+  }), (0, import_react.useInsertionEffect)(() => {
+    if (!styles) return;
+    const styleObj = {};
+    for (const style of styles) styleObj[style[0]] = style;
+    (0, import_web.insertStyleRules)(styleObj);
+  }, [styles]), domProps.dir ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native_web_internals.LocaleProvider, {
     direction: domProps.dir,
     locale: domProps.lang,
     children: element

package/dist/cjs/createElement/index.js

@@ -25,13 +25,29 @@ __export(createElement_exports, {
   default: () => createElement_default
 });
 module.exports = __toCommonJS(createElement_exports);
-var import_react = __toESM(require("react")), import_react_native_web_internals = require("@tamagui/react-native-web-internals"), import_web = require("@tamagui/web"), import_jsx_runtime = require("react/jsx-runtime");
+var import_react_native_web_internals = require("@tamagui/react-native-web-internals"), import_web = require("@tamagui/web"), import_react = __toESM(require("react")), import_jsx_runtime = require("react/jsx-runtime");
 const createElement = (component, props, options) => {
+  const isHydrated = (0, import_web.useDidFinishSSR)();
   let accessibilityComponent;
   component && component.constructor === String && (accessibilityComponent = import_react_native_web_internals.AccessibilityUtil.propsToAccessibilityComponent(props));
   const Component = accessibilityComponent || component, domProps = (0, import_react_native_web_internals.createDOMProps)(Component, props, options), styles = import_react_native_web_internals.stylesFromProps.get(domProps);
   let element = import_react.default.createElement(Component, domProps);
-  return styles && (element = (0, import_web.wrapStyleTags)(styles, element)), domProps.dir ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_web_internals.LocaleProvider, { direction: domProps.dir, locale: domProps.lang, children: element }) : element;
+  const styleTags = (0, import_react.useMemo)(
+    () => isHydrated || !styles ? null : (0, import_web.getStyleTags)(styles, element),
+    [
+      // never changes
+    ]
+  );
+  return element = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    element,
+    styleTags
+  ] }), (0, import_react.useInsertionEffect)(() => {
+    if (!styles) return;
+    const styleObj = {};
+    for (const style of styles)
+      styleObj[style[0]] = style;
+    (0, import_web.insertStyleRules)(styleObj);
+  }, [styles]), domProps.dir ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_web_internals.LocaleProvider, { direction: domProps.dir, locale: domProps.lang, children: element }) : element;
 };
 var createElement_default = createElement;
 //# sourceMappingURL=index.js.map

package/dist/cjs/createElement/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/createElement/index.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,mBAAkB,2BAClB,oCAKO,gDACP,aAA8B,yBAqB1B;AAnBJ,MAAM,gBAAgB,CAAC,WAAW,OAAO,YAAa;AAEpD,MAAI;AACJ,EAAI,aAAa,UAAU,gBAAgB,WACzC,yBAAyB,oDAAkB,8BAA8B,KAAK;AAEhF,QAAM,YAAY,0BAA0B,WACtC,eAAW,kDAAe,WAAW,OAAO,OAAO,GAEnD,SAAS,kDAAgB,IAAI,QAAQ;AAE3C,MAAI,UAAU,aAAAA,QAAM,cAAc,WAAW,QAAQ;AAErD,SAAI,WACF,cAAU,0BAAc,QAAQ,OAAO,IAIP,SAAS,MACzC,4CAAC,oDAAe,WAAW,SAAS,KAAK,QAAQ,SAAS,MACvD,mBACH,IAEA;AAIJ;AAEA,IAAO,wBAAQ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,wCAKO,gDACP,aAKO,yBACP,eAAmD,2BA2B/C;AAzBJ,MAAM,gBAAgB,CAAC,WAAW,OAAO,YAAa;AACpD,QAAM,iBAAa,4BAAgB;AAGnC,MAAI;AACJ,EAAI,aAAa,UAAU,gBAAgB,WACzC,yBAAyB,oDAAkB,8BAA8B,KAAK;AAEhF,QAAM,YAAY,0BAA0B,WACtC,eAAW,kDAAe,WAAW,OAAO,OAAO,GAEnD,SAAS,kDAAgB,IAAI,QAAQ;AAE3C,MAAI,UAAU,aAAAA,QAAM,cAAc,WAAW,QAAQ;AAErD,QAAM,gBAAY;AAAA,IAChB,MACS,cAAc,CAAC,SAAS,WAAO,yBAAa,QAAQ,OAAO;AAAA,IAEpE;AAAA;AAAA,IAEA;AAAA,EACF;AAEA,mBACE,4EACG;AAAA;AAAA,IACA;AAAA,KACH,OAGF,iCAAmB,MAAM;AACvB,QAAI,CAAC,OAAQ;AACb,UAAM,WAAwC,CAAC;AAC/C,eAAW,SAAS;AAClB,eAAS,MAAM,CAAC,CAAC,IAAI;AAEvB,qCAAiB,QAAQ;AAAA,EAC3B,GAAG,CAAC,MAAM,CAAC,GAGuB,SAAS,MACzC,4CAAC,oDAAe,WAAW,SAAS,KAAK,QAAQ,SAAS,MACvD,mBACH,IAEA;AAIJ;AAEA,IAAO,wBAAQ;",
   "names": ["React"]
 }

package/dist/cjs/createElement/index.native.js

@@ -26,11 +26,40 @@ __export(createElement_exports, {
   default: () => createElement_default
 });
 module.exports = __toCommonJS(createElement_exports);
-var import_jsx_runtime = require("react/jsx-runtime"), import_react = __toESM(require("react")), import_react_native_web_internals = require("@tamagui/react-native-web-internals"), import_web = require("@tamagui/web"), createElement = function(component, props, options) {
-  var accessibilityComponent;
+var import_jsx_runtime = require("react/jsx-runtime"), import_react_native_web_internals = require("@tamagui/react-native-web-internals"), import_web = require("@tamagui/web"), import_react = __toESM(require("react")), createElement = function(component, props, options) {
+  var isHydrated = (0, import_web.useDidFinishSSR)(), accessibilityComponent;
   component && component.constructor === String && (accessibilityComponent = import_react_native_web_internals.AccessibilityUtil.propsToAccessibilityComponent(props));
-  var Component = accessibilityComponent || component, domProps = (0, import_react_native_web_internals.createDOMProps)(Component, props, options), styles = import_react_native_web_internals.stylesFromProps.get(domProps), element = /* @__PURE__ */ import_react.default.createElement(Component, domProps);
-  styles && (element = (0, import_web.wrapStyleTags)(styles, element));
+  var Component = accessibilityComponent || component, domProps = (0, import_react_native_web_internals.createDOMProps)(Component, props, options), styles = import_react_native_web_internals.stylesFromProps.get(domProps), element = /* @__PURE__ */ import_react.default.createElement(Component, domProps), styleTags = (0, import_react.useMemo)(function() {
+    return isHydrated || !styles ? null : (0, import_web.getStyleTags)(styles, element);
+  }, []);
+  element = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [
+      element,
+      styleTags
+    ]
+  }), (0, import_react.useInsertionEffect)(function() {
+    if (styles) {
+      var styleObj = {}, _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+      try {
+        for (var _iterator = styles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+          var style = _step.value;
+          styleObj[style[0]] = style;
+        }
+      } catch (err) {
+        _didIteratorError = !0, _iteratorError = err;
+      } finally {
+        try {
+          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+        } finally {
+          if (_didIteratorError)
+            throw _iteratorError;
+        }
+      }
+      (0, import_web.insertStyleRules)(styleObj);
+    }
+  }, [
+    styles
+  ]);
   var elementWithLocaleProvider = domProps.dir ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_web_internals.LocaleProvider, {
     direction: domProps.dir,
     locale: domProps.lang,

package/dist/cjs/createElement/index.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/createElement/index.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;AAOC,yBAAA,8BAED,eAAkB,2BAClB,oCAKO,gDACP,aAA8B,yBAExBA,gBAAgB,SAACC,WAAWC,OAAOC,SAAAA;AAEvC,MAAIC;AACJ,EAAIH,aAAaA,UAAUI,gBAAgBC,WACzCF,yBAAyBG,oDAAkBC,8BAA8BN,KAAAA;AAE3E,MAAMO,YAAYL,0BAA0BH,WACtCS,eAAWC,kDAAeF,WAAWP,OAAOC,OAAAA,GAE5CS,SAASC,kDAAgBC,IAAIJ,QAAAA,GAE/BK,UAAUC,6BAAAA,QAAMhB,cAAcS,WAAWC,QAAAA;AAE7C,EAAIE,WACFG,cAAUE,0BAAcL,QAAQG,OAAAA;AAIlC,MAAMG,4BAA4BR,SAASS,MACzC,uCAAAC,KAACC,kDAAAA;IAAeC,WAAWZ,SAASS;IAAKI,QAAQb,SAASc;cACvDT;OAGHA;AAGF,SAAOG;AACT,GAEA,wBAAelB;",
-  "names": ["createElement", "component", "props", "options", "accessibilityComponent", "constructor", "String", "AccessibilityUtil", "propsToAccessibilityComponent", "Component", "domProps", "createDOMProps", "styles", "stylesFromProps", "get", "element", "React", "wrapStyleTags", "elementWithLocaleProvider", "dir", "_jsx", "LocaleProvider", "direction", "locale", "lang"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;AAOC,yBAAA,8BAED,oCAKO,gDACP,aAKO,yBACP,eAAmD,2BAE7CA,gBAAgB,SAACC,WAAWC,OAAOC,SAAAA;AACvC,MAAMC,iBAAaC,4BAAAA,GAGfC;AACJ,EAAIL,aAAaA,UAAUM,gBAAgBC,WACzCF,yBAAyBG,oDAAkBC,8BAA8BR,KAAAA;AAE3E,MAAMS,YAAYL,0BAA0BL,WACtCW,eAAWC,kDAAeF,WAAWT,OAAOC,OAAAA,GAE5CW,SAASC,kDAAgBC,IAAIJ,QAAAA,GAE/BK,UAAUC,6BAAAA,QAAMlB,cAAcW,WAAWC,QAAAA,GAEvCO,gBAAYC,sBAChB,WAAA;AACE,WAAOhB,cAAc,CAACU,SAAS,WAAOO,yBAAaP,QAAQG,OAAAA;EAC7D,GACA,CAAA,CAEC;AAGHA,YACE,uCAAAK,MAAA,mBAAAC,UAAA;;MACGN;MACAE;;UAILK,iCAAmB,WAAA;AACjB,QAAKV,QACL;UAAMW,WAAwC,CAAC,GAC1C,4BAAA,IAAA,oBAAA,IAAA,iBAAA;;AAAL,iBAAK,YAAeX,OAAAA,OAAAA,QAAAA,EAAAA,GAAf,OAAA,EAAA,6BAAA,QAAA,UAAA,KAAA,GAAA,OAAA,4BAAA,IAAuB;AAAvB,cAAMY,QAAN,MAAA;AACHD,mBAASC,MAAM,CAAA,CAAE,IAAIA;QACvB;;AAFK,4BAAA,IAAA,iBAAA;;;WAAA,6BAAA,UAAA,UAAA,QAAA,UAAA,OAAA;;cAAA;kBAAA;;;AAGLC,uCAAiBF,QAAAA;;EACnB,GAAG;IAACX;GAAO;AAGX,MAAMc,4BAA4BhB,SAASiB,MACzC,uCAAAC,KAACC,kDAAAA;IAAeC,WAAWpB,SAASiB;IAAKI,QAAQrB,SAASsB;cACvDjB;OAGHA;AAGF,SAAOW;AACT,GAEA,wBAAe5B;",
+  "names": ["createElement", "component", "props", "options", "isHydrated", "useDidFinishSSR", "accessibilityComponent", "constructor", "String", "AccessibilityUtil", "propsToAccessibilityComponent", "Component", "domProps", "createDOMProps", "styles", "stylesFromProps", "get", "element", "React", "styleTags", "useMemo", "getStyleTags", "_jsxs", "_Fragment", "useInsertionEffect", "styleObj", "style", "insertStyleRules", "elementWithLocaleProvider", "dir", "_jsx", "LocaleProvider", "direction", "locale", "lang"]
 }

package/dist/esm/createElement/index.js

@@ -1,18 +1,38 @@
-import React from "react";
 import {
   AccessibilityUtil,
   LocaleProvider,
   createDOMProps,
   stylesFromProps
 } from "@tamagui/react-native-web-internals";
-import { wrapStyleTags } from "@tamagui/web";
-import { jsx } from "react/jsx-runtime";
+import {
+  getStyleTags,
+  insertStyleRules,
+  useDidFinishSSR
+} from "@tamagui/web";
+import React, { useInsertionEffect, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const createElement = (component, props, options) => {
+  const isHydrated = useDidFinishSSR();
   let accessibilityComponent;
   component && component.constructor === String && (accessibilityComponent = AccessibilityUtil.propsToAccessibilityComponent(props));
   const Component = accessibilityComponent || component, domProps = createDOMProps(Component, props, options), styles = stylesFromProps.get(domProps);
   let element = React.createElement(Component, domProps);
-  return styles && (element = wrapStyleTags(styles, element)), domProps.dir ? /* @__PURE__ */ jsx(LocaleProvider, { direction: domProps.dir, locale: domProps.lang, children: element }) : element;
+  const styleTags = useMemo(
+    () => isHydrated || !styles ? null : getStyleTags(styles, element),
+    [
+      // never changes
+    ]
+  );
+  return element = /* @__PURE__ */ jsxs(Fragment, { children: [
+    element,
+    styleTags
+  ] }), useInsertionEffect(() => {
+    if (!styles) return;
+    const styleObj = {};
+    for (const style of styles)
+      styleObj[style[0]] = style;
+    insertStyleRules(styleObj);
+  }, [styles]), domProps.dir ? /* @__PURE__ */ jsx(LocaleProvider, { direction: domProps.dir, locale: domProps.lang, children: element }) : element;
 };
 var createElement_default = createElement;
 export {

package/dist/esm/createElement/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/createElement/index.tsx"],
-  "mappings": "AASA,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB;AAqB1B;AAnBJ,MAAM,gBAAgB,CAAC,WAAW,OAAO,YAAa;AAEpD,MAAI;AACJ,EAAI,aAAa,UAAU,gBAAgB,WACzC,yBAAyB,kBAAkB,8BAA8B,KAAK;AAEhF,QAAM,YAAY,0BAA0B,WACtC,WAAW,eAAe,WAAW,OAAO,OAAO,GAEnD,SAAS,gBAAgB,IAAI,QAAQ;AAE3C,MAAI,UAAU,MAAM,cAAc,WAAW,QAAQ;AAErD,SAAI,WACF,UAAU,cAAc,QAAQ,OAAO,IAIP,SAAS,MACzC,oBAAC,kBAAe,WAAW,SAAS,KAAK,QAAQ,SAAS,MACvD,mBACH,IAEA;AAIJ;AAEA,IAAO,wBAAQ;",
+  "mappings": "AASA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,SAAS,oBAAoB,eAAe;AA2B/C,mBAiBA,KAjBA;AAzBJ,MAAM,gBAAgB,CAAC,WAAW,OAAO,YAAa;AACpD,QAAM,aAAa,gBAAgB;AAGnC,MAAI;AACJ,EAAI,aAAa,UAAU,gBAAgB,WACzC,yBAAyB,kBAAkB,8BAA8B,KAAK;AAEhF,QAAM,YAAY,0BAA0B,WACtC,WAAW,eAAe,WAAW,OAAO,OAAO,GAEnD,SAAS,gBAAgB,IAAI,QAAQ;AAE3C,MAAI,UAAU,MAAM,cAAc,WAAW,QAAQ;AAErD,QAAM,YAAY;AAAA,IAChB,MACS,cAAc,CAAC,SAAS,OAAO,aAAa,QAAQ,OAAO;AAAA,IAEpE;AAAA;AAAA,IAEA;AAAA,EACF;AAEA,mBACE,iCACG;AAAA;AAAA,IACA;AAAA,KACH,GAGF,mBAAmB,MAAM;AACvB,QAAI,CAAC,OAAQ;AACb,UAAM,WAAwC,CAAC;AAC/C,eAAW,SAAS;AAClB,eAAS,MAAM,CAAC,CAAC,IAAI;AAEvB,qBAAiB,QAAQ;AAAA,EAC3B,GAAG,CAAC,MAAM,CAAC,GAGuB,SAAS,MACzC,oBAAC,kBAAe,WAAW,SAAS,KAAK,QAAQ,SAAS,MACvD,mBACH,IAEA;AAIJ;AAEA,IAAO,wBAAQ;",
   "names": []
 }

package/dist/esm/createElement/index.mjs

@@ -1,15 +1,26 @@
-import React from "react";
 import { AccessibilityUtil, LocaleProvider, createDOMProps, stylesFromProps } from "@tamagui/react-native-web-internals";
-import { wrapStyleTags } from "@tamagui/web";
-import { jsx } from "react/jsx-runtime";
+import { getStyleTags, insertStyleRules, useDidFinishSSR } from "@tamagui/web";
+import React, { useInsertionEffect, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const createElement = (component, props, options) => {
+  const isHydrated = useDidFinishSSR();
   let accessibilityComponent;
   component && component.constructor === String && (accessibilityComponent = AccessibilityUtil.propsToAccessibilityComponent(props));
   const Component = accessibilityComponent || component,
     domProps = createDOMProps(Component, props, options),
     styles = stylesFromProps.get(domProps);
   let element = React.createElement(Component, domProps);
-  return styles && (element = wrapStyleTags(styles, element)), domProps.dir ? /* @__PURE__ */jsx(LocaleProvider, {
+  const styleTags = useMemo(() => isHydrated || !styles ? null : getStyleTags(styles, element), [
+    // never changes
+  ]);
+  return element = /* @__PURE__ */jsxs(Fragment, {
+    children: [element, styleTags]
+  }), useInsertionEffect(() => {
+    if (!styles) return;
+    const styleObj = {};
+    for (const style of styles) styleObj[style[0]] = style;
+    insertStyleRules(styleObj);
+  }, [styles]), domProps.dir ? /* @__PURE__ */jsx(LocaleProvider, {
     direction: domProps.dir,
     locale: domProps.lang,
     children: element

package/dist/esm/createElement/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["React","AccessibilityUtil","LocaleProvider","createDOMProps","stylesFromProps","wrapStyleTags","jsx","createElement","component","props","options","accessibilityComponent","constructor","String","propsToAccessibilityComponent","Component","domProps","styles","get","element","dir","direction","locale","lang","children","createElement_default"],"sources":["../../../src/createElement/index.tsx"],"sourcesContent":[null],"mappings":"AASA,OAAOA,KAAA,MAAW;AAClB,SACEC,iBAAA,EACAC,cAAA,EACAC,cAAA,EACAC,eAAA,QACK;AACP,SAASC,aAAA,QAAqB;AAqB1B,SAAAC,GAAA;AAnBJ,MAAMC,aAAA,GAAgBA,CAACC,SAAA,EAAWC,KAAA,EAAOC,OAAA,KAAa;EAEpD,IAAIC,sBAAA;EACAH,SAAA,IAAaA,SAAA,CAAUI,WAAA,KAAgBC,MAAA,KACzCF,sBAAA,GAAyBV,iBAAA,CAAkBa,6BAAA,CAA8BL,KAAK;EAEhF,MAAMM,SAAA,GAAYJ,sBAAA,IAA0BH,SAAA;IACtCQ,QAAA,GAAWb,cAAA,CAAeY,SAAA,EAAWN,KAAA,EAAOC,OAAO;IAEnDO,MAAA,GAASb,eAAA,CAAgBc,GAAA,CAAIF,QAAQ;EAE3C,IAAIG,OAAA,GAAUnB,KAAA,CAAMO,aAAA,CAAcQ,SAAA,EAAWC,QAAQ;EAErD,OAAIC,MAAA,KACFE,OAAA,GAAUd,aAAA,CAAcY,MAAA,EAAQE,OAAO,IAIPH,QAAA,CAASI,GAAA,GACzC,eAAAd,GAAA,CAACJ,cAAA;IAAemB,SAAA,EAAWL,QAAA,CAASI,GAAA;IAAKE,MAAA,EAAQN,QAAA,CAASO,IAAA;IACvDC,QAAA,EAAAL;EAAA,CACH,IAEAA,OAAA;AAIJ;AAEA,IAAOM,qBAAA,GAAQlB,aAAA","ignoreList":[]}
+{"version":3,"names":["AccessibilityUtil","LocaleProvider","createDOMProps","stylesFromProps","getStyleTags","insertStyleRules","useDidFinishSSR","React","useInsertionEffect","useMemo","Fragment","jsx","jsxs","createElement","component","props","options","isHydrated","accessibilityComponent","constructor","String","propsToAccessibilityComponent","Component","domProps","styles","get","element","styleTags","children","styleObj","style","dir","direction","locale","lang","createElement_default"],"sources":["../../../src/createElement/index.tsx"],"sourcesContent":[null],"mappings":"AASA,SACEA,iBAAA,EACAC,cAAA,EACAC,cAAA,EACAC,eAAA,QACK;AACP,SAEEC,YAAA,EACAC,gBAAA,EACAC,eAAA,QACK;AACP,OAAOC,KAAA,IAASC,kBAAA,EAAoBC,OAAA,QAAe;AA2B/C,SAAAC,QAAA,EAiBAC,GAAA,EAjBAC,IAAA;AAzBJ,MAAMC,aAAA,GAAgBA,CAACC,SAAA,EAAWC,KAAA,EAAOC,OAAA,KAAa;EACpD,MAAMC,UAAA,GAAaX,eAAA,CAAgB;EAGnC,IAAIY,sBAAA;EACAJ,SAAA,IAAaA,SAAA,CAAUK,WAAA,KAAgBC,MAAA,KACzCF,sBAAA,GAAyBlB,iBAAA,CAAkBqB,6BAAA,CAA8BN,KAAK;EAEhF,MAAMO,SAAA,GAAYJ,sBAAA,IAA0BJ,SAAA;IACtCS,QAAA,GAAWrB,cAAA,CAAeoB,SAAA,EAAWP,KAAA,EAAOC,OAAO;IAEnDQ,MAAA,GAASrB,eAAA,CAAgBsB,GAAA,CAAIF,QAAQ;EAE3C,IAAIG,OAAA,GAAUnB,KAAA,CAAMM,aAAA,CAAcS,SAAA,EAAWC,QAAQ;EAErD,MAAMI,SAAA,GAAYlB,OAAA,CAChB,MACSQ,UAAA,IAAc,CAACO,MAAA,GAAS,OAAOpB,YAAA,CAAaoB,MAAA,EAAQE,OAAO,GAEpE;IAAA;EAAA,CAGF;EAEA,OAAAA,OAAA,GACE,eAAAd,IAAA,CAAAF,QAAA;IACGkB,QAAA,GAAAF,OAAA,EACAC,SAAA;EAAA,CACH,GAGFnB,kBAAA,CAAmB,MAAM;IACvB,IAAI,CAACgB,MAAA,EAAQ;IACb,MAAMK,QAAA,GAAwC,CAAC;IAC/C,WAAWC,KAAA,IAASN,MAAA,EAClBK,QAAA,CAASC,KAAA,CAAM,CAAC,CAAC,IAAIA,KAAA;IAEvBzB,gBAAA,CAAiBwB,QAAQ;EAC3B,GAAG,CAACL,MAAM,CAAC,GAGuBD,QAAA,CAASQ,GAAA,GACzC,eAAApB,GAAA,CAACV,cAAA;IAAe+B,SAAA,EAAWT,QAAA,CAASQ,GAAA;IAAKE,MAAA,EAAQV,QAAA,CAASW,IAAA;IACvDN,QAAA,EAAAF;EAAA,CACH,IAEAA,OAAA;AAIJ;AAEA,IAAOS,qBAAA,GAAQtB,aAAA","ignoreList":[]}

package/dist/esm/createElement/index.native.js

@@ -1,15 +1,43 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { AccessibilityUtil, LocaleProvider, createDOMProps, stylesFromProps } from "@tamagui/react-native-web-internals";
-import { wrapStyleTags } from "@tamagui/web";
+import { getStyleTags, insertStyleRules, useDidFinishSSR } from "@tamagui/web";
+import React, { useInsertionEffect, useMemo } from "react";
 var createElement = function (component, props, options) {
-    var accessibilityComponent;
+    var isHydrated = useDidFinishSSR(),
+      accessibilityComponent;
     component && component.constructor === String && (accessibilityComponent = AccessibilityUtil.propsToAccessibilityComponent(props));
     var Component = accessibilityComponent || component,
       domProps = createDOMProps(Component, props, options),
       styles = stylesFromProps.get(domProps),
-      element = /* @__PURE__ */React.createElement(Component, domProps);
-    styles && (element = wrapStyleTags(styles, element));
+      element = /* @__PURE__ */React.createElement(Component, domProps),
+      styleTags = useMemo(function () {
+        return isHydrated || !styles ? null : getStyleTags(styles, element);
+      }, []);
+    element = /* @__PURE__ */_jsxs(_Fragment, {
+      children: [element, styleTags]
+    }), useInsertionEffect(function () {
+      if (styles) {
+        var styleObj = {},
+          _iteratorNormalCompletion = !0,
+          _didIteratorError = !1,
+          _iteratorError = void 0;
+        try {
+          for (var _iterator = styles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+            var style = _step.value;
+            styleObj[style[0]] = style;
+          }
+        } catch (err) {
+          _didIteratorError = !0, _iteratorError = err;
+        } finally {
+          try {
+            !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+          } finally {
+            if (_didIteratorError) throw _iteratorError;
+          }
+        }
+        insertStyleRules(styleObj);
+      }
+    }, [styles]);
     var elementWithLocaleProvider = domProps.dir ? /* @__PURE__ */_jsx(LocaleProvider, {
       direction: domProps.dir,
       locale: domProps.lang,

package/dist/esm/createElement/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","React","AccessibilityUtil","LocaleProvider","createDOMProps","stylesFromProps","wrapStyleTags","createElement","component","props","options","accessibilityComponent","constructor","String","propsToAccessibilityComponent","Component","domProps","styles","get","element","elementWithLocaleProvider","dir","direction","locale","lang","children","createElement_default"],"sources":["../../../src/createElement/index.tsx"],"sourcesContent":[null],"mappings":"AASA,SAAOA,GAAA,IAAAC,IAAW;AAClB,OAAAC,KAAA;AAAA,SACEC,iBAAA,EAAAC,cAAA,EAAAC,cAAA,EAAAC,eAAA;AAAA,SACAC,aAAA;AAAA,IACAC,aAAA,YAAAA,CAAAC,SAAA,EAAAC,KAAA,EAAAC,OAAA;IACA,IAAAC,sBAAA;IAAAH,SACK,IAAAA,SAAA,CAAAI,WAAA,KAAAC,MAAA,KAAAF,sBAAA,GAAAT,iBAAA,CAAAY,6BAAA,CAAAL,KAAA;IACP,IAAAM,SAAS,GAAAJ,sBAAqB,IAAAH,SAAA;MAAAQ,QAAA,GAAAZ,cAAA,CAAAW,SAAA,EAAAN,KAAA,EAAAC,OAAA;MAAAO,MAAA,GAAAZ,eAAA,CAAAa,GAAA,CAAAF,QAAA;MAAAG,OAAA,kBAAAlB,KAAA,CAAAM,aAAA,CAAAQ,SAAA,EAAAC,QAAA;IAqB1BC,MAAA,KAAAE,OAAA,GAAAb,aAAA,CAAAW,MAAA,EAAAE,OAAA;IAnBJ,IAAMC,yBAAiB,GAAWJ,QAAO,CAAAK,GAAA,kBAAarB,IAAA,CAAAG,cAAA;MAEpDmB,SAAI,EAAAN,QAAA,CAAAK,GAAA;MACAE,MAAA,EAAAP,QAAa,CAAAQ,IAAU;MAG3BC,QAAM,EAAAN;IAKN,KAAIA,OAAA;IAEJ,OAAIC,yBACQ;EAad;EAAAM,qBAAA,GAAAnB,aAAA;AAEA,S","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","AccessibilityUtil","LocaleProvider","createDOMProps","stylesFromProps","getStyleTags","insertStyleRules","useDidFinishSSR","React","useInsertionEffect","useMemo","createElement","component","props","options","isHydrated","accessibilityComponent","constructor","String","propsToAccessibilityComponent","Component","domProps","styles","get","element","styleTags","children","styleObj","_iteratorNormalCompletion","_didIteratorError","_iteratorError","_iterator","Symbol","iterator","_step","next","done","style","value","err","return"],"sources":["../../../src/createElement/index.tsx"],"sourcesContent":[null],"mappings":"AASA,SAAAA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAAA,SACEC,iBAAA,EAAAC,cAAA,EAAAC,cAAA,EAAAC,eAAA;AAAA,SACAC,YAAA,EAAAC,gBAAA,EAAAC,eAAA;AAAA,OACAC,KAAA,IAAAC,kBAAA,EAAAC,OAAA;AAAA,IACAC,aAAA,YAAAA,CAAAC,SAAA,EAAAC,KAAA,EAAAC,OAAA;IAAA,IAAAC,UACK,GAAAR,eAAA;MAAAS,sBAAA;IACPJ,SAAA,IAAAA,SAAA,CAAAK,WAAA,KAAAC,MAAA,KAAAF,sBAAA,GAAAf,iBAAA,CAAAkB,6BAAA,CAAAN,KAAA;IAEE,IAAAO,SAAA,GAAAJ,sBAAA,IAAAJ,SAAA;MAAAS,QAAA,GAAAlB,cAAA,CAAAiB,SAAA,EAAAP,KAAA,EAAAC,OAAA;MAAAQ,MAAA,GAAAlB,eAAA,CAAAmB,GAAA,CAAAF,QAAA;MAAAG,OAAA,kBAAAhB,KAAA,CAAAG,aAAA,CAAAS,SAAA,EAAAC,QAAA;MAAAI,SAAA,GAAAf,OAAA;QACA,OAAAK,UAAA,KAAAO,MAAA,UAAAjB,YAAA,CAAAiB,MAAA,EAAAE,OAAA;MACA;IAAAA,OACK,kBAAA1B,KAAA,CAAAE,SAAA;MACP0B,QAAO,GA2BHF,OAAA,EAzBEC,SAAA;IAIJ,IAAIhB,kBAAA;MACA,IAAAa,MAAA,EAAa;QAGjB,IAAMK,QAAA,GAAY;UAAAC,yBAA0B;UACtCC,iBAAW;UAAAC,cAA0B,QAAO;QAI9C;UAEE,SAAAC,SAAY,GAAAT,MAAA,CAAAU,MAAA,CAAAC,QAAA,KAAAC,KAAA,IAAAN,yBAAA,IAAAM,KAAA,GAAAH,SAAA,CAAAI,IAAA,IAAAC,IAAA,GAAAR,yBAAA;YAEP,IAAAS,KAAA,GAAAH,KAAe,CAAAI,KAAA;YAExBX,QAAA,CAAAU,KAAA,OAAAA,KAAA;UAAA;QAEA,SAAAE,GAAA;UACFV,iBAAA,OAAAC,cAAA,GAAAS,GAAA;QAEA;UAEK;YACA,CAAAX,yBAAA,IAAAG,SAAA,CAAAS,MAAA,YAAAT,SAAA,CAAAS,MAAA;UAIL;YACO,IAAAX,iBAAQ,EACP,MAAAC,cAAyC;UAC/C;QACE;QAEFxB,gBAAiB,CAAAqB,QAAQ;MAC3B;IAYF,IAEOL,MAAA,C","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/react-native-web-lite",
-  "version": "1.129.6",
+  "version": "1.129.7",
   "description": "React Native for Web",
   "sideEffects": false,
   "main": "dist/cjs",
@@ -41,14 +41,14 @@
     "./dist/*": "./dist/cjs/*/index.mjs"
   },
   "dependencies": {
-    "@tamagui/normalize-css-color": "1.129.6",
-    "@tamagui/react-native-use-pressable": "1.129.6",
-    "@tamagui/react-native-use-responder-events": "1.129.6",
-    "@tamagui/react-native-web-internals": "1.129.6",
+    "@tamagui/normalize-css-color": "1.129.7",
+    "@tamagui/react-native-use-pressable": "1.129.7",
+    "@tamagui/react-native-use-responder-events": "1.129.7",
+    "@tamagui/react-native-web-internals": "1.129.7",
     "invariant": "^2.2.4"
   },
   "devDependencies": {
-    "@tamagui/build": "1.129.6",
+    "@tamagui/build": "1.129.7",
     "react": "*"
   },
   "peerDependencies": {

package/src/createElement/index.tsx

@@ -7,16 +7,23 @@
  * @noflow
  */
 
-import React from 'react'
 import {
   AccessibilityUtil,
   LocaleProvider,
   createDOMProps,
   stylesFromProps,
 } from '@tamagui/react-native-web-internals'
-import { wrapStyleTags } from '@tamagui/web'
+import {
+  type StyleObject,
+  getStyleTags,
+  insertStyleRules,
+  useDidFinishSSR,
+} from '@tamagui/web'
+import React, { useInsertionEffect, useMemo } from 'react'
 
 const createElement = (component, props, options?) => {
+  const isHydrated = useDidFinishSSR()
+
   // Use equivalent platform elements where possible.
   let accessibilityComponent
   if (component && component.constructor === String) {
@@ -29,9 +36,30 @@ const createElement = (component, props, options?) => {
 
   let element = React.createElement(Component, domProps)
 
-  if (styles) {
-    element = wrapStyleTags(styles, element)
-  }
+  const styleTags = useMemo(
+    () => {
+      return isHydrated || !styles ? null : getStyleTags(styles, element)
+    },
+    [
+      // never changes
+    ]
+  )
+
+  element = (
+    <>
+      {element}
+      {styleTags}
+    </>
+  )
+
+  useInsertionEffect(() => {
+    if (!styles) return
+    const styleObj: Record<string, StyleObject> = {}
+    for (const style of styles) {
+      styleObj[style[0]] = style
+    }
+    insertStyleRules(styleObj)
+  }, [styles])
 
   // Update locale context if element's writing direction prop changes
   const elementWithLocaleProvider = domProps.dir ? (