@nooeh/cli 0.1.0 → 0.2.1

package/dist/add.js

@@ -1,7 +1,7 @@
 import { mkdir, readFile, writeFile } from "node:fs/promises";
-import { dirname, isAbsolute, join, relative, resolve, sep } from "node:path";
+import { dirname, isAbsolute, join, relative, resolve } from "node:path";
 import { createInterface } from "node:readline/promises";
-import { defaultConfig, hasConfig, readConfig, resolveAliasPath, resolveTokensPath, } from "./config.js";
+import { defaultConfig, hasConfig, readConfig, resolveConfigAlias } from "./config.js";
 import { installDependencies } from "./dependencies.js";
 import { init } from "./init.js";
 import { resolveComponent } from "./registry.js";
@@ -49,14 +49,8 @@ function resolveTargetPath(uiDirectory, filePath) {
     }
     return targetPath;
 }
-function replaceTokenImport(source, targetPath, tokenDirectory) {
-    const tokenModulePath = join(tokenDirectory, "tokens.stylex.ts");
-    const relativePath = relative(dirname(targetPath), tokenModulePath)
-        .replace(/\.ts$/, "")
-        .split(sep)
-        .join("/");
-    const tokenModule = relativePath.startsWith(".") ? relativePath : `./${relativePath}`;
-    return source.replaceAll("@nooeh/tokens/tokens.stylex", tokenModule);
+function replaceTokenImport(source, stylesAlias) {
+    return source.replaceAll("@nooeh/tokens/semantic.stylex", `${stylesAlias}/semantic.stylex`);
 }
 export async function add(projectDirectory, componentName, options = {}) {
     if (!componentName)
@@ -70,8 +64,7 @@ export async function add(projectDirectory, componentName, options = {}) {
     }
     const config = options["dry-run"] && shouldInitialize ? defaultConfig : await readConfig(projectDirectory);
     const resolved = await resolveComponent(componentName);
-    const uiDirectory = await resolveAliasPath(projectDirectory, config.aliases.ui);
-    const tokenDirectory = resolveTokensPath(projectDirectory, config.tokens);
+    const uiDirectory = await resolveConfigAlias(projectDirectory, config.aliases.ui, "aliases.ui");
     let isOverwriteConfirmed = false;
     async function confirmOverwrite() {
         if (isOverwriteConfirmed)
@@ -85,7 +78,7 @@ export async function add(projectDirectory, componentName, options = {}) {
             console.log(`Will add: ${targetPath}`);
             continue;
         }
-        await writeSource(replaceTokenImport(file.content, targetPath, tokenDirectory), targetPath, confirmOverwrite);
+        await writeSource(replaceTokenImport(file.content, config.aliases.styles), targetPath, confirmOverwrite);
     }
     const shouldInstallDependencies = resolved.externalDependencies.length > 0 &&
         !options.skipDependencyInstall &&
@@ -101,5 +94,6 @@ export async function add(projectDirectory, componentName, options = {}) {
         return;
     }
     console.log(`Added ${componentName}.`);
-    console.log(`import { ${primaryExport} } from "${config.aliases.ui}/${componentName}"`);
+    console.log(`Export: ${primaryExport}`);
+    console.log(`Location: ${relative(projectDirectory, join(uiDirectory, `${componentName}.tsx`))}`);
 }

package/dist/arguments.d.ts

@@ -5,8 +5,9 @@ export type CliOptions = Record<string, boolean | string | undefined> & {
     "dry-run"?: boolean;
     force?: boolean;
     "skip-dependencies"?: boolean;
+    styles?: string;
     tokens?: string;
-    "ui-alias"?: string;
+    ui?: string;
 };
 export declare function parseArguments(arguments_: readonly string[]): {
     command: string;

package/dist/config.d.ts

@@ -1,16 +1,14 @@
 export declare const configFileName = "nooeh.json";
-export declare const configVersion = 2;
 export type NooehConfig = {
     aliases: {
         ui: string;
+        styles: string;
     };
-    tokens: string;
-    version?: number;
 };
 export declare const defaultConfig: NooehConfig;
 export declare function hasConfig(projectDirectory: string): Promise<boolean>;
 export declare function validateConfig(config: unknown): NooehConfig;
 export declare function readConfig(projectDirectory: string): Promise<NooehConfig>;
 export declare function writeConfig(projectDirectory: string, config: NooehConfig): Promise<string>;
-export declare function resolveTokensPath(projectDirectory: string, tokens: string): string;
-export declare function resolveAliasPath(projectDirectory: string, alias: string): Promise<string>;
+export declare function resolveConfigPath(projectDirectory: string, path: string, name: string): string;
+export declare function resolveConfigAlias(projectDirectory: string, alias: string, name: string): Promise<string>;

package/dist/config.js

@@ -1,11 +1,11 @@
 import { access, readFile, writeFile } from "node:fs/promises";
-import { isAbsolute, relative, resolve } from "node:path";
+import { isAbsolute, join, relative, resolve } from "node:path";
 export const configFileName = "nooeh.json";
-export const configVersion = 2;
 export const defaultConfig = {
-    aliases: { ui: "@/components/ui" },
-    tokens: "src/styles/nooeh",
-    version: configVersion,
+    aliases: {
+        ui: "@/components/ui",
+        styles: "@/styles",
+    },
 };
 export async function hasConfig(projectDirectory) {
     try {
@@ -25,22 +25,24 @@ function ensureRelativePath(projectDirectory, path, name) {
 }
 export function validateConfig(config) {
     const candidate = config;
-    if (!candidate.aliases || typeof candidate.aliases.ui !== "string" || !candidate.aliases.ui) {
-        throw new Error("Configure aliases.ui.");
+    if (candidate.paths || candidate.tokens) {
+        throw new Error("This nooeh.json uses an older format. Run `nooeh init --force` to create alias-based configuration.");
     }
-    if (candidate.version !== undefined && candidate.version !== configVersion) {
-        throw new Error(`Unsupported nooeh.json version: ${String(candidate.version)}`);
+    if (!candidate.aliases || typeof candidate.aliases !== "object") {
+        throw new Error("Configure aliases.");
     }
-    if (typeof candidate.tokens !== "string" || !candidate.tokens.trim()) {
-        throw new Error("Configure tokens.");
+    const aliases = candidate.aliases;
+    if (typeof aliases.ui !== "string" || !aliases.ui.trim()) {
+        throw new Error("Configure aliases.ui.");
     }
-    if (isAbsolute(candidate.tokens)) {
-        throw new Error("tokens must be inside the project directory.");
+    if (typeof aliases.styles !== "string" || !aliases.styles.trim()) {
+        throw new Error("Configure aliases.styles.");
     }
     return {
-        aliases: { ui: candidate.aliases.ui },
-        tokens: candidate.tokens,
-        version: configVersion,
+        aliases: {
+            ui: aliases.ui,
+            styles: aliases.styles,
+        },
     };
 }
 function isNotFoundError(error) {
@@ -61,54 +63,54 @@ export async function readConfig(projectDirectory) {
 }
 export async function writeConfig(projectDirectory, config) {
     const validatedConfig = validateConfig(config);
-    ensureRelativePath(projectDirectory, validatedConfig.tokens, "tokens");
     const configPath = resolve(projectDirectory, configFileName);
     await writeFile(configPath, `${JSON.stringify(validatedConfig, null, 2)}\n`, "utf8");
     return configPath;
 }
-export function resolveTokensPath(projectDirectory, tokens) {
-    ensureRelativePath(projectDirectory, tokens, "tokens");
-    return resolve(projectDirectory, tokens);
+export function resolveConfigPath(projectDirectory, path, name) {
+    ensureRelativePath(projectDirectory, path, name);
+    return resolve(projectDirectory, path);
 }
-function findAliasTarget(alias, paths) {
-    for (const [pattern, targets] of Object.entries(paths ?? {})) {
-        const target = targets[0];
-        if (!target)
-            continue;
-        const starIndex = pattern.indexOf("*");
-        if (starIndex === -1) {
-            if (alias === pattern)
-                return target;
+async function readTsConfig(projectDirectory) {
+    for (const fileName of ["tsconfig.json", "jsconfig.json"]) {
+        try {
+            return JSON.parse(await readFile(resolve(projectDirectory, fileName), "utf8"));
+        }
+        catch (error) {
+            if (!isNotFoundError(error)) {
+                continue;
+            }
+        }
+    }
+    return undefined;
+}
+function resolvePathAlias(alias, paths) {
+    for (const [pattern, targets] of Object.entries(paths)) {
+        const wildcardIndex = pattern.indexOf("*");
+        if (wildcardIndex === -1) {
+            if (pattern === alias)
+                return targets[0];
             continue;
         }
-        const prefix = pattern.slice(0, starIndex);
-        const suffix = pattern.slice(starIndex + 1);
+        const prefix = pattern.slice(0, wildcardIndex);
+        const suffix = pattern.slice(wildcardIndex + 1);
         if (!alias.startsWith(prefix) || !alias.endsWith(suffix))
             continue;
-        const value = alias.slice(prefix.length, alias.length - suffix.length);
-        return target.replaceAll("*", value);
+        const wildcard = alias.slice(prefix.length, alias.length - suffix.length);
+        return targets[0]?.replace("*", wildcard);
     }
     return undefined;
 }
-export async function resolveAliasPath(projectDirectory, alias) {
-    for (const fileName of ["tsconfig.json", "jsconfig.json"]) {
-        const configPath = resolve(projectDirectory, fileName);
-        try {
-            const projectConfig = JSON.parse(await readFile(configPath, "utf8"));
-            const compilerOptions = projectConfig.compilerOptions ?? {};
-            const aliasTarget = findAliasTarget(alias, compilerOptions.paths);
-            if (!aliasTarget)
-                continue;
-            const baseDirectory = resolve(projectDirectory, compilerOptions.baseUrl ?? ".");
-            const resolvedPath = resolve(baseDirectory, aliasTarget);
-            ensureRelativePath(projectDirectory, resolvedPath, "UI");
-            return resolvedPath;
-        }
-        catch (error) {
-            if (isNotFoundError(error))
-                continue;
-            throw error;
-        }
+export async function resolveConfigAlias(projectDirectory, alias, name) {
+    if (alias.startsWith("@/")) {
+        return resolveConfigPath(projectDirectory, join("src", alias.slice(2)), name);
+    }
+    const tsConfig = await readTsConfig(projectDirectory);
+    const target = tsConfig?.compilerOptions?.paths
+        ? resolvePathAlias(alias, tsConfig.compilerOptions.paths)
+        : undefined;
+    if (!target) {
+        throw new Error(`Could not resolve ${name} (${alias}). Add it to tsconfig.json or jsconfig.json compilerOptions.paths.`);
     }
-    throw new Error(`Could not find the ${alias} alias in compilerOptions.paths of tsconfig.json or jsconfig.json.`);
+    return resolveConfigPath(projectDirectory, join(tsConfig?.compilerOptions?.baseUrl ?? ".", target), name);
 }

package/dist/doctor.js

@@ -1,6 +1,6 @@
 import { access, readFile } from "node:fs/promises";
 import { resolve } from "node:path";
-import { hasConfig, readConfig, resolveAliasPath, resolveTokensPath } from "./config.js";
+import { hasConfig, readConfig, resolveConfigAlias } from "./config.js";
 async function readPackageJson(projectDirectory) {
     try {
         return JSON.parse(await readFile(resolve(projectDirectory, "package.json"), "utf8"));
@@ -55,7 +55,7 @@ async function hasStylexCompiler(projectDirectory) {
         "rspack.config.js",
     ];
     const sources = await Promise.all(configFileNames.map(async (fileName) => readProjectFile(projectDirectory, fileName)));
-    return sources.some((source) => source?.includes("@stylexjs/unplugin") && source.includes("stylex("));
+    return sources.some((source) => source?.includes("@stylexjs/unplugin") && source.includes("stylex.vite("));
 }
 function hasDependency(packageJson, dependency) {
     return Boolean(packageJson?.dependencies?.[dependency] ?? packageJson?.devDependencies?.[dependency]);
@@ -66,46 +66,50 @@ export async function doctor(projectDirectory) {
     const entrySources = await readEntrySources(projectDirectory);
     if (!(await hasConfig(projectDirectory))) {
         checks.push({
-            detail: "Run `nooeh init` to configure the default UI alias.",
+            detail: "Run `nooeh init` to configure UI and styles aliases.",
             name: "nooeh.json",
             status: "warn",
         });
     }
     else {
         const config = await readConfig(projectDirectory);
-        const uiDirectory = await resolveAliasPath(projectDirectory, config.aliases.ui);
-        checks.push({
-            detail: `${config.aliases.ui} → ${uiDirectory}`,
-            name: "UI alias",
-            status: "pass",
-        });
-        const tokenDirectory = resolveTokensPath(projectDirectory, config.tokens);
-        const tokenFiles = [
-            "color-palette.stylex.ts",
-            "tokens.stylex.ts",
-            "themes.stylex.ts",
-            "theme.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.tokens} contains local token sources.`,
-                name: "Local tokens",
+        try {
+            const uiDirectory = await resolveConfigAlias(projectDirectory, config.aliases.ui, "aliases.ui");
+            const tokenDirectory = await resolveConfigAlias(projectDirectory, config.aliases.styles, "aliases.styles");
+            checks.push({
+                detail: `${config.aliases.ui} → ${uiDirectory}`,
+                name: "UI path",
                 status: "pass",
-            }
-            : {
-                detail: `Create local token sources in ${config.tokens} with \`nooeh init --force\`.`,
-                name: "Local tokens",
+            });
+            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 \`nooeh init --force\`.`,
+                    name: "Local tokens",
+                    status: "warn",
+                });
+        }
+        catch (error) {
+            checks.push({
+                detail: error instanceof Error ? error.message : "Could not resolve nooeh aliases.",
+                name: "Aliases",
                 status: "warn",
             });
+        }
     }
     checks.push(hasDependency(packageJson, "@stylexjs/stylex")
         ? { detail: "@stylexjs/stylex is installed.", name: "StyleX runtime", status: "pass" }
@@ -125,26 +129,15 @@ export async function doctor(projectDirectory) {
             name: "StyleX compiler",
             status: "warn",
         });
-    checks.push(entrySources.some((source) => source.includes("./styles/nooeh.css") || source.includes("@nooeh/ui/global.css"))
-        ? {
-            detail: "An application entry imports nooeh global CSS.",
-            name: "Global CSS",
-            status: "pass",
-        }
-        : {
-            detail: "Import `src/styles/nooeh.css` from an application entry point.",
-            name: "Global CSS",
-            status: "warn",
-        });
-    checks.push(entrySources.some((source) => source.includes("applyNooehTheme()"))
+    checks.push(entrySources.some((source) => /import\s+["'][^"']+\.css["']/.test(source))
         ? {
-            detail: "An application entry applies a nooeh theme.",
-            name: "Theme application",
+            detail: "An application entry imports a CSS entry point for StyleX output.",
+            name: "CSS entry point",
             status: "pass",
         }
         : {
-            detail: "Call applyNooehTheme() before rendering your application.",
-            name: "Theme application",
+            detail: "Import an application CSS file from an entry point so StyleX can emit CSS.",
+            name: "CSS entry point",
             status: "warn",
         });
     checks.push(hasDependency(packageJson, "@stylexjs/unplugin")

package/dist/index.js

@@ -31,7 +31,7 @@ export async function run(arguments_ = process.argv.slice(2)) {
             console.log(`Nooeh CLI
 
 Usage:
-  nooeh init
+  nooeh init [--ui <path>] [--tokens <path>]
   nooeh init --framework vite
   nooeh add <component> [--skip-dependencies] [--dry-run]
   nooeh doctor

package/dist/init.js

@@ -1,16 +1,13 @@
 import { access, mkdir, readFile, writeFile } from "node:fs/promises";
-import { dirname, join, relative, sep } from "node:path";
+import { join, relative } from "node:path";
 import { createInterface } from "node:readline/promises";
-import { configFileName, defaultConfig, hasConfig, resolveTokensPath, writeConfig, } from "./config.js";
+import { configFileName, defaultConfig, hasConfig, resolveConfigAlias, writeConfig, } from "./config.js";
 import { installDependencies } from "./dependencies.js";
 import { getTokenFiles } from "@nooeh/registry";
 async function ask(question, defaultValue, readline) {
     const answer = await readline.question(`${question} (${defaultValue}) `);
     return answer.trim() || defaultValue;
 }
-function getSourceDirectory(projectDirectory) {
-    return join(projectDirectory, "src");
-}
 async function readViteConfig(projectDirectory) {
     const configFileNames = [
         "vite.config.ts",
@@ -37,60 +34,39 @@ async function readViteConfig(projectDirectory) {
     throw new Error("Could not find a Vite config file.");
 }
 function configureVite(source) {
-    const importLine = 'import stylex from "@stylexjs/unplugin/vite";';
+    const importLine = 'import stylex from "@stylexjs/unplugin";';
     const pluginPattern = /plugins:\s*\[([^\]]*)\]/s;
-    if (source.includes("stylex("))
-        return source;
-    if (!pluginPattern.test(source)) {
-        throw new Error("Could not safely update the Vite plugins array. Add stylex({ useCSSLayers: true }) manually.");
+    const configPattern = /defineConfig\(\{\s*/;
+    if (!source.includes("stylex.vite(") && !pluginPattern.test(source)) {
+        throw new Error("Could not safely update the Vite plugins array. Add stylex.vite({ useCSSLayers: true }) manually.");
     }
-    const withImport = source.includes(importLine) ? source : `${importLine}\n${source}`;
-    return withImport.replace(pluginPattern, (_, plugins) => {
-        const prefix = plugins.trim()
-            ? `stylex({ useCSSLayers: true }), ${plugins}`
-            : "stylex({ useCSSLayers: true })";
-        return `plugins: [${prefix}]`;
-    });
-}
-function toModuleSpecifier(fromDirectory, path) {
-    const source = relative(fromDirectory, path).replace(/\.ts$/, "").split(sep).join("/");
-    return source.startsWith(".") ? source : `./${source}`;
+    const withStylex = source.includes("stylex.vite(")
+        ? source
+        : (source.includes(importLine) ? source : `${importLine}\n${source}`).replace(pluginPattern, (_, plugins) => {
+            const prefix = plugins.trim()
+                ? `stylex.vite({ useCSSLayers: true }), ${plugins}`
+                : "stylex.vite({ useCSSLayers: true })";
+            return `plugins: [${prefix}]`;
+        });
+    if (withStylex.includes("alias:"))
+        return withStylex;
+    if (!configPattern.test(withStylex)) {
+        throw new Error('Could not safely add the "@" Vite alias. Add resolve.alias["@"] manually.');
+    }
+    return withStylex.replace(configPattern, 'defineConfig({\n  resolve: { alias: { "@": new URL("./src", import.meta.url).pathname } },\n  ');
 }
 async function writeViteFiles(projectDirectory, tokenDirectory) {
     const { path: configPath, source: configSource } = await readViteConfig(projectDirectory);
     const configuredVite = configureVite(configSource);
-    const { entryPath, stylePath, themePath } = getNooehPaths(projectDirectory, tokenDirectory);
-    const entrySource = await readFile(entryPath, "utf8");
-    const styleImport = 'import "./styles/nooeh.css";';
-    const themeImport = `import { applyNooehTheme } from "${toModuleSpecifier(dirname(entryPath), themePath)}";`;
-    const themeApply = "applyNooehTheme();";
-    const imports = [styleImport, themeImport].filter((line) => !entrySource.includes(line));
-    const nextEntrySource = `${imports.join("\n")}\n${entrySource}`;
     await writeNooehFiles(projectDirectory, tokenDirectory);
-    await writeFile(entryPath, nextEntrySource.includes(themeApply)
-        ? nextEntrySource
-        : `${imports.length ? `${imports.join("\n")}\n` : ""}${themeApply}\n${entrySource}`, "utf8");
     await writeFile(configPath, configuredVite, "utf8");
-    console.log(`Configured Vite and created ${relative(projectDirectory, stylePath)}.`);
-}
-function getNooehPaths(projectDirectory, tokenDirectory) {
-    const sourceDirectory = getSourceDirectory(projectDirectory);
-    return {
-        entryPath: join(sourceDirectory, "main.tsx"),
-        stylePath: join(sourceDirectory, "styles", "nooeh.css"),
-        themePath: join(tokenDirectory, "theme.ts"),
-    };
+    console.log(`Configured Vite and created ${relative(projectDirectory, tokenDirectory)}.`);
 }
 async function writeNooehFiles(projectDirectory, tokenDirectory) {
-    const { entryPath, stylePath, themePath } = getNooehPaths(projectDirectory, tokenDirectory);
-    await mkdir(dirname(stylePath), { recursive: true });
     await mkdir(tokenDirectory, { recursive: true });
-    await writeFileIfMissing(stylePath, '@import "@nooeh/ui/global.css";\n');
     for (const file of await getTokenFiles()) {
         await writeFileIfMissing(join(tokenDirectory, file.name), file.content);
     }
-    await writeFileIfMissing(themePath, `import { darkColorTheme, darkShadowTheme, lightColorTheme, lightShadowTheme } from "./themes.stylex";\nimport * as stylex from "@stylexjs/stylex";\n\nexport type NooehColorMode = "light" | "dark";\n\nconst themeClassNames = [\n  stylex.props(lightColorTheme, lightShadowTheme).className,\n  stylex.props(darkColorTheme, darkShadowTheme).className,\n]\n  .filter(Boolean)\n  .flatMap((className) => className.split(" "));\n\nexport function applyNooehTheme(mode: NooehColorMode = "light") {\n  const colorTheme = mode === "dark" ? darkColorTheme : lightColorTheme;\n  const shadowTheme = mode === "dark" ? darkShadowTheme : lightShadowTheme;\n  const themeClassName = stylex.props(colorTheme, shadowTheme).className ?? "";\n  const root = document.documentElement;\n\n  root.dataset.theme = mode;\n  root.classList.remove(...themeClassNames);\n  root.classList.add(...themeClassName.split(" ").filter(Boolean));\n}\n`);
-    return { entryPath, stylePath, themePath };
 }
 async function writeFileIfMissing(path, source) {
     try {
@@ -112,28 +88,32 @@ export async function init(projectDirectory, options) {
         if (options.framework && options.framework !== "vite") {
             throw new Error(`Unsupported framework: ${options.framework}. Use vite or omit --framework.`);
         }
-        const uiAlias = options["ui-alias"] ??
+        const uiAlias = options.ui ??
             (readline
-                ? await ask("Enter the UI alias.", defaultConfig.aliases.ui, readline)
+                ? await ask("Enter the UI import alias.", defaultConfig.aliases.ui, readline)
                 : defaultConfig.aliases.ui);
-        const tokens = options.tokens ??
+        const stylesAlias = options.styles ??
+            options.tokens ??
             (readline
-                ? await ask("Enter the token directory.", defaultConfig.tokens, readline)
-                : defaultConfig.tokens);
-        const tokenDirectory = resolveTokensPath(projectDirectory, tokens);
+                ? await ask("Enter the styles import alias.", defaultConfig.aliases.styles, readline)
+                : defaultConfig.aliases.styles);
+        const tokenDirectory = await resolveConfigAlias(projectDirectory, stylesAlias, "aliases.styles");
+        await resolveConfigAlias(projectDirectory, uiAlias, "aliases.ui");
         if (!options["skip-dependencies"]) {
             await installDependencies(projectDirectory, ["@stylexjs/stylex"]);
-            await installDependencies(projectDirectory, ["@stylexjs/unplugin"], true);
+            if (options.framework === "vite") {
+                await installDependencies(projectDirectory, ["@stylexjs/unplugin"], true);
+            }
         }
         if (options.framework === "vite") {
             await writeViteFiles(projectDirectory, tokenDirectory);
         }
         else {
-            const { stylePath, themePath } = await writeNooehFiles(projectDirectory, tokenDirectory);
-            console.log(`Created ${relative(projectDirectory, stylePath)} and ${relative(projectDirectory, themePath)}.`);
-            console.log("Import the CSS and call applyNooehTheme() from your application entry point.");
+            await writeNooehFiles(projectDirectory, tokenDirectory);
+            console.log(`Created ${relative(projectDirectory, tokenDirectory)}.`);
+            console.log("Configure the StyleX compiler for your bundler before importing added components.");
         }
-        await writeConfig(projectDirectory, { aliases: { ui: uiAlias }, tokens });
+        await writeConfig(projectDirectory, { aliases: { ui: uiAlias, styles: stylesAlias } });
     }
     finally {
         readline?.close();

package/dist/new-component.js

@@ -1,6 +1,6 @@
 import { access, mkdir, writeFile } from "node:fs/promises";
-import { dirname, join, relative, sep } from "node:path";
-import { readConfig, resolveAliasPath, resolveTokensPath } from "./config.js";
+import { join } from "node:path";
+import { readConfig, resolveConfigAlias } from "./config.js";
 function toPascalCase(name) {
     return name
         .split("-")
@@ -13,17 +13,10 @@ export async function newComponent(projectDirectory, name) {
         throw new Error("Enter a component name in kebab-case. For example: status-chip.");
     }
     const config = await readConfig(projectDirectory);
-    const uiDirectory = await resolveAliasPath(projectDirectory, config.aliases.ui);
+    const uiDirectory = await resolveConfigAlias(projectDirectory, config.aliases.ui, "aliases.ui");
     const componentName = toPascalCase(name);
     const componentPath = join(uiDirectory, `${name}.tsx`);
-    const tokenPath = join(resolveTokensPath(projectDirectory, config.tokens), "tokens.stylex.ts");
-    const relativeTokenPath = relative(dirname(componentPath), tokenPath)
-        .replace(/\.ts$/, "")
-        .split(sep)
-        .join("/");
-    const tokenImport = relativeTokenPath.startsWith(".")
-        ? relativeTokenPath
-        : `./${relativeTokenPath}`;
+    const tokenImport = `${config.aliases.styles}/semantic.stylex`;
     const files = [componentPath];
     for (const file of files) {
         try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nooeh/cli",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "private": false,
   "bin": {
     "nooeh": "./dist/cli.js"
@@ -19,7 +19,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@nooeh/registry": "0.1.0"
+    "@nooeh/registry": "0.1.1"
   },
   "devDependencies": {
     "@types/node": "^22.20.1",