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

package/src/helpers.ts

@@ -0,0 +1,74 @@
+import { Rule, ChildNode, Declaration, AtRule } from "postcss";
+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,
+  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 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
+): Rule[] {
+  const nodes = atRule.nodes ?? [];
+  const generatedRules: Rule[] = [];
+
+  for (const name of names) {
+    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);
+    });
+
+    if (rule.nodes.length) generatedRules.push(rule);
+  }
+
+  return generatedRules;
+}

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,26 @@
 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,
+    mixins: {},
+  };
 
   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 +28,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,251 @@
+import { describe, it, expect } from 'vitest';
+import postcss from 'postcss';
+import plugin from '../src/index';
+
+const mockConfig = {
+  ui: {
+    theme: {
+      hues: {
+        primary: "200",
+        secondary: "100"
+      },
+      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 = {}) {
+  return postcss([plugin(opts)]).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', async () => {
+    const input = '.test { color: alpha(oklch(0.5 0.1 200 / 1), 0.5); }';
+    const output = 'color: oklch(0.5 0.1 200 / 0.5)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes lighten() function', async () => {
+    const input = '.test { color: lighten(oklch(0.5 0.1 200 / 1), 0.1); }';
+    const output = 'color: oklch(0.6 0.1 200 / 1)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes lighten() with CSS variables', async () => {
+    const input = '.test { color: lighten(oklch(var(--l) 0.1 200 / 1), 0.1); }';
+    const output = 'color: oklch(calc(var(--l) + 0.1) 0.1 200 / 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 mixins using @define-mixin and @apply', async () => {
+    const input = `
+      @define-mixin btn {
+        padding: 1rem;
+        border-radius: 4px;
+      }
+      .primary-btn {
+        @apply btn;
+        color: white;
+      }
+    `;
+    const result = await run(input);
+    expect(result.css).toContain('.primary-btn {');
+    expect(result.css).toContain('padding: 1rem');
+    expect(result.css).toContain('border-radius: 4px');
+    expect(result.css).toContain('color: white');
+    expect(result.css).not.toContain('@define-mixin');
+  });
+
+  it('processes @if directive with literal', async () => {
+    const input = `
+      .test {
+        @if (true) {
+          color: red;
+        }
+        @if (false) {
+          color: blue;
+        }
+      }
+    `;
+    const result = await run(input);
+    expect(result.css).toContain('color: red');
+    expect(result.css).not.toContain('color: blue');
+  });
+
+  it('processes @if directive with theme()', async () => {
+    const input = `
+      .glass {
+        @if (theme(ui.features.glass)) {
+          backdrop-filter: blur(10px);
+        }
+      }
+    `;
+    const config = {
+      ui: {
+        features: {
+          glass: "true"
+        }
+      }
+    };
+    const result = await run(input, { config });
+    expect(result.css).toContain('backdrop-filter: blur(10px)');
+  });
+
+  it('resolves custom media tokens', async () => {
+    const input = `
+      @media (--tablet) {
+        .sidebar { display: block; }
+      }
+    `;
+    const config = {
+      media: {
+        tablet: "(min-width: 768px)"
+      }
+    };
+    const result = await run(input, { config });
+    expect(result.css).toContain('@media (min-width: 768px)');
+  });
+
+  it('handles @custom-media directive', async () => {
+    const input = `
+      @custom-media --mobile (max-width: 480px);
+      @media (--mobile) {
+        .full-width { width: 100%; }
+      }
+    `;
+    const result = await run(input);
+    expect(result.css).toContain('@media (max-width: 480px)');
+  });
+
+  it('processes alpha() with color name', async () => {
+    const input = '.test { color: alpha(primary, 0.5); }';
+    const output = 'color: oklch(var(--primary-lightness) var(--primary-chroma) var(--primary-hue) / 0.5)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes lighten() with color name', async () => {
+    const input = '.test { color: lighten(primary, 0.1); }';
+    const output = 'color: oklch(calc(var(--primary-lightness) + 0.1) var(--primary-chroma) var(--primary-hue) / 1)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes darken() with color name', async () => {
+    const input = '.test { color: darken(primary, 0.1); }';
+    const output = 'color: oklch(calc(var(--primary-lightness) - 0.1) var(--primary-chroma) var(--primary-hue) / 1)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes contrast() with color name', 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('processes alpha() with standard color (sc)', async () => {
+    const input = '.test { color: alpha(primary, 0.5); }';
+    // 'primary' is in hues in mockConfig, so it should use var(--lightness) and var(--chroma)
+    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 (fc)', async () => {
+    const input = '.test { color: alpha(surface, 0.5); }';
+    // 'surface' is in light.colors/dark.colors in mockConfig, so it should use its own lightness/chroma
+    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 nested functions: contrast(fc(white))', async () => {
+    const input = '.test { color: contrast(fc(white)); }';
+    // fc(white) -> oklch(var(--white-lightness) ...)
+    // contrast extracts lightness -> var(--white-lightness)
+    const output = 'color: oklch(calc((var(--white-lightness) - 0.6) * -1000) 0 0)';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain(output);
+  });
+
+  it('processes nested functions: alpha(sc(primary), 0.5)', async () => {
+    const input = '.test { color: alpha(sc(primary), 0.5); }';
+    // sc(primary) -> oklch(var(--lightness) var(--chroma) var(--primary-hue) / 1)
+    // alpha(..., 0.5) extracts components and reapplies alpha
+    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 multiple nested functions: contrast(alpha(fc(surface), 1))', async () => {
+    const input = '.test { color: contrast(alpha(fc(surface), 1)); }';
+    // inner-most: fc(surface) -> oklch(var(--surface-lightness) ...)
+    // next: alpha(..., 1) -> oklch(var(--surface-lightness) ...)
+    // outer: contrast extracts lightness -> var(--surface-lightness)
+    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);
+  });
+});

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
   },

package/dist/at-rules/dark.d.ts

@@ -1,23 +0,0 @@
-import { AtRule } from "postcss";
-/**
- * Custom PostCSS plugin handler for `@dark` at-rules.
- *
- * Transforms:
- *
- *   @dark {
- *     color: white;
- *   }
- *
- * Into:
- *
- *   @media (prefers-color-scheme: dark) {
- *     [data-mode="system"] & {
- *       color: white;
- *     }
- *   }
- *
- *   [data-mode="dark"] & {
- *     color: white;
- *   }
- */
-export default function dark(atRule: AtRule): void;

package/dist/at-rules/dark.js

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = dark;
-const postcss_1 = require("postcss");
-/**
- * Custom PostCSS plugin handler for `@dark` at-rules.
- *
- * Transforms:
- *
- *   @dark {
- *     color: white;
- *   }
- *
- * Into:
- *
- *   @media (prefers-color-scheme: dark) {
- *     [data-mode="system"] & {
- *       color: white;
- *     }
- *   }
- *
- *   [data-mode="dark"] & {
- *     color: white;
- *   }
- */
-function dark(atRule) {
-    const clonedNodes = [];
-    // Clone all child nodes inside the @dark block
-    // (so we can reuse them in both generated rules).
-    atRule.each((node) => {
-        clonedNodes.push(node.clone());
-    });
-    /**
-     * Rule 1: [data-mode="dark"] & { ... }
-     *
-     * This applies the styles when the user explicitly sets dark mode.
-     */
-    const darkRule = new postcss_1.Rule({
-        selector: `[data-mode="dark"] &`,
-    });
-    clonedNodes.forEach((node) => darkRule.append(node.clone()));
-    /**
-     * Rule 2: @media (prefers-color-scheme: dark) { [data-mode="system"] & { ... } }
-     *
-     * This applies the styles only when:
-     *   - The user’s OS prefers dark mode
-     *   - AND the app is in "system" mode (i.e. follow system preference)
-     */
-    const mediaAtRule = new postcss_1.AtRule({
-        name: "media",
-        params: "(prefers-color-scheme: dark)",
-    });
-    // Wrap cloned rules under `[data-mode="system"]`
-    const systemRule = new postcss_1.Rule({
-        selector: `[data-mode="system"] &`,
-    });
-    clonedNodes.forEach((node) => systemRule.append(node.clone()));
-    // Nest `[data-mode="system"]` inside the @media block
-    mediaAtRule.append(systemRule);
-    /**
-     * Replace the original @dark rule in the CSS tree
-     * with our two new generated rules.
-     */
-    atRule.replaceWith(mediaAtRule, darkRule);
-}

package/dist/at-rules/light.d.ts

@@ -1,23 +0,0 @@
-import { AtRule } from "postcss";
-/**
- * Custom PostCSS plugin handler for `@light` at-rules.
- *
- * Transforms:
- *
- *   @light {
- *     color: white;
- *   }
- *
- * Into:
- *
- *   @media (prefers-color-scheme: light) {
- *     [data-mode="system"] & {
- *       color: white;
- *     }
- *   }
- *
- *   [data-mode="light"] & {
- *     color: white;
- *   }
- */
-export default function light(atRule: AtRule): void;

package/dist/at-rules/light.js

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = light;
-const postcss_1 = require("postcss");
-/**
- * Custom PostCSS plugin handler for `@light` at-rules.
- *
- * Transforms:
- *
- *   @light {
- *     color: white;
- *   }
- *
- * Into:
- *
- *   @media (prefers-color-scheme: light) {
- *     [data-mode="system"] & {
- *       color: white;
- *     }
- *   }
- *
- *   [data-mode="light"] & {
- *     color: white;
- *   }
- */
-function light(atRule) {
-    const clonedNodes = [];
-    // Clone all child nodes inside the @light block
-    // (so we can reuse them in both generated rules).
-    atRule.each((node) => {
-        clonedNodes.push(node.clone());
-    });
-    /**
-     * Rule 1: [data-mode="light"] & { ... }
-     *
-     * This applies the styles when the user explicitly sets light mode.
-     */
-    const lightRule = new postcss_1.Rule({
-        selector: `[data-mode="light"] &`,
-    });
-    clonedNodes.forEach((node) => lightRule.append(node.clone()));
-    /**
-     * Rule 2: @media (prefers-color-scheme: light) { [data-mode="system"] & { ... } }
-     *
-     * This applies the styles only when:
-     *   - The user’s OS prefers light mode
-     *   - AND the app is in "system" mode (i.e. follow system preference)
-     */
-    const mediaAtRule = new postcss_1.AtRule({
-        name: "media",
-        params: "(prefers-color-scheme: light)",
-    });
-    // Wrap cloned rules under `[data-mode="system"]`
-    const systemRule = new postcss_1.Rule({
-        selector: `[data-mode="system"] &`,
-    });
-    clonedNodes.forEach((node) => systemRule.append(node.clone()));
-    // Nest `[data-mode="system"]` inside the @media block
-    mediaAtRule.append(systemRule);
-    /**
-     * Replace the original @light rule in the CSS tree
-     * with our two new generated rules.
-     */
-    atRule.replaceWith(mediaAtRule, lightRule);
-}

package/dist/functions/spacing.d.ts

@@ -1 +0,0 @@
-export default function spacing(multiplier: string): string;