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

package/src/config.ts

@@ -0,0 +1,71 @@
+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;
+}
+
+export interface PluginContext {
+  config: SeyunaConfig;
+  options: Required<PluginOptions>;
+  functions: FunctionMap;
+}
+
+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,90 @@
-export function sc(
-  name: string,
-  alpha?: string,
-  lightness?: string,
-  chroma?: string
-) {
-  let a: string = "1";
-  let l: string = "var(--lightness)";
-  let c: string = "var(--chroma)";
+import { PluginContext } from "../config";
+
+/**
+ * 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 (alpha && alpha !== "null") {
-    a = alpha;
+  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 (lightness && lightness !== "null") {
-    l = lightness;
+  if (isStandard) {
+    return {
+      l: "var(--lightness)",
+      c: "var(--chroma)",
+      h: `var(--${color}-hue)`,
+    };
   }
 
-  if (chroma && chroma !== "null") {
-    c = chroma;
+  if (isFixed) {
+    return {
+      l: `var(--${color}-lightness)`,
+      c: `var(--${color}-chroma)`,
+      h: `var(--${color}-hue)`,
+    };
   }
 
-  return `oklch(${l} ${c} var(--${name}-hue) / ${a})`;
+  throw new Error(`Color '${color}' not found in seyuna.json`);
+}
+
+export function sc(
+  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 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)`;
+  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 (alpha && alpha !== "null") {
-    a = alpha;
-  }
+  return `oklch(${l} ${c} ${vars.h} / ${a})`;
+}
 
-  if (lightness && lightness !== "null") {
-    l = lightness;
-  }
+export function alpha(context: PluginContext, color: string, value: string) {
+  const { l, c, h } = getColorVariables(context, color);
+  return `oklch(${l} ${c} ${h} / ${value})`;
+}
 
-  if (chroma && chroma !== "null") {
-    c = chroma;
-  }
+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}-hue) / ${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,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();
+}

package/src/plugin.ts

@@ -1,34 +1,25 @@
 import { PluginCreator } from "postcss";
 import { functions } from "./functions";
 import { atRuleHandlers } from "./at-rules";
+import { loadConfig, PluginOptions as ConfigOptions, PluginContext } from "./config";
+import { processFunctions, FunctionMap } from "./parser";
 
-export interface PluginOptions {
-  functions?: Record<string, (...args: string[]) => string>;
-}
-
-export const dynamicFunctionsPlugin: PluginCreator<PluginOptions> = (
+export const dynamicFunctionsPlugin: PluginCreator<ConfigOptions> = (
   opts = {}
 ) => {
-  const fnMap = { ...functions, ...opts.functions };
+  const { config, options } = loadConfig(opts);
+  const fnMap: FunctionMap = { ...functions, ...opts.functions };
+  const context: PluginContext = {
+    config,
+    options,
+    functions: fnMap,
+  };
 
   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);
-        });
-      }
-
-      decl.value = value;
+      decl.value = processFunctions(decl.value, fnMap, decl, context);
     },
 
     // Override AtRule handler to ensure ordered execution
@@ -36,7 +27,7 @@ export const dynamicFunctionsPlugin: PluginCreator<PluginOptions> = (
       // Iterate over handlers in order (array) instead of object spread
       for (const { name, handler } of atRuleHandlers) {
         if (atRule.name === name) {
-          handler(atRule);
+          handler(atRule, context);
         }
       }
     },

package/src/types.ts

@@ -1,19 +1 @@
-export interface SeyunaConfig {
-  ui: {
-    theme: {
-      hues: Record<string, number>;
-      light: {
-        colors: Record<string, Color>;
-      };
-      dark: {
-        colors: Record<string, Color>;
-      };
-    };
-  };
-}
-
-type Color = {
-  lightness: number;
-  chroma: number;
-  hue: number;
-};
+export type { Config as SeyunaConfig, Color } from "@seyuna/cli/types";

package/tests/plugin.test.ts

@@ -0,0 +1,143 @@
+import { describe, it, expect } from 'vitest';
+import postcss from 'postcss';
+import plugin from '../src/index';
+
+const mockConfig = {
+  ui: {
+    theme: {
+      hues: {
+        primary: "200",
+        secondary: "100"
+      },
+      colors: {
+        white: { lightness: 1, chroma: 0, hue: 0 },
+        black: { lightness: 0, chroma: 0, hue: 0 }
+      },
+      light: {
+        lightness: 0.66,
+        colors: {
+          surface: { lightness: 1, chroma: 0, hue: 0 }
+        }
+      },
+      dark: {
+        lightness: 0.66,
+        colors: {
+          surface: { lightness: 0, chroma: 0, hue: 0 }
+        }
+      },
+      breakpoints: {
+        tablet: "48rem"
+      }
+    }
+  }
+};
+
+async function run(input: string, opts: any = {}) {
+  const mergedOpts = { config: mockConfig, ...opts };
+  return postcss([plugin(mergedOpts)]).process(input, { from: undefined });
+}
+
+describe('Seyuna PostCSS Plugin', () => {
+  it('processes sc() function', async () => {
+    const input = '.test { color: sc(primary); }';
+    const output = '.test { color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 1)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes sc() with alpha', async () => {
+    const input = '.test { color: sc(primary, 0.5); }';
+    const output = '.test { color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 0.5)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes alpha() function with color name', async () => {
+    const input = '.test { color: alpha(primary, 0.5); }';
+    const output = 'color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 0.5)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes lighten() function with color name', async () => {
+    const input = '.test { color: lighten(primary, 0.1); }';
+    const output = 'color: oklch(calc(var(--lightness) + 0.1) var(--chroma) var(--primary-hue) / 1)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes darken() function with color name', async () => {
+    const input = '.test { color: darken(primary, 0.1); }';
+    const output = 'color: oklch(calc(var(--lightness) - 0.1) var(--chroma) var(--primary-hue) / 1)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes theme() function', async () => {
+    // We pass the config via opts for testing
+    const input = '.test { border-radius: theme(ui.theme.breakpoints.tablet); }';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain('.test { border-radius: 48rem');
+  });
+
+  it('processes @xs container at-rule', async () => {
+    const input = '@xs { .box { color: red; } }';
+    const result = await run(input);
+    expect(result.css).toContain('@container (min-width: 20rem)');
+    expect(result.css).toContain('.box { color: red');
+  });
+
+  it('processes @light at-rule', async () => {
+    const input = '@light { .test { color: black; } }';
+    const result = await run(input);
+    expect(result.css).toContain('@media (prefers-color-scheme: light)');
+    expect(result.css).toContain('[data-mode="system"] &');
+    expect(result.css).toContain('[data-mode="light"] &');
+  });
+
+  it('processes alpha() with standard color', async () => {
+    const input = '.test { color: alpha(primary, 0.5); }';
+    const output = 'color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 0.5)';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain(output);
+  });
+
+  it('processes alpha() with fixed color', async () => {
+    const input = '.test { color: alpha(surface, 0.5); }';
+    const output = 'color: oklch(var(--surface-lightness) var(--surface-chroma) var(--surface-hue) / 0.5)';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain(output);
+  });
+
+  it('processes contrast() with fixed color', async () => {
+    const input = '.test { color: contrast(surface); }';
+    const output = 'color: oklch(calc((var(--surface-lightness) - 0.6) * -1000) 0 0)';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain(output);
+  });
+
+  it('processes contrast() with standard color', async () => {
+    const input = '.test { color: contrast(primary); }';
+    const output = 'color: oklch(calc((var(--lightness) - 0.6) * -1000) 0 0)';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain(output);
+  });
+
+  it('throws error for unknown standard color in strict mode', async () => {
+    const input = '.test { color: sc(unknown); }';
+    await expect(run(input, { config: mockConfig, strict: true }))
+      .rejects.toThrow(/Standard color 'unknown' not found/);
+  });
+
+  it('throws error for unknown fixed color in strict mode', async () => {
+    const input = '.test { color: fc(unknown); }';
+    await expect(run(input, { config: mockConfig, strict: true }))
+      .rejects.toThrow(/Fixed color 'unknown' not found/);
+  });
+
+  it('throws error for unknown color in alpha() in strict mode', async () => {
+    const input = '.test { color: alpha(unknown, 0.5); }';
+    await expect(run(input, { config: mockConfig, strict: true }))
+      .rejects.toThrow(/Color 'unknown' not found in seyuna.json/);
+  });
+});

package/tsconfig.json

@@ -1,12 +1,12 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "module": "CommonJS",
+    "module": "ES2020",
     "lib": ["ES2020"],
     "declaration": true,
     "outDir": "dist",
     "strict": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "skipLibCheck": true
   },