Support keyframes in JS theme config

[philipp-spiess]

Adds support for defining keyframes via the v3 JS config file. E.g.:

module.exports = {
  theme: {
    extends: {
      keyframes: {
        "fade-in": {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
        "fade-out": {
          "0%": { opacity: "1" },
          "100%": { opacity: "0" },
        },
      },
    },
  },
};

[philipp-spiess]

Uh oh wait what.

[philipp-spiess]

This is interesting, in v3, plugins require an addBase to add the keyframes but if it was part of the JS config theme, it would be added automatically. That's lovely:
https://play.tailwindcss.com/YQLQchsWWW?file=config

[thecrypticace]

In v3 the way this worked was keyframes were not emitted until used. So you had to do @keyframes …: theme('keyframes.whatever`) in your utility function. And we handle that already.

[thecrypticace]

Or we do in addUtilities at least. I don't think we do in matchUtilities which we should I think.

[thecrypticace]

Or at least I'm like 95% sure it works that way. Maybe we just de-duped them…

[philipp-spiess]

Oh gotch you're right they're only added when used! If you use addBase and use it with an animate-* variable, it is emitted twice in v3 (at the end of the stylesheet).

I guess it's fine if we always emit keyframes for compat now (we do this for v4 keyframes too!). However unsure if we should then guard against this case. Maybe it's ok if the keyframes are emitted twice here since it does no harm? WDYT?

[thecrypticace]

yeah it's probably fine — would be nice to dedupe them but that can be an optimization done later. They should still be de-duped when minifying with lightingcss.