stylelint rule-empty-line-before is problematic inside @keyframe definition
Closed this issue · 1 comments
felquis commented
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.
onlurking commented
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);
}
}