ESLint plugin

The essential plugin for use with the Atlassian Design System.

expand-motion-shorthand

Examples

This rule expands transition and animation CSS shorthand properties into their individual sub-properties. Expanding shorthands enables the use-tokens-motion rule to target transitionDuration, transitionTimingFunction, animationDuration, and animationTimingFunction individually. This rule auto-fixes the expansion.

Incorrect

const styles = css({
  transition: 'opacity 200ms cubic-bezier(0.4, 0, 0, 1) 0ms',
  ^^^^^^^^^^^
  animation: 'fade 150ms ease-in 0ms 1 normal none running',
  ^^^^^^^^^^
});

Correct

const styles = css({
    transitionProperty: 'opacity',
    transitionDuration: '200ms',
    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0, 1)',
    transitionDelay: '0ms',
    animationName: 'fade',
    animationDuration: '150ms',
    animationTimingFunction: 'ease-in',
    animationDelay: '0ms',
    animationIterationCount: '1',
    animationDirection: 'normal',
    animationFillMode: 'none',
    animationPlayState: 'running',
});

Was this page helpful?

We use this feedback to improve our documentation.