universe
universe copied to clipboard
SX: unable to reduce motion inside keyframes
It seems like keyframes are fairly limited in what can go inside. Specifically, we allow only raw styles without any pseudo or media definitions. I wanted to write something like this (and it didn't work):
const bounce = sx.keyframes({
'33%': { transform: `translateY(-10px)` },
'66%': {
'transform': `translateY(10px)`,
'@media (prefers-reduced-motion: no-preference)': {
fill: 'rgba(var(--sx-accent-5))',
}
},
});
I actually don't know if this should be allowed or if it should work. At least, we should throw a warning/error explaining this is not supported (instead of quietly ignoring it).
See: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion