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

[ben-rogerson]

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 this clear writeup. This way I'm not only learning a lot about how twin.macro / tailwind works under the hood, but it helps me getting involved into contributing to twin.macro.

Regarding the local vs global, both potentially leading to unused code, I'm leaning towards adding the keyframes globally. It is not a lot of code and similar to the reset styles you are never sure if the CSS eventually is being used on the page.

Currently I have a ThemeWrapper component defined as follows:

const GlobalStyles = createGlobalStyle`
  html {
    ${tw`global tw stuff like base text color/size, font and the missing keyframes`}
  }
`;

const ThemeWrapper: FC = ({ children }) => (
  <ThemeProvider theme={twConfig.theme}>
      <GlobalStyles />
      {children}
  </ThemeProvider>
);

Thanks to styled-component's createGlobalStyle I was able to replace the postcss build with tailwindcss/dist/base.min.css.

I think it is best to inject the keyframes automatically (even when not used). Else the animate classes do not work unexpectedly and developers have to follow manual steps to make something work that should just work 'out of the box'.

As said before, even Tailwind's base style file contains unused styles. Nevertheless you have to include these styles to have a working site. So I don't think it is a big deal that those keyframes might be dead code.

[ben-rogerson]

Hey Frank, thanks for the feedback.
You're right, it's far easier if twin just adds the small amount of keyframe code when you use the classes.

I just pushed a PR for including the keyframes if you'd like to take a look.

Cheers again for the help 👍

[ben-rogerson]

You can use the GlobalStyles import to add the keyframes in v1.10.0+ 🎉.

[Acidic9]

@ben-rogerson I noticed these are hard coded right? So how to do we add our own keyframes? I've been having trouble doing so

[fvanwijk]

The GlobalStyles component from styled-components includes the keyframes from Tailwind. If you want to add your own keyframes or other global styles, just use createGlobalStyle from styled-components like in the example above.

[Acidic9]

@fvanwijk I see - it would be good if the tailwind config gets read and inserts animations into the GlobalStyle component itself by default

[ben-rogerson]

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

[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]

I've moved this reimplementation to another issue, see #171