@uiscore/cli 0.1.5 → 0.1.7

package/README.md

@@ -32,7 +32,17 @@ uiscore add button
 
 ## How It Works
 
-`uiscore add <name>` does four things:
+`uiscore init` prepares the consumer project infrastructure:
+
+1. Creates `uiscore.config.json`.
+2. Installs `tailwindcss`, `postcss` and `autoprefixer` if they are missing.
+3. Creates or updates `tailwind.config.js` with UIScore content globs.
+4. Creates `postcss.config.js` if it is missing.
+5. Creates `src/shared/ui/styles/uiscore.css` with font import and token markers.
+6. Injects Tailwind directives and the UIScore styles import into the project's global CSS.
+7. Ensures the application entrypoint imports the global CSS file.
+
+`uiscore add <name>` then does four things:
 
 1. Reads `uiscore.config.json` from the current project.
 2. Downloads the registry item JSON from `registryUrl`.
@@ -45,7 +55,7 @@ If the registry item contains CSS variables, the CLI also writes them into the c
 
 ### `uiscore init`
 
-Creates `uiscore.config.json` in the current project root.
+Bootstraps the consumer project for UIScore components.
 
 Example:
 
@@ -113,13 +123,7 @@ Then:
 npx @uiscore/cli add button
 ```
 
-After that, import your generated styles once in the app entrypoint or root layout:
-
-```ts
-import "@/shared/ui/styles/uiscore.css";
-```
-
-The CLI does not inject this import automatically.
+If `uiscore init` was used first, the global CSS import is already wired automatically.
 
 ## Notes
 

package/dist/index.js

@@ -71,8 +71,18 @@ function dependencyInstallArgs(packageManager, dependencies) {
   }
   return ["install", ...dependencies];
 }
+function devDependencyInstallArgs(packageManager, dependencies) {
+  if (packageManager === "pnpm") {
+    return ["add", "-D", ...dependencies];
+  }
+  if (packageManager === "yarn") {
+    return ["add", "-D", ...dependencies];
+  }
+  return ["install", "-D", ...dependencies];
+}
 
 // src/commands/add.ts
+var UISCORE_FONT_IMPORT = '@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700&display=swap");';
 async function runAddCommand(options) {
   const config = loadConfig(options.cwd);
   const url = config.registryUrl.replace("{name}", options.name);
@@ -124,7 +134,7 @@ async function runAddCommand(options) {
   for (const filePath of writtenFiles) {
     info(`- ${filePath}`);
   }
-  info(`Import your generated styles once if needed: ${config.stylesPath}`);
+  info(`UIScore styles file: ${config.stylesPath}`);
 }
 function writeCssVars({
   cwd,
@@ -138,19 +148,30 @@ function writeCssVars({
   const markerEnd = "/* uiscore:tokens:end */";
   const nextBlock = buildCssVarBlock(cssVars, markerStart, markerEnd);
   if (!existing) {
-    writeFileSync(outputPath, nextBlock, "utf8");
+    writeFileSync(outputPath, `${UISCORE_FONT_IMPORT}
+
+${nextBlock}`, "utf8");
     return;
   }
-  if (existing.includes(markerStart) && existing.includes(markerEnd)) {
-    const updated = existing.replace(
+  const withFontImport = existing.includes(UISCORE_FONT_IMPORT) ? existing : `${UISCORE_FONT_IMPORT}
+
+${existing.trimStart()}`;
+  if (withFontImport.includes(markerStart) && withFontImport.includes(markerEnd)) {
+    const existingCssVars = parseCssVarsFromBlock(withFontImport, markerStart, markerEnd);
+    const mergedCssVars = {
+      ...existingCssVars,
+      ...cssVars
+    };
+    const mergedBlock = buildCssVarBlock(mergedCssVars, markerStart, markerEnd);
+    const updated = withFontImport.replace(
       new RegExp(`${escapeForRegExp(markerStart)}[\\s\\S]*?${escapeForRegExp(markerEnd)}`),
-      nextBlock.trimEnd()
+      mergedBlock.trimEnd()
     );
     writeFileSync(outputPath, `${updated.trimEnd()}
 `, "utf8");
     return;
   }
-  writeFileSync(outputPath, `${existing.trimEnd()}
+  writeFileSync(outputPath, `${withFontImport.trimEnd()}
 
 ${nextBlock}`, "utf8");
 }
