@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/dev-server/theme-selector.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Theme Selector Module
+ * Provides UI components for syntax highlighting theme selection
+ */
+/**
+ * Generate theme selector CSS styles
+ * Used in markdown preview pages for syntax highlighting theme selection
+ */
+export declare function getThemeSelectorStyles(): string;
+/**
+ * Generate theme selector HTML with dropdown
+ * @param themeOptions - HTML string of option elements
+ */
+export declare function getThemeSelectorHtml(themeOptions: string): string;
+/**
+ * Generate theme change JavaScript
+ * Handles toggling dark mode based on theme selection
+ */
+export declare function getThemeSelectorScript(): string;
+/**
+ * Generate frontmatter display HTML
+ * @param data - Frontmatter key-value pairs
+ */
+export declare function getFrontmatterHtml(data: Record<string, unknown>): string;
+/**
+ * Check if a theme name indicates a dark theme
+ */
+export declare function isDarkTheme(themeName: string): boolean;
+/**
+ * List of dark theme keywords for theme detection
+ */
+export declare const DARK_THEME_KEYWORDS: readonly ['dark', 'night', 'monokai', 'dracula', 'nord', 'material', 'ayu', 'one-dark', 'tokyo', 'gruvbox', 'solarized-dark'];

package/dist/dev-server/theme-selector.js

@@ -0,0 +1,111 @@
+export function getThemeSelectorStyles() {
+  return `
+    /* Theme selector for code blocks */
+    .theme-selector {
+      margin: 1rem 0;
+      padding: 0.5rem;
+      background: #f8f8f8;
+      border-radius: 4px;
+      text-align: right;
+    }
+    select {
+      padding: 0.25rem 0.5rem;
+      border-radius: 3px;
+      border: 1px solid #ddd;
+    }
+
+    /* Dark mode body styles */
+    body.dark-mode {
+      background-color: #121212;
+      color: #e1e4e8;
+    }
+
+    body.dark-mode h1,
+    body.dark-mode h2,
+    body.dark-mode h3 {
+      color: #e1e4e8;
+      border-color: #2f363d;
+    }
+
+    body.dark-mode .theme-selector {
+      background: #2f363d;
+      color: #e1e4e8;
+    }
+
+    body.dark-mode select {
+      background: #24292e;
+      color: #e1e4e8;
+      border-color: #444;
+    }
+
+    body.dark-mode blockquote {
+      background: #24292e;
+      color: #e1e4e8;
+    }
+
+    body.dark-mode .frontmatter {
+      background: #24292e;
+    }
+
+    body.dark-mode a {
+      color: #58a6ff;
+    }`;
+}
+export function getThemeSelectorHtml(themeOptions) {
+  return `
+  <div class="theme-selector">
+    Theme:
+    <select id="themeSelector" onchange="changeTheme()">
+      ${themeOptions}
+    </select>
+  </div>`;
+}
+export function getThemeSelectorScript() {
+  return `
+    function changeTheme() {
+      const theme = document.getElementById('themeSelector').value;
+
+      // Toggle dark mode class based on theme
+      // Dark themes typically include these keywords in their names
+      if (theme.includes('dark') || theme.includes('night') || theme.includes('monokai') ||
+          theme.includes('dracula') || theme.includes('nord') || theme.includes('material')) {
+        document.body.classList.add('dark-mode');
+      }
+else {
+        document.body.classList.remove('dark-mode');
+      }
+    }
+
+    // Initialize theme on page load
+    document.addEventListener('DOMContentLoaded', changeTheme);`;
+}
+export function getFrontmatterHtml(data) {
+  if (Object.keys(data).length === 0)
+    return "";
+  return `
+  <div class="frontmatter">
+    <h3>Frontmatter</h3>
+    ${Object.entries(data).map(([key, value]) => `
+    <div class="frontmatter-item">
+      <span class="frontmatter-label">${key}:</span>
+      <span>${Array.isArray(value) ? value.join(", ") : String(value)}</span>
+    </div>`).join("")}
+  </div>`;
+}
+export const DARK_THEME_KEYWORDS = [
+  "dark",
+  "night",
+  "monokai",
+  "dracula",
+  "nord",
+  "material",
+  "ayu",
+  "one-dark",
+  "tokyo",
+  "gruvbox",
+  "solarized-dark"
+];
+export function isDarkTheme(themeName) {
+  const lowerName = themeName.toLowerCase();
+  return DARK_THEME_KEYWORDS.some((keyword) => lowerName.includes(keyword));
+}

