react-tokengen idea - rough start

index.js

const { exec } = require('child_process');
const fs = require('fs');
const path = require('path');
const ping = require('ping');
const puppeteer = require('puppeteer');
const reactDocs = require('react-docgen');

const componentSrc = `
  import React, { Component } from 'react';
  import PropTypes from 'prop-types';

  /**
   * General component description.
   */
  function Button({ foo, bar }) {
    return <div>{foo}</div>;
  }

  Button.propTypes = {
    /**
     * Variants of the component.
     */
    variant: PropTypes.oneOf(['contained', 'outlined', 'text']).isRequired,
    /**
     * Size variants of the component.
     */
    size: PropTypes.oneOf(['small', 'medium', 'large']).isRequired,
  };

  Button.defaultProps = {
    variant: 'contained',
    size: 'medium',
  };

  export default Button;
`;

const componentInfo = reactDocs.parse(componentSrc);

const appSrc = `
  import ${componentInfo.displayName} from '@mui/material/${componentInfo.displayName}';
  export default function App() {
    return (
      <${componentInfo.displayName}
        className="analyze___${componentInfo.displayName}"
        variant={${componentInfo.props.variant.defaultValue.value}}
        size={${componentInfo.props.size.defaultValue.value}}
      >
        Some Button
      </${componentInfo.displayName}>
    );
  }
`;

fs.writeFileSync(path.resolve(process.cwd(), './app/src/App.js'), appSrc);

function logError(error, stdout, stderr) {
  if (error) {
    console.log(`error: ${error.message}`);
    return;
  }
  if (stderr) {
    console.log(`stderr: ${stderr}`);
    return;
  }
  console.log(`stdout: ${stdout}`);
}

exec('yarn playground', logError);

async function analyzeCss() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:3000/');

  const data = await page.evaluate((displayName) => {
    const element = document.querySelector(`.analyze___${displayName}`);
    return window.getComputedStyle(element);
  }, componentInfo.displayName);

  console.log(data);

  // Modify rendered component
  // --> calculate size-related properties
  // --> calculate variant-related properties
  // --> shape results into Style Dictionary-friendly objects

  await browser.close();
};

function probe(host) {
  ping.sys.probe(host, (isAlive) => {
    if (!isAlive) {
      setTimeout(() => {
        analyzeCss();
        return;
      }, 5000);
    }
  });
}

const hosts = ['http://localhost:3000/'];
hosts.forEach(probe);