eslint-plugin-backpack

Eslint plugin to prevent magic arbitrary values and promote the use of Backpack tokens

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-backpack:

$ npm install eslint-plugin-backpack --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-backpack globally.

Usage

Add backpack to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["backpack"]
}

Then configure the rules you want to use under the rules section.

{
  "rules": {
    "backpack/rule-name": 2
  }
}

Supported Rules

use-tokens

Available for colours and length values. Will prevent the use of a hardcoded colour if a Backpack token is available for the given value.

Configuration

Name	Type	Required
autoImport	boolean	false
platform	string	false
tokensPackage	shape({ web: string, native: string })	false
typeof	boolean	false

{
  "rules": {
    "backpack/use-tokens": [2, {
      "autoImport": true,
      "platform": "web",
      "tokensPackage": {
        "web": "@skyscanner/bpk-foundations-web/tokens/base.es6",
      },
    }]
  }
}

use-components

Will prevent the usage of built-in components when a Backpack option is available.

Configuration

Name	Type	Required
autoImport	boolean	false
platform	string	false

{
  "rules": {
    "backpack/use-components": [2, {
      "autoImport": true,
      "platform": "web"
    }]
  }
}

use-button-v2

Prevents importing the deprecated BpkButton (V1) from @skyscanner/backpack-web/bpk-component-button and recommends using BpkButtonV2 (V2) instead. This rule is part of the Design System modernization effort to migrate to the new button component which offers a smaller footprint, cleaner API, and better long-term maintainability.

The rule will report an error for any import of BpkButton from the target package, whether it's a default import or named import.

Configuration

This rule has no configuration options.

{
  "rules": {
    "backpack/use-button-v2": 2
  }
}

Examples

Invalid:

// Default import
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';

// Named import
import { BpkButton } from '@skyscanner/backpack-web/bpk-component-button';

Valid:

// Use BpkButtonV2 instead
import { BpkButtonV2 } from '@skyscanner/backpack-web/bpk-component-button';