@seyuna/postcss 1.0.0-canary.2 → 1.0.0-canary.21

package/src/at-rules/color.ts

@@ -0,0 +1,33 @@
+import type { AtRule } from "postcss";
+import { PluginContext } from "../types.js";
+import { generateRules } from "../helpers.js";
+
+/**
+ * Handler for @each-standard-color
+ */
+export function eachStandardColor(atRule: AtRule, context: PluginContext) {
+  const { config } = context;
+  const hueNames = config.ui ? Object.keys(config.ui.theme.hues) : [];
+
+  const rules = generateRules(hueNames, atRule, context);
+  if (rules.length) atRule.replaceWith(...rules);
+  else atRule.remove();
+}
+
+/**
+ * Handler for @each-fixed-color
+ */
+export function eachFixedColor(atRule: AtRule, context: PluginContext) {
+  const { config } = context;
+
+  const mergedNames = [
+    ...new Set([
+      ...(config.ui ? Object.keys(config.ui.theme.light.colors) : []),
+      ...(config.ui ? Object.keys(config.ui.theme.dark.colors) : []),
+    ]),
+  ];
+
+  const rules = generateRules(mergedNames, atRule, context);
+  if (rules.length) atRule.replaceWith(...rules);
+  else atRule.remove();
+}

package/src/at-rules/container.ts

@@ -0,0 +1,58 @@
+import postcss from "postcss";
+import type { AtRule, ChildNode } from "postcss";
+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: AtRule, 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: ChildNode[] = [];
+    atRule.each((node: ChildNode) => {
+      clonedNodes.push(node.clone());
+    });
+
+    const containerAtRule = new postcss.AtRule({
+      name: "container",
+      params: `(min-width: ${minWidth})`,
+      source: atRule.source,
+    });
+
+    clonedNodes.forEach((node) => containerAtRule.append(node));
+
+    atRule.replaceWith(containerAtRule);
+  }
+}

package/src/at-rules/index.ts

@@ -1,11 +1,25 @@
-import dark from "./dark";
-import light from "./light";
 import type { AtRule } from "postcss";
+import { eachStandardColor, eachFixedColor } from "./color.js";
+import container from "./container.js";
+import { light, dark } from "./color-scheme.js";
+import { PluginContext } from "../types.js";
 
-export type AtRuleHandler = (atRule: AtRule) => void;
+// Each handler has a name (matches the at-rule) and the function
+export interface AtRuleHandler {
+  name: string;
+  handler: (atRule: AtRule, context: PluginContext) => void;
+}
 
