rulesheet middleware skips empty @keyframes

[michal-perlakowski]

serialize(compile('@keyframes test-animation {}'), middleware([
  stringify,
  rulesheet((rule) => {
    console.log(rule);
  })
]));

Expected behavior: @keyframes test-animation {} is logged in console. Current behavior: nothing is logged.

Use case: Material-UI uses empty animations to detect autofill in text fields (see the issue in Material-UI).

[Andarist]

@thysultan I'm slightly on the fence here but I'm leaning towards being in favor of handling this in Stylis. I feel like the main reason why we don't inject empty rules is that we always end up with a slot for rules in the output, even if there are no rules for this particular level of nesting. This happens because we don't lookahead to check if there are any rules ahead of us (doing that would be obviously bad) nor we don't want to track if the slot has been already created or not - it's always created roughly when { gets encountered and this simplifies the code that follows that.

This makes sense for regular rules but @keyframes are conceptually different - they are always "top-level" rules, so if one writes a definition for them then it might act as a clear signal that the output for it should be produced.