@tamagui/static 2.5.3 → 2.6.0

package/dist/extractor/createExtractor.cjs

@@ -71,12 +71,6 @@ let hasLoggedBaseInfo = false;
 function isFullyDisabled(props) {
   return props.disableExtraction && props.disableDebugAttr;
 }
-function styleValueHasToken(v) {
-  if (typeof v === "string") return v.charCodeAt(0) === 36;
-  if (Array.isArray(v)) return v.some(styleValueHasToken);
-  if (v && typeof v === "object") return Object.values(v).some(styleValueHasToken);
-  return false;
-}
 function hasUntilMeasuredAncestor(path, groupName) {
   let current = path.parentPath;
   while (current) {
@@ -1394,31 +1388,7 @@ function createExtractor({
                 neverFlatten: staticConfig.neverFlatten
               })}`);
             }
-            let partial = null;
-            if (platform2 === "native" && !staticConfig.isHOC && !staticConfig.isStyledHOC && !ogAttributes.some(a => t.isJSXSpreadAttribute(a) || t.isJSXAttribute(a) && t.isJSXIdentifier(a.name) && a.name.name === "style")) {
-              const staticStyle = {};
-              const consumed = /* @__PURE__ */new Set();
-              for (const a of attrs) {
-                if (a.type !== "style" || !a.name || !a.attr) continue;
-                if (pseudoDescriptors[a.name]) continue;
-                if (!t.isJSXAttribute(a.attr) || !t.isJSXIdentifier(a.attr.name)) continue;
-                if (styleValueHasToken(a.value)) continue;
-                Object.assign(staticStyle, a.value);
-                consumed.add(a.attr.name.name);
-              }
-              if (consumed.size >= 2) {
-                const kept = ogAttributes.filter(a => {
-                  if (!t.isJSXAttribute(a) || !t.isJSXIdentifier(a.name)) return true;
-                  const n = a.name.name;
-                  if (consumed.has(n)) return false;
-                  if (n === "hoverStyle") return false;
-                  if (n.startsWith("$group-") && getGroupPseudo(n) === "hover") return false;
-                  return true;
-                });
-                partial = [t.jsxAttribute(t.jsxIdentifier("style"), t.jsxExpressionContainer((0, import_literalToAst.literalToAst)(staticStyle))), ...kept];
-              }
-            }
-            node.attributes = partial ?? ogAttributes;
+            node.attributes = ogAttributes;
             return;
           }
           let skipMap = false;

package/dist/extractor/extractToNative.cjs

@@ -178,6 +178,7 @@ function getBabelParseDefinition(options) {
                 const stylesExpr = t.arrayExpression([]);
                 const hocStylesExpr = t.arrayExpression([]);
                 const expressions = [];
+                const mediaExpressionIndexes = /* @__PURE__ */new Set();
                 const finalAttrs = [];
                 const themeKeysUsed = /* @__PURE__ */new Set();
                 function getStyleExpression(style, forTernary = false) {
@@ -253,7 +254,14 @@ function getBabelParseDefinition(options) {
                         if (attr.value.inlineMediaQuery) {
                           hasMediaKeys = true;
                         }
-                        expressions.push(attr.value.test);
+                        let expression = attr.value.test;
+                        if (attr.value.inlineMediaQuery && t.isLogicalExpression(attr.value.test, {
+                          operator: "&&"
+                        }) && t.isStringLiteral(attr.value.test.left)) {
+                          expression = t.arrayExpression([t.stringLiteral(attr.value.inlineMediaQuery), t.unaryExpression("!", t.unaryExpression("!", attr.value.test.right))]);
+                          mediaExpressionIndexes.add(expressions.length);
+                        }
+                        expressions.push(expression);
                         addStyleExpression(t.conditionalExpression(t.identifier(`_expressions[${expressions.length - 1}]`), consExpr || t.nullLiteral(), altExpr || t.nullLiteral()), true);
                         const styleExpr = t.conditionalExpression(attr.value.test, consExpr || t.nullLiteral(), altExpr || t.nullLiteral());
                         addStyleExpression(styleExpr);
@@ -273,7 +281,7 @@ function getBabelParseDefinition(options) {
                   }
                 }
                 props.node.attributes = finalAttrs;
-                if (themeKeysUsed.size || hocStylesExpr.elements.length > 1 || hasDynamicStyle) {
+                if (themeKeysUsed.size || hocStylesExpr.elements.length > 1 || hasDynamicStyle || hasMediaKeys) {
                   if (!hasImportedViewWrapper) {
                     root.unshiftContainer("body", importWithStyle);
                     hasImportedViewWrapper = true;
@@ -292,7 +300,7 @@ function getBabelParseDefinition(options) {
                     props.jsxPath.node.closingElement.name = t.jsxIdentifier(wrapperName);
                   }
                   if (expressions.length) {
-                    const safeExpressions = expressions.map(expr => t.isStringLiteral(expr) ? expr : t.unaryExpression("!", t.unaryExpression("!", expr)));
+                    const safeExpressions = expressions.map((expr, index) => t.isStringLiteral(expr) || mediaExpressionIndexes.has(index) ? expr : t.unaryExpression("!", t.unaryExpression("!", expr)));
                     props.node.attributes.push(t.jsxAttribute(t.jsxIdentifier("_expressions"), t.jsxExpressionContainer(t.arrayExpression(safeExpressions))));
                   }
                 } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/static",
-  "version": "2.5.3",
+  "version": "2.6.0",
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
   "license": "MIT",
   "source": "src/index.ts",
@@ -50,19 +50,19 @@
     "@babel/template": "^7.25.0",
     "@babel/traverse": "^7.25.4",
     "@babel/types": "^7.25.4",
-    "@tamagui/cli-color": "2.5.3",
-    "@tamagui/config-default": "2.5.3",
-    "@tamagui/core": "2.5.3",
-    "@tamagui/fake-react-native": "2.5.3",
-    "@tamagui/generate-themes": "2.5.3",
-    "@tamagui/helpers": "2.5.3",
-    "@tamagui/helpers-node": "2.5.3",
-    "@tamagui/proxy-worm": "2.5.3",
-    "@tamagui/react-native-web-internals": "2.5.3",
-    "@tamagui/react-native-web-lite": "2.5.3",
-    "@tamagui/shorthands": "2.5.3",
-    "@tamagui/types": "2.5.3",
-    "@tamagui/web": "2.5.3",
+    "@tamagui/cli-color": "2.6.0",
+    "@tamagui/config-default": "2.6.0",
+    "@tamagui/core": "2.6.0",
+    "@tamagui/fake-react-native": "2.6.0",
+    "@tamagui/generate-themes": "2.6.0",
+    "@tamagui/helpers": "2.6.0",
+    "@tamagui/helpers-node": "2.6.0",
+    "@tamagui/proxy-worm": "2.6.0",
+    "@tamagui/react-native-web-internals": "2.6.0",
+    "@tamagui/react-native-web-lite": "2.6.0",
+    "@tamagui/shorthands": "2.6.0",
+    "@tamagui/types": "2.6.0",
+    "@tamagui/web": "2.6.0",
     "babel-literal-to-ast": "^2.1.0",
     "browserslist": "^4.28.1",
     "check-dependency-version-consistency": "^4.1.0",
@@ -79,7 +79,7 @@
   },
   "devDependencies": {
     "@babel/plugin-syntax-typescript": "^7.25.4",
-    "@tamagui/build": "2.5.3",
+    "@tamagui/build": "2.6.0",
     "@types/babel__core": "^7.20.5",
     "@types/find-root": "^1.1.2",
     "@types/node": "^22.1.0",

package/src/extractor/createExtractor.ts

@@ -76,16 +76,6 @@ function isFullyDisabled(props: TamaguiOptions) {
   return props.disableExtraction && props.disableDebugAttr
 }
 
-// a compile-evaluated style value carries a theme token if any leaf string is
-// "$"-prefixed (e.g. "$gray2"). such styles must NOT be flattened into a static
-// `style` object — the token is resolved at runtime so theme switching keeps working.
-function styleValueHasToken(v: any): boolean {
-  if (typeof v === 'string') return v.charCodeAt(0) === 36 // '$'
-  if (Array.isArray(v)) return v.some(styleValueHasToken)
-  if (v && typeof v === 'object') return Object.values(v).some(styleValueHasToken)
-  return false
-}
-
 // Walk up JSX ancestors looking for one that declares `group="<groupName>"` together
 // with the `untilMeasured` prop. Used to deopt children whose styles depend on a
 // parent that the runtime measures before emitting child styles (can't be modeled
@@ -2036,55 +2026,7 @@ export function createExtractor(
                 })}`
               )
             }
