🐼 Panda v0.15.3

[anubra266]

To upgrade to v0.15.3:

pnpm up "@pandacss/*"
#or
yarn up '@pandacss/*'

What's Changed

Fixed

• Fix issue where HMR does not work for Vue JSX factory and patterns
• Fix issue in template literal mode where media queries doesn't work
• Fix ExtendableUtilityConfig typings after a regression in 0.15.2 (due to
  types: switch to interfaces and rm DeepPartial #1410)
• Fix ExtendableTheme (specifically make the RecipeConfig Partial inside the theme: { extend: { ... } } object),
  same for slotRecipes

Added

• Add a new config.importMap option that allows you to specify a custom module specifier to import from instead of
  being tied to the outdir

You can now do things like leverage the native package.json
imports:

export default defineConfig({
  outdir: './outdir',
  importMap: {
    css: '#panda/styled-system/css',
    recipes: '#panda/styled-system/recipes',
    patterns: '#panda/styled-system/patterns',
    jsx: '#panda/styled-system/jsx',
  },
})

Or you could also make your outdir an actual package from your monorepo:

export default defineConfig({
  outdir: '../packages/styled-system',
  importMap: {
    css: '@monorepo/styled-system',
    recipes: '@monorepo/styled-system',
    patterns: '@monorepo/styled-system',
    jsx: '@monorepo/styled-system',
  },
})

Working with tsconfig paths aliases is easy:

export default defineConfig({
  outdir: 'styled-system',
  importMap: {
    css: 'styled-system/css',
    recipes: 'styled-system/recipes',
    patterns: 'styled-system/patterns',
    jsx: 'styled-system/jsx',
  },
})

Changed

Automatically allow overriding config recipe compoundVariants styles within the styled JSX factory, example below

With this config recipe:

const button = defineRecipe({
  className: 'btn',
  base: { color: 'green', fontSize: '16px' },
  variants: {
    size: { small: { fontSize: '14px' } },
  },
  compoundVariants: [{ size: 'small', css: { color: 'blue' } }],
})

This would previously not merge the color property overrides, but now it does:

import { styled } from '../styled-system/jsx'
import { button } from '../styled-system/recipes'

const Button = styled('button', button)

function App() {
  return (
    <>
      <Button size="small" color="red.100">
        Click me
      </Button>
    </>
  )
}

• Before: btn btn--size_small text_blue text_red.100
• After: btn btn--size_small text_red.100

[olafurns7]

This is possibly a stupid question, but in our case we're splitting up the preset and config.

But when defining a preset, you extend the theme with the recipes there:

  return definePreset({

    theme: {
      keyframes: keyframes,
      tokens: {
        // to overwrite the default tokens we need to add them here,
        // this removes all Panda presets under that token namespace
        ...pandaPreset.theme.tokens,
        colors: colors,
        easings: easings,
        animations: animations,
      },
      // To add additional tokens we can add them to extend
      extend: {
        recipes: {
          ...recipes,
        },
        // Use our text styles
        textStyles: {
          ...textStyles,
        },

So it's slightly counter-intuitive, at least in our scenario where we want a master config, but be able to load different presets per project, to have the importMap in the config.