Support keyframes and createGlobalStyle in "@linaria/react"

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.

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

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.

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")};
`

Navigation Menu

Repository navigation

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

Describe the feature

Motivation

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Support keyframes and createGlobalStyle in "@linaria/react" #1427

Description

Describe the feature

Motivation

Activity

KutnerUri commented on Dec 2, 2024

alexamy commented on Dec 27, 2024

LaggardNC commented on Aug 25, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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