webstudio/packages/css-data/bin/css-to-ws.ts

#!/usr/bin/env tsx
import { parseArgs, type ParseArgsConfig } from "node:util";
import * as path from "node:path";
import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
import { parseCss } from "../src/parse-css";

const cliOptions = {
  allowPositionals: true,
  strict: true,
} as const satisfies ParseArgsConfig;

const cliArgs = parseArgs({ args: process.argv.slice(2), ...cliOptions });

if (cliArgs.positionals.length < 2) {
  console.error("Please provide the source and destination paths");
  process.exit(1);
}

const sourcePath = path.resolve(process.cwd(), cliArgs.positionals[0]);
const destinationPath = path.resolve(process.cwd(), cliArgs.positionals[1]);

const objectGroupBy = <Item>(list: Item[], by: (item: Item) => string) => {
  const records: Record<string, Item[]> = {};
  for (const item of list) {
    const key = by(item);
    let list = records[key];
    if (list === undefined) {
      list = [];
      records[key] = list;
    }
    list.push(item);
  }
  return records;
};

const css = readFileSync(sourcePath, "utf8");
const parsed = parseCss(css);
const records = objectGroupBy(parsed, (item) => item.selector);
mkdirSync(path.dirname(destinationPath), { recursive: true });
const code = `/* eslint-disable */
/* This file was generated by css-to-ws.ts */

export const styles = ${JSON.stringify(records, null, 2)};
`;

writeFileSync(destinationPath, code, "utf8");
console.info("✅ CSS parsed and Webstudio Data generated");