feat: prefix animation names

[RobinMalfait]

This PR adds an animation string parser, for example

This:

"ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"

Can be parsed as:

{
  name: 'ping',
  duration: '1s',
  timingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
  iterationCount: 'infinite',
}

This is useful so that we can run user defined animations through this function so that we can get the animation name. We then can apply the prefix to the animation name. For example ping could become tw-ping. Useful for codebases that require a prefix and don't like the global ping name.

---

The second commit allows us to do the prefixing of animation values.

A prefix of tw- will generate:

.tw-animate-spin {
  animation: tw-spin 1s linear infinite;
}

@keyframes tw-spin {
  to {
    transform: rotate(360deg);
  }
}

No prefix will result in:

.animate-spin {
  animation: spin 1s linear infinite;
}

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

Note: omitted autoprefixer results

[adamwathan]

Couple small things but looks great!

[adamwathan]

The plugin API provides a prefix function you can probably use here instead of adding it manually (passed in like theme, variants, etc), probably better because prefix can technically be a function for weird advanced use cases. I worry it might be expecting a class though, so you may need to do something gross like prefix(.${name}).slice(1) to sort of trick it into looking like a class.

[RobinMalfait]

I thought this existed as well. Turns out we are using an invokePlugin which is a specific implementation in the tests which doesn't expose all those values. 😬