-            // PARTIAL FLATTEN (native): even when the element must stay on the runtime
-            // path (pseudo/group/dynamic keep it deopted), pre-merge the pure-static
-            // style props into a single `style={…}` so the runtime skips its per-prop
-            // loop for them (the dominant deopt cost on RN). theme tokens ($…) and
-            // dynamic props stay inline so theme/media switching + dynamics are
-            // unaffected; dead native hoverStyle is dropped (no-op on touch).
-            let partial: (t.JSXAttribute | t.JSXSpreadAttribute)[] | null = null
-            if (
-              platform === 'native' &&
-              !staticConfig.isHOC &&
-              !staticConfig.isStyledHOC &&
-              !ogAttributes.some(
-                (a) =>
-                  t.isJSXSpreadAttribute(a) ||
-                  (t.isJSXAttribute(a) &&
-                    t.isJSXIdentifier(a.name) &&
-                    a.name.name === 'style')
-              )
-            ) {
-              const staticStyle: Record<string, any> = {}
-              const consumed = new Set<string>()
-              for (const a of attrs) {
-                if (a.type !== 'style' || !a.name || !a.attr) continue
-                if (pseudoDescriptors[a.name]) continue
-                if (!t.isJSXAttribute(a.attr) || !t.isJSXIdentifier(a.attr.name)) continue
-                if (styleValueHasToken(a.value)) continue
-                Object.assign(staticStyle, a.value)
-                consumed.add(a.attr.name.name)
-              }
-              if (consumed.size >= 2) {
-                const kept = ogAttributes.filter((a) => {
-                  if (!t.isJSXAttribute(a) || !t.isJSXIdentifier(a.name)) return true
-                  const n = a.name.name
-                  if (consumed.has(n)) return false
-                  if (n === 'hoverStyle') return false
-                  if (n.startsWith('$group-') && getGroupPseudo(n) === 'hover')
-                    return false
-                  return true
-                })
-                partial = [
-                  t.jsxAttribute(
-                    t.jsxIdentifier('style'),
-                    t.jsxExpressionContainer(literalToAst(staticStyle) as t.Expression)
-                  ),
-                  ...kept,
-                ]
-              }
-            }
-            node.attributes = partial ?? ogAttributes
+            node.attributes = ogAttributes
             return
           }
 

