#1427·linaria

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

Author: otomadCreated Oct 24, 2024Updated Aug 25, 2025
Labelsneeds: triage 🏷feature: proposal 💬

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:

css
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.