@skyscanner/bpk-token-migration
v1.1.0
Published
Utility for replacing Backpack tokens
Downloads
10
Maintainers
Keywords
Readme
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