stylelint rule-empty-line-before is problematic inside @keyframe definition

[felquis]

rule rule-empty-line-before

I want to write @Keyframes as follows:

@keyframes light-green-focus {
  0% {
    box-shadow: inset -200px 0 3px 0 var(--color-light-greenish-100);
  }

  100% {
    box-shadow: inset 0 0 3px 0 var(--color-light-greenish-100);
  }
}

But this code make stylelint hangry

src/components/Button/colors.css
 6:3  ✖  Expected empty line before rule   rule-empty-line-before

This rule is useful to ban this piece of code:

.light-green {
  color: var(--color-light-greenish-100);
} /* bad*/
.light-green:focus {
  animation-name: light-green-focus;
  animation-duration: 1s;
}

good:

.light-green {
  color: var(--color-light-greenish-100);
}

.light-green:focus {
  animation-name: light-green-focus;
  animation-duration: 1s;
}

But it makes some noise inside @Keyframes and it bothers me.

https://github.com/pagarme/pilot/pull/321

[onlurking]

Fala @Deivis e @felquis, sei que a issue já está fechada, entretanto esbarrei nesse problema hoje e achei a solução:

"rule-empty-line-before": ["always-multi-line", { "except": ["first-nested"] }],

Desta forma torna esse código válido:

@keyframes roll {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}