@seyuna/postcss 1.0.0-canary.37 → 1.0.0-canary.39

package/src/at-rules/config.ts

@@ -1,78 +0,0 @@
-import { PluginContext } from "../types.js";
-
-/**
- * Handler for @config "seyuna"
- * Parses the configuration defined directly in CSS.
- */
-export function handleConfig(atRule: any, context: PluginContext) {
-  const params = atRule.params.replace(/['"]/g, "");
-
-  if (params === "seyuna") {
-    const { config } = context;
-    if (!config.ui) {
-      config.ui = {
-        theme: {
-          hues: {},
-          colors: {},
-          light: {
-            chroma: 0,
-            lightness: 0,
-            background: { lightness: 0, chroma: 0, hue: 0 },
-            text: { lightness: 0, chroma: 0, hue: 0 },
-            colors: {},
-          },
-          dark: {
-            chroma: 0,
-            lightness: 0,
-            background: { lightness: 0, chroma: 0, hue: 0 },
-            text: { lightness: 0, chroma: 0, hue: 0 },
-            colors: {},
-          },
-        },
-      };
-    }
-
-    const theme = config.ui.theme;
-
-    atRule.walkDecls((decl: any) => {
-      const prop = decl.prop;
-      const value = decl.value;
-
-      // Hues: --hue-alpha: 0;
-      if (prop.startsWith("--hue-")) {
-        const name = prop.replace("--hue-", "");
-        theme.hues[name] = parseFloat(value);
-      }
-
-      // Fixed Colors: --color-primary: 0.66 0.26 240;
-      else if (prop.startsWith("--color-")) {
-        const name = prop.replace("--color-", "");
-        const [l, c, h] = value.split(/\s+/).map(parseFloat);
-        theme.colors[name] = { lightness: l, chroma: c, hue: h };
-      }
-
-      // Theme Palettes: --light-lightness: 0.66;
-      else if (prop.startsWith("--light-") || prop.startsWith("--dark-")) {
-        const isLight = prop.startsWith("--light-");
-        const palette = isLight ? theme.light : theme.dark;
-        const key = prop.replace(isLight ? "--light-" : "--dark-", "");
-
-        if (key === "lightness") palette.lightness = parseFloat(value);
-        else if (key === "chroma") palette.chroma = parseFloat(value);
-        else if (key === "background" || key === "text") {
-          const [l, c, h] = value.split(/\s+/).map(parseFloat);
-          (palette as any)[key] = { lightness: l, chroma: c, hue: h };
-        } else {
-          // Custom colors in palette: --light-surface: 1 0 0;
-          // Also supports overrides like --light-color-primary: 0.8 0.1 240;
-          const cleanKey = key.replace(/^color-/, "");
-          const [l, c, h] = value.split(/\s+/).map(parseFloat);
-          palette.colors[cleanKey] = { lightness: l, chroma: c, hue: h };
-        }
-      }
-    });
-
-    // Remove the at-rule from CSS output
-    atRule.remove();
-  }
-}

package/src/at-rules/container.ts

@@ -1,58 +0,0 @@
-import AtRule from "postcss/lib/at-rule";
-// import type { ChildNode } from "postcss"; // AtRule is now a value import
-import { PluginContext } from "../types.js";
-
-/**
- * Custom PostCSS plugin handler for responsive at-rules.
- *
- * Example:
- *
- *   @xs {
- *     .box { color: red; }
- *   }
- *
- * Into:
- *
- *   @xs (min-width: 234px) {
- *     .box { color: red; }
- *   }
- *
- */
-export default function container(atRule: any, context: PluginContext) {
-  const { config } = context;
-  
-  // Default breakpoints
-  const defaultBreakpoints: Record<string, string> = {
-    xs: "20rem",
-    sm: "40rem",
-    md: "48rem",
-    lg: "64rem",
-    xl: "80rem",
-    "2xl": "96rem",
-  };
-
-  // Merge with config if available (assuming config.ui.breakpoints exists)
-  const breakpoints = {
-    ...defaultBreakpoints,
-    ...((config as any).ui?.theme?.breakpoints || {}),
-  };
-
-  if (Object.keys(breakpoints).includes(atRule.name)) {
-    const minWidth = breakpoints[atRule.name];
-
-    const clonedNodes: any[] = [];
-    atRule.each((node: any) => {
-      clonedNodes.push(node.clone());
-    });
-
-    const containerAtRule = new AtRule({
-      name: "container",
-      params: `(min-width: ${minWidth})`,
-      source: atRule.source,
-    });
-
-    clonedNodes.forEach((node) => containerAtRule.append(node));
-
-    atRule.replaceWith(containerAtRule);
-  }
-}

package/src/at-rules/import.ts

@@ -1,196 +0,0 @@
-import Rule from "postcss/lib/rule";
-import Declaration from "postcss/lib/declaration";
-import AtRule from "postcss/lib/at-rule";
-import { PluginContext } from "../types.js";
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-import postcss from "postcss";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-/**
- * Handler for @import "seyuna"
- * Injects the core Seyuna Design System variables and base styles
- */
-export function handleImport(atRule: any, context: PluginContext) {
-  // Support both @seyuna; and the previous @import "seyuna" logic
-  // Since this handler is now registered to @seyuna, we just check params or just run it.
-  const params = atRule.params.replace(/['"]/g, "").trim();
-
-  // If it's @seyuna; the params will be empty.
-  // If it's @import "seyuna", this handler wouldn't be called unless we kept the name "import".
-  // But we want this to run for @seyuna;
-  if (atRule.name === "seyuna") {
-    const { config, options } = context;
-    if (!config.ui) {
-      atRule.remove();
-      return;
-    }
-
-    const { theme } = config.ui;
-    const modeAttribute = options.modeAttribute;
-    const nodes: any[] = [];
-
-    // 1. Ingest Global Base Styles (Reset, Layers, etc.)
-    try {
-      const globalStylesPath = path.resolve(
-        __dirname,
-        "../styles/seyuna-global.css",
-      );
-      if (fs.existsSync(globalStylesPath)) {
-        const globalCss = fs.readFileSync(globalStylesPath, "utf-8");
-        const parsed = postcss.parse(globalCss);
-
-        // Push all nodes from the global styles (reset, layers, etc.)
-        parsed.nodes.forEach((node) => {
-          nodes.push(node.clone());
-        });
-      } else {
-        nodes.push(
-          new AtRule({
-            name: "layer",
-            params: "reset, base, components, utilities",
-          }),
-        );
-      }
-    } catch (e) {
-      console.warn("[Seyuna PostCSS] Could not load global base styles:", e);
-    }
-
-    // 2. Global Hues and Base Colors (:root)
-    const rootRule = new Rule({ selector: ":root", source: atRule.source });
-
-    // Process all hues from config
-    if (theme.hues) {
-      for (const [name, value] of Object.entries(theme.hues)) {
-        rootRule.append(
-          new Declaration({ prop: `--${name}-hue`, value: String(value) }),
-        );
-      }
-    }
-
-    // Add shared colors from theme.colors
-    if (theme.colors) {
-      for (const [name, color] of Object.entries(theme.colors)) {
-        rootRule.append(
-          new Declaration({
-            prop: `--${name}-lightness`,
-            value: String(color.lightness),
-          }),
-        );
-        rootRule.append(
-          new Declaration({
-            prop: `--${name}-chroma`,
-            value: String(color.chroma),
-          }),
-        );
-        rootRule.append(
-          new Declaration({ prop: `--${name}-hue`, value: String(color.hue) }),
-        );
-      }
-    }
-    nodes.push(rootRule);
-
-    // Helper to generate palette declarations for a specific mode
-    const getPaletteDecls = (palette: any) => {
-      const decls: Declaration[] = [];
-
-      if (palette.lightness !== undefined) {
-        decls.push(
-          new Declaration({
-            prop: "--lightness",
-            value: String(palette.lightness),
-          }),
-        );
-      }
-      if (palette.chroma !== undefined) {
-        decls.push(
-          new Declaration({ prop: "--chroma", value: String(palette.chroma) }),
-        );
-      }
-
-      // Standard background/text if they exist
-      if (palette.background) {
-        decls.push(
-          new Declaration({
-            prop: "--background",
-            value: `oklch(${palette.background.lightness} ${palette.background.chroma} ${palette.background.hue})`,
-          }),
-        );
-      }
-      if (palette.text) {
-        decls.push(
-          new Declaration({
-            prop: "--text",
-            value: `oklch(${palette.text.lightness} ${palette.text.chroma} ${palette.text.hue})`,
-          }),
-        );
-      }
-
-      if (palette.colors) {
-        for (const [name, color] of Object.entries(palette.colors)) {
-          const c = color as any;
-          decls.push(
-            new Declaration({
-              prop: `--${name}-lightness`,
-              value: String(c.lightness),
-            }),
-          );
-          decls.push(
-            new Declaration({
-              prop: `--${name}-chroma`,
-              value: String(c.chroma),
-            }),
-          );
-          decls.push(
-            new Declaration({ prop: `--${name}-hue`, value: String(c.hue) }),
-          );
-        }
-      }
-      return decls;
-    };
-
-    // 3. Explicit Mode Selectors ([data-mode="..."])
-    if (theme.light) {
-      const lightRule = new Rule({
-        selector: `[${modeAttribute}="light"]`,
-        source: atRule.source,
-      });
-      lightRule.append(...getPaletteDecls(theme.light));
-      nodes.push(lightRule);
-    }
-
-    if (theme.dark) {
-      const darkRule = new Rule({
-        selector: `[${modeAttribute}="dark"]`,
-        source: atRule.source,
-      });
-      darkRule.append(...getPaletteDecls(theme.dark));
-      nodes.push(darkRule);
-    }
-
-    // 4. System Preference Support
-    const createSystemMedia = (scheme: "light" | "dark", palette: any) => {
-      const media = new AtRule({
-        name: "media",
-        params: `(prefers-color-scheme: ${scheme})`,
-        source: atRule.source,
-      });
-      const rule = new Rule({
-        selector: `[${modeAttribute}="system"]`,
-        source: atRule.source,
-      });
-      rule.append(...getPaletteDecls(palette));
-      media.append(rule);
-      return media;
-    };
-
-    if (theme.light) nodes.push(createSystemMedia("light", theme.light));
-    if (theme.dark) nodes.push(createSystemMedia("dark", theme.dark));
-
-    // Replace the @import rule with our generated CSS
-    atRule.replaceWith(...nodes);
-  }
-}

package/src/at-rules/index.ts

@@ -1,29 +0,0 @@
-// import type { AtRule } from "postcss";
-import { eachStandardColor, eachFixedColor } from "./color.js";
-import container from "./container.js";
-import { light, dark } from "./color-scheme.js";
-import { handleImport } from "./import.js";
-import { handleConfig } from "./config.js";
-import { PluginContext } from "../types.js";
-
-// Each handler has a name (matches the at-rule) and the function
-export interface AtRuleHandler {
-  name: string;
-  handler: (atRule: any, context: PluginContext) => void;
-}
-
-// Ordered array ensures execution order
-export const atRuleHandlers: AtRuleHandler[] = [
-  { name: "config", handler: handleConfig },
-  { name: "seyuna", handler: handleImport },
-  { name: "each-standard-color", handler: eachStandardColor },
-  { name: "each-fixed-color", handler: eachFixedColor },
-  { name: "light", handler: light },
-  { name: "dark", handler: dark },
-  { name: "xs", handler: container },
-  { name: "sm", handler: container },
-  { name: "md", handler: container },
-  { name: "lg", handler: container },
-  { name: "xl", handler: container },
-  { name: "2xl", handler: container },
-];

package/src/config.ts

@@ -1,98 +0,0 @@
-import fs from "fs";
-import path from "path";
-import {
-  SeyunaConfig,
-  PluginOptions,
-  PluginContext,
-  FunctionMap,
-} from "./types.js";
-
-// Re-export types for backwards compatibility
-export type { PluginOptions, PluginContext, FunctionMap } from "./types.js";
-
-const DEFAULT_HUES = {
-  alpha: 15,
-  beta: 30,
-  gamma: 45,
-  delta: 60,
-  epsilon: 75,
-  zeta: 90,
-  eta: 105,
-  theta: 120,
-  iota: 135,
-  kappa: 150,
-  lambda: 165,
-  mu: 180,
-  nu: 195,
-  xi: 210,
-  omicron: 225,
-  pi: 240,
-  rho: 255,
-  sigma: 270,
-  tau: 285,
-  upsilon: 300,
-  phi: 315,
-  chi: 330,
-  psi: 345,
-  omega: 360,
-};
-
-const DEFAULT_OPTIONS: Required<PluginOptions> = {
-  config: undefined as any,
-  functions: undefined as any,
-};
-
-export function loadConfig(options: PluginOptions = {}): {
-  config: SeyunaConfig;
-  options: Required<PluginOptions> & { modeAttribute: string };
-} {
-  const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
-
-  const baseConfig: SeyunaConfig = {
-    ui: {
-      theme: {
-        hues: { ...DEFAULT_HUES },
-        colors: {},
-        light: {
-          chroma: 0,
-          lightness: 0,
-          background: { lightness: 0, chroma: 0, hue: 0 },
-          text: { lightness: 0, chroma: 0, hue: 0 },
-          colors: {},
-        },
-        dark: {
-          chroma: 0,
-          lightness: 0,
-          background: { lightness: 0, chroma: 0, hue: 0 },
-          text: { lightness: 0, chroma: 0, hue: 0 },
-          colors: {},
-        },
-      },
-    },
-  };
-
-  if (mergedOptions.config) {
-    // Deep merge or at least merge hues
-    const config = mergedOptions.config;
-    if (config.ui?.theme) {
-      config.ui.theme.hues = { ...DEFAULT_HUES, ...config.ui.theme.hues };
-    }
-    return {
-      config: config,
-      options: { ...mergedOptions, modeAttribute: "data-mode" },
-    };
-  }
-
-  // Return base config with defaults
-  return {
-    config: baseConfig,
-    options: { ...mergedOptions, modeAttribute: "data-mode" },
-  };
-}
-
-export async function loadConfigAsync(options: PluginOptions = {}): Promise<{
-  config: SeyunaConfig;
-  options: Required<PluginOptions> & { modeAttribute: string };
-}> {
-  return loadConfig(options);
-}

package/src/errors.ts

@@ -1,27 +0,0 @@
-// import type { Node } from 'postcss';
-import { PluginContext } from "./types.js";
-
-export function reportError(
-  message: string,
-  node: any,
-  context: PluginContext,
-  options: { word?: string; index?: number } = {},
-) {
-  const { options: pluginOptions } = context;
-  const formattedMessage = `[Seyuna PostCSS] ${message}`;
-
-  reportWarning(formattedMessage, node, context);
-}
-
-export function reportWarning(
-  message: string,
-  node: any,
-  context?: PluginContext,
-) {
-  if (context?.result) {
-    node.warn(context.result, `[Seyuna PostCSS] ${message}`);
-  } else {
-    // Fallback if no result is available (should not happen in main flow)
-    console.warn(`[Seyuna PostCSS Warning] ${message}`);
-  }
-}

package/src/functions/color.ts

@@ -1,123 +0,0 @@
-import { PluginContext } from "../types.js";
-
-/**
- * Resolves a color name to its CSS variables based on its type (standard or fixed)
- */
-function getColorVariables(
-  context: PluginContext,
-  color: string,
-  type?: "sc" | "fc",
-) {
-  const { config } = context;
-  const hues = config?.ui?.theme?.hues || {};
-  const colors = config?.ui?.theme?.colors || {};
-  const lightColors = config?.ui?.theme?.light?.colors || {};
-  const darkColors = config?.ui?.theme?.dark?.colors || {};
-
-  // If explicitly typed, trust the type and generate appropriate variables
-  if (type === "sc") {
-    return {
-      l: "var(--lightness)",
-      c: "var(--chroma)",
-      h: `var(--${color}-hue)`,
-    };
-  }
-  if (type === "fc") {
-    return {
-      l: `var(--${color}-lightness)`,
-      c: `var(--${color}-chroma)`,
-      h: `var(--${color}-hue)`,
-    };
-  }
-
-  // Auto-detect based on config
-  const isStandard = color in hues;
-  const isFixed =
-    color in colors || color in lightColors || color in darkColors;
-
-  if (isStandard && !isFixed) {
-    return {
-      l: "var(--lightness)",
-      c: "var(--chroma)",
-      h: `var(--${color}-hue)`,
-    };
-  }
-
-  if (isFixed && !isStandard) {
-    return {
-      l: `var(--${color}-lightness)`,
-      c: `var(--${color}-chroma)`,
-      h: `var(--${color}-hue)`,
-    };
-  }
-
-  // Resilient fallback (graceful degradation for multi-file scenarios or name collisions)
-  // Use specific color variable if it exists, otherwise fall back to theme defaults
-  return {
-    l: `var(--${color}-lightness, var(--lightness))`,
-    c: `var(--${color}-chroma, var(--chroma))`,
-    h: `var(--${color}-hue)`,
-  };
-}
-
-export function SeyunaStandardColor(
-  context: PluginContext,
-  name: string,
-  alpha?: string,
-  lightness?: string,
-  chroma?: string,
-) {
-  const vars = getColorVariables(context, name, "sc");
-  const a = alpha && alpha !== "null" ? alpha : "1";
-  const l = lightness && lightness !== "null" ? lightness : vars.l;
-  const c = chroma && chroma !== "null" ? chroma : vars.c;
-
-  return `oklch(${l} ${c} ${vars.h} / ${a})`;
-}
-
-export function SeyunaFixedColor(
-  context: PluginContext,
-  name: string,
-  alpha?: string,
-  lightness?: string,
-  chroma?: string,
-) {
-  const vars = getColorVariables(context, name, "fc");
-  const a = alpha && alpha !== "null" ? alpha : "1";
-  const l = lightness && lightness !== "null" ? lightness : vars.l;
-  const c = chroma && chroma !== "null" ? chroma : vars.c;
-
-  return `oklch(${l} ${c} ${vars.h} / ${a})`;
-}
-
-export function SeyunaAlpha(
-  context: PluginContext,
-  color: string,
-  value: string,
-) {
-  const { l, c, h } = getColorVariables(context, color);
-  return `oklch(${l} ${c} ${h} / ${value})`;
-}
-
-export function SeyunaLighten(
-  context: PluginContext,
-  color: string,
-  amount: string,
-) {
-  const { l, c, h } = getColorVariables(context, color);
-  return `oklch(calc(${l} + ${amount}) ${c} ${h} / 1)`;
-}
-
-export function SeyunaDarken(
-  context: PluginContext,
-  color: string,
-  amount: string,
-) {
-  const { l, c, h } = getColorVariables(context, color);
-  return `oklch(calc(${l} - ${amount}) ${c} ${h} / 1)`;
-}
-
-export function SeyunaContrast(context: PluginContext, color: string) {
-  const { l } = getColorVariables(context, color);
-  return `oklch(calc((${l} - 0.6) * -1000) 0 0)`;
-}

package/src/functions/index.ts

@@ -1,22 +0,0 @@
-import {
-  SeyunaStandardColor,
-  SeyunaFixedColor,
-  SeyunaAlpha,
-  SeyunaLighten,
-  SeyunaDarken,
-  SeyunaContrast,
-} from "./color.js";
-import { SeyunaTheme } from "./theme.js";
-import { PluginContext } from "../types.js";
-
-export type FnHandler = (context: PluginContext, ...args: string[]) => string;
-
-export const functions: Record<string, FnHandler> = {
-  SeyunaStandardColor,
-  SeyunaFixedColor,
-  SeyunaAlpha,
-  SeyunaLighten,
-  SeyunaDarken,
-  SeyunaContrast,
-  SeyunaTheme,
-};

package/src/functions/theme.ts

@@ -1,20 +0,0 @@
-import { PluginContext } from "../types.js";
-
-/**
- * Accesses values from the Seyuna configuration using dot notation
- * Example: theme(ui.theme.breakpoints.tablet)
- */
-export function SeyunaTheme(context: PluginContext, path: string): string {
-  const parts = path.split('.');
-  let current: any = context.config;
-
-  for (const part of parts) {
-    if (current && typeof current === 'object' && part in current) {
-      current = current[part];
-    } else {
-      return path; // Return original path if not found
-    }
-  }
-
-  return String(current);
-}