variant styles overwritten by base when using shorthand properties

[teunlao]

Description

Bug Report: Recipe base styles not normalized, causing shorthand property conflicts

Description

When using cva() recipes, shorthand properties in base styles are not normalized, causing them to potentially overwrite variant styles during CSS generation.

When I use shorthand properties like rounded in both base and variants, I expected the variant value to override the base value, but the base value overwrites the variant instead.

Steps to reproduce

1. Create a recipe with shorthand property in base (e.g., rounded: "1rem")
2. Add a variant that also uses the same shorthand property (e.g., rounded: "100px")
3. Apply the variant
4. Observe that the base value is used instead of the variant value

const buttonRecipe = defineRecipe({
  base: {
    rounded: "1rem",
  },
  variants: {
    size: {
      md: {
        rounded: "100px",
      },
    },
  },
  defaultVariants: {
    size: "md",
  },
})

// Expected: border-radius: 100px
// Actual: border-radius: 1rem

Additional Information

Root Cause

In packages/react/src/styled-system/cva.ts, variant styles are normalized (shorthand properties converted to longhand), but base styles are NOT normalized:

// Variants ARE normalized (line 38-41)
const variants = mapEntries(defaultsConfig.variants, (key, obj) => [
  key,
  mapEntries(obj, (optionKey, styles) => [optionKey, normalize(styles)]),
])

// Base is NOT normalized (line 57)
let variantCss = { ...base }

Link to Reproduction

https://stackblitz.com/edit/chakra-ui-v3?file=src%2FApp.tsx

Steps to reproduce

No response

Chakra UI Version

3.29.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response