stylelint-high-performance-animation

    1.6.0 • Public • Published

    stylelint-high-performance-animation

    NPM version Build Status Downloads per month contributions welcome

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

    This is a fork of stylelint-performance-animation stylelint plugin. It uses a blacklist for harmful properties instead of a whitelist, which makes it easy to avoid false positives and allows you to specify which type of properties to warn for (layout/paint).

    Install

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

    or

    yarn add stylelint-high-performance-animation --dev

    Usage

    Add this config to your .stylelintrc or stylelint config inside package.json:

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

    Details

    div {
      transition: margin 350ms ease-in;
    }
    /**           ^^^^^^
     * You should not use low performance animation properties */
    @keyframes myAnimation {
      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 ease-in;
    }

    The following pattern is not considered warning:

    div {
      transition: transform 350ms ease-in;
    }

    Optional secondary options

    ignore: "paint-properties"

    Makes the rule not warn for properties that cause paint and only warn for properties that cause layout.

    ignoreProperties: [string]

    Given:

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

    The following pattern is considered warning:

    div {
      transition-property: color, margin;
    }

    The following pattern is not considered warning:

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

    Dependencies

    This plugin has only stylelint as a dependency.


    License

    MIT

    Install

    npm i stylelint-high-performance-animation

    DownloadsWeekly Downloads

    29,279

    Version

    1.6.0

    License

    MIT

    Unpacked Size

    13.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • kristerkari