chakra-ui/panda @pandacss/compiler-wasm@2.0.0-beta.10

on GitHub

Minor Changes

• d2bea8a: css() and JSX style props can resolve simple pure helpers — local or imported arrow functions, function
  declarations, and IIFEs. token() comparisons inside those helpers resolve too.

  const pad = (n: number) => ({ padding: `${n}px` })
  css(pad(4)) // extracted

• f8027f3: Fix CSS cascade order, token pruning, and conditional JSX spreads where a later static prop overrides a
  spread. Design-system tree-shaking now runs before every CSS read/write path, not only cssgen / writeCss.

  getSplitCss() is a breaking shape change for direct callers:

  // before
  const files = compiler.getSplitCss()
  
  // after
  const { files, diagnostics } = compiler.getSplitCss()

• ebe9f5b: Add getKeyframeCss() to emit theme @keyframes without token vars or other layers.

• 52e84e6: Add native cascade-layer polyfill via polyfill / --polyfill (no PostCSS plugin required).

• a79c917: Opt into optimize.treeshakeDesignSystem to hydrate only the design-system modules your app imports, instead
  of the whole build-info artifact.

• 2714583: Add viewTransition() for the View Transitions API. Pass slot styles, get a stable vt_* bag class, and
  Panda emits the matching ::view-transition-* rules. Import from styled-system/css. You still set unique
  view-transition-name values at runtime — Panda only owns the shared CSS. Design-system build info carries the bags
  so apps hydrate them without re-extracting.

  import { viewTransition } from 'styled-system/css'
  
  const slide = viewTransition({
    group: { animationDuration: '0.4s' },
    old: { opacity: 0 },
    new: { opacity: 1 },
  })

  // React / Next
  import { ViewTransition } from 'react'
  
  ;<ViewTransition name="hero" share={slide}>
    <img src="…" alt="…" />
  </ViewTransition>

  <!-- Astro -->
  <img class="{slide}" transition:name="hero" src="…" alt="…" />

  // Solid / Nuxt — framework starts the transition; you attach name + bag class
  <img class={slide} style={{ viewTransitionName: 'hero' }} src="…" alt="…" />

Patch Changes

• Updated dependencies [05e085d]
• Updated dependencies [f8027f3]
• Updated dependencies [ebe9f5b]
• Updated dependencies [52e84e6]
• Updated dependencies [a79c917]
• Updated dependencies [2714583]
  • @pandacss/compiler-shared@2.0.0-beta.10
  • @pandacss/types@2.0.0-beta.10