@nqlib/nqui 0.1.1 → 0.1.3

package/scripts/pipeline/emit.js

@@ -0,0 +1,21 @@
+import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { dirname } from 'path';
+
+/**
+ * Emit file with force and dry-run support
+ */
+export function emit(path, content, { force, dryRun }) {
+  if (existsSync(path) && !force) {
+    throw new Error(`File exists: ${path}. Use --force to overwrite.`);
+  }
+
+  if (dryRun) {
+    console.log(`🧪 Dry-run: Would write ${path} (${content.length} bytes)`);
+    return;
+  }
+
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, content, 'utf8');
+  console.log(`✅ Created: ${path}`);
+}
+

package/scripts/pipeline/extract.js

@@ -0,0 +1,118 @@
+import { readFileSync, existsSync } from 'fs';
+import { join } from 'path';
+
+/**
+ * Extract CSS from package
+ * Handles both published (dist/styles.css) and local development (src/index.css + src/styles/colors.css)
+ */
+export function extractCSS(root) {
+  const dist = join(root, 'dist', 'styles.css');
+  const srcIndex = join(root, 'src', 'index.css');
+  const srcColors = join(root, 'src', 'styles', 'colors.css');
+
+  // If published package, use dist/styles.css
+  if (existsSync(dist)) {
+    return readFileSync(dist, 'utf8');
+  }
+
+  // Local development: merge index.css and colors.css
+  if (existsSync(srcIndex) && existsSync(srcColors)) {
+    let indexCss = readFileSync(srcIndex, 'utf8');
+    let colorsCss = readFileSync(srcColors, 'utf8');
+
+    // Extract :root and .dark from colors.css (wrapped in @layer base)
+    const colorsRootMatch = colorsCss.match(/@layer base\s*\{\s*:root\s*\{([\s\S]*?)\}\s*\.dark\s*\{([\s\S]*?)\}\s*\}/s);
+
+    let colorsRootContent = '';
+    let colorsDarkContent = '';
+
+    if (colorsRootMatch) {
+      colorsRootContent = colorsRootMatch[1].trim();
+      colorsDarkContent = colorsRootMatch[2].trim();
+    } else {
+      // Fallback: try to extract without @layer base wrapper
+      const rootMatch = colorsCss.match(/:root\s*\{([\s\S]*?)\}/s);
+      const darkMatch = colorsCss.match(/\.dark\s*\{([\s\S]*?)\}/s);
+      if (rootMatch) colorsRootContent = rootMatch[1].trim();
+      if (darkMatch) colorsDarkContent = darkMatch[1].trim();
+    }
+
+    // Extract from index.css
+    const indexRootMatch = indexCss.match(/:root\s*\{([\s\S]*?)\}/s);
+    const indexDarkMatch = indexCss.match(/\.dark\s*\{([\s\S]*?)\}/s);
+
+    const indexRoot = indexRootMatch ? indexRootMatch[1].trim() : '';
+    const indexDark = indexDarkMatch ? indexDarkMatch[1].trim() : '';
+
+    // Merge: colors first, then index
+    const mergedRoot = [colorsRootContent, indexRoot].filter(Boolean).join('\n\n');
+    const mergedDark = [colorsDarkContent, indexDark].filter(Boolean).join('\n\n');
+
+    // Clean up imports and Tailwind v4 directives we don't want in standalone file
+    indexCss = indexCss
+      .replace(/@import\s+["']tailwindcss["'];?\s*\n/g, '')
+      .replace(/@import\s+["']tw-animate-css["'];?\s*\n/g, '')
+      .replace(/@import\s+["'].*shadcn.*["'];?\s*\n/g, '')
+      .replace(/@import\s+["'].*@fontsource-variable\/inter["'];?\s*\n/g, '')
+      .replace(/@import\s+["'].*\/colors\.css["'];?\s*\n/g, '')
+      .replace(/\/\*\s*Import enhanced color system\s*\*\//g, '')
+      .replace(/@source\s+[^;]+;?\s*\n/g, '')
+      .replace(/@custom-variant\s+[^;]+;?\s*\n/g, '')
+      .replace(/@theme\s+inline\s*\{[\s\S]*?\}\s*/g, '');
+
+    // Helper function to extract complete CSS block (handles nested braces)
+    function extractBlock(css, pattern) {
+      const match = css.match(pattern);
+      if (!match) return null;
+      const start = match.index;
+      let depth = 0;
+      let i = start + match[0].indexOf('{');
+      while (i < css.length) {
+        if (css[i] === '{') depth++;
+        if (css[i] === '}') {
+          depth--;
+          if (depth === 0) {
+            return css.substring(start, i + 1);
+          }
+        }
+        i++;
+      }
+      return null;
+    }
+
+    // Extract blocks using brace counting
+    const existingRoot = extractBlock(indexCss, /:root\s*\{/s) || '';
+    const existingDark = extractBlock(indexCss, /\.dark\s*\{/s) || '';
+    const layerBaseMatch = indexCss.match(/@layer base\s*\{/g);
+    const layerBaseBlocks = layerBaseMatch ? layerBaseMatch.map(m => extractBlock(indexCss, new RegExp(m.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 's'))).filter(Boolean).join('\n\n') : '';
+    const layerUtilitiesMatch = indexCss.match(/@layer utilities\s*\{/g);
+    const layerUtilitiesBlocks = layerUtilitiesMatch ? layerUtilitiesMatch.map(m => extractBlock(indexCss, new RegExp(m.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 's'))).filter(Boolean).join('\n\n') : '';
+
+    // Remove extracted blocks to get remaining content
+    let remainingCss = indexCss;
+    if (existingRoot) remainingCss = remainingCss.replace(existingRoot, '');
+    if (existingDark) remainingCss = remainingCss.replace(existingDark, '');
+    if (layerBaseBlocks) remainingCss = remainingCss.replace(layerBaseBlocks, '');
+    if (layerUtilitiesBlocks) remainingCss = remainingCss.replace(layerUtilitiesBlocks, '');
+    remainingCss = remainingCss.trim();
+
+    // Create :root and .dark blocks from merged content (prefer merged over existing)
+    const rootBlock = mergedRoot ? `:root {\n${mergedRoot}\n}` : existingRoot;
+    const darkBlock = mergedDark ? `.dark {\n${mergedDark}\n}` : existingDark;
+
+    // Reconstruct in correct order: :root, .dark, then @layer blocks, then rest
+    // This is critical because @layer base uses @apply which needs CSS variables to be defined first
+    const reorderedCss = [
+      rootBlock,
+      darkBlock,
+      layerBaseBlocks,
+      layerUtilitiesBlocks,
+      remainingCss
+    ].filter(Boolean).join('\n\n');
+
+    return reorderedCss.trim();
+  }
+
+  throw new Error('No CSS source found. Expected dist/styles.css or src/index.css + src/styles/colors.css');
+}
+

package/scripts/pipeline/index.js

@@ -0,0 +1,90 @@
+import { extractCSS } from './extract.js';
+import { transformCSS } from './transform.js';
+import { extractTokens, tokensToJS } from './tokens.js';
+import { emit } from './emit.js';
+
+const header = `/**
+ * nqui Design Tokens
+ *
+ * Auto-generated file — do not edit manually.
+ * Regenerate with: npx nqui init-css
+ */\n\n`;
+
+/**
+ * Reorder CSS to ensure :root and .dark come before @layer blocks
+ */
+function reorderCSS(css) {
+  // Helper to extract complete block with nested braces
+  function extractBlock(text, pattern) {
+    const match = text.match(pattern);
+    if (!match) return null;
+    const start = match.index;
+    let depth = 0;
+    let i = start + match[0].indexOf('{');
+    while (i < text.length) {
+      if (text[i] === '{') depth++;
+      if (text[i] === '}') {
+        depth--;
+        if (depth === 0) {
+          return text.substring(start, i + 1);
+        }
+      }
+      i++;
+    }
+    return null;
+  }
+
+  const rootBlock = extractBlock(css, /:root\s*\{/s) || '';
+  const darkBlock = extractBlock(css, /\.dark\s*\{/s) || '';
+
+  // Remove extracted blocks
+  let remaining = css;
+  if (rootBlock) remaining = remaining.replace(rootBlock, '');
+  if (darkBlock) remaining = remaining.replace(darkBlock, '');
+
+  // Extract @layer blocks
+  const layerBaseMatches = [...remaining.matchAll(/@layer base\s*\{/g)];
+  const layerBaseBlocks = layerBaseMatches.map(m => extractBlock(remaining, new RegExp(m[0].replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 's'))).filter(Boolean).join('\n\n');
+
+  const layerUtilitiesMatches = [...remaining.matchAll(/@layer utilities\s*\{/g)];
+  const layerUtilitiesBlocks = layerUtilitiesMatches.map(m => extractBlock(remaining, new RegExp(m[0].replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 's'))).filter(Boolean).join('\n\n');
+
+  // Remove @layer blocks
+  if (layerBaseBlocks) remaining = remaining.replace(layerBaseBlocks, '');
+  if (layerUtilitiesBlocks) remaining = remaining.replace(layerUtilitiesBlocks, '');
+  remaining = remaining.trim();
+
+  // Reconstruct in correct order
+  return [rootBlock, darkBlock, layerBaseBlocks, layerUtilitiesBlocks, remaining]
+    .filter(Boolean)
+    .join('\n\n')
+    .trim();
+}
+
+/**
+ * Run the complete pipeline: extract → transform → reorder → emit
+ */
+export async function runPipeline({
+  root,
+  outCss,
+  outJs,
+  tokensOnly,
+  force,
+  dryRun,
+}) {
+  const css = extractCSS(root);
+  let transformed = await transformCSS(css, { tokensOnly });
+
+  // Reorder CSS to ensure :root/.dark come before @layer blocks
+  if (!tokensOnly) {
+    transformed = reorderCSS(transformed);
+  }
+
+  emit(outCss, header + transformed, { force, dryRun });
+
+  if (outJs) {
+    const tokens = extractTokens(transformed);
+    emit(outJs, tokensToJS(tokens), { force, dryRun });
+  }
+}
+

package/scripts/pipeline/tokens.js

@@ -0,0 +1,25 @@
+import postcss from 'postcss';
+
+/**
+ * Extract CSS variables (tokens) from CSS
+ */
+export function extractTokens(css) {
+  const tokens = {};
+  const root = postcss.parse(css);
+
+  root.walkDecls((decl) => {
+    if (decl.prop.startsWith('--')) {
+      tokens[decl.prop.slice(2)] = decl.value;
+    }
+  });
+
+  return tokens;
+}
+
+/**
+ * Convert tokens object to JS export
+ */
+export function tokensToJS(tokens) {
+  return `export const tokens = ${JSON.stringify(tokens, null, 2)};`;
+}
+

package/scripts/pipeline/transform.js

@@ -0,0 +1,51 @@
+import postcss from 'postcss';
+import { extractTokens } from './tokens.js';
+
+// Dynamic import for PostCSS config (ESM compatibility)
+let postcssConfig = null;
+
+async function loadPostcssConfig() {
+  if (postcssConfig) return postcssConfig;
+
+  // Try to load postcss.config.mjs
+  try {
+    const configModule = await import('../postcss.config.mjs');
+    postcssConfig = configModule.default;
+    return postcssConfig;
+  } catch (err) {
+    // Fallback: use basic plugins
+    const postcssImport = (await import('postcss-import')).default;
+    const discardComments = (await import('postcss-discard-comments')).default;
+    postcssConfig = {
+      plugins: [
+        postcssImport(),
+        discardComments({ removeAll: true }),
+      ],
+    };
+    return postcssConfig;
+  }
+}
+
+/**
+ * Transform CSS using PostCSS pipeline
+ * If tokensOnly is true, returns only CSS variables in :root block
+ */
+export async function transformCSS(css, { tokensOnly }) {
+  // Remove Tailwind v4 specific directives before PostCSS processing
+  // These are not standard CSS and will cause PostCSS to fail
+  const cleanedCss = css
+    .replace(/@source\s+[^;]+;?\s*\n/g, '')
+    .replace(/@custom-variant\s+[^;]+;?\s*\n/g, '')
+    .replace(/@theme\s+inline\s*\{[\s\S]*?\}\s*/g, '');
+
+  const config = await loadPostcssConfig();
+  const result = await postcss(config.plugins).process(cleanedCss, { from: undefined });
+
+  if (!tokensOnly) return result.css.trim();
+
+  const tokens = extractTokens(result.css);
+  return `:root {\n${Object.entries(tokens)
+    .map(([k, v]) => `  --${k}: ${v};`)
+    .join('\n')}\n}`;
+}
+

package/scripts/postcss.config.mjs

@@ -0,0 +1,10 @@
+import postcssImport from 'postcss-import';
+import discardComments from 'postcss-discard-comments';
+
+export default {
+  plugins: [
+    postcssImport(),
+    discardComments({ removeAll: true }),
+  ],
+};
+

package/scripts/setup-helper.js

@@ -0,0 +1,72 @@
+import { join } from 'path';
+import { detectFramework, findMainCssFile } from './framework.js';
+
+/**
+ * Generate setup helper content with framework-specific imports
+ */
+export function generateSetupContent(framework, nquiCssPath, useLibraryImport = true) {
+  const mainCssFile = findMainCssFile(framework);
+  const mainCssDir = mainCssFile.split('/').slice(0, -1).join('/');
+  const nquiFileName = nquiCssPath.split('/').pop();
+
+  // Calculate relative path
+  let relativeImport;
+  if (useLibraryImport) {
+    // Import directly from library package
+    relativeImport = '@nqlib/nqui/styles';
+  } else {
+    // Import from local file
+  if (mainCssDir === 'app' || mainCssDir === 'src/app') {
+      // From app/globals.css or src/app/globals.css to nqui/index.css or nqui/nqui.css
+    relativeImport = '../nqui/' + nquiFileName;
+  } else if (mainCssDir === 'src') {
+      // From src/index.css to nqui/index.css or nqui/nqui.css
+    relativeImport = '../nqui/' + nquiFileName;
+  } else if (mainCssDir === nquiCssPath.split('/').slice(0, -1).join('/')) {
+    // Same directory
+    relativeImport = './' + nquiFileName;
+  } else {
+    // Default: use path from project root
+    relativeImport = './' + nquiCssPath;
+    }
+  }
+
+  const base = `/* ═══════════════════════════════════════════════════
+   nqui – Recommended Tailwind & Import Setup
+   Add these lines to the TOP of your main CSS file
+   ═══════════════════════════════════════════════════ */
+
+@import "tailwindcss";
+`;
+
+  const extras = {
+    nextjs: `
+/* Next.js + Tailwind CSS v4 – required source directives */
+@source "./**/*.{js,ts,jsx,tsx,mdx}";
+@source "../components/**/*.{js,ts,jsx,tsx,mdx}";
+@source "../node_modules/@nqlib/nqui/dist/**/*.js";
+
+@import "tw-animate-css";
+
+/* Better dark mode handling */
+@custom-variant dark (&:is(.dark *));
+`,
+    vite: `
+@import "tw-animate-css";
+`,
+    'create-react-app': `
+@import "tw-animate-css";
+`,
+    remix: `
+@import "tw-animate-css";
+`,
+    generic: `
+@import "tw-animate-css";
+`,
+  };
+
+  const finalImport = `\n/* Import nqui design tokens */\n@import "${relativeImport}";\n`;
+
+  return base + (extras[framework] || extras.generic) + finalImport;
+}
+

package/scripts/wizard.js

@@ -0,0 +1,57 @@
+import { createInterface } from 'readline';
+import { detectFramework } from './framework.js';
+
+/**
+ * Create readline interface for prompts
+ */
+function createRL() {
+  return createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+}
+
+/**
+ * Ask a question and return the answer
+ */
+export async function askQuestion(question) {
+  const rl = createRL();
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim().toLowerCase());
+    });
+  });
+}
+
+/**
+ * Interactive wizard for CLI options
+ */
+export async function wizard() {
+  const ask = (question) => askQuestion(question);
+
+  const tokensOnly = (await ask('Extract tokens only? (y/n): ')) === 'y';
+  const js = (await ask('Generate JS tokens? (y/n): ')) === 'y';
+
+  const framework = detectFramework();
+  let copyExamples = false;
+
+  if (framework === 'nextjs') {
+    copyExamples = (await ask('\nCopy Next.js example files (page.tsx, layout.tsx)? (y/n): ')) === 'y';
+  }
+
+  return { tokensOnly, js, copyExamples };
+}
+
+/**
+ * Ask about copying examples (used in default mode for Next.js)
+ */
+export async function askAboutExamples(framework) {
+  if (framework !== 'nextjs') {
+    return false;
+  }
+
+  const answer = await askQuestion('\n📦 Copy Next.js example files (page.tsx, layout.tsx)? (y/n): ');
+  return answer === 'y' || answer === 'yes';
+}
+