Does the utils function support accessing props?

[SGAMERyu]

At some point, one feature will be impressed by another prop，for example
I have a button component of different size set some different spacing，

type Size = 'xs' | 'sm' | 'md' | 'xl' | 'lg';
interface Props {
   size: Size
  compact: boolean
}

The spacing under size is affected when the compact property is set to true

I set up a utils method to set tokens with different sizes

export const buttonUtils = {
  bSize: (value: string) => ({
    height: `{size.btn.${value}}`,
    paddingLeft: `{size.btnPadding.${value}}`,
    paddingRight: `{size.btnPadding.${value}}`
  })
}

I want to determine whether props.compact is true in this utils method to determine the different spacing tokens

export const buttonUtils = {
  bSize: (value: string, props: Props) => {
   if (props.compact) {
     return {
       height: `{size.btn.${value}}`,
       paddingLeft: `{size.btnCompactPadding.${value}}`,
       paddingRight: `{size.btnCompactPadding.${value}}`
    }
 }
 return {
    height: `{size.btn.${value}}`,
    paddingLeft: `{size.btnPadding.${value}}`,
    paddingRight: `{size.btnPadding.${value}}`
 }
}
}

[Tahul]

Could you show me how do you visualize the usage of this util property inside the css function?

That seem doable, but I need to see how you see yourself using that bSize function inside a component css.

[SGAMERyu]

Could you show me how do you visualize the usage of this util property inside the css function?

That seem doable, but I need to see how you see yourself using that bSize function inside a component css.

In the initial scenario I was thinking that it could be implemented using computedStyle, and the code is as follows

css({
variants: {
    size: {
      md: {
        '&': (props) => {
            if (props.compact) {
                 return {
                    height: `{size.btn.${value}}`,
                    paddingLeft: `{size.btnCompactPadding.${value}}`,
                    paddingRight: `{size.btnCompactPadding.${value}}`
               }
                return {
                    height: `{size.btn.${value}}`,
                    paddingLeft: `{size.btnPadding.${value}}`,
                    paddingRight: `{size.btnPadding.${value}}`
              }
         }
      }
    }
}
})

But it seems that computeStyle only supports responsive changes to a single css property，If computeStyle can return multiple css properties, I think this is much better than utils' implementation

The way we write utils
I think we can return value and props as an input to utils

css({
variants: {
    size: {
      md: {
      '&': {
       btnSize: () => { props, value: 'md'}
     }
    }
}
})