package/src/extractor/extractToNative.ts

@@ -207,6 +207,7 @@ export function getBabelParseDefinition(options: TamaguiOptions) {
                 const stylesExpr = t.arrayExpression([])
                 const hocStylesExpr = t.arrayExpression([])
                 const expressions: t.Expression[] = []
+                const mediaExpressionIndexes = new Set<number>()
                 const finalAttrs: (t.JSXAttribute | t.JSXSpreadAttribute)[] = []
                 const themeKeysUsed = new Set<string>()
 
@@ -299,7 +300,22 @@ export function getBabelParseDefinition(options: TamaguiOptions) {
                         hasMediaKeys = true
                       }
 
-                      expressions.push(attr.value.test)
+                      let expression = attr.value.test
+                      if (
+                        attr.value.inlineMediaQuery &&
+                        t.isLogicalExpression(attr.value.test, { operator: '&&' }) &&
+                        t.isStringLiteral(attr.value.test.left)
+                      ) {
+                        expression = t.arrayExpression([
+                          t.stringLiteral(attr.value.inlineMediaQuery),
+                          t.unaryExpression(
+                            '!',
+                            t.unaryExpression('!', attr.value.test.right)
+                          ),
+                        ])
+                        mediaExpressionIndexes.add(expressions.length)
+                      }
+                      expressions.push(expression)
                       addStyleExpression(
                         t.conditionalExpression(
                           t.identifier(`_expressions[${expressions.length - 1}]`),
@@ -340,7 +356,8 @@ export function getBabelParseDefinition(options: TamaguiOptions) {
                 if (
                   themeKeysUsed.size ||
                   hocStylesExpr.elements.length > 1 ||
-                  hasDynamicStyle
+                  hasDynamicStyle ||
+                  hasMediaKeys
                 ) {
                   if (!hasImportedViewWrapper) {
                     root.unshiftContainer('body', importWithStyle)
@@ -386,8 +403,8 @@ export function getBabelParseDefinition(options: TamaguiOptions) {
                   if (expressions.length) {
                     // coerce runtime expressions to boolean so they can't be
                     // confused with string media keys at runtime
-                    const safeExpressions = expressions.map((expr) =>
-                      t.isStringLiteral(expr)
+                    const safeExpressions = expressions.map((expr, index) =>
+                      t.isStringLiteral(expr) || mediaExpressionIndexes.has(index)
                         ? expr
                         : t.unaryExpression('!', t.unaryExpression('!', expr))
                     )

package/types/extractor/createExtractor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createExtractor.d.ts","sourceRoot":"","sources":["../../src/extractor/createExtractor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAmB,MAAM,iBAAiB,CAAA;AAEhE,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AAmBjC,OAAO,KAAK,EAGV,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EAGf,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAoB,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAc1E,OAAO,EAAE,iBAAiB,EAA6B,MAAM,6BAA6B,CAAA;AAwB1F,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA;AAE1D,KAAK,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAuD9C,wBAAgB,eAAe,CAC7B,EAAE,MAAgB,EAAE,QAAgB,EAAE,GAAE,gBAAsC;;;;;yBAsJnD,cAAc;6BAPhB,cAAc;;mBAwBtB,UAAU,SAAS,mBAAmB;;;;;;;eAKpC,UAAU,SAAS,mBAAmB;;;;;;;EAmmF1D"}
+{"version":3,"file":"createExtractor.d.ts","sourceRoot":"","sources":["../../src/extractor/createExtractor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAmB,MAAM,iBAAiB,CAAA;AAEhE,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AAmBjC,OAAO,KAAK,EAGV,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EAGf,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAoB,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAc1E,OAAO,EAAE,iBAAiB,EAA6B,MAAM,6BAA6B,CAAA;AAwB1F,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA;AAE1D,KAAK,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AA6C9C,wBAAgB,eAAe,CAC7B,EAAE,MAAgB,EAAE,QAAgB,EAAE,GAAE,gBAAsC;;;;;yBAsJnD,cAAc;6BAPhB,cAAc;;mBAwBtB,UAAU,SAAS,mBAAmB;;;;;;;eAKpC,UAAU,SAAS,mBAAmB;;;;;;;EAmjF1D"}

package/types/extractor/extractToNative.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"extractToNative.d.ts","sourceRoot":"","sources":["../../src/extractor/extractToNative.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAwB,MAAM,aAAa,CAAA;AAQxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAsB9C,wBAAgB,eAAe,CAC7B,cAAc,EAAE,MAAM,EACtB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,cAAc,GACtB,eAAe,CAoBjB;AAED,wBAAgB,cAAc,QAK7B;AAED,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,cAAc;;;;wBAM3C,GAAG;;;EAyYtB"}
+{"version":3,"file":"extractToNative.d.ts","sourceRoot":"","sources":["../../src/extractor/extractToNative.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAwB,MAAM,aAAa,CAAA;AAQxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAsB9C,wBAAgB,eAAe,CAC7B,cAAc,EAAE,MAAM,EACtB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,cAAc,GACtB,eAAe,CAoBjB;AAED,wBAAgB,cAAc,QAK7B;AAED,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,cAAc;;;;wBAM3C,GAAG;;;EA0ZtB"}