生成样式化组件关键帧的函数是否昂贵?

在使用样式化组件时,我试图创建一个函数,其中一些输入返回一个css标记的函数,该函数需要一些特定的关键帧(与我的css标记函数紧密耦合)。

最后,我在函数中定义了关键帧,以访问闭包,并问自己,每次调用函数时重新定义关键帧的成本是否会很高,以及是否有更好的方法来处理这种情况。

下面是一个片段,它说明了我试图解释的内容,当然,我的问题只适用于比这个更大、更复杂的关键帧:

const growBorder = (color, from, to) => {

  const grow = keyframes`
    from { border: ${from} solid ${color}; }
    to { border: ${to} solid ${color}; }
  `

  return css`
    border: ${from} solid ${color};
    animate: ${grow} 3s linear 1s infinite alternate;
`
}



const Button = styled.button`
  ${growBorder('purple', '1px', '3px')}
`


const UglyButton = styled.button`
  ${growBorder('red', '10px', '30px')}
`

...