@tamagui/static 2.7.2 → 2.7.3

package/dist/extractor/createExtractor.cjs

@@ -459,6 +459,7 @@ function createExtractor({
     }
     tm.mark("import-check", !!shouldPrintDebug);
     let couldntParse = false;
+    let didDynamicLoad = false;
     const modifiedComponents = /* @__PURE__ */new Set();
     const bindingCache = {};
     const callTraverse = a => {
@@ -503,10 +504,9 @@ function createExtractor({
           return;
         }
         let Component = getValidImportedComponent(parentName) || getValidImportedComponent(variableName);
-        if (!Component) {
-          if (!enableDynamicEvaluation) {
-            return;
-          }
+        const declaresVariants = !didDynamicLoad && definition.properties.some(prop => t.isObjectProperty(prop) && t.isIdentifier(prop.key) && prop.key.name === "variants");
+        if ((!Component || declaresVariants) && enableDynamicEvaluation) {
+          didDynamicLoad = true;
           try {
             if (shouldPrintDebug) {
               logger.info(`Unknown component: ${variableName} = styled(${parentName}) attempting dynamic load: ${sourcePath}`);
@@ -516,19 +516,17 @@ function createExtractor({
               components: [sourcePath],
               cacheKey: version
             });
-            if (!out2?.components) {
-              if (shouldPrintDebug) {
-                logger.info(`Couldn't load, got ${out2}`);
-              }
-              return;
-            }
-            propsWithFileInfo.allLoadedComponents = [...propsWithFileInfo.allLoadedComponents, ...out2.components];
-            Component = out2.components.flatMap(x => x.nameToInfo[variableName] ?? [])[0];
-            if (!out2.cached) {
-              const foundNames = out2.components?.map(x => Object.keys(x.nameToInfo).join(", ")).join(", ").trim();
-              if (foundNames) {
-                (0, import_cli_color.colorLog)(import_cli_color.Color.FgYellow, `      | Tamagui found dynamic components: ${foundNames}`);
+            if (out2?.components) {
+              propsWithFileInfo.allLoadedComponents = [...propsWithFileInfo.allLoadedComponents, ...out2.components];
+              Component = out2.components.flatMap(x => x.nameToInfo[variableName] ?? [])[0] || Component;
+              if (!out2.cached) {
+                const foundNames = out2.components?.map(x => Object.keys(x.nameToInfo).join(", ")).join(", ").trim();
+                if (foundNames) {
+                  (0, import_cli_color.colorLog)(import_cli_color.Color.FgYellow, `      | Tamagui found dynamic components: ${foundNames}`);
+                }
               }
+            } else if (shouldPrintDebug) {
+              logger.info(`Couldn't load, got ${out2}`);
             }
           } catch (err) {
             if (shouldPrintDebug) {
@@ -1690,7 +1688,11 @@ function createExtractor({
                 if (deoptProps.has(key)) {
                   shouldFlatten = false;
                 }
-                if (platform2 === "native" && key[0] === "$" && (key.startsWith("$theme-") || key.startsWith("$group-") && getGroupPseudo(key) !== "hover")) {
+                if (platform2 === "native" && key[0] === "$" && (key.startsWith("$theme-") || key.startsWith("$group-") && getGroupPseudo(key) !== "hover" ||
+                // same story for a breakpoint a variant brought with it:
+                // native matches media at render time, so there is nothing
+                // to write it to here
+                mediaQueryConfig[key.slice(1)])) {
                   shouldFlatten = false;
                 }
               }
@@ -1761,6 +1763,7 @@ function createExtractor({
             logger.info(["  - attrs (combined \u{1F500}): \n", (0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", "))].join(" "));
           }
           let getStyleError = null;
+          const mediaFromVariants = [];
           for (const attr of attrs) {
             try {
               if (shouldPrintDebug) {
@@ -1781,6 +1784,22 @@ function createExtractor({
                   {
                     const styles = getProps(attr.value, false, "style");
                     if (styles) {
+                      for (const key in styles) {
+                        if (key[0] !== "$") continue;
+                        const mediaKey = key.slice(1);
+                        if (!mediaQueryConfig[mediaKey]) continue;
+                        mediaFromVariants.push({
+                          type: "ternary",
+                          value: {
+                            inlineMediaQuery: mediaKey,
+                            test: t.stringLiteral(mediaKey),
+                            consequent: styles[key],
+                            alternate: null,
+                            remove() {}
+                          }
+                        });
+                        delete styles[key];
+                      }
                       attr.value = styles;
                     }
                     if (shouldPrintDebug) logger.info(["  * styles (in)", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(attr.value))].join(" "));
@@ -1812,6 +1831,9 @@ function createExtractor({
               getStyleError = err;
             }
           }
+          if (mediaFromVariants.length) {
+            attrs.push(...mediaFromVariants);
+          }
           if (shouldPrintDebug) {
             logger.info(["  - attrs (ternaries/combined):\n", (0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", "))].join(" "));
           }

package/dist/extractor/normalizeTernaries.cjs

@@ -85,11 +85,12 @@ function normalizeTernaries(ternaries) {
     }
     const altStyle = (shouldSwap ? consequent : alternate) ?? {};
     const consStyle = (shouldSwap ? alternate : consequent) ?? {};
+    const mediaLastWins = Boolean(rest.inlineMediaQuery);
     const nextAlt = ternariesByKey[key].alternate;
-    ternariesByKey[key].alternate = (0, import_web.mergeProps)(altStyle, nextAlt);
+    ternariesByKey[key].alternate = mediaLastWins ? (0, import_web.mergeProps)(nextAlt, altStyle) : (0, import_web.mergeProps)(altStyle, nextAlt);
     (0, import_propsToFontFamilyCache.forwardFontFamilyName)(altStyle, ternariesByKey[key].alternate);
     const nextCons = ternariesByKey[key].consequent;
-    ternariesByKey[key].consequent = (0, import_web.mergeProps)(consStyle, nextCons);
+    ternariesByKey[key].consequent = mediaLastWins ? (0, import_web.mergeProps)(nextCons, consStyle) : (0, import_web.mergeProps)(consStyle, nextCons);
     (0, import_propsToFontFamilyCache.forwardFontFamilyName)(consStyle, ternariesByKey[key].consequent);
   }
   const ternaryExpression = Object.keys(ternariesByKey).map(key => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/static",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "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.7.2",
-    "@tamagui/config-default": "2.7.2",
-    "@tamagui/core": "2.7.2",
-    "@tamagui/fake-react-native": "2.7.2",
-    "@tamagui/generate-themes": "2.7.2",
-    "@tamagui/helpers": "2.7.2",
-    "@tamagui/helpers-node": "2.7.2",
-    "@tamagui/proxy-worm": "2.7.2",
-    "@tamagui/react-native-web-internals": "2.7.2",
-    "@tamagui/react-native-web-lite": "2.7.2",
-    "@tamagui/shorthands": "2.7.2",
-    "@tamagui/types": "2.7.2",
-    "@tamagui/web": "2.7.2",
+    "@tamagui/cli-color": "2.7.3",
+    "@tamagui/config-default": "2.7.3",
+    "@tamagui/core": "2.7.3",
+    "@tamagui/fake-react-native": "2.7.3",
+    "@tamagui/generate-themes": "2.7.3",
+    "@tamagui/helpers": "2.7.3",
+    "@tamagui/helpers-node": "2.7.3",
+    "@tamagui/proxy-worm": "2.7.3",
+    "@tamagui/react-native-web-internals": "2.7.3",
+    "@tamagui/react-native-web-lite": "2.7.3",
+    "@tamagui/shorthands": "2.7.3",
+    "@tamagui/types": "2.7.3",
+    "@tamagui/web": "2.7.3",
     "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.7.2",
+    "@tamagui/build": "2.7.3",
     "@types/babel__core": "^7.20.5",
     "@types/find-root": "^1.1.2",
     "@types/node": "^22.1.0",

package/src/extractor/createExtractor.ts

@@ -624,6 +624,8 @@ export function createExtractor(
     tm.mark('import-check', !!shouldPrintDebug)
 
     let couldntParse = false
+    // evaluating the file resolves every styled() in it at once, so once is enough
+    let didDynamicLoad = false
     const modifiedComponents = new Set<NodePath<any>>()
 
     // only keeping a cache around per-file, reset it if it changes
@@ -696,11 +698,21 @@ export function createExtractor(
         let Component =
           getValidImportedComponent(parentName) || getValidImportedComponent(variableName)
 
-        if (!Component) {
-          if (!enableDynamicEvaluation) {
-            return
-          }
+        // the parent's staticConfig knows nothing about the variants this call
+        // declares, so a JSX site passing one reads as an unknown prop and
+        // de-opts the whole element. evaluating the file gives us the real
+        // staticConfig, variants included.
+        const declaresVariants =
+          !didDynamicLoad &&
+          definition.properties.some(
+            (prop) =>
+              t.isObjectProperty(prop) &&
+              t.isIdentifier(prop.key) &&
+              prop.key.name === 'variants'
+          )
 
+        if ((!Component || declaresVariants) && enableDynamicEvaluation) {
+          didDynamicLoad = true
           try {
             if (shouldPrintDebug) {
               logger.info(
@@ -714,32 +726,31 @@ export function createExtractor(
               cacheKey: version,
             })
 
-            if (!out?.components) {
-              if (shouldPrintDebug) {
-                logger.info(`Couldn't load, got ${out}`)
-              }
-              return
-            }
-
-            propsWithFileInfo.allLoadedComponents = [
-              ...propsWithFileInfo.allLoadedComponents,
-              ...out.components,
-            ]
-
-            Component = out.components.flatMap((x) => x.nameToInfo[variableName] ?? [])[0]
-
-            if (!out.cached) {
-              const foundNames = out.components
-                ?.map((x) => Object.keys(x.nameToInfo).join(', '))
-                .join(', ')
-                .trim()
-
-              if (foundNames) {
-                colorLog(
-                  Color.FgYellow,
-                  `      | Tamagui found dynamic components: ${foundNames}`
-                )
+            if (out?.components) {
+              propsWithFileInfo.allLoadedComponents = [
+                ...propsWithFileInfo.allLoadedComponents,
+                ...out.components,
+              ]
+
+              Component =
+                out.components.flatMap((x) => x.nameToInfo[variableName] ?? [])[0] ||
+                Component
+
+              if (!out.cached) {
+                const foundNames = out.components
+                  ?.map((x) => Object.keys(x.nameToInfo).join(', '))
+                  .join(', ')
+                  .trim()
+
+                if (foundNames) {
+                  colorLog(
+                    Color.FgYellow,
+                    `      | Tamagui found dynamic components: ${foundNames}`
+                  )
+                }
               }
+            } else if (shouldPrintDebug) {
+              logger.info(`Couldn't load, got ${out}`)
             }
           } catch (err: any) {
             if (shouldPrintDebug) {
@@ -2539,7 +2550,11 @@ export function createExtractor(
                   platform === 'native' &&
                   key[0] === '$' &&
                   (key.startsWith('$theme-') ||
-                    (key.startsWith('$group-') && getGroupPseudo(key) !== 'hover'))
+                    (key.startsWith('$group-') && getGroupPseudo(key) !== 'hover') ||
+                    // same story for a breakpoint a variant brought with it:
+                    // native matches media at render time, so there is nothing
+                    // to write it to here
+                    mediaQueryConfig[key.slice(1)])
                 ) {
                   shouldFlatten = false
                 }
@@ -2647,6 +2662,13 @@ export function createExtractor(
 
           let getStyleError: any = null
 
+          // a variant can carry its own media blocks ($md/$lg inside a variant
+          // value). getSplitStyles leaves those nested rather than folding them
+          // into the flat style, so hand them to the same media path a $md/$lg
+          // prop takes. they go on the end because a variant is a prop, and so
+          // outranks the media the styled() frame declared in its defaults.
+          const mediaFromVariants: ExtractedAttr[] = []
+
           // fix up ternaries, combine final style values
           for (const attr of attrs) {
             try {
@@ -2681,6 +2703,22 @@ export function createExtractor(
                   // expand variants and such
                   const styles = getProps(attr.value, false, 'style')
                   if (styles) {
+                    for (const key in styles) {
+                      if (key[0] !== '$') continue
+                      const mediaKey = key.slice(1)
+                      if (!mediaQueryConfig[mediaKey]) continue
+                      mediaFromVariants.push({
+                        type: 'ternary',
+                        value: {
+                          inlineMediaQuery: mediaKey,
+                          test: t.stringLiteral(mediaKey),
+                          consequent: styles[key],
+                          alternate: null,
+                          remove() {},
+                        },
+                      })
+                      delete styles[key]
+                    }
                     // @ts-ignore
                     attr.value = styles
                   }
@@ -2736,6 +2774,10 @@ export function createExtractor(
             }
           }
 
+          if (mediaFromVariants.length) {
+            attrs.push(...mediaFromVariants)
+          }
+
           if (shouldPrintDebug) {
             // prettier-ignore
             logger.info(

package/src/extractor/normalizeTernaries.ts

@@ -61,12 +61,23 @@ export function normalizeTernaries(ternaries: Ternary[]) {
     const altStyle = (shouldSwap ? consequent : alternate) ?? {}
     const consStyle = (shouldSwap ? alternate : consequent) ?? {}
 
+    // a media "ternary" is a breakpoint bucket, not a runtime branch: two of
+    // them for the same breakpoint are just two writes to it, and these arrive
+    // defaults-first, so a $lg on the JSX has to beat the $lg the styled()
+    // frame declared. real ternaries keep merging the other way, which the
+    // branch expansion below depends on.
+    const mediaLastWins = Boolean(rest.inlineMediaQuery)
+
     const nextAlt = ternariesByKey[key].alternate!
-    ternariesByKey[key].alternate = mergeProps(altStyle, nextAlt)
+    ternariesByKey[key].alternate = mediaLastWins
+      ? mergeProps(nextAlt, altStyle)
+      : mergeProps(altStyle, nextAlt)
     forwardFontFamilyName(altStyle, ternariesByKey[key].alternate)
 
     const nextCons = ternariesByKey[key].consequent!
-    ternariesByKey[key].consequent = mergeProps(consStyle, nextCons)
+    ternariesByKey[key].consequent = mediaLastWins
+      ? mergeProps(nextCons, consStyle)
+      : mergeProps(consStyle, nextCons)
     forwardFontFamilyName(consStyle, ternariesByKey[key].consequent)
   }
 

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;AA6C9C,wBAAgB,eAAe,CAC7B,EAAE,MAAgB,EAAE,QAAgB,EAAE,GAAE,gBAAsC;;;;;yBAsJnD,cAAc;6BAPhB,cAAc;;mBAwBtB,UAAU,SAAS,mBAAmB;;;;;;;eAKpC,UAAU,SAAS,mBAAmB;;;;;;;EA+kF1D"}
+{"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;;;;;;;EAynF1D"}

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

@@ -1 +1 @@
-{"version":3,"file":"normalizeTernaries.d.ts","sourceRoot":"","sources":["../../src/extractor/normalizeTernaries.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AAGjC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAGvC,wBAAgB,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,UAEzC;AAED,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,OAAO,EAAE,aAkEtD"}
+{"version":3,"file":"normalizeTernaries.d.ts","sourceRoot":"","sources":["../../src/extractor/normalizeTernaries.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AAGjC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAGvC,wBAAgB,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,UAEzC;AAED,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,OAAO,EAAE,aA6EtD"}