Non Productive Monday

    stylelint-performance-animation

    1.2.2 • Public • Published

    stylelint-performance-animation

    Build Status

    Stylelint rule for preventing the use of low performance animation and transition.

    Install

    npm install stylelint-performance-animation --save-dev

    or

    yarn add stylelint-performance-animation --save-dev

    Usage

    Add this config to your .stylelintrc:

    {
      "plugins": [
        "stylelint-performance-animation"
      ],
      "rules": {
        "plugin/no-low-performance-animation": true
      }
    }

    Details

    div { transition: margin 350ms easy }
    /**               ^^^^^^
     * You should not use low performance animation properties */
    @keyframes { 50% { top: 5px; } }
    /**                ^^^^^^
     * You should not use low performance animation properties */

    For more information read article By Paul Lewis and Paul Irish

    Options

    true

    The following pattern is considered warning:

    div { transition: margin-left 350ms easy; }

    The following pattern is not considered warning:

    div { transition: transform 350ms easy; }

    Optional secondary options

    ignore: [string]

    Given:

    { ignore: ['color', 'background-color'] }

    The following pattern is considered warning:

    div { transition: color, margin; }

    The following pattern is not considered warning:

    div { transition: color, opacity, background-color; }

    License

    MIT © Vinston Wolf

    Install

    npm i stylelint-performance-animation

    DownloadsWeekly Downloads

    215

    Version

    1.2.2

    License

    MIT

    Last publish

    Collaborators

    • vinstonwolf