Keyframes should be added by Twin for the `animate-xxx` classes

Following up on from a feature request by @fvanwijk in https://github.com/ben-rogerson/twin.macro/issues/92#issuecomment-678154951_

I’d like to … only include tailwindcss/dist/base.min.css and let twin do the rest. …the keyframes aren’t part of the base styles… I would expect twin to include them when I use one of the animate-xxx utils.

The animate-xxx classes added in tailwindcss:1.6.0 were originally added to base.min.css but were removed in 1.6.1.

So now twin needs to define the @keyframes somewhere to allow the animate classes to work.

The missing keyframes css

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

Here are some initial ideas:

1. Use the keyframes import

styled-components / emotion both have a keyframes import that can help define the keyframes but it’s scoped to a component by default and so the keyframe definition would be repeated if the class is used more than once.

That said, Twin could potentially listen for the use of any of the animate classes and inject the matching keyframe class only once within the document.

2. Use the Global import

styled-components / emotion both have a Global import that can store the keyframe definitions, this can avoid any css duplication issues. Unfortunately, it would mean it’s a manual process to paste the missing keyframe css into the Global block.

3. Add a twin Global import

If twin offered a Global import (import { global } from 'twin.macro'), then it could inject the keyframes on your behalf. Plenty of people would only want the extra keyframe css added if they were using the animate classes so that would need to be conditional somehow. Twin doesn’t know which animate classes you’ve used so all of the keyframe definitions would need to be added at once.

I’m keen to hear any suggestions so feel free to chip in.

[fvanwijk]

Thanks for mentioning. I didn’t even know that this config feature existed 👍 That would mean that the custom keyframes could be inserted by twin.macro, but other regular custom global HTML will be inserted using the createGlobalStyle (or using a plain css file)

[ben-rogerson]

Looks like I missed adding the keyframes customization functionality. Adding the keyframes automatically through GlobalStyles seems like a good idea.