Support `keyframes` and `createGlobalStyle` in "@linaria/react"

[otomad]

Describe the feature

These two functions come from Styled Components.

keyframes function will create a CSS keyframes with a unique name, to make sure that there are no naming conflicts.

You can even inline the declaration without having to think of a keyframes name:

div {
    animation: ${keyframes`
        from {
            opacity: 0;
        }
    `} ease-out 1s;
}

createGlobalStyle will create a global style for every components to use, without to write it in a single CSS file.

Motivation

This will make it easier to switch Styled Components to Linaria.

[KutnerUri]

I agree, right now keyframes are preprocessed and it feels like dark magic. it would be nice to have a dedicated function for that

[alexamy]

I turned off preprocessor for my use case and now I cannot use global() {}. Something like globalStyle (like in vanilla-extract) method would be helpful.

[LaggardNC]

For anyone wants to use named keyframes, there is a way to do it. Bit hacky, but does its work:

const animationHash = css`
  @keyframes progressAnimation {
    from {
      background-size: 0% 100%;
    }
    to {
      background-size: 100% 100%;
    }
  }
`;

export const ProgressIndicatorStyled = styled.div`
 ...
  animation-name: ${({ pending }) => (pending ? `progressAnimation-${animationHash}` : "none")};
`