feat: CSS vars updater package

.github/workflows/test.yml

@@ -18,6 +18,8 @@ jobs:
       - uses: actions/setup-node@v1
         with:
           node-version: '18'
+      - run: corepack enable
+      - run: corepack prepare [email protected] --activate
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps
@@ -48,6 +50,8 @@ jobs:
       - uses: actions/setup-node@v1
         with:
           node-version: '18'
+      - run: corepack enable
+      - run: corepack prepare [email protected] --activate
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps
@@ -78,6 +82,8 @@ jobs:
       - uses: actions/setup-node@v1
         with:
           node-version: '18'
+      - run: corepack enable
+      - run: corepack prepare [email protected] --activate
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps

.gitignore

@@ -6,5 +6,14 @@ test/packages/*
 .DS_Store
 dist
 
+# Yarn modern
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
 # IDE - VSCode
 .history

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

lerna.json

@@ -13,7 +13,9 @@
   "packages": [
     "packages/eslint-plugin-pf-codemods",
     "packages/pf-codemods",
-    "packages/class-name-updater"
+    "packages/class-name-updater",
+    "packages/css-vars-updater",
+    "packages/shared-helpers"
   ],
   "version": "independent"
 }

package.json

@@ -24,7 +24,7 @@
     "build": "lerna run build",
     "build:generators": "tsc --build --verbose generators/tsconfig.cjs.json",
     "build:readme": "lerna run build:readme",
-    "build:classnames": "lerna run build --scope=@patternfly/class-name-updater",
+    "build:classnames": "lerna run build --scope=@patternfly/class-name-updater --include-dependencies",
     "clean": "lerna run clean"
   },
   "repository": {
@@ -41,13 +41,14 @@
     "packages/*"
   ],
   "devDependencies": {
-    "lerna": "^3.22.0",
-    "mocha": "^7.2.0",
-    "plop": "^3.1.2",
-    "ts-node": "^10.9.2",
+    "@types/fs-extra": "^11.0.4",
     "case-anything": "^2.1.13",
     "fs-extra": "^11.2.0",
-    "@types/fs-extra": "^11.0.4"
+    "lerna": "^8.1.9",
+    "mocha": "^7.2.0",
+    "plop": "^3.1.2",
+    "rimraf": "^6.0.1",
+    "ts-node": "^10.9.2"
   },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "packageManager": "yarn@4.5.1"
 }

packages/class-name-updater/package.json

@@ -24,7 +24,8 @@
     "colors": "^1.4.0",
     "commander": "^5.1.0",
     "diff": "^5.1.0",
-    "glob": "^10.2.6"
+    "glob": "^10.2.6",
+    "shared-helpers": "workspace:^1.0.0"
   },
   "devDependencies": {
     "@types/diff": "^5.0.9",

packages/class-name-updater/src/classNameUpdate.ts

@@ -1,8 +1,8 @@
 import { sync } from "glob";
 import { readFileSync, writeFileSync } from "fs";
 import { isAbsolute, join } from "path";
-import { isDir } from "./utils";
-import { printDiff } from "./printDiff";
+import { isDir } from "shared-helpers";
+import { printDiff } from "shared-helpers";
 
 export async function classNameUpdate(
   globTarget: string,

packages/class-name-updater/src/cli.ts

@@ -3,7 +3,7 @@ import { join } from "path";
 import { Command } from "commander";
 const program = new Command();
 
-import { isDir } from "./utils";
+import { isDir } from "shared-helpers";
 import { classNameUpdate } from "./classNameUpdate";
 
 program

packages/css-vars-updater/README.md

@@ -0,0 +1,106 @@
+# css-vars-updater
+
+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).
+
+## Usage
+
+Requires Node.js >= 10.
+
+```sh
+npx @patternfly/css-vars-updater ./path-to-src
+```
+
+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:
+```
+npx @patternfly/css-vars-updater ./path-to-src -i
+
+--> Enter file extensions to update (comma-separated): (scss,css,less,md)
+--> Do you want to exclude any files? (y/N)
+    yes --> Enter files to exclude (comma-separated, relative paths)
+--> Do you want to run the fixer? (Y/n)
+--> Do you want to replace color variables with a temporary hot pink color variable? (Y/n)
+--> Do you want to replace other global variables with a matching token? (Y/n)
+--> Do you want to fix directional styles and how? E.g. PaddingLeft -> PaddingInlineStart (Use arrow keys)
+    ❯ Fix in left-to-right manner (English)
+      Fix in right-to-left manner
+      Fix in top-to-bottom manner
+      Don’t fix
+```
+
+Giving node more RAM can help for large codebases.
+
+```sh
+NODE_OPTIONS=--max-old-space-size=4096 npx @patternfly/css-vars-updater ./path-to-src
+```
+
+### Options
+
+```sh
+Usage: @patternfly/css-vars-updater <path> [otherPaths...]
+
+Options:
+  -V, --version      output the version number
+  -i, --interactive  starts an interactive interface for finer control over the updates
+  --fix              whether to run fixer
+  -h, --help         display help for command
+```
+
+### Example
+
+Using default options:
+
+In:
+
+```css
+.custom-class {
+  /* Global non-color variables */
+  border-radius: var(--pf-v5-global--BorderRadius--lg);
+  row-gap: var(--pf-v5-global--spacer--md);
+  width: var(--pf-v5-global--arrow--width);
+
+  /* Global color variables */
+  color: var(--pf-v5-global--Color--100);
+  background-color: var(--pf-v5-global--BackgroundColor--200);
+
+  /* Variables removed from v6 */
+  max-width: var(--pf-v5-c-accordion__toggle-text--MaxWidth);
+
+  /* Variables staying in v6 */
+  height: var(--pf-v5-c-about-modal-box--Height);
+  box-shadow: var(--pf-v5-c-alert--BoxShadow);
+
+  /* Variables with direction updates */
+  padding-inline-start: var(--pf-v5-c-about-modal-box__brand--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-about-modal-box__brand--PaddingRight);
+  padding-block-start: var(--pf-v5-c-about-modal-box__brand--PaddingTop);
+  padding-block-end: var(--pf-v5-c-about-modal-box__brand--PaddingBottom);
+}
+```
+
+Out:
+
+```css
+.custom-class {
+  /* Global non-color variables */
+  border-radius: var(--pf-t--global--border--radius--large);
+  row-gap: var(--pf-t--global--spacer--md);
+  width: var(--pf-v5-global--arrow--width);
+
+  /* Global color variables */
+  color: var(--pf-t--temp--dev--tbd /* CODEMODS: original v5 color was:--pf-v5-global--Color--100 */);
+  background-color: var(--pf-t--temp--dev--tbd /* CODEMODS: original v5 color was:--pf-v5-global--BackgroundColor--200 */);
+
+  /* Variables removed from v6 */
+  max-width: var(--pf-v5-c-accordion__toggle-text--MaxWidth);
+
+  /* Variables staying in v6 */
+  height: var(--pf-v6-c-about-modal-box--Height);
+  box-shadow: var(--pf-v6-c-alert--BoxShadow);
+
+  /* Variables with direction updates */
+  padding-inline-start: var(--pf-v6-c-about-modal-box__brand--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-about-modal-box__brand--PaddingInlineEnd);
+  padding-block-start: var(--pf-v6-c-about-modal-box__brand--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-about-modal-box__brand--PaddingBlockEnd);
+}
+```

packages/css-vars-updater/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@patternfly/css-vars-updater",
+  "version": "1.0.0",
+  "description": "Utility to update Patternfly CSS variables when migrating from V5 to a new design token system in V6",
+  "author": "Red Hat",
+  "license": "MIT",
+  "bin": {
+    "css-vars-updater": "./dist/cli.js"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc --build --verbose ./tsconfig.json",
+    "clean": "rimraf ./dist"
+  },
+  "dependencies": {
+    "colors": "^1.4.0",
+    "commander": "^5.1.0",
+    "diff": "^5.1.0",
+    "glob": "^10.2.6",
+    "inquirer": "^12.0.1",
+    "shared-helpers": "workspace:^1.0.0"
+  },
+  "devDependencies": {
+    "@types/diff": "^5.0.9",
+    "typescript": "^5.4.2"
+  }
+}

packages/css-vars-updater/src/answers.ts

@@ -0,0 +1,9 @@
+export type Answers = {
+  fileExtensions: string;
+  shouldExcludeFiles: boolean;
+  filesToExclude?: string;
+  fix: boolean;
+  replaceGlobalColorsWithPink: boolean;
+  replaceGlobalVars: boolean;
+  direction: "ltr" | "rtl" | "ttb" | "none";
+};

packages/css-vars-updater/src/cli.ts

@@ -0,0 +1,117 @@
+#!/usr/bin/env node
+import { join } from "path";
+import { Command } from "commander";
+const program = new Command();
+import inquirer from "inquirer";
+
+import { isDir } from "shared-helpers";
+import { cssVarsUpdate } from "./cssVarsUpdate";
+import { Answers } from "./answers";
+
+program
+  .version(require("../package.json").version)
+  .description("Update css variables from v5 to v6")
+  .arguments("<path> [otherPaths...]")
+  .option(
+    "-i, --interactive",
+    "Starts an interactive interface for better control over the updates"
+  )
+  .option("--fix", "Whether to run fixer")
+  .action(runCssVarsUpdate);
+
+async function runCssVarsUpdate(
+  path: string,
+  otherPaths: string,
+  options: { interactive: boolean; fix: boolean }
+) {
+  const defaultAnswers: Answers = {
+    fileExtensions: "",
+    shouldExcludeFiles: false,
+    fix: options.fix,
+    replaceGlobalColorsWithPink: true,
+    replaceGlobalVars: true,
+    direction: "ltr",
+  };
+
+  const answers: Answers = options.interactive
+    ? await inquirer.prompt([
+        {
+          type: "input",
+          name: "fileExtensions",
+          message: "Enter file extensions to update (comma-separated):",
+          default: "scss,css,less,md",
+        },
+        {
+          type: "confirm",
+          name: "shouldExcludeFiles",
+          message: "Do you want to exclude any files?",
+          default: false,
+        },
+        {
+          type: "input",
+          name: "filesToExclude",
+          message: "Enter files to exclude (comma-separated, relative paths):",
+          when: (answers) => answers.shouldExcludeFiles === true,
+        },
+        {
+          type: "confirm",
+          name: "fix",
+          message: "Do you want to run the fixer?",
+          when: !options.fix,
+        },
+        {
+          type: "confirm",
+          name: "replaceGlobalColorsWithPink",
+          message:
+            "Do you want to replace color variables with a temporary hot pink color variable?",
+        },
+        {
+          type: "confirm",
+          name: "replaceGlobalVars",
+          message:
+            "Do you want to replace other global variables with a matching token?",
+        },
+        {
+          type: "list",
+          name: "direction",
+          message:
+            "Do you want to fix directional styles and how? E.g. PaddingLeft -> PaddingInlineStart",
+          choices: [
+            {
+              name: "Fix in left-to-right manner (English)",
+              value: "ltr",
+            },
+            {
+              name: "Fix in right-to-left manner",
+              value: "rtl",
+            },
+            {
+              name: "Fix in top-to-bottom manner",
+              value: "ttb",
+            },
+            {
+              name: "Don’t fix",
+              value: "none",
+            },
+          ],
+        },
+      ])
+    : defaultAnswers;
+
+  let allPaths = [path, ...otherPaths];
+
+  // if all paths are resolved to be directories assume that they want to run on all contents of those directories
+  const onlyDirs = await Promise.all(allPaths.map((path) => isDir(path))).then(
+    (responses) => responses.every((isDirResult) => !!isDirResult)
+  );
+
+  if (onlyDirs) {
+    allPaths = allPaths.map((path) => join(path, "**", "*"));
+  }
+
+  allPaths.forEach(async (path) => {
+    await cssVarsUpdate(path, answers);
+  });
+}
+
+program.parse(process.argv);