@upstart.gg/vite-plugins 0.0.37

package/src/vite-plugin-upstart-theme.ts

@@ -0,0 +1,314 @@
+import { createUnplugin } from "unplugin";
+import {
+  GenericFont,
+  GoogleFont,
+  type Theme,
+  fontStacksFonts,
+  processTheme,
+} from "@upstart.gg/sdk/themes/theme";
+import fs from "fs";
+import path from "path";
+
+interface PluginOptions {
+  themes: {
+    light: Theme;
+    dark?: Theme;
+    default: "light" | "dark";
+  };
+  outputPath: string;
+  /** Google Fonts display parameter (default: 'swap') */
+  fontsDisplay?: "auto" | "block" | "swap" | "fallback" | "optional";
+}
+
+/**
+ * Collects Google Fonts from a theme's typography configuration
+ */
+function collectGoogleFonts(theme: Theme) {
+  const { typography } = theme;
+  if (!typography) return [];
+
+  const googleFonts: Array<GoogleFont> = [];
+  const seen = new Set<string>();
+
+  const addFont = (font?: GenericFont) => {
+    if (font?.type === "google" && !seen.has(font.family)) {
+      seen.add(font.family);
+      googleFonts.push(font);
+    }
+  };
+
+  addFont(typography.sans);
+  addFont(typography.serif);
+  if (typography.others) {
+    Object.values(typography.others).forEach(addFont);
+  }
+
+  return googleFonts;
+}
+
+/**
+ * Generates the fonts.css file content with Google Fonts imports
+ */
+function generateFontsCSS(
+  lightTheme: Theme,
+  darkTheme: Theme | null = null,
+  display: "auto" | "block" | "swap" | "fallback" | "optional" = "swap",
+): string {
+  // Collect fonts from both themes
+  const allFonts = new Map<string, GoogleFont>();
+
+  for (const font of collectGoogleFonts(lightTheme)) {
+    allFonts.set(font.family, font);
+  }
+
+  if (darkTheme) {
+    for (const font of collectGoogleFonts(darkTheme)) {
+      allFonts.set(font.family, font);
+    }
+  }
+
+  if (allFonts.size === 0) {
+    return "/* No Google Fonts to import */\n";
+  }
+
+  // Build the Google Fonts URL
+  const families = Array.from(allFonts.values()).map((font) => {
+    const name = font.family.replace(/ /g, "+");
+    if (font.weights && font.weights.length > 1 && font.weights[0] !== font.weights.at(-1)) {
+      return `family=${name}:wght@${font.weights[0]}..${font.weights.at(-1)}`;
+    }
+    return `family=${name}`;
+  });
+
+  const url = `https://fonts.googleapis.com/css2?${families.join("&")}&display=${display}`;
+
+  return `/* Google Fonts - Auto-generated by vite-plugin-upstart-theme */\n@import url("${url}");\n`;
+}
+
+/**
+ * Converts a font definition to a CSS font-family string
+ */
+function fontToCss(font: Theme["typography"]["sans"]): string {
+  if (!font) return "";
+
+  if (font.type === "stack") {
+    return fontStacksFonts[font.family];
+  }
+
+  if (font.type === "google") {
+    // For Google fonts, we just use the family name
+    // The actual font loading will be handled separately
+    return `"${font.family}", system-ui, sans-serif`;
+  }
+
+  return "";
+}
+
+/**
+ * Converts camelCase to kebab-case
+ */
+function camelToKebab(str: string): string {
+  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+
+/**
+ * Generates @theme block with font definitions
+ */
+function generateThemeBlock(
+  lightTheme: Theme,
+  darkTheme: Theme | null = null,
+  defaultTheme: "light" | "dark" = "light",
+): string {
+  const fontDefinitions = new Map<string, string>();
+
+  // Process light theme fonts
+  const lightTypography = lightTheme.typography;
+
+  // Add sans font
+  if (lightTypography.sans) {
+    const fontCss = fontToCss(lightTypography.sans);
+    if (fontCss) {
+      fontDefinitions.set("sans", fontCss);
+    }
+  }
+
+  // Add serif font
+  if (lightTypography.serif) {
+    const fontCss = fontToCss(lightTypography.serif);
+    if (fontCss) {
+      fontDefinitions.set("serif", fontCss);
+    }
+  }
+
+  // Add other fonts
+  if (lightTypography.others) {
+    for (const [name, font] of Object.entries(lightTypography.others)) {
+      const fontCss = fontToCss(font);
+      if (fontCss) {
+        fontDefinitions.set(name, fontCss);
+      }
+    }
+  }
+
+  // Process dark theme fonts if provided
+  if (darkTheme) {
+    const darkTypography = darkTheme.typography;
+
+    if (darkTypography.sans) {
+      const fontCss = fontToCss(darkTypography.sans);
+      if (fontCss) {
+        fontDefinitions.set("sans", fontCss);
+      }
+    }
+
+    if (darkTypography.serif) {
+      const fontCss = fontToCss(darkTypography.serif);
+      if (fontCss) {
+        fontDefinitions.set("serif", fontCss);
+      }
+    }
+
+    if (darkTypography.others) {
+      for (const [name, font] of Object.entries(darkTypography.others)) {
+        const fontCss = fontToCss(font);
+        if (fontCss) {
+          fontDefinitions.set(name, fontCss);
+        }
+      }
+    }
+  }
+
+  const fontLines = Array.from(fontDefinitions.entries())
+    .map(([name, value]) => `  --font-${name}: ${value};`)
+    .join("\n");
+
+  return `/* Fonts in the tailwind @theme block */
+@theme {
+    ${fontLines}
+}
+
+/* Exclude properties since it produce warnings and is not important */
+@plugin "daisyui" {
+  exclude: properties;
+  themes: ${lightTheme.id} ${defaultTheme === "light" || !darkTheme ? "--default" : ""}${darkTheme?.id && darkTheme?.id !== lightTheme.id ? `, ${darkTheme.id} ${defaultTheme === "dark" ? "--default" : "--prefersdark"}` : ""};
+  logs: true;
+}
+`;
+}
+
+//
+
+/**
+ * Generates @theme block for a single theme with colors and layout variables
+ */
+function generateThemeVariables(
+  theme: Theme,
+  type: "light" | "dark",
+  defaultTheme: "light" | "dark",
+): string {
+  const processed = processTheme(theme);
+  const lines: string[] = [
+    `  name: "${processed.id}";`,
+    `  color-scheme: ${processed.browserColorScheme};`,
+    ...((defaultTheme === "dark" && theme.browserColorScheme === "dark") ||
+    (defaultTheme === "light" && theme.browserColorScheme === "light")
+      ? [`  default: true;`]
+      : []),
+    // ...(type === "dark" && defaultTheme !== "dark" ? [`  prefersdark: true;`] : [`  prefersdark: false;`]),
+  ];
+
+  // Color variables
+  for (const [colorKey, colorValue] of Object.entries(processed.colors)) {
+    const kebabKey = ["base100", "base200", "base300"].includes(colorKey)
+      ? colorKey.replace("base", "base-")
+      : camelToKebab(colorKey);
+    lines.push(`  --color-${kebabKey}: ${colorValue};`);
+  }
+
+  lines.push("");
+
+  // Layout variables
+  lines.push(`  --radius-selector: ${processed.radiusSelector};`);
+  lines.push(`  --radius-field: ${processed.radiusField};`);
+  lines.push(`  --radius-box: ${processed.radiusBox};`);
+  lines.push(`  --size-selector: ${processed.sizeSelector};`);
+  lines.push(`  --size-field: ${processed.sizeField};`);
+  lines.push(`  --border: ${processed.border};`);
+  lines.push(`  --depth: ${processed.depth ? 1 : 0};`);
+  lines.push(`  --noise: 0;`);
+
+  // return the generated lines
+  return lines.join("\n");
+}
+
+/**
+ * Unplugin-based theme generator
+ */
+export const upstartTheme = createUnplugin<PluginOptions>((opts) => {
+  let generated = false;
+
+  return {
+    name: "unplugin-theme-generator",
+    apply: "serve",
+
+    vite: {
+      configResolved() {
+        // Generate the CSS file once when config is resolved
+        if (generated) return;
+        generated = true;
+
+        if (!opts?.themes?.light) {
+          console.warn("No light theme provided to unplugin-theme-generator. A light theme is required.");
+          return;
+        }
+
+        const outputDir = path.dirname(opts.outputPath);
+        if (!fs.existsSync(outputDir)) {
+          fs.mkdirSync(outputDir, { recursive: true });
+        }
+
+        const { themes, fontsDisplay = "swap" } = opts;
+
+        // Generate fonts.css file
+        const fontsCSS = generateFontsCSS(themes.light, themes.dark, fontsDisplay);
+        const fontsCSSPath = path.join(outputDir, "fonts.css");
+        fs.writeFileSync(fontsCSSPath, fontsCSS);
+        console.log(`✓ Generated fonts CSS: ${fontsCSSPath}`);
+
+        const output: string[] = [];
+
+        // Generate @theme block with fonts from both themes
+        output.push(generateThemeBlock(themes.light, themes.dark));
+        output.push("");
+
+        // IMPORTANT; Place dark theme first OTHERWISE daisyUI will not apply it correctly
+        // @see https://github.com/saadeghi/daisyui/issues/3921#issuecomment-3059524563
+        // Generate @theme block for dark theme if present
+        if (themes.dark) {
+          output.push("/* Dark theme variables */");
+          output.push('@plugin "daisyui/theme" {');
+          output.push(generateThemeVariables(themes.dark, "dark", themes.default));
+          output.push("}");
+          output.push("");
+        }
+
+        // Generate @theme block for light theme
+        if (themes.light?.id !== themes.dark?.id) {
+          output.push("/* Light theme variables */");
+          output.push('@plugin "daisyui/theme" {');
+          output.push(generateThemeVariables(themes.light, "light", themes.default));
+          output.push("}");
+          output.push("");
+        }
+
+        // Write the generated CSS file
+        const cssContent = output.join("\n");
+        fs.writeFileSync(opts.outputPath, cssContent);
+
+        console.log(`✓ Generated theme CSS: ${opts.outputPath}`);
+      },
+    },
+  };
+});
+
+export default upstartTheme.vite;