bpk-token-migration

Command line tool for switching .scss files to use the V2 version of Backpack tokens

It scans directories recursively, looking for all files ending in .scss, then does one of three things depending on which script name you pass in:

replace-tokens-with-functions

Replaces all instances of tokens in .scss files from the old variable-based format, to the new function-based format.

Usage

npx @skyscanner/bpk-token-migration replace-tokens-with-functions [directory-name]

Example

Before

.my-component {
  margin: $bpk-spacing-sm;
  padding: $bpk-spacing-md $bpk-spacing-base;
}

After

.my-component {
  margin: bpk-spacing-sm();
  padding: bpk-spacing-md() bpk-spacing-base();
}

disable-v2-spacing

Adds $bpk-spacing-v2: false to the beginning of every .scss file. If the line is already present, it will be replaced.

Setting this variable disables V2 spacing for any usages of the spacing functions (bpk-spacing-sm() etc).

Usage

npx @skyscanner/bpk-token-migration disable-v2-spacing [directory-name]

Example

Before

.my-component {
  margin: bpk-spacing-sm();
  padding: bpk-spacing-md() bpk-spacing-base();
}

After

$bpk-spacing-v2: false;

.my-component {
  margin: bpk-spacing-sm();
  padding: bpk-spacing-md() bpk-spacing-base();
}

enable-v2-spacing

Adds $bpk-spacing-v2: true to the beginning of every .scss file. If the line is already present, it will be replaced.

Setting this variable disables V2 spacing for any usages of the spacing functions (bpk-spacing-sm() etc).

Usage

npx @skyscanner/bpk-token-migration enable-v2-spacing [directory-name]

Example

Before

.my-component {
  margin: bpk-spacing-sm();
  padding: bpk-spacing-md() bpk-spacing-base();
}

After

$bpk-spacing-v2: true;

.my-component {
  margin: bpk-spacing-sm();
  padding: bpk-spacing-md() bpk-spacing-base();
}

Contributing

# Run the code locally
node index.js directory/to/test/on

# Run tests
npm test