@seyuna/postcss 1.0.0-canary.14 → 1.0.0-canary.15

package/src/at-rules/container.ts

@@ -1,4 +1,5 @@
 import { AtRule, ChildNode } from "postcss";
+import { PluginContext } from "../config";
 
 /**
  * Custom PostCSS plugin handler for responsive at-rules.
@@ -16,9 +17,11 @@ import { AtRule, ChildNode } from "postcss";
  *   }
  *
  */
-export default function container(atRule: AtRule) {
-  // Map of shortcuts → container widths
-  const breakpoints: Record<string, string> = {
+export default function container(atRule: AtRule, context: PluginContext) {
+  const { config } = context;
+  
+  // Default breakpoints
+  const defaultBreakpoints: Record<string, string> = {
     xs: "20rem",
     sm: "40rem",
     md: "48rem",
@@ -27,6 +30,12 @@ export default function container(atRule: AtRule) {
     "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];
 
@@ -38,6 +47,7 @@ export default function container(atRule: AtRule) {
     const containerAtRule = new AtRule({
       name: "container",
       params: `(min-width: ${minWidth})`,
+      source: atRule.source,
     });
 
     clonedNodes.forEach((node) => containerAtRule.append(node));

package/src/at-rules/custom-media.ts

@@ -0,0 +1,50 @@
+import { AtRule } from "postcss";
+import { PluginContext } from "../config";
+
+/**
+ * Global store for CSS-defined custom media (if needed)
+ * However, we primarily use the config.
+ */
+
+/**
+ * Handler for @media at-rules to resolve custom media tokens
+ */
+export function resolveCustomMedia(atRule: AtRule, context: PluginContext) {
+  const { config } = context;
+  const mediaTokens = (config as any).media || {};
+
+  // Regex to find --tokens anywhere
+  let params = atRule.params;
+  const tokenRegex = /--[a-zA-Z0-9\-_]+/g;
+
+  params = params.replace(tokenRegex, (match) => {
+    const tokenName = match.slice(2);
+    if (mediaTokens[tokenName]) {
+      return mediaTokens[tokenName];
+    }
+    return match;
+  });
+
+  // Clean up double parentheses like ((...)) if any
+  params = params.replace(/\(\((.+)\)\)/g, '($1)');
+
+  atRule.params = params;
+}
+
+/**
+ * [Future-proofing] Handler for @custom-media --name query
+ * Adds to the config-like store for the current run
+ */
+export function defineCustomMedia(atRule: AtRule, context: PluginContext) {
+  const match = atRule.params.match(/^(--[a-zA-Z0-9\-_]+)\s+(.+)$/);
+  if (match) {
+    const name = match[1].slice(2);
+    const query = match[2];
+    
+    if (!(context.config as any).media) {
+       (context.config as any).media = {};
+    }
+    (context.config as any).media[name] = query;
+  }
+  atRule.remove();
+}

package/src/at-rules/index.ts

@@ -1,18 +1,25 @@
-// atRuleHandlers.ts
-import dark from "./dark";
-import light from "./light";
-import container from "./container";
+import { AtRule } from "postcss";
 import { eachStandardColor, eachFixedColor } from "./color";
-import type { AtRule } from "postcss";
+import container from "./container";
+import { light, dark } from "./color-scheme";
+import { defineMixin, applyMixin } from "./mixin";
+import { conditional } from "./conditional";
+import { resolveCustomMedia, defineCustomMedia } from "./custom-media";
+import { PluginContext } from "../config";
 
 // Each handler has a name (matches the at-rule) and the function
 export interface AtRuleHandler {
   name: string;
-  handler: (atRule: AtRule) => void;
+  handler: (atRule: AtRule, context: PluginContext) => void;
 }
 
 // Ordered array ensures execution order
 export const atRuleHandlers: AtRuleHandler[] = [
+  { name: "define-mixin", handler: defineMixin },
+  { name: "custom-media", handler: defineCustomMedia },
+  { name: "apply", handler: applyMixin },
+  { name: "if", handler: conditional },
+  { name: "media", handler: resolveCustomMedia },
   { name: "each-standard-color", handler: eachStandardColor }, // first
   { name: "each-fixed-color", handler: eachFixedColor },
   { name: "light", handler: light },

package/src/at-rules/mixin.ts

@@ -0,0 +1,46 @@
+import { AtRule, ChildNode } from "postcss";
+import { PluginContext } from "../config";
+import { reportError } from "../errors";
+
+/**
+ * Handler for @define-mixin [name] { ... }
+ */
+export function defineMixin(atRule: AtRule, context: PluginContext) {
+  const name = atRule.params.trim();
+  if (!name) {
+    reportError("Mixin name is required", atRule, context);
+    return;
+  }
+
+  // Store the nodes (cloned)
+  context.mixins[name] = atRule.nodes?.map(n => n.clone()) || [];
+  
+  // Remove the at-rule from the output
+  atRule.remove();
+}
+
+/**
+ * Handler for @apply [name]
+ */
+export function applyMixin(atRule: AtRule, context: PluginContext) {
+  const name = atRule.params.trim();
+  if (!name) {
+    reportError("Mixin name is required for @apply", atRule, context);
+    return;
+  }
+
+  const mixinNodes = context.mixins[name];
+  if (!mixinNodes) {
+    reportError(`Mixin "${name}" not found`, atRule, context);
+    return;
+  }
+
+  // Inject the nodes, ensuring they have the correct source for mapping
+  const nodesToInject = mixinNodes.map(n => {
+    const cloned = n.clone();
+    cloned.source = atRule.source;
+    return cloned;
+  });
+
+  atRule.replaceWith(...nodesToInject);
+}

package/src/config.ts

@@ -0,0 +1,74 @@
+import fs from 'fs';
+import path from 'path';
+import { SeyunaConfig } from './types';
+import { FunctionMap } from './parser';
+
+export interface PluginOptions {
+  configPath?: string;
+  modeAttribute?: string;
+  strict?: boolean;
+  config?: SeyunaConfig;
+  functions?: FunctionMap;
+}
+
+import { ChildNode } from 'postcss';
+
+export interface PluginContext {
+  config: SeyunaConfig;
+  options: Required<PluginOptions>;
+  functions: FunctionMap;
+  mixins: Record<string, ChildNode[]>;
+}
+
+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 './config';
+
+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,49 +1,143 @@
+import { PluginContext } from "../config";
+
+/**
+ * Utility to parse an oklch string and return its parts
+ */
+function parseOklch(color: string) {
+  const match = color.match(/oklch\(([^ ]+) ([^ ]+) ([^ /]+)(?: \/ ([^)]+))?\)/);
+  if (!match) return null;
+  return {
+    l: match[1],
+    c: match[2],
+    h: match[3],
+    a: match[4] || "1",
+  };
+}
+
 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)";
-
-  if (alpha && alpha !== "null") {
-    a = alpha;
-  }
-
-  if (lightness && lightness !== "null") {
-    l = lightness;
-  }
+  let a: string = alpha && alpha !== "null" ? alpha : "1";
+  let l: string = lightness && lightness !== "null" ? lightness : "var(--lightness)";
+  let c: string = chroma && chroma !== "null" ? chroma : "var(--chroma)";
+  let h: string = `var(--${name}-hue)`;
 
-  if (chroma && chroma !== "null") {
-    c = chroma;
-  }
-
-  return `oklch(${l} ${c} var(--${name}-hue) / ${a})`;
+  return `oklch(${l} ${c} ${h} / ${a})`;
 }
 
 export function fc(
+  context: PluginContext,
   name: string,
   alpha?: string,
   lightness?: string,
   chroma?: string
 ) {
-  let a: string = "1";
-  let l: string = `var(--${name}-lightness)`;
-  let c: string = `var(--${name}-chroma)`;
+  let a: string = alpha && alpha !== "null" ? alpha : "1";
+  let l: string = lightness && lightness !== "null" ? lightness : `var(--${name}-lightness)`;
+  let c: string = chroma && chroma !== "null" ? chroma : `var(--${name}-chroma)`;
+  let h: string = `var(--${name}-hue)`;
+
+  return `oklch(${l} ${c} ${h} / ${a})`;
+}
+
+/**
+ * Resolves a color name to its CSS variables based on its type (standard or fixed)
+ */
+function getColorVariables(context: PluginContext, color: string) {
+  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 (alpha && alpha !== "null") {
-    a = alpha;
+  // Check if it's a standard color (sc)
+  if (color in hues) {
+    return {
+      l: "var(--lightness)",
+      c: "var(--chroma)",
+      h: `var(--${color}-hue)`,
+    };
   }
 
-  if (lightness && lightness !== "null") {
-    l = lightness;
+  // Check if it's a fixed color (fc)
+  if (color in colors || color in lightColors || color in darkColors) {
+    return {
+      l: `var(--${color}-lightness)`,
+      c: `var(--${color}-chroma)`,
+      h: `var(--${color}-hue)`,
+    };
   }
 
-  if (chroma && chroma !== "null") {
-    c = chroma;
+  // Fallback to assume it's a fixed color if unknown but used as a name
+  return {
+    l: `var(--${color}-lightness)`,
+    c: `var(--${color}-chroma)`,
+    h: `var(--${color}-hue)`,
+  };
+}
+
+export function alpha(context: PluginContext, color: string, value: string) {
+  const parsed = parseOklch(color);
+  if (parsed) {
+    return `oklch(${parsed.l} ${parsed.c} ${parsed.h} / ${value})`;
+  }
+
+  const { l, c, h } = getColorVariables(context, color);
+  return `oklch(${l} ${c} ${h} / ${value})`;
+}
+
+export function lighten(context: PluginContext, color: string, amount: string) {
+  const parsed = parseOklch(color);
+  
+  if (parsed) {
+    if (parsed.l.startsWith('var(')) {
+      return `oklch(calc(${parsed.l} + ${amount}) ${parsed.c} ${parsed.h} / ${parsed.a})`;
+    }
+    
+    const lValue = parseFloat(parsed.l);
+    const amtValue = parseFloat(amount);
+    return `oklch(${Math.min(1, lValue + amtValue)} ${parsed.c} ${parsed.h} / ${parsed.a})`;
+  }
+
+  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 parsed = parseOklch(color);
+
+  if (parsed) {
+    if (parsed.l.startsWith('var(')) {
+      return `oklch(calc(${parsed.l} - ${amount}) ${parsed.c} ${parsed.h} / ${parsed.a})`;
+    }
+
+    const lValue = parseFloat(parsed.l);
+    const amtValue = parseFloat(amount);
+    return `oklch(${Math.max(0, lValue - amtValue)} ${parsed.c} ${parsed.h} / ${parsed.a})`;
+  }
+
+  const { l, c, h } = getColorVariables(context, color);
+  return `oklch(calc(${l} - ${amount}) ${c} ${h} / 1)`;
+}
+
+export function contrast(context: PluginContext, color: string) {
+  const parsed = parseOklch(color);
+  let l: string;
+
+  if (parsed) {
+    l = parsed.l;
+  } else {
+    const vars = getColorVariables(context, color);
+    l = vars.l;
   }
 
-  return `oklch(${l} ${c} var(--${name}-hue) / ${a})`;
+  // Dynamic CSS contrast logic:
+  // (L - 0.6) * -1000 will be:
+  // - very negative if L > 0.6 (clamped to 0 / black)
+  // - very positive if L < 0.6 (clamped to 1 / white)
+  return `oklch(calc((${l} - 0.6) * -1000) 0 0)`;
 }

package/src/functions/index.ts

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

package/src/functions/theme.ts

@@ -0,0 +1,20 @@
+import { PluginContext } from "../config";
+
+/**
+ * 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

@@ -1,11 +1,18 @@
 import { Rule, ChildNode, Declaration, AtRule } from "postcss";
-import { fc, sc } from "./functions/color";
+import { processFunctions } from "./parser";
+import { PluginContext } from "./config";
 
 /**
  * Helper: clone nodes and replace {name} placeholders safely
  * Returns only valid Rules or Declarations (never raw AtRules)
  */
-export function cloneNodes(nodes: ChildNode[], name: string): ChildNode[] {
+export function cloneNodes(
+  nodes: ChildNode[],
+  name: string,
+  context: PluginContext
+): ChildNode[] {
+  const { functions: fnMap } = context;
+  
   return nodes.flatMap((node) => {
     const cloned = node.clone();
 
@@ -13,22 +20,9 @@ export function cloneNodes(nodes: ChildNode[], name: string): ChildNode[] {
       const decl = cloned as Declaration;
       let value = decl.value.replace(/\{name\}/g, name);
 
-      if (/sc\(/.test(value)) {
-        const args = value
-          .match(/sc\(([^)]*)\)/)?.[1]
-          .split(",")
-          .map((s) => s.trim());
-        if (args) value = sc(...(args as [string, string?, string?, string?]));
-      }
-      if (/fc\(/.test(value)) {
-        const args = value
-          .match(/fc\(([^)]*)\)/)?.[1]
-          .split(",")
-          .map((s) => s.trim());
-        if (args) value = fc(...(args as [string, string?, string?, string?]));
-      }
-
-      decl.value = value;
+      // Process functions using the robust parser
+      decl.value = processFunctions(value, fnMap, decl, context);
+      
       return decl;
     }
 
@@ -39,7 +33,7 @@ export function cloneNodes(nodes: ChildNode[], name: string): ChildNode[] {
       rule.selector = rule.selector.replace(/\{name\}/g, name);
 
       // Recursively clone child nodes and only keep valid rules/decls
-      rule.nodes = cloneNodes(rule.nodes || [], name).filter(
+      rule.nodes = cloneNodes(rule.nodes || [], name, context).filter(
         (n) => n.type === "rule" || n.type === "decl"
       );
 
@@ -55,13 +49,20 @@ export function cloneNodes(nodes: ChildNode[], name: string): ChildNode[] {
 /**
  * Generate CSS rules from a list of names
  */
-export function generateRules(names: string[], atRule: AtRule): Rule[] {
+export function generateRules(
+  names: string[],
+  atRule: AtRule,
+  context: PluginContext
+): Rule[] {
   const nodes = atRule.nodes ?? [];
   const generatedRules: Rule[] = [];
 
   for (const name of names) {
-    const rule = new Rule({ selector: `&.${name}` });
-    cloneNodes(nodes, name).forEach((n) => {
+    const rule = new Rule({
+      selector: `&.${name}`,
+      source: atRule.source,
+    });
+    cloneNodes(nodes, name, context).forEach((n) => {
       if (n.type === "rule" && n.selector && n.nodes?.length) rule.append(n);
       if (n.type === "decl") rule.append(n);
     });

package/src/index.ts

@@ -2,7 +2,9 @@ import { dynamicFunctionsPlugin } from './plugin';
 import { functions } from './functions';
 
 // 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,80 @@
+import valueParser from 'postcss-value-parser';
+import { Node } from 'postcss';
+import { PluginContext } from './config';
+import { reportError } from './errors';
+
+export type FunctionMap = Record<string, (context: PluginContext, ...args: string[]) => string>;
+
+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();
+}