@nooeh/cli 0.2.1 → 0.2.3

package/dist/doctor.js

@@ -81,7 +81,12 @@ export async function doctor(projectDirectory) {
                 name: "UI path",
                 status: "pass",
             });
-            const tokenFiles = ["color-palette.stylex.ts", "semantic.stylex.ts", "themes.stylex.ts"];
+            const tokenFiles = [
+                "color-palette.stylex.ts",
+                "semantic.stylex.ts",
+                "themes.stylex.ts",
+                "theme-provider.tsx",
+            ];
             const hasTokenFiles = await Promise.all(tokenFiles.map(async (fileName) => {
                 try {
                     await access(resolve(tokenDirectory, fileName));

package/dist/init.js

@@ -1,5 +1,5 @@
 import { access, mkdir, readFile, writeFile } from "node:fs/promises";
-import { join, relative } from "node:path";
+import { join, relative, sep } from "node:path";
 import { createInterface } from "node:readline/promises";
 import { configFileName, defaultConfig, hasConfig, resolveConfigAlias, writeConfig, } from "./config.js";
 import { installDependencies } from "./dependencies.js";
@@ -33,21 +33,48 @@ async function readViteConfig(projectDirectory) {
     }
     throw new Error("Could not find a Vite config file.");
 }
-function configureVite(source) {
+function getStylexPlugin(stylesAlias, tokenDirectory, projectDirectory) {
+    const tokenPath = relative(projectDirectory, tokenDirectory).split(sep).join("/");
+    const aliasPattern = `${stylesAlias}/*`;
+    const aliasTarget = `/ROOT/${tokenPath}/*`;
+    return `stylex.vite({
+    useCSSLayers: true,
+    aliases: { ${JSON.stringify(aliasPattern)}: [${JSON.stringify(aliasTarget)}] },
+    unstable_moduleResolution: {
+      type: "commonJS",
+      rootDir: new URL(".", import.meta.url).pathname,
+    },
+  })`;
+}
+function configureVite(source, stylesAlias, tokenDirectory, projectDirectory) {
     const importLine = 'import stylex from "@stylexjs/unplugin";';
     const pluginPattern = /plugins:\s*\[([^\]]*)\]/s;
     const configPattern = /defineConfig\(\{\s*/;
+    const stylexPlugin = getStylexPlugin(stylesAlias, tokenDirectory, projectDirectory);
+    const legacyStylexPluginPattern = /stylex\.vite\(\{\s*useCSSLayers:\s*true\s*\}\)/;
+    const emptyStylexPluginPattern = /stylex\.vite\(\)/;
     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 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 })";
+    let withStylex = source;
+    if (source.includes("unstable_moduleResolution")) {
+        withStylex = source;
+    }
+    else if (legacyStylexPluginPattern.test(source)) {
+        withStylex = source.replace(legacyStylexPluginPattern, stylexPlugin);
+    }
+    else if (emptyStylexPluginPattern.test(source)) {
+        withStylex = source.replace(emptyStylexPluginPattern, stylexPlugin);
+    }
+    else if (source.includes("stylex.vite(")) {
+        throw new Error("Could not safely update the existing StyleX plugin. Add Nooeh's aliases and unstable_moduleResolution manually.");
+    }
+    else {
+        withStylex = (source.includes(importLine) ? source : `${importLine}\n${source}`).replace(pluginPattern, (_, plugins) => {
+            const prefix = plugins.trim() ? `${stylexPlugin}, ${plugins}` : stylexPlugin;
             return `plugins: [${prefix}]`;
         });
+    }
     if (withStylex.includes("alias:"))
         return withStylex;
     if (!configPattern.test(withStylex)) {
@@ -55,22 +82,28 @@ function configureVite(source) {
     }
     return withStylex.replace(configPattern, 'defineConfig({\n  resolve: { alias: { "@": new URL("./src", import.meta.url).pathname } },\n  ');
 }
-async function writeViteFiles(projectDirectory, tokenDirectory) {
+async function writeViteFiles(projectDirectory, tokenDirectory, stylesAlias, refreshLegacyTokens) {
     const { path: configPath, source: configSource } = await readViteConfig(projectDirectory);
-    const configuredVite = configureVite(configSource);
-    await writeNooehFiles(projectDirectory, tokenDirectory);
+    const configuredVite = configureVite(configSource, stylesAlias, tokenDirectory, projectDirectory);
+    await writeNooehFiles(projectDirectory, tokenDirectory, refreshLegacyTokens);
     await writeFile(configPath, configuredVite, "utf8");
     console.log(`Configured Vite and created ${relative(projectDirectory, tokenDirectory)}.`);
 }
-async function writeNooehFiles(projectDirectory, tokenDirectory) {
+async function writeNooehFiles(projectDirectory, tokenDirectory, refreshLegacyTokens = false) {
     await mkdir(tokenDirectory, { recursive: true });
     for (const file of await getTokenFiles()) {
-        await writeFileIfMissing(join(tokenDirectory, file.name), file.content);
+        await writeTokenFile(join(tokenDirectory, file.name), file.content, refreshLegacyTokens && file.name === "semantic.stylex.ts");
     }
 }
-async function writeFileIfMissing(path, source) {
+function isLegacySemanticSource(source) {
+    return source.includes('bgCanvas: "initial"') && source.includes('overlay: "initial"');
+}
+async function writeTokenFile(path, source, shouldRefreshLegacyToken) {
     try {
-        await access(path);
+        const currentSource = await readFile(path, "utf8");
+        if (shouldRefreshLegacyToken && isLegacySemanticSource(currentSource)) {
+            await writeFile(path, source, "utf8");
+        }
     }
     catch {
         await writeFile(path, source, "utf8");
@@ -106,10 +139,10 @@ export async function init(projectDirectory, options) {
             }
         }
         if (options.framework === "vite") {
-            await writeViteFiles(projectDirectory, tokenDirectory);
+            await writeViteFiles(projectDirectory, tokenDirectory, stylesAlias, Boolean(options.force));
         }
         else {
-            await writeNooehFiles(projectDirectory, tokenDirectory);
+            await writeNooehFiles(projectDirectory, tokenDirectory, Boolean(options.force));
             console.log(`Created ${relative(projectDirectory, tokenDirectory)}.`);
             console.log("Configure the StyleX compiler for your bundler before importing added components.");
         }

package/package.json

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