props does not work in keyframes

styled-components / vue-styled-components

Visual primitives for the component age. A simple port for Vue of styled-components 💅

MIT License

1.38k stars 99 forks source link

props does not work in keyframes #118

Closed jessekalil closed 3 years ago

jessekalil commented 3 years ago

I need to use props inside the keyframes, but it is not working!

const spinner = primary => keyframes`
    0% {
        box-shadow: 0 0 0 .4em ${primary}, 0 0 0 .1em ${primary};
        transform:rotate(360deg);
     }
        100% { box-shadow: 0 0 0 .4em ${primary}, 0 0 0 3.6em transparent; }
`

liqueflies commented 3 years ago

I think also in the main lib this feature is not present.

https://styled-components.com/docs/api#keyframes

blaytenshi commented 3 years ago

Actually what @jessekalil wrote does work in react version of styled components.

Example here: https://codesandbox.io/s/react-playground-rf12b?file=/src/StyledCompAnimationsExample/index.js

It's broken in the vue version of styled components.