Support local @keyframes

[wmertens]

It would be great if V-E would support local keyframes. They would be specified like @media but with one more level of nesting, so for example

{
  animation-name: 'redden';
  '@keyframes': {
    redden: {
      '0%': {
        color: 'red'
      }
    }
  }
}

And then V-E would have to create a local name for redden and replace redden in animation and animation-name. That's all.

[n8sabes]

I agree with supporting @keyframes as this is a fundamental component of an atomic style unit that carries all aspects of what it needs to be complete.

In defining styles, they have basic dependencies such as @keyframes and @media queries. We don’t break up stylesheets into styles.css, styles.keyframes, and styles.media_queries, nor should we divide the concept of a style/stylesheet elsewhere. All aspects of defining a style should remain an atomic style unit, inclusive of those dependencies.

[wmertens]

The css`` template function in styled-vanilla-extract now supports this. https://github.com/wmertens/styled-vanilla-extract/blob/9e7aef1db37da77e9ffbf9260379443fed066ce9/src/css.test.ts#L79-L110