wintercounter / ccss

🔡🔁🎨 CrypticCSS - A companion on the journey to your next CSS-in-JS and/or design system solution.

 

🔡🔁🎨

CrypticCSS - A companion on the journey to your next CSS-in-JS and/or design system solution.

Documentation

ccss's Issues

Support styled-components `keyframes`

Right now the CCSS lib doesn't support the usage of styled-components/keyframes when setting an animation. It would be nice to have a way to use it since we have ccssd available for us.

Failed tries examples

const pulsing = keyframes`...`
const Pulse = ccssd({
 animation: `${pulsing} 1.5s linear infinite`,
 opacity: 0,
 zIndex: -1,
 borderStyle: 'solid'
})

// Output:
Uncaught Error: It seems you are interpolating a keyframe declaration (fEDYHN) into an untagged string. 
This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now 
injected on-demand. Please wrap your string in the css\`\` helper which ensures the styles are injected correctly.

Piggybacking the error on the example above, we have the second failed try:

const pulsing = keyframes`...`
const Pulse = ccssd({
 animation: css`${pulsing} 1.5s linear infinite`,
 opacity: 0,
 zIndex: -1,
 borderStyle: 'solid'
})

// Output:
styled-components.browser.esm.js:154 Uncaught Error: It seems you are interpolating a keyframe
declaration (fEDYHN) into an untagged string. This was supported in styled-components v3, but is
not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in
the css\`\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css