@tamagui/static 2.4.0 → 2.4.2

package/dist/extractor/createExtractor.cjs

@@ -71,6 +71,39 @@ 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) {
+    if (current.isJSXElement()) {
+      const opening = current.node.openingElement;
+      let foundGroup = false;
+      let foundUntilMeasured = false;
+      for (const attr of opening.attributes) {
+        if (!t.isJSXAttribute(attr)) continue;
+        if (!t.isJSXIdentifier(attr.name)) continue;
+        const aName = attr.name.name;
+        if (aName === "group") {
+          if (t.isStringLiteral(attr.value) && attr.value.value === groupName) {
+            foundGroup = true;
+          } else if (t.isJSXExpressionContainer(attr.value) && t.isStringLiteral(attr.value.expression) && attr.value.expression.value === groupName) {
+            foundGroup = true;
+          }
+        } else if (aName === "untilMeasured") {
+          foundUntilMeasured = true;
+        }
+      }
+      if (foundGroup && foundUntilMeasured) return true;
+    }
+    current = current.parentPath;
+  }
+  return false;
+}
 function createExtractor({
   logger = console,
   platform = "web"
@@ -293,6 +326,13 @@ function createExtractor({
       // don't disable variants or else you lose many things flattening
       staticConfig.variants?.[name] || projectInfo?.tamaguiConfig?.shorthands[name]);
     }
+    function getGroupPseudo(name) {
+      const [_, groupName, a, b, c] = name.split("-");
+      if (!groupName) return;
+      const m2 = a && b ? `${a}-${b}` : "";
+      const media = m2 && mediaQueryConfig[m2] && m2 || a && mediaQueryConfig[a] && a;
+      return media ? media === m2 ? c : b ? `${b}${c ? `-${c}` : ""}` : void 0 : a ? `${a}${b ? `-${b}` : ""}${c ? `-${c}` : ""}` : void 0;
+    }
     const isTargetingHTML = platform2 === "web";
     const ogDebug = shouldPrintDebug;
     const tm = (0, import_timer.timer)();
@@ -806,6 +846,10 @@ function createExtractor({
                 }
                 return [attribute.value, path.get("value")];
               })();
+              if (deoptProps.has(name) || platform2 === "native" && name[0] === "$" && (name.startsWith("$theme-") || name.startsWith("$group-") && getGroupPseudo(name) !== "hover")) {
+                inlined.set(name, true);
+                return attr;
+              }
               const remove = () => {
                 Array.isArray(valuePath) ? valuePath.map(p => p.remove()) : valuePath.remove();
               };
@@ -843,7 +887,17 @@ function createExtractor({
                 inlined.set("theme", attr.value);
                 return attr;
               }
+              if (isTargetingHTML && name === "group" && t.isStringLiteral(value)) {
+                return [];
+              }
               const styleValue = attemptEvalSafe(value);
+              if (name[0] === "$" && (name.startsWith("$theme-") || name.startsWith("$group-")) && styleValue && typeof styleValue === "object" && Object.keys(styleValue).some(k => k[0] === "$")) {
+                if (shouldPrintDebug) {
+                  logger.info(`  ! nested media-like key inside ${name}, deopt to runtime`);
+                }
+                inlined.set(name, true);
+                return attr;
+              }
               if (!variants[name] && !isValidStyleKey(name, staticConfig)) {
                 let out = null;
                 propMapper(name, styleValue, propMapperStyleState, false, (key, val) => {
@@ -906,12 +960,15 @@ function createExtractor({
                 }
                 if (isValidStyleKey(name, staticConfig)) {
                   if (name[0] === "$") {
-                    if (name.startsWith("$theme-") || name.startsWith("$group-")) {
-                      if (shouldPrintDebug) {
-                        logger.info(`  ! not flattening media-like style: ${name}`);
+                    if (name.startsWith("$group-")) {
+                      const groupName = name.slice("$group-".length).split("-")[0];
+                      if (groupName && hasUntilMeasuredAncestor(path, groupName)) {
+                        if (shouldPrintDebug) {
+                          logger.info(`  ! group="${groupName}" ancestor has untilMeasured, not flattening: ${name}`);
+                        }
+                        inlined.set(name, true);
+                        return attr;
                       }
-                      inlined.set(name, true);
-                      return attr;
                     }
                     if (name.startsWith("$platform-")) {
                       const platformName = name.slice(10);
@@ -1211,7 +1268,14 @@ function createExtractor({
           ...(restProps.inlineProps || []), ...(staticConfig.inlineProps || [])]);
           const deoptProps = /* @__PURE__ */new Set([
           // always de-opt animation these
-          "animation", "animateOnly", "animatePresence", "disableOptimization", ...(!isTargetingHTML ? ["pressStyle", "focusStyle", "focusVisibleStyle", "focusWithinStyle", "disabledStyle"] : []),
+          "animation", "animateOnly", "animatePresence", "disableOptimization", ...(!isTargetingHTML ? [
+          // native has no css pseudo selectors; these are runtime-only on
+          // rn (event listeners + style merge in createComponent), and if
+          // we let them flatten into the stylesheet they get written
+          // under a literal key that rn treats as an unknown style prop.
+          // hover is intentionally excluded: it is no-op on native and
+          // should be dropped rather than preserved as runtime work.
+          "pressStyle", "focusStyle", "focusVisibleStyle", "focusWithinStyle", "disabledStyle"] : []),
           // when using a non-CSS driver, de-opt on enterStyle/exitStyle
           ...(tamaguiConfig?.animations.isReactNative ? ["enterStyle", "exitStyle"] : [])]);
           const inlineWhenUnflattened = new Set(staticConfig.inlineWhenUnflattened || []);
@@ -1328,7 +1392,31 @@ function createExtractor({
                 neverFlatten: staticConfig.neverFlatten
               })}`);
             }
-            node.attributes = ogAttributes;
+            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;
             return;
           }
           let skipMap = false;
@@ -1566,7 +1654,25 @@ function createExtractor({
             const before = process.env.IS_STATIC;
             process.env.IS_STATIC = "is_static";
             try {
-              const out = getSplitStyles(props, staticConfig, defaultTheme, "", componentState, {
+              let extractedMediaLikeProps = null;
+              let propsForSplit = props;
+              for (const k in props) {
+                if (k[0] === "$" && (k.startsWith("$group-") || k.startsWith("$theme-"))) {
+                  if (propsForSplit === props) {
+                    propsForSplit = {
+                      ...props
+                    };
+                  }
+                  if (platform2 === "native" && k.startsWith("$group-") && getGroupPseudo(k) === "hover") {
+                    delete propsForSplit[k];
+                    continue;
+                  }
+                  extractedMediaLikeProps ||= {};
+                  extractedMediaLikeProps[k] = propsForSplit[k];
+                  delete propsForSplit[k];
+                }
+              }
+              const out = getSplitStyles(propsForSplit, staticConfig, defaultTheme, "", componentState, {
                 ...styleProps,
                 noClass: true,
                 fallbackProps: completeProps,
@@ -1574,15 +1680,36 @@ function createExtractor({
                   resolveValues: "except-theme"
                 })
               }, void 0, void 0, void 0, void 0, false, debugPropValue || shouldPrintDebug);
+              if (extractedMediaLikeProps && platform2 !== "native") {
+                for (const k in extractedMediaLikeProps) {
+                  const block = extractedMediaLikeProps[k];
+                  if (!block || typeof block !== "object") continue;
+                  const blockOut = getSplitStyles(block, staticConfig, defaultTheme, "", componentState, {
+                    ...styleProps,
+                    noClass: true,
+                    fallbackProps: completeProps
+                  }, void 0, void 0, void 0, void 0, false, debugPropValue || shouldPrintDebug);
+                  if (blockOut) {
+                    extractedMediaLikeProps[k] = {
+                      ...blockOut.style,
+                      ...blockOut.pseudos
+                    };
+                  }
+                }
+              }
               let outProps = {
                 ...(includeProps ? out.viewProps : {}),
                 ...out.style,
-                ...out.pseudos
+                ...out.pseudos,
+                ...extractedMediaLikeProps
               };
               for (const key in outProps) {
                 if (deoptProps.has(key)) {
                   shouldFlatten = false;
                 }
+                if (platform2 === "native" && key[0] === "$" && (key.startsWith("$theme-") || key.startsWith("$group-") && getGroupPseudo(key) !== "hover")) {
+                  shouldFlatten = false;
+                }
               }
               if (shouldPrintDebug) {
                 logger.info(`(${debugName})`);

package/dist/extractor/extractToClassNames.cjs

@@ -136,6 +136,39 @@ async function extractToClassNames({
       let baseFontFamily = "";
       let mediaStylesSeen = 1;
       const comment = util.format("/* %s:%s (%s) */", filePath, lineNumbers, originalNodeName);
+      let staticGroupName = null;
+      for (const attr of jsxPath.node.openingElement.attributes) {
+        if (!t.isJSXAttribute(attr) || !t.isJSXIdentifier(attr.name)) continue;
+        if (attr.name.name !== "group") continue;
+        if (t.isStringLiteral(attr.value)) {
+          staticGroupName = attr.value.value;
+        } else if (t.isJSXExpressionContainer(attr.value) && t.isStringLiteral(attr.value.expression)) {
+          staticGroupName = attr.value.expression.value;
+        }
+        break;
+      }
+      if (staticGroupName) {
+        const containerIdentifier = `t_group_${staticGroupName}`;
+        const containerType = tamaguiConfig.settings?.webContainerType || "inline-size";
+        const containerSelector = `.${containerIdentifier}`;
+        if (!cssMap.has(containerSelector)) {
+          cssMap.set(containerSelector, {
+            css: `${containerSelector} { container-name: ${staticGroupName}; container-type: ${containerType}; }`,
+            commentTexts: [comment]
+          });
+        } else {
+          cssMap.get(containerSelector).commentTexts.push(comment);
+        }
+      }
+      let elementIsAnimated = false;
+      for (const attr of jsxPath.node.openingElement.attributes) {
+        if (!t.isJSXAttribute(attr) || !t.isJSXIdentifier(attr.name)) continue;
+        const n = attr.name.name;
+        if (n === "animation" || n === "animateOnly" || n === "animatePresence" || n === "animatedBy" || n === "enterStyle" || n === "exitStyle") {
+          elementIsAnimated = true;
+          break;
+        }
+      }
       function addStyle(style) {
         const identifier = style[import_web.StyleObjectIdentifier];
         const rules = style[import_web.StyleObjectRules];
@@ -158,12 +191,22 @@ async function extractToClassNames({
           const property = style2[0];
           const mediaName = property.slice(1);
           if (mediaName.startsWith("group-")) {
-            throw new import_errors.BailOptimizationError();
+            if (elementIsAnimated) {
+              throw new import_errors.BailOptimizationError();
+            }
+            const mediaStyle = createMediaStyle(style2, mediaName, extractor.getTamagui().media, "group", false, mediaStylesSeen);
+            const identifier2 = addStyle(mediaStyle);
+            classNames.push(identifier2);
+            continue;
           }
           const mediaTypeMatch = mediaName.match(/^(theme|platform)-/);
           if (mediaTypeMatch) {
             const mediaType = mediaTypeMatch[1];
-            const mediaStyle = createMediaStyle(style2, mediaName, extractor.getTamagui().media, mediaType, false, mediaStylesSeen);
+            if (mediaType === "theme" && elementIsAnimated) {
+              throw new import_errors.BailOptimizationError();
+            }
+            const innerKey = mediaType === "theme" ? mediaName.slice("theme-".length) : mediaName;
+            const mediaStyle = createMediaStyle(style2, innerKey, extractor.getTamagui().media, mediaType, false, mediaStylesSeen);
             const identifier2 = addStyle(mediaStyle);
             classNames.push(identifier2);
             continue;
@@ -249,6 +292,9 @@ async function extractToClassNames({
       if (baseFontFamily) {
         baseClassNameStr = `font_${baseFontFamily}${baseClassNameStr ? ` ${baseClassNameStr}` : ""}`;
       }
+      if (staticGroupName) {
+        baseClassNameStr = `t_group_${staticGroupName}${baseClassNameStr ? ` ${baseClassNameStr}` : ""}`;
+      }
       const baseTypeClass = staticConfig.isText ? "is_Text" : "is_View";
       baseClassNameStr = `${baseTypeClass}${baseClassNameStr ? ` ${baseClassNameStr}` : ""}`;
       const componentNameFinal = staticConfig.componentName;

package/package.json

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

package/src/extractor/createExtractor.ts

@@ -76,6 +76,53 @@ 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
+// in static CSS).
+function hasUntilMeasuredAncestor(path: NodePath<any>, groupName: string): boolean {
+  let current: NodePath<any> | null = path.parentPath
+  while (current) {
+    if (current.isJSXElement()) {
+      const opening = current.node.openingElement
+      let foundGroup = false
+      let foundUntilMeasured = false
+      for (const attr of opening.attributes) {
+        if (!t.isJSXAttribute(attr)) continue
+        if (!t.isJSXIdentifier(attr.name)) continue
+        const aName = attr.name.name
+        if (aName === 'group') {
+          // only literal string equality counts — dynamic group= is left to runtime
+          if (t.isStringLiteral(attr.value) && attr.value.value === groupName) {
+            foundGroup = true
+          } else if (
+            t.isJSXExpressionContainer(attr.value) &&
+            t.isStringLiteral(attr.value.expression) &&
+            attr.value.expression.value === groupName
+          ) {
+            foundGroup = true
+          }
+        } else if (aName === 'untilMeasured') {
+          foundUntilMeasured = true
+        }
+      }
+      if (foundGroup && foundUntilMeasured) return true
+    }
+    current = current.parentPath
+  }
+  return false
+}
+
 export function createExtractor(
   { logger = console, platform = 'web' }: ExtractorOptions = { logger: console }
 ) {
@@ -359,6 +406,22 @@ export function createExtractor(
       )
     }
 
+    function getGroupPseudo(name: string) {
+      const [_, groupName, a, b, c] = name.split('-')
+      if (!groupName) return
+      const m2 = a && b ? `${a}-${b}` : ''
+      const media = (m2 && mediaQueryConfig[m2] && m2) || (a && mediaQueryConfig[a] && a)
+      return media
+        ? media === m2
+          ? c
+          : b
+            ? `${b}${c ? `-${c}` : ''}`
+            : undefined
+        : a
+          ? `${a}${b ? `-${b}` : ''}${c ? `-${c}` : ''}`
+          : undefined
+    }
+
     /**
      * Step 1: Determine if importing any statically extractable components
      */
@@ -1095,6 +1158,12 @@ export function createExtractor(
 
             ...(!isTargetingHTML
               ? [
+                  // native has no css pseudo selectors; these are runtime-only on
+                  // rn (event listeners + style merge in createComponent), and if
+                  // we let them flatten into the stylesheet they get written
+                  // under a literal key that rn treats as an unknown style prop.
+                  // hover is intentionally excluded: it is no-op on native and
+                  // should be dropped rather than preserved as runtime work.
                   'pressStyle',
                   'focusStyle',
                   'focusVisibleStyle',
@@ -1368,6 +1437,20 @@ export function createExtractor(
               return [attribute.value!, path.get('value')!] as const
             })()
 
+            // these props have runtime-only meaning on native. decide from the
+            // original jsx attr, before getSplitStyles has a chance to drop
+            // native-dead work like hoverStyle from its static output.
+            if (
+              deoptProps.has(name) ||
+              (platform === 'native' &&
+                name[0] === '$' &&
+                (name.startsWith('$theme-') ||
+                  (name.startsWith('$group-') && getGroupPseudo(name) !== 'hover')))
+            ) {
+              inlined.set(name, true)
+              return attr
+            }
+
             const remove = () => {
               Array.isArray(valuePath)
                 ? valuePath.map((p) => p.remove())
@@ -1420,9 +1503,33 @@ export function createExtractor(
               return attr
             }
 
+            // static `group="<literal>"` is handled at compile-time in
+            // extractToClassNames (emits container CSS + adds `t_group_<name>`
+            // className), so we drop the JSX attribute here without bailing
+            // flattening. dynamic `group={expr}` falls through to runtime.
+            if (isTargetingHTML && name === 'group' && t.isStringLiteral(value)) {
+              return []
+            }
+
             // if value can be evaluated, extract it and filter it out
             const styleValue = attemptEvalSafe(value)
 
+            // media-like blocks with nested $-keys (eg $theme-dark={{ $sm: {…} }})
+            // can't resolve to static CSS in one pass — keep them on the runtime path
+            if (
+              name[0] === '$' &&
+              (name.startsWith('$theme-') || name.startsWith('$group-')) &&
+              styleValue &&
+              typeof styleValue === 'object' &&
+              Object.keys(styleValue).some((k) => k[0] === '$')
+            ) {
+              if (shouldPrintDebug) {
+                logger.info(`  ! nested media-like key inside ${name}, deopt to runtime`)
+              }
+              inlined.set(name, true)
+              return attr
+            }
+
             // never flatten if a prop isn't a valid static attribute
             // only post prop-mapping
             if (!variants[name] && !isValidStyleKey(name, staticConfig)) {
@@ -1525,15 +1632,25 @@ export function createExtractor(
               }
 
               if (isValidStyleKey(name, staticConfig)) {
-                // $theme-, $group- styles should not be flattened (needs runtime handling)
-                // $platform- can be flattened if the platform matches
+                // $theme- / $group- styles extract through the atomic-CSS pipeline
+                // (extractToClassNames → createMediaStyle), so they fall through to
+                // the normal style return below. The one case we still bail is
+                // $group-<name>-* when an ancestor element declares `group="<name>"`
+                // together with `untilMeasured` — the runtime measures the parent
+                // and only then emits child styles, which can't be modeled in CSS.
+                // $platform- can be flattened if the platform matches.
                 if (name[0] === '$') {
-                  if (name.startsWith('$theme-') || name.startsWith('$group-')) {
-                    if (shouldPrintDebug) {
-                      logger.info(`  ! not flattening media-like style: ${name}`)
+                  if (name.startsWith('$group-')) {
+                    const groupName = name.slice('$group-'.length).split('-')[0]
+                    if (groupName && hasUntilMeasuredAncestor(path, groupName)) {
+                      if (shouldPrintDebug) {
+                        logger.info(
+                          `  ! group="${groupName}" ancestor has untilMeasured, not flattening: ${name}`
+                        )
+                      }
+                      inlined.set(name, true)
+                      return attr
                     }
-                    inlined.set(name, true)
-                    return attr
                   }
 
                   // $platform-web, $platform-native, $platform-ios, $platform-android, $platform-tv, $platform-androidtv, $platform-tvos
@@ -1901,7 +2018,6 @@ export function createExtractor(
           })
 
           if (!shouldFlatten) {
-            // were no longer partially optimizing, it adds a lot of complexity for dubious performance
             if (shouldPrintDebug) {
               logger.info(
                 `Deopting ${JSON.stringify({
@@ -1913,7 +2029,55 @@ export function createExtractor(
                 })}`
               )
             }
-            node.attributes = ogAttributes
+            // 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
             return
           }
 
@@ -2302,8 +2466,37 @@ export function createExtractor(
             const before = process.env.IS_STATIC
             process.env.IS_STATIC = 'is_static'
             try {
+              // $group-* / $theme-* keys carry block-form style objects that
+              // getSplitStyles drops in static mode (no parent group context,
+              // no theme value to read). Pluck them out so the atomic-CSS
+              // pipeline in extractToClassNames can emit @container / theme
+              // rules for them directly.
+              let extractedMediaLikeProps: Record<string, any> | null = null
+              let propsForSplit: any = props
+              for (const k in props) {
+                if (
+                  k[0] === '$' &&
+                  (k.startsWith('$group-') || k.startsWith('$theme-'))
+                ) {
+                  if (propsForSplit === props) {
+                    propsForSplit = { ...props }
+                  }
+                  if (
+                    platform === 'native' &&
+                    k.startsWith('$group-') &&
+                    getGroupPseudo(k) === 'hover'
+                  ) {
+                    delete propsForSplit[k]
+                    continue
+                  }
+                  extractedMediaLikeProps ||= {}
+                  extractedMediaLikeProps[k] = propsForSplit[k]
+                  delete propsForSplit[k]
+                }
+              }
+
               const out = getSplitStyles(
-                props,
+                propsForSplit,
                 staticConfig,
                 defaultTheme,
                 '',
@@ -2324,10 +2517,47 @@ export function createExtractor(
                 debugPropValue || shouldPrintDebug
               )!
 
+              // resolve tokens inside the plucked blocks: they skipped the main
+              // split, so values like "$color5" would flow raw into the emitted
+              // CSS where browsers reject the declaration. run each block through
+              // its own static split so tokens become var(--x) references.
+              // (native never extracts these — it deopts below — so web only.)
+              if (extractedMediaLikeProps && platform !== 'native') {
+                for (const k in extractedMediaLikeProps) {
+                  const block = extractedMediaLikeProps[k]
+                  if (!block || typeof block !== 'object') continue
+                  const blockOut = getSplitStyles(
+                    block,
+                    staticConfig,
+                    defaultTheme,
+                    '',
+                    componentState,
+                    {
+                      ...styleProps,
+                      noClass: true,
+                      fallbackProps: completeProps,
+                    },
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    false,
+                    debugPropValue || shouldPrintDebug
+                  )
+                  if (blockOut) {
+                    extractedMediaLikeProps[k] = {
+                      ...blockOut.style,
+                      ...blockOut.pseudos,
+                    }
+                  }
+                }
+              }
+
               let outProps = {
                 ...(includeProps ? out.viewProps : {}),
                 ...out.style,
                 ...out.pseudos,
+                ...extractedMediaLikeProps,
               }
 
               // check de-opt props again
@@ -2335,6 +2565,20 @@ export function createExtractor(
                 if (deoptProps.has(key)) {
                   shouldFlatten = false
                 }
+                // native has no atomic-CSS sink for theme- / group- pseudo
+                // blocks; if they flatten they get serialized under the literal
+                // `$theme-…` / `$group-…` key into the RN StyleSheet, where the
+                // runtime's @container / theme-name matching never runs. de-opt
+                // → preserve as inline prop so getSplitStyles handles them at
+                // render time.
+                if (
+                  platform === 'native' &&
+                  key[0] === '$' &&
+                  (key.startsWith('$theme-') ||
+                    (key.startsWith('$group-') && getGroupPseudo(key) !== 'hover'))
+                ) {
+                  shouldFlatten = false
+                }
               }
 
               if (shouldPrintDebug) {

package/src/extractor/extractToClassNames.ts

@@ -170,6 +170,72 @@ export async function extractToClassNames({
         originalNodeName
       )
 
+      // detect static `group="<name>"` literal — runtime side normally emits the
+      // container-name/container-type CSS lazily via getSplitStyles (createComponent
+      // path), but extracted elements never go through that code, so we emit the
+      // equivalent CSS at compile time and add `t_group_<name>` to the className.
+      let staticGroupName: string | null = null
+      for (const attr of jsxPath.node.openingElement.attributes) {
+        if (!t.isJSXAttribute(attr) || !t.isJSXIdentifier(attr.name)) continue
+        if (attr.name.name !== 'group') continue
+        if (t.isStringLiteral(attr.value)) {
+          staticGroupName = attr.value.value
+        } else if (
+          t.isJSXExpressionContainer(attr.value) &&
+          t.isStringLiteral(attr.value.expression)
+        ) {
+          staticGroupName = attr.value.expression.value
+        }
+        // dynamic group={someProp} falls back to the runtime path.
+        break
+      }
+      if (staticGroupName) {
+        const containerIdentifier = `t_group_${staticGroupName}`
+        const containerType =
+          (tamaguiConfig.settings?.webContainerType as string | undefined) ||
+          'inline-size'
+        const containerSelector = `.${containerIdentifier}`
+        if (!cssMap.has(containerSelector)) {
+          cssMap.set(containerSelector, {
+            css: `${containerSelector} { container-name: ${staticGroupName}; container-type: ${containerType}; }`,
+            commentTexts: [comment],
+          })
+        } else {
+          cssMap.get(containerSelector)!.commentTexts.push(comment)
+        }
+      }
+
+      // invariant guard for $group-/$theme- CSS extraction (below): those styles
+      // can only be extracted to static @container / theme CSS when a class toggle
+      // alone expresses the change. JS animation drivers (reanimated, motion, moti,
+      // react-native) interpolate in JS and need the runtime path to read hard
+      // values when the element animates — a static class can't drive them. gated
+      // on whether THIS element animates rather than on the driver, because motion
+      // is isReactNative:false yet still needs JS.
+      //
+      // in practice createExtractor's deoptProps already de-opts every animated
+      // element upstream (`animation`/`animateOnly`/`animatePresence` always;
+      // enterStyle/exitStyle on RN drivers), so a flattened element reaching here
+      // is normally non-animated and this never fires. it keeps the invariant
+      // local and correct regardless of future deoptProps changes — it only ever
+      // bails the animated case to runtime, never widens what extracts.
+      let elementIsAnimated = false
+      for (const attr of jsxPath.node.openingElement.attributes) {
+        if (!t.isJSXAttribute(attr) || !t.isJSXIdentifier(attr.name)) continue
+        const n = attr.name.name
+        if (
+          n === 'animation' ||
+          n === 'animateOnly' ||
+          n === 'animatePresence' ||
+          n === 'animatedBy' ||
+          n === 'enterStyle' ||
+          n === 'exitStyle'
+        ) {
+          elementIsAnimated = true
+          break
+        }
+      }
+
       function addStyle(style: StyleObject) {
         const identifier = style[StyleObjectIdentifier]
         const rules = style[StyleObjectRules]
@@ -194,20 +260,46 @@ export async function extractToClassNames({
           const property = style[0]
           const mediaName = property.slice(1)
 
-          // $group- styles must bail out entirely - they need runtime handling because
-          // group changes can affect children that may be animated and need hard values.
-          // In the future, CSS animation drivers could potentially optimize this.
+          // $group- styles extract through createMediaStyle which emits @container
+          // rules keyed on the parent's `t_group_<name>` className.
           if (mediaName.startsWith('group-')) {
-            throw new BailOptimizationError()
+            // a class toggle can't drive a JS animation driver's interpolation;
+            // keep animated elements on the runtime path (matches pre-extraction
+            // behavior for the group case).
+            if (elementIsAnimated) {
+              throw new BailOptimizationError()
+            }
+            const mediaStyle = createMediaStyle(
+              style,
+              mediaName,
+              extractor.getTamagui()!.media,
+              'group',
+              false,
+              mediaStylesSeen
+            )
+            const identifier = addStyle(mediaStyle)
+            classNames.push(identifier)
+            continue
           }
 
           // Check for theme/platform media queries (e.g., $theme-dark, $platform-web)
           const mediaTypeMatch = mediaName.match(/^(theme|platform)-/)
           if (mediaTypeMatch) {
             const mediaType = mediaTypeMatch[1] as 'theme' | 'platform'
+            // $theme- values can change at runtime (theme switch); if this
+            // element animates, a JS driver must interpolate the change, so keep
+            // it on the runtime path. $platform- is build-time static — never gated.
+            if (mediaType === 'theme' && elementIsAnimated) {
+              throw new BailOptimizationError()
+            }
+            // createMediaStyle internally calls getGroupPropParts(`theme-` + key)
+            // for theme, so we must pass the short key ("dark", not "theme-dark")
+            // to avoid double-prefixing. Platform stays as-is (runtime parity).
+            const innerKey =
+              mediaType === 'theme' ? mediaName.slice('theme-'.length) : mediaName
             const mediaStyle = createMediaStyle(
               style,
-              mediaName,
+              innerKey,
               extractor.getTamagui()!.media,
               mediaType,
               false,
@@ -343,6 +435,13 @@ export async function extractToClassNames({
         baseClassNameStr = `font_${baseFontFamily}${baseClassNameStr ? ` ${baseClassNameStr}` : ''}`
       }
 
+      // add t_group_<name> for elements with a static group="<name>" literal so
+      // descendants' @container <name> rules can match (runtime path normally
+      // appends this class; extracted elements bypass it).
+      if (staticGroupName) {
+        baseClassNameStr = `t_group_${staticGroupName}${baseClassNameStr ? ` ${baseClassNameStr}` : ''}`
+      }
+
       // add is_View or is_Text base class matching runtime behavior
       const baseTypeClass = staticConfig.isText ? 'is_Text' : 'is_View'
       baseClassNameStr = `${baseTypeClass}${baseClassNameStr ? ` ${baseClassNameStr}` : ''}`

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

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

@@ -1 +1 @@
-{"version":3,"file":"extractToClassNames.d.ts","sourceRoot":"","sources":["../../src/extractor/extractToClassNames.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AAKjC,OAAO,KAAK,EAAe,cAAc,EAAW,MAAM,UAAU,CAAA;AAEpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAYlD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,EAAE,CAAC,CAAC,IAAI,CAAA;IACX,GAAG,EAAE,GAAG,CAAA;IACR,KAAK,EAAE;QACL,MAAM,EAAE,MAAM,CAAA;QACd,SAAS,EAAE,MAAM,CAAA;QACjB,SAAS,EAAE,MAAM,CAAA;QACjB,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;CACF,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,EAAE,SAAS,CAAA;IACpB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,cAAc,CAAA;IACvB,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAA;CACtC,CAAA;AAQD,wBAAsB,mBAAmB,CAAC,EACxC,SAAS,EACT,MAAM,EACN,UAAe,EACf,OAAO,EACP,gBAAgB,GACjB,EAAE,wBAAwB,GAAG,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC,CA2gB9D"}
+{"version":3,"file":"extractToClassNames.d.ts","sourceRoot":"","sources":["../../src/extractor/extractToClassNames.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AAKjC,OAAO,KAAK,EAAe,cAAc,EAAW,MAAM,UAAU,CAAA;AAEpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAYlD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,EAAE,CAAC,CAAC,IAAI,CAAA;IACX,GAAG,EAAE,GAAG,CAAA;IACR,KAAK,EAAE;QACL,MAAM,EAAE,MAAM,CAAA;QACd,SAAS,EAAE,MAAM,CAAA;QACjB,SAAS,EAAE,MAAM,CAAA;QACjB,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;CACF,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,EAAE,SAAS,CAAA;IACpB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,cAAc,CAAA;IACvB,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAA;CACtC,CAAA;AAQD,wBAAsB,mBAAmB,CAAC,EACxC,SAAS,EACT,MAAM,EACN,UAAe,EACf,OAAO,EACP,gBAAgB,GACjB,EAAE,wBAAwB,GAAG,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC,CA8mB9D"}