Export keyframes property

[KarelVerschraegen]

Since both emotion and styled-components have a keyframes helper, would it be possible to export keyframes from within twin itself?

This would be in line with the styled export from twin.

Current behaviour

import { keyframes } from 'styled-components';
import tw, { styled } from 'twin.macro';

const component = styled.div`
    ${tw`mt-4`}
`

const animation = keyframes`
    ...
`;

Expected behaviour

import tw, { keyframes, styled } from 'twin.macro';

const component = styled.div`
    ${tw`mt-4`}
`

const animation = keyframes`
    ...
`;

If pointed in the right direction, I'd gladly (try to) implement this myself!

[ben-rogerson]

I think that adding the keyframe import would make a good feature.

If you'd like to have a crack at it, here are some tasks I can think of:

• Add keyframe import presets for emotion + styled-components
• Add the keyframe function replacement with babel-plugin-macros - you could copy and adapt the existing styled import code
• Add 'keyframes' to both the import validator and list of suggestions
• Test to make sure it doesn't unnecessarily slow down the compilation speed
• Add a keyframe import fixture test
• Update the docs with the new feature
• Update the typescript section with new instructions

I can help out if you need a hand with anything.

Resources

Keyframes - emotion
Keyframes - styled-components

[fvanwijk]

Possibly related to this feature request, I'd like to get rid of the global PostCSS build, only include tailwindcss/dist/base.min.css and let twin do the rest.
So far the results are good, but the keyframes aren't part of the base styles.
Thus I would expect twin to include them when I use one of the animate-xxx utils.

Animation core plugin

[ben-rogerson]

Thanks for bringing this up @fvanwijk - I'm keen to hear your thoughts on a good solution over in #127.

[dominik-sfl]

are keyframes imports added yet?