script to list component, subcomponent CSS props and warnings if there are potentially missing props

list-component-tokens.ts

// assumes script is in calcite-design-system/packages/calcite-components/support/

import { promises as fs } from "fs";
import { resolve } from "path";
import type { JsonDocs } from "../calcite-components/dist/extras/docs-json.d.ts";

(async () => {
  const docsJsonPath = resolve("../calcite-components/dist/extras/docs-json.json");
  const docsJsonContent = await fs.readFile(docsJsonPath, "utf8");
  const docsJson: JsonDocs = JSON.parse(docsJsonContent);

  const componentData: {
    tag: string;
    currentProps: string[];
    subcomponents: { tag: string; subcomponentProps: string[] }[];
    potentialMissingProps: string[];
  }[] = [];

  docsJson.components.forEach((component) => {
    const currentProps = component.styles.map((style) => style.name);
    const subcomponents = component.dependencies.map((dependency) => {
      const subcomponent = docsJson.components.find((c) => c.tag === dependency)!;
      const subcomponentProps = subcomponent.styles.map((style) => style.name);
      return { tag: subcomponent.tag, subcomponentProps };
    });

    const potentialMissingProps = subcomponents.reduce<string[]>((acc, subcomponent) => {
      const subcomponentTokenStart = `--${component.tag}-${subcomponent.tag.replace("calcite-", "")}`;
      if (!currentProps.some((prop) => prop.startsWith(subcomponentTokenStart))) {
        acc.push(subcomponentTokenStart);
      }
      return acc;
    }, []);

    componentData.push({
      tag: component.tag,
      currentProps,
      subcomponents,
      potentialMissingProps,
    });
  });

  componentData.forEach(({ tag, currentProps, subcomponents, potentialMissingProps }) => {
    console.log(`\n============================`);
    console.log(`Component: <${tag}>`);
    console.log(`============================\n`);

    console.log(`  - Current CSS props:`);
    if (currentProps.length) {
      currentProps.forEach((prop) => {
        console.log(`    - ${prop}`);
      });
    } else {
      console.log("    - none");
    }

    console.log(`\n  - Subcomponents (direct):`);
    if (subcomponents.length) {
      subcomponents.forEach(({ tag: subTag, subcomponentProps }) => {
        console.log(`    - <${subTag}>:`);
        if (subcomponentProps.length) {
          subcomponentProps.forEach((prop) => {
            console.log(`      - ${prop}`);
          });
        } else {
          console.log("      - none");
        }
      });
    } else {
      console.log("    - none");
    }

    if (potentialMissingProps.length) {
      console.log(`\n  - Potential missing subcomponent CSS props:`);
      potentialMissingProps.forEach((prop) => {
        console.log(`    - ${prop}`);
      });
    } else {
      console.log("    - none");
    }

    console.log(`\n============================\n`);
  });
})();