@@ -163,24 +184,421 @@ ${vars}
 ${markerEnd}
 `;
 }
+function parseCssVarsFromBlock(source, markerStart, markerEnd) {
+  const blockMatch = source.match(
+    new RegExp(
+      `${escapeForRegExp(markerStart)}([\\s\\S]*?)${escapeForRegExp(markerEnd)}`
+    )
+  );
+  if (!blockMatch) {
+    return {};
+  }
+  const cssVars = {};
+  const matches = blockMatch[1].matchAll(/--([a-z0-9-]+)\s*:\s*([^;]+);/gi);
+  for (const match of matches) {
+    cssVars[match[1]] = match[2].trim();
+  }
+  return cssVars;
+}
 function escapeForRegExp(value) {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
 // src/commands/init.ts
-import { existsSync as existsSync4, mkdirSync as mkdirSync2, writeFileSync as writeFileSync2 } from "fs";
+import {
+  existsSync as existsSync4,
+  mkdirSync as mkdirSync2,
+  readFileSync as readFileSync3,
+  writeFileSync as writeFileSync2
+} from "fs";
+import { spawnSync as spawnSync2 } from "child_process";
 import path4 from "path";
 function runInitCommand(cwd) {
   const configPath = getConfigPath(cwd);
+  const packageJsonPath = path4.join(cwd, "package.json");
+  if (!existsSync4(packageJsonPath)) {
+    throw new Error(
+      "No package.json found in the current directory. Run `uiscore init` inside a project root."
+    );
+  }
   if (existsSync4(configPath)) {
     warn(`Config already exists: ${configPath}`);
+  } else {
+    mkdirSync2(path4.dirname(configPath), { recursive: true });
+    writeFileSync2(
+      configPath,
+      `${JSON.stringify(DEFAULT_CONFIG, null, 2)}
+`,
+      "utf8"
+    );
+    info(`Created ${configPath}`);
+  }
+  const config = loadConfig(cwd);
+  const packageJson = JSON.parse(readFileSync3(packageJsonPath, "utf8"));
+  const packageManager = detectPackageManager(cwd);
+  ensureTailwindDependencies({
+    cwd,
+    packageManager,
+    packageJson
+  });
+  const environment = detectEnvironment(cwd);
+  ensureTailwindConfig({
+    cwd,
+    isEsmProject: packageJson.type === "module",
+    sourceRoot: config.sourceRoot
+  });
+  ensurePostcssConfig({
+    cwd,
+    isEsmProject: packageJson.type === "module"
+  });
+  ensureDirectory(path4.join(cwd, config.sourceRoot, "components"));
+  ensureDirectory(path4.join(cwd, config.sourceRoot, "lib"));
+  ensureDirectory(path4.join(cwd, path4.dirname(config.stylesPath)));
+  ensureUiscoreStylesFile({
+    cwd,
+    stylesPath: config.stylesPath
+  });
+  const globalCssPath = ensureGlobalCssFile({
+    cwd,
+    environment
+  });
+  ensureGlobalCssContent({
+    globalCssPath,
+    stylesPath: path4.join(cwd, config.stylesPath)
+  });
+  ensureEntryImportsGlobalCss({
+    cwd,
+    environment,
+    globalCssPath
+  });
+  info("UIScore infrastructure initialized.");
+  info("You can now run `uiscore add button`.");
+}
+function ensureTailwindDependencies({
+  cwd,
+  packageManager,
+  packageJson
+}) {
+  const requiredDependencies = [
+    "tailwindcss@^3.4.17",
+    "postcss@^8.5.8",
+    "autoprefixer@^10.4.27"
+  ];
+  const installedDependencies = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies
+  };
+  const missingDependencies = requiredDependencies.filter((dependency) => {
+    const [name] = dependency.split("@", 1);
+    return !installedDependencies[name];
+  });
+  if (!missingDependencies.length) {
     return;
   }
-  mkdirSync2(path4.dirname(configPath), { recursive: true });
-  writeFileSync2(configPath, `${JSON.stringify(DEFAULT_CONFIG, null, 2)}
-`, "utf8");
+  info(`Installing infrastructure dependencies with ${packageManager}...`);
+  const result = spawnSync2(
+    packageManager,
+    devDependencyInstallArgs(packageManager, requiredDependencies),
+    {
+      cwd,
+      stdio: "inherit",
+      shell: process.platform === "win32"
+    }
+  );
+  if (result.status !== 0) {
+    throw new Error("Failed to install Tailwind infrastructure dependencies.");
+  }
+}
+function detectEnvironment(cwd) {
+  const nextLayoutFiles = [
+    path4.join(cwd, "src", "app", "layout.tsx"),
+    path4.join(cwd, "src", "app", "layout.jsx"),
+    path4.join(cwd, "app", "layout.tsx"),
+    path4.join(cwd, "app", "layout.jsx")
+  ];
+  for (const layoutPath of nextLayoutFiles) {
+    if (existsSync4(layoutPath)) {
+      return {
+        type: "next",
+        layoutPath
+      };
+    }
+  }
+  const viteMainFiles = [
+    path4.join(cwd, "src", "main.tsx"),
+    path4.join(cwd, "src", "main.jsx"),
+    path4.join(cwd, "src", "main.ts"),
+    path4.join(cwd, "src", "main.js")
+  ];
+  for (const mainPath of viteMainFiles) {
+    if (existsSync4(mainPath)) {
+      return {
+        type: "vite",
+        mainPath
+      };
+    }
+  }
+  return {
+    type: "generic"
+  };
+}
+function ensureTailwindConfig({
+  cwd,
+  isEsmProject,
+  sourceRoot
+}) {
+  const configPath = path4.join(cwd, "tailwind.config.js");
+  const contentPatterns = [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    `./${normalizeForGlob(sourceRoot)}/**/*.{js,ts,jsx,tsx,mdx}`
+  ];
+  const nextConfigSource = buildTailwindConfigSource({
+    isEsmProject,
+    contentPatterns
+  });
+  if (!existsSync4(configPath)) {
+    writeFileSync2(configPath, nextConfigSource, "utf8");
+    info(`Created ${configPath}`);
+    return;
+  }
+  const current = readFileSync3(configPath, "utf8");
+  if (contentPatterns.every((pattern) => current.includes(pattern))) {
+    return;
+  }
+  if (!current.includes("content")) {
+    warn(`Tailwind config exists but has no content field: ${configPath}`);
+    return;
+  }
+  const markerPattern = /content\s*:\s*\[([\s\S]*?)\]/m;
+  const match = current.match(markerPattern);
+  if (!match) {
+    warn(`Could not safely update Tailwind content globs in ${configPath}`);
+    return;
+  }
+  const existingBlock = match[1];
+  const missingPatterns = contentPatterns.filter(
+    (pattern) => !existingBlock.includes(pattern)
+  );
+  if (!missingPatterns.length) {
+    return;
+  }
+  const insertion = missingPatterns.map((pattern) => `    "${pattern}",`).join("\n");
+  const replacement = `content: [
+${existingBlock.trimEnd()}
+${insertion}
+  ]`;
+  const updated = current.replace(markerPattern, replacement);
+  writeFileSync2(configPath, updated, "utf8");
+  info(`Updated Tailwind content globs in ${configPath}`);
+}
+function buildTailwindConfigSource({
+  isEsmProject,
+  contentPatterns
+}) {
+  const lines = contentPatterns.map((pattern) => `    "${pattern}",`).join("\n");
+  if (isEsmProject) {
+    return `/** @type {import("tailwindcss").Config} */
+export default {
+  content: [
+${lines}
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+`;
+  }
+  return `/** @type {import("tailwindcss").Config} */
+module.exports = {
+  content: [
+${lines}
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+`;
+}
+function ensurePostcssConfig({
+  cwd,
+  isEsmProject
+}) {
+  const configPath = path4.join(cwd, "postcss.config.js");
+  if (existsSync4(configPath)) {
+    return;
+  }
+  const content = isEsmProject ? `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+` : `module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`;
+  writeFileSync2(configPath, content, "utf8");
   info(`Created ${configPath}`);
-  info("Update registryUrl before running `uiscore add` if needed.");
+}
+function ensureUiscoreStylesFile({
+  cwd,
+  stylesPath
+}) {
+  const outputPath = path4.join(cwd, stylesPath);
+  const fontImport = '@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700&display=swap");';
+  const markerStart = "/* uiscore:tokens:start */";
+  const markerEnd = "/* uiscore:tokens:end */";
+  if (!existsSync4(outputPath)) {
+    writeFileSync2(
+      outputPath,
+      `${fontImport}
+
+${markerStart}
+:root {
+}
+${markerEnd}
+`,
+      "utf8"
+    );
+    info(`Created ${outputPath}`);
+    return;
+  }
+  let current = readFileSync3(outputPath, "utf8");
+  if (!current.includes(fontImport)) {
+    current = `${fontImport}
+
+${current.trimStart()}`;
+  }
+  if (!current.includes(markerStart) || !current.includes(markerEnd)) {
+    current = `${current.trimEnd()}
+
+${markerStart}
+:root {
+}
+${markerEnd}
+`;
+  }
+  writeFileSync2(outputPath, `${current.trimEnd()}
+`, "utf8");
+}
+function ensureGlobalCssFile({
+  cwd,
+  environment
+}) {
+  const candidates = environment.type === "next" ? [path4.join(cwd, "src", "app", "globals.css"), path4.join(cwd, "app", "globals.css")] : [path4.join(cwd, "src", "index.css")];
+  for (const candidate of candidates) {
+    if (existsSync4(candidate)) {
+      return candidate;
+    }
+  }
+  const fallbackPath = environment.type === "next" ? candidates.find((candidate) => candidate.includes(path4.join("src", "app"))) ?? candidates[0] : path4.join(cwd, "src", "index.css");
+  ensureDirectory(path4.dirname(fallbackPath));
+  writeFileSync2(fallbackPath, "", "utf8");
+  info(`Created ${fallbackPath}`);
+  return fallbackPath;
+}
+function ensureGlobalCssContent({
+  globalCssPath,
+  stylesPath
+}) {
+  const stylesImportPath = toCssRelativeImport(globalCssPath, stylesPath);
+  const stylesBlock = `/* uiscore:styles:start */
+@import "${stylesImportPath}";
+/* uiscore:styles:end */`;
+  const tailwindBlock = `/* uiscore:tailwind:start */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* uiscore:tailwind:end */`;
+  const current = existsSync4(globalCssPath) ? readFileSync3(globalCssPath, "utf8") : "";
+  const withoutManagedBlocks = current.replace(
+    /\/\* uiscore:styles:start \*\/[\s\S]*?\/\* uiscore:styles:end \*\/\s*/gm,
+    ""
+  ).replace(
+    /\/\* uiscore:tailwind:start \*\/[\s\S]*?\/\* uiscore:tailwind:end \*\/\s*/gm,
+    ""
+  ).trimStart();
+  const updated = `${stylesBlock}
+
+${tailwindBlock}${withoutManagedBlocks ? `
+
+${withoutManagedBlocks}` : ""}`;
+  writeFileSync2(globalCssPath, `${updated.trimEnd()}
+`, "utf8");
+}
+function ensureEntryImportsGlobalCss({
+  cwd,
+  environment,
+  globalCssPath
+}) {
+  if (environment.type === "vite") {
+    ensureImportInCodeFile({
+      filePath: environment.mainPath,
+      importPath: toCodeRelativeImport(environment.mainPath, globalCssPath)
+    });
+    return;
+  }
+  if (environment.type === "next") {
+    ensureImportInCodeFile({
+      filePath: environment.layoutPath,
+      importPath: toCodeRelativeImport(environment.layoutPath, globalCssPath)
+    });
+  }
+}
+function ensureImportInCodeFile({
+  filePath,
+  importPath
+}) {
+  const source = readFileSync3(filePath, "utf8");
+  const normalizedImport = normalizeImportPath(importPath);
+  const importStatement = `import "${normalizedImport}";`;
+  const importPattern = new RegExp(
+    `^\\s*import\\s+["']${escapeForRegExp2(normalizedImport)}["'];?\\s*$`,
+    "m"
+  );
+  const allImportPattern = new RegExp(
+    `^\\s*import\\s+["']${escapeForRegExp2(normalizedImport)}["'];?\\s*$\\n?`,
+    "gm"
+  );
+  if (!importPattern.test(source)) {
+    writeFileSync2(filePath, `${importStatement}
+${source}`, "utf8");
+    return;
+  }
+  const withoutDuplicateImports = source.replace(allImportPattern, "");
+  writeFileSync2(filePath, `${importStatement}
+${withoutDuplicateImports}`, "utf8");
+}
+function ensureDirectory(directoryPath) {
+  mkdirSync2(directoryPath, { recursive: true });
+}
+function toCssRelativeImport(fromFile, toFile) {
+  return normalizeImportPath(path4.relative(path4.dirname(fromFile), toFile));
+}
+function toCodeRelativeImport(fromFile, toFile) {
+  return normalizeImportPath(path4.relative(path4.dirname(fromFile), toFile));
+}
+function normalizeImportPath(value) {
+  const normalized = value.split(path4.sep).join("/");
+  if (normalized.startsWith(".")) {
+    return normalized;
+  }
+  return `./${normalized}`;
+}
+function normalizeForGlob(value) {
+  return value.split(path4.sep).join("/");
+}
+function escapeForRegExp2(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
 // src/index.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiscore/cli",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "CLI for installing UIScore registry components into projects.",
   "type": "module",
   "bin": {