Do not emit @keyframes in @theme reference

[RobinMalfait]

This PR fixes na issue where @keyframes were emitted if they wre in a @theme reference and anothe @theme {} (that is not a reference) was present.

E.g.:

@reference "tailwindcss";

@theme {
  /* ... */
}

Produces:

:root, :host {
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

With this PR, the produced CSS looks like this instead:

:root, :host {
}

Note: the empty :root, :host will be solved in a subsequent PR.

Test plan

Added some unit tests, and a dedicated integration test.

[philipp-spiess]

Hmm my initial thought was that we might want this in the Theme just like the --animate-* variables and just also add the themeOption for bookkeeping but we don't really do any validations for that anymore afterwards so if this works, it should be fine too 👍

[RobinMalfait]

Yeah this just never really tracks it in Theme. It does mean that animate-foo won't emit the @keyframes, but that sounds correct to me because the idea is that this can be used in <style> blocks, assuming the @keyframes exist somewhere else already.

Just looking into why the other integration test fails. 😅