|
| 1 | +# css-vars-updater |
| 2 | + |
| 3 | +This utility automatically identifies Patternfly CSS variables in v5 that need to be updated after the introduction of new [global tokens in Patternfly v6](https://www.patternfly.org/tokens/about-tokens). |
| 4 | + |
| 5 | +## Usage |
| 6 | + |
| 7 | +Requires Node.js >= 10. |
| 8 | + |
| 9 | +```sh |
| 10 | +npx @patternfly/css-vars-updater ./path-to-src |
| 11 | +``` |
| 12 | + |
| 13 | +Running this command will use default options, if you want a finer control over the updates, use an `-i` (or `--interactive`) option. It will start an interactive interface, where you can setup what files should be fixed and what tokens should be replaced: |
| 14 | +``` |
| 15 | +npx @patternfly/css-vars-updater ./path-to-src -i |
| 16 | +
|
| 17 | +--> Enter file extensions to update (comma-separated): (scss,css,less,md) |
| 18 | +--> Do you want to exclude any files? (y/N) |
| 19 | + yes --> Enter files to exclude (comma-separated, relative paths) |
| 20 | +--> Do you want to run the fixer? (Y/n) |
| 21 | +--> Do you want to replace color variables with a temporary hot pink color variable? (Y/n) |
| 22 | +--> Do you want to replace other global variables with a matching token? (Y/n) |
| 23 | +--> Do you want to fix directional styles and how? E.g. PaddingLeft -> PaddingInlineStart (Use arrow keys) |
| 24 | + ❯ Fix in left-to-right manner (English) |
| 25 | + Fix in right-to-left manner |
| 26 | + Fix in top-to-bottom manner |
| 27 | + Don’t fix |
| 28 | +``` |
| 29 | + |
| 30 | +Giving node more RAM can help for large codebases. |
| 31 | + |
| 32 | +```sh |
| 33 | +NODE_OPTIONS=--max-old-space-size=4096 npx @patternfly/css-vars-updater ./path-to-src |
| 34 | +``` |
| 35 | + |
| 36 | +### Options |
| 37 | + |
| 38 | +```sh |
| 39 | +Usage: @patternfly/css-vars-updater <path> [otherPaths...] |
| 40 | + |
| 41 | +Options: |
| 42 | + -V, --version output the version number |
| 43 | + -i, --interactive starts an interactive interface for finer control over the updates |
| 44 | + --fix whether to run fixer |
| 45 | + -h, --help display help for command |
| 46 | +``` |
| 47 | + |
| 48 | +### Example |
| 49 | + |
| 50 | +Using default options: |
| 51 | + |
| 52 | +In: |
| 53 | + |
| 54 | +```css |
| 55 | +.custom-class { |
| 56 | + /* Global non-color variables */ |
| 57 | + border-radius: var(--pf-v5-global--BorderRadius--lg); |
| 58 | + row-gap: var(--pf-v5-global--spacer--md); |
| 59 | + width: var(--pf-v5-global--arrow--width); |
| 60 | + |
| 61 | + /* Global color variables */ |
| 62 | + color: var(--pf-v5-global--Color--100); |
| 63 | + background-color: var(--pf-v5-global--BackgroundColor--200); |
| 64 | + |
| 65 | + /* Variables removed from v6 */ |
| 66 | + max-width: var(--pf-v5-c-accordion__toggle-text--MaxWidth); |
| 67 | + |
| 68 | + /* Variables staying in v6 */ |
| 69 | + height: var(--pf-v5-c-about-modal-box--Height); |
| 70 | + box-shadow: var(--pf-v5-c-alert--BoxShadow); |
| 71 | + |
| 72 | + /* Variables with direction updates */ |
| 73 | + padding-inline-start: var(--pf-v5-c-about-modal-box__brand--PaddingLeft); |
| 74 | + padding-inline-end: var(--pf-v5-c-about-modal-box__brand--PaddingRight); |
| 75 | + padding-block-start: var(--pf-v5-c-about-modal-box__brand--PaddingTop); |
| 76 | + padding-block-end: var(--pf-v5-c-about-modal-box__brand--PaddingBottom); |
| 77 | +} |
| 78 | +``` |
| 79 | + |
| 80 | +Out: |
| 81 | + |
| 82 | +```css |
| 83 | +.custom-class { |
| 84 | + /* Global non-color variables */ |
| 85 | + border-radius: var(--pf-t--global--border--radius--large); |
| 86 | + row-gap: var(--pf-t--global--spacer--md); |
| 87 | + width: var(--pf-v5-global--arrow--width); |
| 88 | + |
| 89 | + /* Global color variables */ |
| 90 | + color: var(--pf-t--temp--dev--tbd /* CODEMODS: original v5 color was:--pf-v5-global--Color--100 */); |
| 91 | + background-color: var(--pf-t--temp--dev--tbd /* CODEMODS: original v5 color was:--pf-v5-global--BackgroundColor--200 */); |
| 92 | + |
| 93 | + /* Variables removed from v6 */ |
| 94 | + max-width: var(--pf-v5-c-accordion__toggle-text--MaxWidth); |
| 95 | + |
| 96 | + /* Variables staying in v6 */ |
| 97 | + height: var(--pf-v6-c-about-modal-box--Height); |
| 98 | + box-shadow: var(--pf-v6-c-alert--BoxShadow); |
| 99 | + |
| 100 | + /* Variables with direction updates */ |
| 101 | + padding-inline-start: var(--pf-v6-c-about-modal-box__brand--PaddingInlineStart); |
| 102 | + padding-inline-end: var(--pf-v6-c-about-modal-box__brand--PaddingInlineEnd); |
| 103 | + padding-block-start: var(--pf-v6-c-about-modal-box__brand--PaddingBlockStart); |
| 104 | + padding-block-end: var(--pf-v6-c-about-modal-box__brand--PaddingBlockEnd); |
| 105 | +} |
| 106 | +``` |
0 commit comments