@nuee/cli 0.4.0 → 0.5.0

package/dist/doctor.js

@@ -1,22 +1,7 @@
 import { access, readFile } from "node:fs/promises";
 import { resolve } from "node:path";
 import { hasConfig, readConfig, resolveConfigAlias } from "./config.js";
-async function readPackageJson(projectDirectory) {
-    try {
-        return JSON.parse(await readFile(resolve(projectDirectory, "package.json"), "utf8"));
-    }
-    catch {
-        return undefined;
-    }
-}
-async function readProjectFile(projectDirectory, fileName) {
-    try {
-        return await readFile(resolve(projectDirectory, fileName), "utf8");
-    }
-    catch {
-        return undefined;
-    }
-}
+import { inspectViteConfig } from "./source.js";
 const entryFileNames = [
     "src/main.tsx",
     "src/main.jsx",
@@ -31,105 +16,132 @@ const entryFileNames = [
     "app/layout.tsx",
     "app/layout.jsx",
 ];
+const viteConfigFileNames = [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vite.config.js",
+    "vite.config.mjs",
+];
+const tokenFileNames = ["color-palette.stylex.ts", "semantic.stylex.ts", "themes.stylex.ts"];
+function isNotFoundError(error) {
+    return typeof error === "object" && error !== null && "code" in error && error.code === "ENOENT";
+}
+async function readProjectFile(projectDirectory, fileName) {
+    try {
+        return await readFile(resolve(projectDirectory, fileName), "utf8");
+    }
+    catch (error) {
+        if (!isNotFoundError(error))
+            throw error;
+        return undefined;
+    }
+}
+async function readPackageJson(projectDirectory) {
+    const source = await readProjectFile(projectDirectory, "package.json");
+    return source === undefined ? undefined : JSON.parse(source);
+}
 async function readEntrySources(projectDirectory) {
-    const sources = await Promise.all(entryFileNames.map(async (fileName) => readProjectFile(projectDirectory, fileName)));
+    const sources = await Promise.all(entryFileNames.map((fileName) => readProjectFile(projectDirectory, fileName)));
     return sources.filter((source) => source !== undefined);
 }
 async function hasStylexCompiler(projectDirectory) {
-    const configFileNames = [
-        "vite.config.ts",
-        "vite.config.mts",
-        "vite.config.js",
-        "vite.config.mjs",
-        "next.config.ts",
-        "next.config.mjs",
-        "next.config.js",
-        "webpack.config.ts",
-        "webpack.config.mjs",
-        "webpack.config.js",
-        "rsbuild.config.ts",
-        "rsbuild.config.mjs",
-        "rsbuild.config.js",
-        "rspack.config.ts",
-        "rspack.config.mjs",
-        "rspack.config.js",
-    ];
-    const sources = await Promise.all(configFileNames.map(async (fileName) => readProjectFile(projectDirectory, fileName)));
-    return sources.some((source) => source?.includes("@stylexjs/unplugin") && /\b(?:stylex|unplugin)\.vite\(/.test(source));
+    const sources = await Promise.all(viteConfigFileNames.map((fileName) => readProjectFile(projectDirectory, fileName)));
+    return sources.some((source) => source !== undefined && inspectViteConfig(source)?.hasCompiler);
+}
+async function hasTokenFiles(tokenDirectory) {
+    for (const fileName of tokenFileNames) {
+        try {
+            await access(resolve(tokenDirectory, fileName));
+        }
+        catch (error) {
+            if (!isNotFoundError(error))
+                throw error;
+            return false;
+        }
+    }
+    return true;
 }
 function hasDependency(packageJson, dependency) {
     return Boolean(packageJson?.dependencies?.[dependency] ?? packageJson?.devDependencies?.[dependency]);
 }
-export async function doctor(projectDirectory) {
-    const checks = [];
-    const packageJson = await readPackageJson(projectDirectory);
-    const entrySources = await readEntrySources(projectDirectory);
+async function inspectLocalConfiguration(projectDirectory) {
     if (!(await hasConfig(projectDirectory))) {
-        checks.push({
-            detail: "Run `nuee init` to configure UI and styles aliases.",
-            name: "nuee.json",
-            status: "warn",
-        });
+        return [
+            {
+                detail: "Run `nuee init` to configure UI and styles aliases.",
+                name: "nuee.json",
+                status: "warn",
+            },
+        ];
     }
-    else {
-        const config = await readConfig(projectDirectory);
-        try {
-            const uiDirectory = await resolveConfigAlias(projectDirectory, config.aliases.ui, "aliases.ui");
-            const tokenDirectory = await resolveConfigAlias(projectDirectory, config.aliases.styles, "aliases.styles");
-            checks.push({
+    const config = await readConfig(projectDirectory);
+    try {
+        const uiDirectory = await resolveConfigAlias(projectDirectory, config.aliases.ui, "aliases.ui");
+        const tokenDirectory = await resolveConfigAlias(projectDirectory, config.aliases.styles, "aliases.styles");
+        const tokenCheck = (await hasTokenFiles(tokenDirectory))
+            ? {
+                detail: `${config.aliases.styles} contains local token sources.`,
+                name: "Local tokens",
+                status: "pass",
+            }
+            : {
+                detail: `Create local token sources in ${config.aliases.styles} with \`nuee init --force\`.`,
+                name: "Local tokens",
+                status: "warn",
+            };
+        return [
+            {
                 detail: `${config.aliases.ui} → ${uiDirectory}`,
                 name: "UI path",
                 status: "pass",
-            });
-            const tokenFiles = ["color-palette.stylex.ts", "semantic.stylex.ts", "themes.stylex.ts"];
-            const hasTokenFiles = await Promise.all(tokenFiles.map(async (fileName) => {
-                try {
-                    await access(resolve(tokenDirectory, fileName));
-                    return true;
-                }
-                catch {
-                    return false;
-                }
-            }));
-            checks.push(hasTokenFiles.every(Boolean)
-                ? {
-                    detail: `${config.aliases.styles} contains local token sources.`,
-                    name: "Local tokens",
-                    status: "pass",
-                }
-                : {
-                    detail: `Create local token sources in ${config.aliases.styles} with \`nuee init --force\`.`,
-                    name: "Local tokens",
-                    status: "warn",
-                });
-        }
-        catch (error) {
-            checks.push({
+            },
+            tokenCheck,
+        ];
+    }
+    catch (error) {
+        return [
+            {
                 detail: error instanceof Error ? error.message : "Could not resolve nuee aliases.",
                 name: "Aliases",
                 status: "warn",
-            });
-        }
+            },
+        ];
     }
-    checks.push(hasDependency(packageJson, "@stylexjs/stylex")
-        ? { detail: "@stylexjs/stylex is installed.", name: "StyleX runtime", status: "pass" }
-        : {
+}
+export async function doctor(projectDirectory) {
+    const packageJson = await readPackageJson(projectDirectory);
+    const entrySources = await readEntrySources(projectDirectory);
+    const checks = await inspectLocalConfiguration(projectDirectory);
+    if (hasDependency(packageJson, "@stylexjs/stylex")) {
+        checks.push({
+            detail: "@stylexjs/stylex is installed.",
+            name: "StyleX runtime",
+            status: "pass",
+        });
+    }
+    else {
+        checks.push({
             detail: "It is installed automatically by the first `nuee add`. Use --skip-dependencies to skip installation.",
             name: "StyleX runtime",
             status: "warn",
         });
-    checks.push((await hasStylexCompiler(projectDirectory))
-        ? {
-            detail: "A supported config enables the StyleX compiler.",
+    }
+    if (await hasStylexCompiler(projectDirectory)) {
+        checks.push({
+            detail: "A Vite plugins array enables the StyleX compiler.",
             name: "StyleX compiler",
             status: "pass",
-        }
-        : {
-            detail: "Configure the StyleX compiler for your bundler. Vite users can run `nuee init --framework vite`.",
+        });
+    }
+    else {
+        checks.push({
+            detail: "Could not verify a Vite StyleX compiler. Other bundlers require manual verification. Vite users can run `nuee init --vite`.",
             name: "StyleX compiler",
             status: "warn",
         });
-    checks.push(entrySources.some((source) => /import\s+["'][^"']+\.css["']/.test(source))
+    }
+    const hasCssEntry = entrySources.some((source) => /import\s+["'][^"']+\.css["']/.test(source));
+    checks.push(hasCssEntry
         ? {
             detail: "An application entry imports a CSS entry point for StyleX output.",
             name: "CSS entry point",
@@ -140,17 +152,20 @@ export async function doctor(projectDirectory) {
             name: "CSS entry point",
             status: "warn",
         });
-    checks.push(hasDependency(packageJson, "@stylexjs/unplugin")
-        ? {
+    if (hasDependency(packageJson, "@stylexjs/unplugin")) {
+        checks.push({
             detail: "@stylexjs/unplugin is installed.",
             name: "StyleX build plugin",
             status: "pass",
-        }
-        : {
+        });
+    }
+    else {
+        checks.push({
             detail: "Add @stylexjs/unplugin to your bundler configuration, such as Vite or esbuild.",
             name: "StyleX build plugin",
             status: "warn",
         });
+    }
     for (const check of checks) {
         console.log(`${check.status === "pass" ? "✓" : "!"} ${check.name}: ${check.detail}`);
     }

package/dist/index.js

@@ -1,43 +1,43 @@
 import { resolve } from "node:path";
 import { add } from "./add.js";
 import { parseArguments } from "./arguments.js";
-import { doctor } from "./doctor.js";
 import { docs, list } from "./docs.js";
+import { doctor } from "./doctor.js";
 import { init } from "./init.js";
 import { newComponent } from "./new-component.js";
 export async function run(arguments_ = process.argv.slice(2)) {
-    const { command, options, positionals } = parseArguments(arguments_);
-    const projectDirectory = resolve(String(options.cwd ?? process.cwd()));
     try {
-        if (command === "init") {
-            await init(projectDirectory, options);
-        }
-        else if (command === "add") {
-            await add(projectDirectory, positionals, options);
-        }
-        else if (command === "doctor") {
-            await doctor(projectDirectory);
-        }
-        else if (command === "docs") {
-            docs(positionals[0]);
-        }
-        else if (command === "list") {
-            list();
-        }
-        else if (command === "new") {
-            await newComponent(projectDirectory, positionals[0]);
-        }
-        else {
-            console.log(`Nuee CLI
+        const { command, options, positionals } = parseArguments(arguments_);
+        const projectDirectory = resolve(String(options.cwd ?? process.cwd()));
+        switch (command) {
+            case "init":
+                await init(projectDirectory, options);
+                break;
+            case "add":
+                await add(projectDirectory, positionals, options);
+                break;
+            case "doctor":
+                return await doctor(projectDirectory);
+            case "docs":
+                docs(positionals[0]);
+                break;
+            case "list":
+                list();
+                break;
+            case "new":
+                await newComponent(projectDirectory, positionals[0]);
+                break;
+            default:
+                console.log(`Nuee CLI
 
 Usage:
-  nuee init [--ui <path>] [--tokens <path>]
-  nuee init --framework vite
+  nuee init [--ui <path>] [--styles <path>] [--vite]
   nuee add <component...> [--skip-dependencies] [--dry-run]
   nuee doctor
   nuee list
   nuee docs [component]
   nuee new <kebab-case-name>`);
+                break;
         }
         return true;
     }

package/dist/init.d.ts

@@ -1,2 +1,23 @@
 import type { CliOptions } from "./arguments.js";
+type PlannedFile = {
+    path: string;
+    source: string;
+    flag: "w" | "wx";
+};
+export declare function prepareInitialization(projectDirectory: string, options: CliOptions): Promise<{
+    files: PlannedFile[];
+    runtimeDependencies: readonly string[];
+    buildDependencies: readonly string[];
+    config: {
+        accessibility: {
+            respectReducedMotion: boolean;
+        };
+        aliases: {
+            ui: string;
+            styles: string;
+        };
+    };
+}>;
+export declare function applyInitialization(projectDirectory: string, plan: Awaited<ReturnType<typeof prepareInitialization>>): Promise<void>;
 export declare function init(projectDirectory: string, options: CliOptions, shouldLog?: boolean): Promise<void>;
+export {};

package/dist/init.js

@@ -1,14 +1,15 @@
-import { access, mkdir, readFile, writeFile } from "node:fs/promises";
-import { join } from "node:path";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { dirname, join, relative, sep } from "node:path";
 import { createInterface } from "node:readline/promises";
-import { defaultConfig, hasConfig, resolveConfigAlias, writeConfig } from "./config.js";
-import { installDependencies } from "./dependencies.js";
-import { getTokenFiles } from "@nuee/registry";
+import { getFoundationFiles } from "@nuee/registry";
+import { defaultConfig, getDefaultAliases, hasConfig, resolveConfigAlias, writeConfig, } from "./config.js";
+import { getMissingDependencies, installDependencies } from "./dependencies.js";
+import { configureVite } from "./source.js";
 async function ask(question, defaultValue, readline) {
     const answer = await readline.question(`${question} (${defaultValue}) `);
     return answer.trim() || defaultValue;
 }
-async function readViteConfig(projectDirectory) {
+async function findViteConfig(projectDirectory) {
     const configFileNames = [
         "vite.config.ts",
         "vite.config.mts",
@@ -18,7 +19,6 @@ async function readViteConfig(projectDirectory) {
     for (const fileName of configFileNames) {
         const path = join(projectDirectory, fileName);
         try {
-            await access(path);
             return { path, source: await readFile(path, "utf8") };
         }
         catch (error) {
@@ -31,69 +31,58 @@ async function readViteConfig(projectDirectory) {
             throw error;
         }
     }
-    throw new Error("Could not find a Vite config file.");
+    return undefined;
 }
-function configureVite(source) {
-    const importLine = 'import stylex from "@stylexjs/unplugin";';
-    const pluginPattern = /plugins:\s*\[([^\]]*)\]/s;
-    const stylexPlugin = 'stylex.vite({ unstable_moduleResolution: { type: "commonJS" } })';
-    if (!source.includes("stylex.vite(") && !pluginPattern.test(source)) {
-        throw new Error("Could not safely update the Vite plugins array. Add stylex.vite() manually.");
-    }
-    if (source.includes("stylex.vite("))
-        return source;
-    return (source.includes(importLine) ? source : `${importLine}\n${source}`).replace(pluginPattern, (_, plugins) => {
-        const prefix = plugins.trim() ? `${stylexPlugin}, ${plugins}` : stylexPlugin;
-        return `plugins: [${prefix}]`;
-    });
-}
-async function writeViteFiles(projectDirectory, tokenDirectory, refreshLegacyTokens) {
-    const { path: configPath, source: configSource } = await readViteConfig(projectDirectory);
-    const configuredVite = configureVite(configSource);
-    await addResetImport(projectDirectory);
-    await writeNueeFiles(projectDirectory, tokenDirectory, refreshLegacyTokens);
-    await writeFile(configPath, configuredVite, "utf8");
+function getRelativeImportPath(from, to) {
+    const path = relative(dirname(from), to).split(sep).join("/");
+    return path.startsWith(".") ? path : `./${path}`;
 }
-async function addResetImport(projectDirectory) {
-    const cssPath = join(projectDirectory, "src/index.css");
-    const resetImport = '@import "@nuee/ui/reset.css";';
-    try {
-        const source = await readFile(cssPath, "utf8");
-        if (source.includes(resetImport))
-            return;
-        await writeFile(cssPath, `${resetImport}\n\n${source}`, "utf8");
-    }
-    catch (error) {
-        if (typeof error === "object" && error !== null && "code" in error && error.code === "ENOENT") {
-            await writeFile(cssPath, `${resetImport}\n`, "utf8");
-            return;
+async function prepareFoundationFiles(tokenDirectory, refreshLegacyTokens) {
+    const files = [];
+    for (const file of await getFoundationFiles()) {
+        const path = join(tokenDirectory, file.name);
+        let currentSource;
+        try {
+            currentSource = await readFile(path, "utf8");
+        }
+        catch (error) {
+            if (typeof error !== "object" ||
+                error === null ||
+                !("code" in error) ||
+                error.code !== "ENOENT")
+                throw error;
+            files.push({ path, source: file.content, flag: "wx" });
+            continue;
+        }
+        if (refreshLegacyTokens &&
+            file.name === "semantic.stylex.ts" &&
+            currentSource.includes('bgCanvas: "initial"') &&
+            currentSource.includes('overlay: "initial"')) {
+            files.push({ path, source: file.content, flag: "w" });
         }
-        throw error;
-    }
-}
-async function writeNueeFiles(projectDirectory, tokenDirectory, refreshLegacyTokens = false) {
-    await mkdir(tokenDirectory, { recursive: true });
-    for (const file of await getTokenFiles()) {
-        await writeTokenFile(join(tokenDirectory, file.name), file.content, refreshLegacyTokens, file.name);
     }
+    return files;
 }
-function isLegacySemanticSource(fileName, source) {
-    return (fileName === "semantic.stylex.ts" &&
-        source.includes('bgCanvas: "initial"') &&
-        source.includes('overlay: "initial"'));
-}
-async function writeTokenFile(path, source, shouldRefreshLegacySources, fileName) {
+async function prepareResetImport(projectDirectory, tokenDirectory) {
+    const path = join(projectDirectory, "src/index.css");
+    const resetImport = `@import "${getRelativeImportPath(path, join(tokenDirectory, "reset.css"))}";`;
+    let source;
     try {
-        const currentSource = await readFile(path, "utf8");
-        if (shouldRefreshLegacySources && isLegacySemanticSource(fileName, currentSource)) {
-            await writeFile(path, source, "utf8");
-        }
+        source = await readFile(path, "utf8");
     }
-    catch {
-        await writeFile(path, source, "utf8");
+    catch (error) {
+        if (typeof error !== "object" ||
+            error === null ||
+            !("code" in error) ||
+            error.code !== "ENOENT")
+            throw error;
+        return { path, source: `${resetImport}\n`, flag: "wx" };
     }
+    if (source.includes(resetImport))
+        return undefined;
+    return { path, source: `${resetImport}\n\n${source}`, flag: "w" };
 }
-export async function init(projectDirectory, options, shouldLog = true) {
+export async function prepareInitialization(projectDirectory, options) {
     if ((await hasConfig(projectDirectory)) && !options.force) {
         throw new Error("nuee.json already exists. Use --force to create it again.");
     }
@@ -102,40 +91,62 @@ export async function init(projectDirectory, options, shouldLog = true) {
         ? createInterface({ input: process.stdin, output: process.stdout })
         : null;
     try {
-        if (options.framework && options.framework !== "vite") {
-            throw new Error(`Unsupported framework: ${options.framework}. Use vite or omit --framework.`);
-        }
+        const defaultAliases = await getDefaultAliases(projectDirectory);
         const uiAlias = options.ui ??
             (readline
-                ? await ask("Enter the UI import alias.", defaultConfig.aliases.ui, readline)
-                : defaultConfig.aliases.ui);
+                ? await ask("Enter the UI import alias.", defaultAliases.ui, readline)
+                : defaultAliases.ui);
         const stylesAlias = options.styles ??
             options.tokens ??
             (readline
-                ? await ask("Enter the styles import alias.", defaultConfig.aliases.styles, readline)
-                : defaultConfig.aliases.styles);
+                ? await ask("Enter the styles import alias.", defaultAliases.styles, readline)
+                : defaultAliases.styles);
         const tokenDirectory = await resolveConfigAlias(projectDirectory, stylesAlias, "aliases.styles");
         await resolveConfigAlias(projectDirectory, uiAlias, "aliases.ui");
-        if (!options["skip-dependencies"]) {
-            await installDependencies(projectDirectory, ["@stylexjs/stylex"]);
-            if (options.framework === "vite") {
-                await installDependencies(projectDirectory, ["@nuee/ui", "@stylexjs/unplugin"], true);
-            }
+        const viteConfig = options.vite ? await findViteConfig(projectDirectory) : undefined;
+        if (options.vite && !viteConfig) {
+            throw new Error("Could not find a Vite config file.");
         }
-        if (options.framework === "vite") {
-            await writeViteFiles(projectDirectory, tokenDirectory, Boolean(options.force));
+        const configuredVite = viteConfig ? configureVite(viteConfig.source) : undefined;
+        const files = await prepareFoundationFiles(tokenDirectory, Boolean(options.force));
+        if (viteConfig && configuredVite !== undefined) {
+            const resetFile = await prepareResetImport(projectDirectory, tokenDirectory);
+            if (resetFile)
+                files.push(resetFile);
+            files.push({ path: viteConfig.path, source: configuredVite, flag: "w" });
         }
-        else {
-            await writeNueeFiles(projectDirectory, tokenDirectory, Boolean(options.force));
-        }
-        await writeConfig(projectDirectory, {
-            accessibility: defaultConfig.accessibility,
-            aliases: { ui: uiAlias, styles: stylesAlias },
-        });
+        const runtimeDependencies = await getMissingDependencies(projectDirectory, [
+            "@stylexjs/stylex",
+        ]);
+        const buildDependencies = await getMissingDependencies(projectDirectory, [
+            "@stylexjs/unplugin",
+        ]);
+        return {
+            files,
+            runtimeDependencies: options["skip-dependencies"] ? [] : runtimeDependencies,
+            buildDependencies: options["skip-dependencies"] || !options.vite ? [] : buildDependencies,
+            config: {
+                accessibility: defaultConfig.accessibility,
+                aliases: { ui: uiAlias, styles: stylesAlias },
+            },
+        };
     }
     finally {
         readline?.close();
     }
+}
+export async function applyInitialization(projectDirectory, plan) {
+    await installDependencies(projectDirectory, plan.runtimeDependencies);
+    await installDependencies(projectDirectory, plan.buildDependencies, true);
+    for (const file of plan.files) {
+        await mkdir(dirname(file.path), { recursive: true });
+        await writeFile(file.path, file.source, { encoding: "utf8", flag: file.flag });
+    }
+    await writeConfig(projectDirectory, plan.config);
+}
+export async function init(projectDirectory, options, shouldLog = true) {
+    const plan = await prepareInitialization(projectDirectory, options);
+    await applyInitialization(projectDirectory, plan);
     if (shouldLog)
         console.log("✔ Initialized Nuee.");
 }

package/dist/new-component.js

@@ -1,10 +1,9 @@
-import { access, mkdir, writeFile } from "node:fs/promises";
+import { mkdir, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import { readConfig, resolveConfigAlias } from "./config.js";
 function toPascalCase(name) {
     return name
         .split("-")
-        .filter(Boolean)
         .map((part) => `${part[0]?.toUpperCase()}${part.slice(1)}`)
         .join("");
 }
@@ -17,19 +16,34 @@ export async function newComponent(projectDirectory, name) {
     const componentName = toPascalCase(name);
     const componentPath = join(uiDirectory, `${name}.tsx`);
     const tokenImport = `${config.aliases.styles}/semantic.stylex`;
-    const files = [componentPath];
-    for (const file of files) {
-        try {
-            await access(file);
-            throw new Error(`${file} already exists. Existing components will not be overwritten.`);
-        }
-        catch (error) {
-            if (!(error instanceof Error) || !error.message.includes("already exists"))
-                continue;
-            throw error;
+    await mkdir(uiDirectory, { recursive: true });
+    try {
+        await writeFile(componentPath, `import { colorVars, radiusVars, spacingVars } from "${tokenImport}";
+import * as stylex from "@stylexjs/stylex";
+import type { ComponentProps } from "react";
+
+const styles = stylex.create({
+  root: {
+    backgroundColor: colorVars.bgSurface,
+    borderRadius: radiusVars.sm,
+    padding: spacingVars.space3,
+  },
+});
+
+export type ${componentName}Props = Omit<ComponentProps<"div">, "className" | "style"> & {
+  xstyle?: stylex.StyleXStyles;
+};
+
+export function ${componentName}({ xstyle, ...props }: ${componentName}Props) {
+  return <div {...props} {...stylex.props(styles.root, xstyle)} />;
+}
+`, { flag: "wx" });
+    }
+    catch (error) {
+        if (typeof error === "object" && error !== null && "code" in error && error.code === "EEXIST") {
+            throw new Error(`${componentPath} already exists. Existing components will not be overwritten.`);
         }
+        throw error;
     }
-    await mkdir(uiDirectory, { recursive: true });
-    await writeFile(componentPath, `import { colorVars, radiusVars, spacingVars } from "${tokenImport}";\nimport * as stylex from "@stylexjs/stylex";\nimport type { ComponentProps } from "react";\n\nconst styles = stylex.create({\n  root: {\n    backgroundColor: colorVars.bgSurface,\n    borderRadius: radiusVars.sm,\n    padding: spacingVars.space3,\n  },\n});\n\nexport type ${componentName}Props = ComponentProps<"div"> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function ${componentName}({ className, style, xstyle, ...props }: ${componentName}Props) {\n  const stylexProps = stylex.props(styles.root, xstyle);\n\n  return (\n    <div\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(" ")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n`, { flag: "wx" });
     console.log(`Created a ${name} component scaffold: ${componentPath}`);
 }