package/dist/dev-server/ts-css.d.ts

@@ -0,0 +1,108 @@
+/**
+ * Css CSS Generation Module
+ * Provides on-the-fly Tailwind CSS generation using Css
+ */
+interface CssModule {
+    CSSGenerator: new (config: CssConfig) => CSSGenerator;
+    config: CssConfig;
+    build?: (config: CssConfig) => Promise<CssBuildResult>;
+    defaultConfig?: CssConfig;
+    /**
+     * Css's own extractor. Preferred over the local fallback below —
+     * it is the authority on what counts as a class candidate, and it keeps
+     * up with syntax this package would otherwise have to mirror by hand.
+     */
+    extractClasses?: (content: string) => Set<string>;
+}
+interface CssConfig {
+    content?: string[];
+    output?: string;
+    preflight?: boolean;
+    minify?: boolean;
+    preflights?: unknown[];
+    safelist?: string[];
+    [key: string]: unknown;
+}
+interface CssBuildResult {
+    css: string;
+    classes: Set<string>;
+    duration: number;
+}
+interface CSSGenerator {
+    generate(className: string): void;
+    toCSS(preflight: boolean, minify: boolean): string;
+}
+export declare function getCssServeAsset(hash: string): string | undefined;
+/**
+ * Lazily load the Css module
+ * Returns null if Css is not installed
+ */
+export declare function loadCssEngine(): Promise<CssModule | null>;
+/**
+ * Reset the Css module cache (useful for testing)
+ */
+export declare function resetCssCache(): void;
+export declare function loadCssEngineConfig(cwd: string): Promise<CssConfig | null>;
+/**
+ * Resolve the project's css config the way CSS generation does.
+ *
+ * Priority: the `css` field of `stx.config.ts` (a path, or an inline object
+ * that may itself name a path), then auto-discovery of `css.config.ts`.
+ *
+ * Extracted so the SSG's cache key can be built from the same resolution the
+ * stylesheet is. Two copies of this precedence would drift, and a cache key
+ * computed from a *different* config than the CSS is worse than no key at all —
+ * it would report freshness it has not checked.
+ */
+export declare function resolveUserCssConfig(resolveRoot: string): Promise<CssConfig | null>;
+/**
+ * A short, stable digest of a resolved css config.
+ *
+ * Hashes the resolved OBJECT rather than a file, so it covers a config
+ * assembled from several files, an inline `css` block in `stx.config.ts`, and a
+ * preflight imported from somewhere else — all cases a path mtime would miss.
+ *
+ * Functions are hashed by source text. `JSON.stringify` drops them entirely,
+ * which would make an edit to a function-valued plugin or preflight invisible —
+ * the exact silent-staleness this digest exists to prevent. Cycles are replaced
+ * rather than thrown on, because throwing here degrades to 'unhashable', and a
+ * constant digest is a cache key that never changes.
+ */
+export declare function fingerprintConfig(config: unknown): string;
+/**
+ * Build Css CSS using the build() API
+ * This scans content files and generates CSS for all used classes
+ */
+export declare function buildCss(cwd: string): Promise<string>;
+/**
+ * Rebuild Css CSS (called on file changes)
+ */
+export declare function rebuildCss(cwd: string): Promise<void>;
+/**
+ * Get the cached CSS (for serving)
+ */
+export declare function getCachedCSS(): string;
+/**
+ * Extract all CSS class names from HTML content.
+ *
+ * This is the FALLBACK. `generateCss` prefers Css's own
+ * `extractClasses`, and the difference is not cosmetic: this function only
+ * understands `class=""` and quoted literals inside `x-class` / `:class`, so
+ * every class that lives in code — a helper returning a class string, an icon
+ * keyed by status, anything inside a `<script client>` block — is invisible to
+ * it. Those classes silently generate no CSS and the element renders unstyled,
+ * which is what drove projects to pre-generate whole icon stylesheets and ship
+ * them alongside the page.
+ *
+ * Keeping a second, weaker copy of Css's extraction rules in this package
+ * is what let the two drift apart in the first place. It stays only for the
+ * case where the installed Css predates the export.
+ */
+export declare function extractClassNames(htmlContent: string): Set<string>;
+export declare function generateCss(htmlContent: string, appDir?: string): Promise<string>;
+/**
+ * Inject generated CSS into HTML content
+ * Tries to inject before </head>, falls back to <body> or prepends
+ */
+export declare function injectCss(htmlContent: string, appDir?: string, serveMode?: boolean): Promise<string>;
+export {};

