Accessing props.theme in a keyframes object

Hey!

I would love to be able to access my theme in a keyframes object. I am making a div’s background-color cycle through the various brand colors, but currently seem to have to hard-code the hex values.

My use case is something like this:

import styled from 'styled-components';
import { keyframes } from 'styled-components';

const colorize = keyframes`
    0% {
        background-color: palevioletred;
    }

    100% {
        background-color: papayawhip;
    }
`;

const Wrapper = styled.div`
    animation: ${colorize} 4s ease-in-out infinite;
`;

It would be great if I could write background-color: ${props => props.theme.brandColorOne};

[k15a]

Duplicate of https://github.com/styled-components/styled-components/issues/397

import styled from 'styled-components';
import { keyframes } from 'styled-components';

const colorize = props => keyframes`
    0% {
        background-color: ${props.theme.brandColorOne};
    }

    100% {
        background-color: ${props.theme.brandColorTwo};
    }
`;

const Wrapper = styled.div`
    animation: ${colorize} 4s ease-in-out infinite;
`;

[ckknight]

type MyTheme = { ... };
export function themedKeyframes(
  fn: (theme: MyTheme) => Keyframes,
): (props: { theme: MyTheme }) => Keyframes {
  const keyframeCache =
    typeof WeakMap === 'undefined' ? new Map() : new WeakMap();
  return ({ theme }) => {
    let result = keyframeCache.get(theme);
    if (!result) {
      result = fn(theme);
      keyframeCache.set(theme, result);
    }
    return result;
  };
}

Usage:

const myAnimation = themedKeyframes(theme => keyframes`
  from: { color: ${theme.colors.RED}; }
  to: { color: ${theme.colors.BLUE}; }
`);
const MyDiv = styled.div`
  animation: 1s ${myAnimation};
`;