token:created does not work with css shorthands

[ivanbanov]

Description

applying a custom config to the tokens, to work like Stitches for example, it wont work when using CSS shorts

// panda.config.ts

import { defineConfig } from "@pandacss/dev";

const dasherize = (tokenPath: string[]): string =>
  tokenPath
    .join('-')
    .replace(/([a-z])([A-Z0-9])/g, '$1-$2')
    .toLowerCase()

export const config = defineConfig({
  hooks: {
    'tokens:created': ({ configure }) => {
      configure({
        formatTokenName: path => {
          const dasherized = dasherize(path)
          if (dasherized.startsWith('spacing--')) {
            return `-$spacing-${dasherized.replace('spacing--', '')}`
          }
          return `$${dasherized}`
        },
        formatCssVar: path => {
          const variable = `--${dasherize(path)}` as const
          return {
            var: variable,
            ref: `var(${variable})`,
          }
        },
      })
    }
  }
});


// code

✅ css({ padding: '$5' })
❌ css({ padding: '$5 $10' })

Link to Reproduction

https://play.panda-css.com/z7bQ0x4iD6

[segunadebayo]

This isn't a bug per se. By default, the padding utility doesn't resolve css({ padding: '$5 $10' })

• Recommend using paddingX and paddingY instead
• Rewrite the padding utility and include a transform function

utilities: {
    extend: {
      padding: {
        transform(value, { token }) {
          const values = value.split(' ') as string[]
          const parts = values.map((v) => token(`spacing.${v}`) || v)
          return { padding: parts.join(' ') }
        },
      },
    },
  },

[ivanbanov]

oh that makes sense, thanks for the quick answer @segunadebayo! I will play around with it :)