package/dist/dev-server/ts-css.js

@@ -0,0 +1,438 @@
+import path from "node:path";
+import { hasLocalConfig } from "bunfig";
+import { mergeCssConfig } from "../ts-css-config.js";
+import { stateDir } from "../state-dir.js";
+import { colors } from "./terminal-colors.js";
+import { contentKey, renderMemo } from "../render-memo.js";
+let cssModule = null, cssLoadAttempted = !1, cachedConfig = null, cachedCSS = "", isBuilding = !1;
+const MAX_CACHE = 256, cssByClassSet = new Map, serveCssByHash = new Map;
+let diskCacheRoot = null, configFingerprint = null;
+function shortHash(input) {
+  return Bun.hash(input).toString(16).padStart(16, "0").slice(0, 16);
+}
+function setLruCache(key, value) {
+  if (cssByClassSet.has(key))
+    cssByClassSet.delete(key);
+  else if (cssByClassSet.size >= MAX_CACHE)
+    cssByClassSet.delete(cssByClassSet.keys().next().value);
+  cssByClassSet.set(key, value);
+}
+function registerServeCss(css) {
+  const hash = shortHash(css);
+  if (serveCssByHash.has(hash))
+    serveCssByHash.delete(hash);
+  else if (serveCssByHash.size >= MAX_CACHE)
+    serveCssByHash.delete(serveCssByHash.keys().next().value);
+  serveCssByHash.set(hash, css);
+  return hash;
+}
+export function getCssServeAsset(hash) {
+  const css = serveCssByHash.get(hash);
+  if (css === void 0)
+    return;
+  serveCssByHash.delete(hash);
+  serveCssByHash.set(hash, css);
+  return css;
+}
+async function readDiskCache(key) {
+  if (!diskCacheRoot)
+    return null;
+  try {
+    const file = Bun.file(path.join(diskCacheRoot, `cw-${shortHash(key)}.css`));
+    if (!await file.exists())
+      return null;
+    return await file.text();
+  } catch {
+    return null;
+  }
+}
+async function writeDiskCache(key, css) {
+  if (!diskCacheRoot)
+    return;
+  try {
+    if (!fs.existsSync(diskCacheRoot))
+      fs.mkdirSync(diskCacheRoot, { recursive: !0 });
+    await Bun.write(path.join(diskCacheRoot, `cw-${shortHash(key)}.css`), css);
+  } catch {}
+}
+async function tryImportCss(importPath) {
+  try {
+    const pkg = await import(importPath);
+    if (pkg && pkg.CSSGenerator)
+      return {
+        CSSGenerator: pkg.CSSGenerator,
+        config: pkg.config,
+        build: pkg.build,
+        defaultConfig: pkg.defaultConfig,
+        extractClasses: pkg.extractClasses
+      };
+  } catch {}
+  return null;
+}
+const ENGINE_PACKAGE_ENTRIES = [
+  ["@stacksjs", "ts-css", "dist", "engine", "index.js"],
+  ["@stacksjs", "ts-css", "src", "engine", "index.ts"]
+], ENGINE_SPECIFIERS = [
+  "@stacksjs/ts-css/engine",
+  "@stacksjs/ts-css/dist/engine/index.js"
+];
+function findProjectCssPaths() {
+  const paths = [];
+  let currentDir = process.cwd();
+  while (currentDir !== path.dirname(currentDir)) {
+    for (const store of ["node_modules", "pantry"])
+      for (const entry of ENGINE_PACKAGE_ENTRIES)
+        paths.push(path.join(currentDir, store, ...entry));
+    currentDir = path.dirname(currentDir);
+  }
+  return paths;
+}
+function findDevCssPaths() {
+  const paths = [], homeDir = process.env.HOME || process.env.USERPROFILE || "", checkouts = [
+    homeDir && path.join(homeDir, "Code", "Tools", "ts-css"),
+    homeDir && path.join(homeDir, "Code", "Tools", "crosswind"),
+    homeDir && path.join(homeDir, "repos", "stacks-org", "ts-css"),
+    homeDir && path.join(homeDir, "repos", "stacks-org", "crosswind"),
+    path.join(process.cwd(), "..", "ts-css"),
+    path.join(process.cwd(), "..", "crosswind")
+  ].filter(Boolean);
+  for (const checkout of checkouts) {
+    paths.push(path.join(checkout, "packages", "toolkit", "dist", "engine", "index.js"));
+    paths.push(path.join(checkout, "packages", "toolkit", "src", "engine", "index.ts"));
+  }
+  if (homeDir)
+    paths.push(path.join(homeDir, "Code", "Tools", "stx", "node_modules", "@stacksjs", "ts-css", "dist", "engine", "index.js"));
+  return paths;
+}
+export async function loadCssEngine() {
+  if (cssLoadAttempted)
+    return cssModule;
+  cssLoadAttempted = !0;
+  try {
+    const loadFrom = async (candidates) => {
+      for (const candidate of candidates) {
+        if (!await Bun.file(candidate).exists())
+          continue;
+        const result = await tryImportCss(candidate);
+        if (result) {
+          if (!process.env.STACKS_DEV_QUIET)
+            console.log(`${colors.green}[ts-css]${colors.reset} CSS engine loaded from ${path.dirname(path.dirname(candidate))}`);
+          return result;
+        }
+      }
+      return null;
+    };
+    if (process.env.CROSSWIND_SRC) {
+      const explicitPath = path.resolve(process.env.CROSSWIND_SRC), explicitModule = await loadFrom([explicitPath]);
+      if (!explicitModule)
+        throw Error(`CROSSWIND_SRC did not resolve to a Css module: ${explicitPath}`);
+      cssModule = explicitModule;
+      return cssModule;
+    }
+    const projectModule = await loadFrom(findProjectCssPaths());
+    if (projectModule) {
+      cssModule = projectModule;
+      return cssModule;
+    }
+    const importPaths = ENGINE_SPECIFIERS;
+    for (const importPath of importPaths) {
+      const result = await tryImportCss(importPath);
+      if (result) {
+        cssModule = result;
+        if (!process.env.STACKS_DEV_QUIET)
+          console.log(`${colors.green}[ts-css]${colors.reset} CSS engine loaded`);
+        return cssModule;
+      }
+    }
+    const devModule = await loadFrom(findDevCssPaths());
+    if (devModule) {
+      cssModule = devModule;
+      return cssModule;
+    }
+    throw Error("Css CSSGenerator not found in any location");
+  } catch {
+    console.warn(`${colors.yellow}[ts-css] CSS engine not available, Tailwind styles will not be generated${colors.reset}`);
+    console.warn(`${colors.yellow}Run 'bun add @stacksjs/ts-css' to enable CSS generation${colors.reset}`);
+    return null;
+  }
+}
+export function resetCssCache() {
+  cssByPage.clear();
+  cssModule = null;
+  cssLoadAttempted = !1;
+  cachedConfig = null;
+  cachedCSS = "";
+  cssByClassSet.clear();
+  serveCssByHash.clear();
+  configFingerprint = null;
+}
+let warnedLegacyConfigName = !1;
+export async function loadCssEngineConfig(cwd) {
+  try {
+    const name = hasLocalConfig({ name: "css", cwd }) ? "css" : hasLocalConfig({ name: "crosswind", cwd }) ? "crosswind" : null;
+    if (!name)
+      return null;
+    if (name === "crosswind" && !process.env.STACKS_DEV_QUIET && !warnedLegacyConfigName) {
+      warnedLegacyConfigName = !0;
+      console.warn(`${colors.yellow}[ts-css]${colors.reset} Reading the CSS config from a \`crosswind\` file. Rename it to \`css\` (e.g. config/css.ts) \u2014 the old name is deprecated.`);
+    }
+    const { loadConfigWithResult } = await import("bunfig"), result = await loadConfigWithResult({
+      name,
+      cwd,
+      defaultConfig: {},
+      checkEnv: !1,
+      verbose: !1
+    });
+    if (!result?.path || !result.config || Object.keys(result.config).length === 0)
+      return null;
+    const rel = path.relative(cwd, result.path);
+    if (!process.env.STACKS_DEV_QUIET)
+      console.log(`${colors.green}[ts-css]${colors.reset} Loaded config from ${rel || result.path}`);
+    return result.config;
+  } catch (error) {
+    if (error instanceof Error && error.name === "ConfigNotFoundError")
+      return null;
+    console.warn(`${colors.yellow}[ts-css]${colors.reset} Failed to load css config:`, error instanceof Error ? error.message : error);
+    return null;
+  }
+}
+export async function resolveUserCssConfig(resolveRoot) {
+  let stxCssConfig = null;
+  try {
+    const { loadStxConfig } = await import("../config.js"), stxConfig = await loadStxConfig(resolveRoot);
+    if (stxConfig.css)
+      if (typeof stxConfig.css === "string") {
+        const configPath = path.isAbsolute(stxConfig.css) ? stxConfig.css : path.resolve(resolveRoot, stxConfig.css);
+        if (await Bun.file(configPath).exists()) {
+          const mod = await import(configPath);
+          stxCssConfig = mod.default || mod;
+          console.log(`${colors.green}[ts-css]${colors.reset} Loaded config from stx.config.ts \u2192 ${stxConfig.css}`);
+        }
+      } else {
+        stxCssConfig = {
+          ...stxConfig.css,
+          content: stxConfig.css.content || [],
+          preflight: stxConfig.css.preflight ?? !0,
+          minify: stxConfig.css.minify ?? !1
+        };
+        if (stxConfig.css.config) {
+          const configPath = path.isAbsolute(stxConfig.css.config) ? stxConfig.css.config : path.resolve(resolveRoot, stxConfig.css.config);
+          if (await Bun.file(configPath).exists()) {
+            const mod = await import(configPath);
+            stxCssConfig = { ...mod.default || mod, ...stxCssConfig };
+          }
+        }
+        console.log(`${colors.green}[ts-css]${colors.reset} Using inline CSS config from stx.config.ts`);
+      }
+  } catch {}
+  return stxCssConfig || await loadCssEngineConfig(resolveRoot);
+}
+export function fingerprintConfig(config) {
+  try {
+    const seen = new WeakSet;
+    return shortHash(JSON.stringify(config ?? {}, (_key, value) => {
+      if (typeof value === "function")
+        return `[fn]${String(value)}`;
+      if (typeof value === "object" && value !== null) {
+        if (seen.has(value))
+          return "[circular]";
+        seen.add(value);
+      }
+      return value;
+    }) ?? "");
+  } catch {
+    return "unhashable";
+  }
+}
+export async function buildCss(cwd) {
+  if (isBuilding)
+    return cachedCSS;
+  isBuilding = !0;
+  try {
+    const hw = await loadCssEngine();
+    if (!hw || !hw.build) {
+      isBuilding = !1;
+      return "";
+    }
+    if (!cachedConfig)
+      cachedConfig = await loadCssEngineConfig(cwd);
+    if (!cachedConfig) {
+      isBuilding = !1;
+      return "";
+    }
+    const defaultTheme = hw.defaultConfig?.theme || {}, userTheme = cachedConfig.theme || {}, config = {
+      ...hw.defaultConfig,
+      ...cachedConfig,
+      theme: {
+        ...defaultTheme,
+        ...userTheme,
+        extend: {
+          ...defaultTheme.extend || {},
+          ...userTheme.extend || {}
+        }
+      }
+    }, start = performance.now(), result = await hw.build(config), duration = performance.now() - start;
+    cachedCSS = result.css;
+    console.log(`${colors.cyan}[ts-css]${colors.reset} Built ${result.classes.size} classes in ${duration.toFixed(1)}ms`);
+    if (config.output) {
+      const outputPath = path.isAbsolute(config.output) ? config.output : path.join(cwd, config.output), outputDir = path.dirname(outputPath);
+      if (!fs.existsSync(outputDir))
+        fs.mkdirSync(outputDir, { recursive: !0 });
+      await Bun.write(outputPath, result.css);
+    }
+    isBuilding = !1;
+    return result.css;
+  } catch (error) {
+    console.error(`${colors.red}[ts-css]${colors.reset} Build error:`, error);
+    isBuilding = !1;
+    return cachedCSS;
+  }
+}
+export async function rebuildCss(cwd) {
+  cachedConfig = null;
+  await buildCss(cwd);
+}
+export function getCachedCSS() {
+  return cachedCSS;
+}
+export function extractClassNames(htmlContent) {
+  const classes = new Set, classRegex = /class\s*=\s*["']([^"']+)["']/gi;
+  let match = classRegex.exec(htmlContent);
+  while (match !== null) {
+    for (const cls of match[1].split(/\s+/))
+      if (cls.trim())
+        classes.add(cls.trim());
+    match = classRegex.exec(htmlContent);
+  }
+  const dynRegex = /(?:x-class|:class)\s*=\s*"([^"]+)"/gi;
+  let dynMatch = dynRegex.exec(htmlContent);
+  while (dynMatch !== null) {
+    const strLiterals = dynMatch[1].match(/'([^']+)'/g);
+    if (strLiterals) {
+      for (const lit of strLiterals)
+        for (const cls of lit.slice(1, -1).split(/\s+/))
+          if (cls.trim())
+            classes.add(cls.trim());
+    }
+    dynMatch = dynRegex.exec(htmlContent);
+  }
+  return classes;
+}
+const cssByPage = renderMemo(64);
+export async function generateCss(htmlContent, appDir) {
+  const remembered = cssByPage.get(contentKey(htmlContent, appDir, configFingerprint));
+  if (remembered !== void 0)
+    return remembered;
+  const css = await generateCssUncached(htmlContent, appDir);
+  if (css)
+    cssByPage.set(contentKey(htmlContent, appDir, configFingerprint), css);
+  return css;
+}
+async function generateCssUncached(htmlContent, appDir) {
+  try {
+    const hw = await loadCssEngine();
+    if (!hw)
+      return "";
+    const classes = typeof hw.extractClasses === "function" ? hw.extractClasses(htmlContent) : extractClassNames(htmlContent);
+    if (classes.size === 0)
+      return "";
+    const resolveRoot = appDir ? path.resolve(appDir) : process.cwd();
+    if (!diskCacheRoot)
+      diskCacheRoot = stateDir(resolveRoot, "cache");
+    const classSetKey = [...classes].sort().join(" "), cacheKey = `${configFingerprint || "default"}::${classSetKey}`, cached = cssByClassSet.get(cacheKey);
+    if (cached !== void 0) {
+      setLruCache(cacheKey, cached);
+      return cached;
+    }
+    const onDisk = await readDiskCache(cacheKey);
+    if (onDisk !== null) {
+      setLruCache(cacheKey, onDisk);
+      return onDisk;
+    }
+    if (!cachedConfig) {
+      cachedConfig = await resolveUserCssConfig(resolveRoot);
+      configFingerprint = fingerprintConfig(cachedConfig);
+    }
+    const baseConfig = hw.defaultConfig || hw.config, userConfig = cachedConfig || {}, merged = mergeCssConfig(baseConfig, userConfig), { safelist, includePreflight, minify, tokenCSS } = merged, cssConfig = merged.config, generator = new hw.CSSGenerator(cssConfig);
+    for (const cls of safelist)
+      generator.generate(cls);
+    for (const className of classes)
+      generator.generate(className);
+    let css = generator.toCSS(includePreflight, minify);
+    const shortcuts = cssConfig.shortcuts || userConfig.shortcuts || {};
+    for (const [name, classStr] of Object.entries(shortcuts)) {
+      if (!classes.has(name) && !safelist.includes(name))
+        continue;
+      const parts = classStr.split(/\s+/).filter(Boolean);
+      for (const p of parts)
+        generator.generate(p);
+    }
+    css = generator.toCSS(includePreflight, minify);
+    const cssLines = css.split(`
+`);
+    for (const [name, classStr] of Object.entries(shortcuts)) {
+      if (!classes.has(name) && !safelist.includes(name))
+        continue;
+      const parts = classStr.split(/\s+/).filter(Boolean), decls = [], darkDecls = [];
+      for (const cls of parts) {
+        const isDark = cls.startsWith("dark:"), selectorTarget = `.${(isDark ? cls.slice(5) : cls).replace(/\//g, "\\/").replace(/:/g, "\\:").replace(/\./g, "\\.").replace(/\[/g, "\\[").replace(/\]/g, "\\]").replace(/%/g, "\\%")}`;
+        for (let i = 0;i < cssLines.length; i++) {
+          const line = cssLines[i].trim();
+          if (line === `${selectorTarget} {` || line.startsWith(`${selectorTarget} {`)) {
+            let j = i, ruleContent = "";
+            while (j < cssLines.length) {
+              ruleContent += cssLines[j];
+              if (cssLines[j].includes("}"))
+                break;
+              j++;
+            }
+            const declMatch = ruleContent.match(/\{([^}]+)\}/);
+            if (declMatch)
+              if (isDark)
+                darkDecls.push(declMatch[1].trim());
+              else
+                decls.push(declMatch[1].trim());
+            break;
+          }
+        }
+      }
+      if (decls.length)
+        css += `
+.${name} { ${decls.join(" ")} }`;
+      if (darkDecls.length)
+        css += `
+@media (prefers-color-scheme: dark) { .dark .${name} { ${darkDecls.join(" ")} } }`;
+    }
+    css = tokenCSS + css;
+    setLruCache(cacheKey, css);
+    writeDiskCache(cacheKey, css);
+    return css;
+  } catch (error) {
+    console.warn("Failed to generate Css CSS:", error);
+    return "";
+  }
+}
+export async function injectCss(htmlContent, appDir, serveMode = !1) {
+  const css = await generateCss(htmlContent, appDir);
+  if (!css)
+    return htmlContent;
+  const assetTag = serveMode ? `<link data-css="generated" rel="stylesheet" href="/_stx/css.${registerServeCss(css)}.css">` : `<style data-css="generated">
+${css}
+</style>`, existing = /(?:<style\b[^>]*\bdata-css=(?:"generated"|'generated')[^>]*>[\s\S]*?<\/style>|<link\b[^>]*\bdata-css=(?:"generated"|'generated')[^>]*>)/g;
+  if (existing.test(htmlContent)) {
+    let placed = !1;
+    return htmlContent.replace(existing, () => {
+      if (placed)
+        return "";
+      placed = !0;
+      return assetTag;
+    });
+  }
+  if (htmlContent.includes("</head>"))
+    return htmlContent.replace("</head>", `${assetTag}
+</head>`);
+  if (htmlContent.includes("<body"))
+    return htmlContent.replace(/<body([^>]*)>/, `<body$1>
+${assetTag}`);
+  return assetTag + htmlContent;
+}