-export const atRuleHandlers: Record<string, AtRuleHandler> = {
-  light,
-  dark,
-  // add more handlers here as needed
-};
+// Ordered array ensures execution order
+export const atRuleHandlers: AtRuleHandler[] = [
+  { 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

@@ -0,0 +1,59 @@
+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_OPTIONS: Required<PluginOptions> = {
+  configPath: 'seyuna.json',
+  modeAttribute: 'data-mode',
+  strict: false,
+  config: undefined as any,
+  functions: undefined as any,
+};
+
+let cachedConfig: SeyunaConfig | null = null;
+let cachedConfigPath: string | null = null;
+
+export function loadConfig(options: PluginOptions = {}): { config: SeyunaConfig, options: Required<PluginOptions> } {
+  const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
+
+  if (mergedOptions.config) {
+    return { config: mergedOptions.config, options: mergedOptions };
+  }
+
+  const configPath = path.resolve(process.cwd(), mergedOptions.configPath);
+
+  // Cache config if it's the same path
+  if (cachedConfig && cachedConfigPath === configPath) {
+    return { config: cachedConfig, options: mergedOptions };
+  }
+
+  try {
+    if (!fs.existsSync(configPath)) {
+      if (mergedOptions.strict) {
+        throw new Error(`Seyuna config not found at ${configPath}`);
+      }
+      return {
+        config: { ui: { theme: { hues: {}, light: { colors: {} }, dark: { colors: {} } } } } as any,
+        options: mergedOptions,
+      };
+    }
+
+    const data = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
+    cachedConfig = data;
+    cachedConfigPath = configPath;
+
+    return { config: data, options: mergedOptions };
+  } catch (error) {
+    if (mergedOptions.strict) {
+      throw error;
+    }
+    console.warn(`[Seyuna PostCSS] Warning: Failed to load config: ${error instanceof Error ? error.message : String(error)}`);
+    return {
+      config: { ui: { theme: { hues: {}, light: { colors: {} }, dark: { colors: {} } } } } as any,
+      options: mergedOptions,
+    };
+  }
+}

package/src/errors.ts

@@ -0,0 +1,23 @@
+import { Node } from 'postcss';
+import { PluginContext } from './types.js';
+
+export function reportError(
+  message: string,
+  node: Node,
+  context: PluginContext,
+  options: { word?: string; index?: number } = {}
+) {
+  const { options: pluginOptions } = context;
+  const formattedMessage = `[Seyuna PostCSS] ${message}`;
+
+  if (pluginOptions.strict) {
+    throw node.error(formattedMessage, options);
+  } else {
+    reportWarning(formattedMessage, node);
+  }
+}
+
+export function reportWarning(message: string, node: Node) {
+  const result = node.root().toResult();
+  node.warn(result, `[Seyuna PostCSS] ${message}`);
+}

package/src/functions/color.ts

@@ -1,24 +1,90 @@
-export default function color(
+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 || {};
+
+  const isStandard = color in hues;
+  const isFixed = color in colors || color in lightColors || color in darkColors;
+
+  if (type === 'sc' && !isStandard) {
+    throw new Error(`Standard color '${color}' not found in seyuna.json hues`);
+  }
+  if (type === 'fc' && !isFixed) {
+    throw new Error(`Fixed color '${color}' not found in seyuna.json colors`);
+  }
+
+  if (isStandard) {
+    return {
+      l: "var(--lightness)",
+      c: "var(--chroma)",
+      h: `var(--${color}-hue)`,
+    };
+  }
+
+  if (isFixed) {
+    return {
+      l: `var(--${color}-lightness)`,
+      c: `var(--${color}-chroma)`,
+      h: `var(--${color}-hue)`,
+    };
+  }
+
+  throw new Error(`Color '${color}' not found in seyuna.json`);
+}
+
+export function sc(
+  context: PluginContext,
   name: string,
   alpha?: string,
   lightness?: string,
   chroma?: string
 ) {
-  let a: string = "1";
-  let l: string = "var(--lightness)";
-  let c: string = "var(--chroma)";
+  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;
 
-  if (alpha && alpha !== "null") {
-    a = alpha;
-  }
+  return `oklch(${l} ${c} ${vars.h} / ${a})`;
+}
 
-  if (lightness && lightness !== "null") {
-    l = lightness;
-  }
+export function fc(
+  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;
 
-  if (chroma && chroma !== "null") {
-    c = chroma;
-  }
+  return `oklch(${l} ${c} ${vars.h} / ${a})`;
+}
+
+export function alpha(context: PluginContext, color: string, value: string) {
+  const { l, c, h } = getColorVariables(context, color);
+  return `oklch(${l} ${c} ${h} / ${value})`;
+}
+
+export function lighten(context: PluginContext, color: string, amount: string) {
+  const { l, c, h } = getColorVariables(context, color);
+  return `oklch(calc(${l} + ${amount}) ${c} ${h} / 1)`;
+}
+
+export function darken(context: PluginContext, color: string, amount: string) {
+  const { l, c, h } = getColorVariables(context, color);
+  return `oklch(calc(${l} - ${amount}) ${c} ${h} / 1)`;
+}
 
-  return `oklch(${l} ${c} var(--${name}) / ${a})`;
+export function contrast(context: PluginContext, color: string) {
+  const { l } = getColorVariables(context, color);
+  return `oklch(calc((${l} - 0.6) * -1000) 0 0)`;
 }

package/src/functions/index.ts

@@ -1,9 +1,15 @@
-import color from "./color";
-import spacing from "./spacing";
+import { sc, fc, alpha, lighten, darken, contrast } from "./color.js";
+import { theme } from "./theme.js";
+import { PluginContext } from "../types.js";
 
-export type FnHandler = (...args: string[]) => string;
+export type FnHandler = (context: PluginContext, ...args: string[]) => string;
 
 export const functions: Record<string, FnHandler> = {
-  color,
-  spacing,
+  sc,
+  fc,
+  alpha,
+  lighten,
+  darken,
+  contrast,
+  theme,
 };

package/src/functions/theme.ts

@@ -0,0 +1,20 @@
+import { PluginContext } from "../types.js";
+
+/**
+ * Accesses values from the Seyuna configuration using dot notation
+ * Example: theme(ui.theme.breakpoints.tablet)
+ */
+export function theme(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);
+}

package/src/helpers.ts

@@ -0,0 +1,75 @@
+import postcss from "postcss";
+import type { ChildNode, Declaration, AtRule } from "postcss";
+import { processFunctions } from "./parser.js";
+import { PluginContext } from './types.js';
+
+/**
+ * Helper: clone nodes and replace {name} placeholders safely
+ * Returns only valid Rules or Declarations (never raw AtRules)
+ */
+export function cloneNodes(
+  nodes: ChildNode[],
+  name: string,
+  context: PluginContext
+): ChildNode[] {
+  const { functions: fnMap } = context;
+  
+  return nodes.flatMap((node) => {
+    const cloned = node.clone();
+
+    if (cloned.type === "decl") {
+      const decl = cloned as Declaration;
+      let value = decl.value.replace(/\{name\}/g, name);
+
+      // Process functions using the robust parser
+      decl.value = processFunctions(value, fnMap, decl, context);
+      
+      return decl;
+    }
+
+    if (cloned.type === "rule") {
+      const rule = cloned as postcss.Rule;
+      if (!rule.selector) return [];
+
+      rule.selector = rule.selector.replace(/\{name\}/g, name);
+
+      // Recursively clone child nodes and only keep valid rules/decls
+      rule.nodes = cloneNodes(rule.nodes || [], name, context).filter(
+        (n) => n.type === "rule" || n.type === "decl"
+      );
+
+      if (!rule.nodes.length) return [];
+      return rule;
+    }
+
+    // Ignore AtRules inside rules — they must be processed first
+    return [];
+  });
+}
+
+/**
+ * Generate CSS rules from a list of names
+ */
+export function generateRules(
+  names: string[],
+  atRule: AtRule,
+  context: PluginContext
+): postcss.Rule[] {
+  const nodes = atRule.nodes ?? [];
+  const generatedRules: postcss.Rule[] = [];
+
+  for (const name of names) {
+    const rule = new postcss.Rule({
+      selector: `&.${name}`,
+      source: atRule.source,
+    });
+    cloneNodes(nodes, name, context).forEach((n) => {
+      if (n.type === "rule" && n.selector && (n as postcss.Rule).nodes?.length) rule.append(n);
+      if (n.type === "decl") rule.append(n);
+    });
+
+    if (rule.nodes.length) generatedRules.push(rule);
+  }
+
+  return generatedRules;
+}

package/src/index.ts

@@ -1,8 +1,10 @@
-import { dynamicFunctionsPlugin } from './plugin';
-import { functions } from './functions';
+import { dynamicFunctionsPlugin } from './plugin.js';
+import { functions } from './functions/index.js';
 
 // CommonJS-friendly export
-export = Object.assign(dynamicFunctionsPlugin, {
+const plugin = Object.assign(dynamicFunctionsPlugin, {
   postcss: true,
   functions
 });
+
+export default plugin;

package/src/parser.ts

@@ -0,0 +1,81 @@
+import valueParser from 'postcss-value-parser';
+import { Node } from 'postcss';
+import { PluginContext, FunctionMap } from './types.js';
+import { reportError } from './errors.js';
+
+// Re-export FunctionMap for backwards compatibility
+export type { FunctionMap } from './types.js';
+
+export function processFunctions(
+  value: string,
+  fnMap: FunctionMap,
+  node: Node,
+  context: PluginContext
+): string {
+  const parsed = valueParser(value);
+
+  // Helper to process nodes recursively (inner-first)
+  function processNode(parsedValue: valueParser.ParsedValue) {
+    parsedValue.walk((nodeIter) => {
+      // If nested nodes exist (e.g., in a function), process them first
+      if (nodeIter.type === 'function' && nodeIter.nodes.length > 0) {
+        // Here we recursively process child nodes before handling the current function
+        // However, value-parser's walk is already a visitor. To do inner-first,
+        // we can either walk in reverse or specifically handle children.
+        // A simpler way: since walk visits all, we can check if it's a function
+        // and if it's one we handle, we process its arguments.
+      }
+    });
+
+    // Actually, a manual walk is safer for inner-first replacement
+    function traverse(nodes: valueParser.Node[]) {
+      for (const nodeIter of nodes) {
+        if (nodeIter.type === 'function') {
+          // Process inner functions first
+          traverse(nodeIter.nodes);
+
+          // Now handle this function if it's in our map
+          if (fnMap[nodeIter.value]) {
+            const handler = fnMap[nodeIter.value];
+            const args: string[] = [];
+            let currentArg = '';
+
+            nodeIter.nodes.forEach((argNode) => {
+              if (argNode.type === 'div' && argNode.value === ',') {
+                args.push(currentArg.trim());
+                currentArg = '';
+              } else {
+                currentArg += valueParser.stringify(argNode);
+              }
+            });
+
+            if (currentArg) {
+              args.push(currentArg.trim());
+            }
+
+            const cleanedArgs = args.map(arg => arg.replace(/^['"]|['"]$/g, ''));
+
+            try {
+              const result = handler(context, ...cleanedArgs);
+              // Replace function with its result
+              (nodeIter as any).type = 'word';
+              (nodeIter as any).value = result;
+              (nodeIter as any).nodes = []; // Clear children
+            } catch (error) {
+              reportError(
+                `Failed to process function "${nodeIter.value}": ${error instanceof Error ? error.message : String(error)}`,
+                node,
+                context
+              );
+            }
+          }
+        }
+      }
+    }
+
+    traverse(parsedValue.nodes);
+  }
+
+  processNode(parsed);
+  return parsed.toString();
+}

package/src/plugin.ts

@@ -1,38 +1,43 @@
-import { PluginCreator } from "postcss";
-import { functions } from "./functions";
-import { atRuleHandlers } from "./at-rules";
-
-export interface PluginOptions {
-  functions?: Record<string, (...args: string[]) => string>;
-}
+import type { PluginCreator } from "postcss";
+import { functions } from "./functions/index.js";
+import { atRuleHandlers } from "./at-rules/index.js";
+import { loadConfig } from "./config.js";
+import { PluginOptions, PluginContext, FunctionMap } from "./types.js";
+import { processFunctions } from "./parser.js";
 
 export const dynamicFunctionsPlugin: PluginCreator<PluginOptions> = (
   opts = {}
 ) => {
-  const fnMap = { ...functions, ...opts.functions };
+  let context: PluginContext | undefined;
+  let fnMap: FunctionMap | undefined;
 
   return {
     postcssPlugin: "postcss-dynamic-functions",
 
-    Declaration(decl) {
-      let value = decl.value;
-
-      for (const fnName in fnMap) {
-        const regex = new RegExp(`${fnName}\\(([^)]*)\\)`, "g");
-
-        value = value.replace(regex, (_match, argsStr) => {
-          const args = argsStr
-            .split(",")
-            .map((a: string) => a.trim().replace(/^['"]|['"]$/g, ""));
-          return fnMap[fnName](...args);
-        });
-      }
+    Once() {
+      const { config, options } = loadConfig(opts);
+      fnMap = { ...functions, ...opts.functions };
+      context = {
+        config,
+        options,
+        functions: fnMap,
+      };
+    },
 
-      decl.value = value;
+    Declaration(decl) {
+      if (!context || !fnMap) return;
+      decl.value = processFunctions(decl.value, fnMap, decl, context);
     },
 
-    AtRule: {
-      ...atRuleHandlers,
+    // Override AtRule handler to ensure ordered execution
+    AtRule(atRule) {
+      if (!context) return;
+      // Iterate over handlers in order (array) instead of object spread
+      for (const { name, handler } of atRuleHandlers) {
+        if (atRule.name === name) {
+          handler(atRule, context);
+        }
+      }
     },
   };
 };

package/src/types.ts

@@ -0,0 +1,72 @@
+// Local type definitions to avoid @seyuna/cli runtime import
+// The @seyuna/cli package imports Deno polyfills that conflict with Vite/Astro
+
+/**
+ * Represents a color in the Oklch color space.
+ */
+export interface Color {
+  lightness: number;
+  chroma: number;
+  hue: number;
+}
+
+/**
+ * A set of colors for a specific theme mode.
+ */
+export interface Palette {
+  chroma: number;
+  lightness: number;
+  background: Color;
+  text: Color;
+  colors: Record<string, Color>;
+}
+
+/**
+ * The complete theme specification.
+ */
+export interface Theme {
+  hues: Record<string, number>;
+  colors: Record<string, Color>;
+  light: Palette;
+  dark: Palette;
+}
+
+/**
+ * Supported color appearance modes.
+ */
+export type Mode = "system" | "light" | "dark";
+
+/**
+ * UI Engine Configuration.
+ */
+export interface UI {
+  theme: Theme;
+  mode: Mode;
+  output_dir?: string;
+}
+
+/**
+ * Root configuration structure for a Seyuna project.
+ */
+export interface SeyunaConfig {
+  license?: string;
+  ui?: UI;
+}
+
+// Shared types to avoid circular dependencies between config.ts and parser.ts
+
+export type FunctionMap = Record<string, (context: PluginContext, ...args: string[]) => string>;
+
+export interface PluginOptions {
+  configPath?: string;
+  modeAttribute?: string;
+  strict?: boolean;
+  config?: SeyunaConfig;
+  functions?: FunctionMap;
+}
+
+export interface PluginContext {
+  config: SeyunaConfig;
+  options: Required<PluginOptions>;
+  functions: FunctionMap;
+}