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

package/dist/config.d.ts

@@ -0,0 +1,20 @@
+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[]>;
+}
+export declare function loadConfig(options?: PluginOptions): {
+    config: SeyunaConfig;
+    options: Required<PluginOptions>;
+};

package/dist/config.js

@@ -0,0 +1,47 @@
+import fs from 'fs';
+import path from 'path';
+const DEFAULT_OPTIONS = {
+    configPath: 'seyuna.json',
+    modeAttribute: 'data-mode',
+    strict: false,
+    config: undefined,
+    functions: undefined,
+};
+let cachedConfig = null;
+let cachedConfigPath = null;
+export function loadConfig(options = {}) {
+    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: {} } } } },
+                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: {} } } } },
+            options: mergedOptions,
+        };
+    }
+}

package/dist/errors.d.ts

@@ -0,0 +1,7 @@
+import { Node } from 'postcss';
+import { PluginContext } from './config';
+export declare function reportError(message: string, node: Node, context: PluginContext, options?: {
+    word?: string;
+    index?: number;
+}): void;
+export declare function reportWarning(message: string, node: Node): void;

package/dist/errors.js

@@ -0,0 +1,14 @@
+export function reportError(message, node, context, options = {}) {
+    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, node) {
+    const result = node.root().toResult();
+    node.warn(result, `[Seyuna PostCSS] ${message}`);
+}

package/dist/functions/color.d.ts

@@ -1,2 +1,7 @@
-export declare function sc(name: string, alpha?: string, lightness?: string, chroma?: string): string;
-export declare function fc(name: string, alpha?: string, lightness?: string, chroma?: string): string;
+import { PluginContext } from "../config";
+export declare function sc(context: PluginContext, name: string, alpha?: string, lightness?: string, chroma?: string): string;
+export declare function fc(context: PluginContext, name: string, alpha?: string, lightness?: string, chroma?: string): string;
+export declare function alpha(context: PluginContext, color: string, value: string): string;
+export declare function lighten(context: PluginContext, color: string, amount: string): string;
+export declare function darken(context: PluginContext, color: string, amount: string): string;
+export declare function contrast(context: PluginContext, color: string): string;

package/dist/functions/color.js

@@ -1,34 +1,110 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.sc = sc;
-exports.fc = fc;
-function sc(name, alpha, lightness, chroma) {
-    let a = "1";
-    let l = "var(--lightness)";
-    let c = "var(--chroma)";
-    if (alpha && alpha !== "null") {
-        a = alpha;
+/**
+ * Utility to parse an oklch string and return its parts
+ */
+function parseOklch(color) {
+    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, name, alpha, lightness, chroma) {
+    let a = alpha && alpha !== "null" ? alpha : "1";
+    let l = lightness && lightness !== "null" ? lightness : "var(--lightness)";
+    let c = chroma && chroma !== "null" ? chroma : "var(--chroma)";
+    let h = `var(--${name}-hue)`;
+    return `oklch(${l} ${c} ${h} / ${a})`;
+}
+export function fc(context, name, alpha, lightness, chroma) {
+    let a = alpha && alpha !== "null" ? alpha : "1";
+    let l = lightness && lightness !== "null" ? lightness : `var(--${name}-lightness)`;
+    let c = chroma && chroma !== "null" ? chroma : `var(--${name}-chroma)`;
+    let h = `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, color) {
+    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 || {};
+    // Check if it's a standard color (sc)
+    if (color in hues) {
+        return {
+            l: "var(--lightness)",
+            c: "var(--chroma)",
+            h: `var(--${color}-hue)`,
+        };
+    }
+    // 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 (lightness && lightness !== "null") {
-        l = lightness;
+    // 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, color, value) {
+    const parsed = parseOklch(color);
+    if (parsed) {
+        return `oklch(${parsed.l} ${parsed.c} ${parsed.h} / ${value})`;
     }
-    if (chroma && chroma !== "null") {
-        c = chroma;
+    const { l, c, h } = getColorVariables(context, color);
+    return `oklch(${l} ${c} ${h} / ${value})`;
+}
+export function lighten(context, color, amount) {
+    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})`;
     }
-    return `oklch(${l} ${c} var(--${name}-hue) / ${a})`;
-}
-function fc(name, alpha, lightness, chroma) {
-    let a = "1";
-    let l = `var(--${name}-lightness)`;
-    let c = `var(--${name}-chroma)`;
-    if (alpha && alpha !== "null") {
-        a = alpha;
+    const { l, c, h } = getColorVariables(context, color);
+    return `oklch(calc(${l} + ${amount}) ${c} ${h} / 1)`;
+}
+export function darken(context, color, amount) {
+    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})`;
     }
-    if (lightness && lightness !== "null") {
-        l = lightness;
+    const { l, c, h } = getColorVariables(context, color);
+    return `oklch(calc(${l} - ${amount}) ${c} ${h} / 1)`;
+}
+export function contrast(context, color) {
+    const parsed = parseOklch(color);
+    let l;
+    if (parsed) {
+        l = parsed.l;
     }
-    if (chroma && chroma !== "null") {
-        c = chroma;
+    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/dist/functions/index.d.ts

@@ -1,2 +1,3 @@
-export type FnHandler = (...args: string[]) => string;
+import { PluginContext } from "../config";
+export type FnHandler = (context: PluginContext, ...args: string[]) => string;
 export declare const functions: Record<string, FnHandler>;

package/dist/functions/index.js

@@ -1,13 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.functions = void 0;
-const color_1 = require("./color");
-const spacing_1 = __importDefault(require("./spacing"));
-exports.functions = {
-    sc: color_1.sc,
-    fc: color_1.fc,
-    spacing: spacing_1.default,
+import { sc, fc, alpha, lighten, darken, contrast } from "./color";
+import { theme } from "./theme";
+export const functions = {
+    sc,
+    fc,
+    alpha,
+    lighten,
+    darken,
+    contrast,
+    theme,
 };

package/dist/functions/theme.d.ts

@@ -0,0 +1,6 @@
+import { PluginContext } from "../config";
+/**
+ * Accesses values from the Seyuna configuration using dot notation
+ * Example: theme(ui.theme.breakpoints.tablet)
+ */
+export declare function theme(context: PluginContext, path: string): string;

package/dist/functions/theme.js

@@ -0,0 +1,17 @@
+/**
+ * Accesses values from the Seyuna configuration using dot notation
+ * Example: theme(ui.theme.breakpoints.tablet)
+ */
+export function theme(context, path) {
+    const parts = path.split('.');
+    let current = 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/dist/helpers.d.ts

@@ -0,0 +1,11 @@
+import { Rule, ChildNode, AtRule } from "postcss";
+import { PluginContext } from "./config";
+/**
+ * Helper: clone nodes and replace {name} placeholders safely
+ * Returns only valid Rules or Declarations (never raw AtRules)
+ */
+export declare function cloneNodes(nodes: ChildNode[], name: string, context: PluginContext): ChildNode[];
+/**
+ * Generate CSS rules from a list of names
+ */
+export declare function generateRules(names: string[], atRule: AtRule, context: PluginContext): Rule[];

package/dist/helpers.js

@@ -0,0 +1,54 @@
+import { Rule } from "postcss";
+import { processFunctions } from "./parser";
+/**
+ * Helper: clone nodes and replace {name} placeholders safely
+ * Returns only valid Rules or Declarations (never raw AtRules)
+ */
+export function cloneNodes(nodes, name, context) {
+    const { functions: fnMap } = context;
+    return nodes.flatMap((node) => {
+        const cloned = node.clone();
+        if (cloned.type === "decl") {
+            const decl = cloned;
+            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;
+            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, atRule, context) {
+    const nodes = atRule.nodes ?? [];
+    const generatedRules = [];
+    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/dist/index.d.ts

@@ -1,5 +1,5 @@
-declare const _default: import("postcss").PluginCreator<import("./plugin").PluginOptions> & {
+declare const plugin: import("postcss").PluginCreator<import("./config").PluginOptions> & {
     postcss: boolean;
     functions: Record<string, import("./functions").FnHandler>;
 };
-export = _default;
+export default plugin;

package/dist/index.js

@@ -1,7 +1,8 @@
-"use strict";
-const plugin_1 = require("./plugin");
-const functions_1 = require("./functions");
-module.exports = Object.assign(plugin_1.dynamicFunctionsPlugin, {
+import { dynamicFunctionsPlugin } from './plugin';
+import { functions } from './functions';
+// CommonJS-friendly export
+const plugin = Object.assign(dynamicFunctionsPlugin, {
     postcss: true,
-    functions: functions_1.functions
+    functions
 });
+export default plugin;

package/dist/parser.d.ts

@@ -0,0 +1,4 @@
+import { Node } from 'postcss';
+import { PluginContext } from './config';
+export type FunctionMap = Record<string, (context: PluginContext, ...args: string[]) => string>;
+export declare function processFunctions(value: string, fnMap: FunctionMap, node: Node, context: PluginContext): string;

package/dist/parser.js

@@ -0,0 +1,59 @@
+import valueParser from 'postcss-value-parser';
+import { reportError } from './errors';
+export function processFunctions(value, fnMap, node, context) {
+    const parsed = valueParser(value);
+    // Helper to process nodes recursively (inner-first)
+    function processNode(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) {
+            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 = [];
+                        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.type = 'word';
+                            nodeIter.value = result;
+                            nodeIter.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/dist/plugin.d.ts

@@ -1,5 +1,3 @@
 import { PluginCreator } from "postcss";
-export interface PluginOptions {
-    functions?: Record<string, (...args: string[]) => string>;
-}
-export declare const dynamicFunctionsPlugin: PluginCreator<PluginOptions>;
+import { PluginOptions as ConfigOptions } from "./config";
+export declare const dynamicFunctionsPlugin: PluginCreator<ConfigOptions>;

package/dist/plugin.js

@@ -1,35 +1,30 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dynamicFunctionsPlugin = void 0;
-const functions_1 = require("./functions");
-const at_rules_1 = require("./at-rules");
-const dynamicFunctionsPlugin = (opts = {}) => {
-    const fnMap = { ...functions_1.functions, ...opts.functions };
+import { functions } from "./functions";
+import { atRuleHandlers } from "./at-rules";
+import { loadConfig } from "./config";
+import { processFunctions } from "./parser";
+export const dynamicFunctionsPlugin = (opts = {}) => {
+    const { config, options } = loadConfig(opts);
+    const fnMap = { ...functions, ...opts.functions };
+    const context = {
+        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) => 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
         AtRule(atRule) {
             // Iterate over handlers in order (array) instead of object spread
-            for (const { name, handler } of at_rules_1.atRuleHandlers) {
+            for (const { name, handler } of atRuleHandlers) {
                 if (atRule.name === name) {
-                    handler(atRule);
+                    handler(atRule, context);
                 }
             }
         },
     };
 };
-exports.dynamicFunctionsPlugin = dynamicFunctionsPlugin;
-exports.dynamicFunctionsPlugin.postcss = true;
+dynamicFunctionsPlugin.postcss = true;

package/dist/types.d.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 {};
+export type { Config as SeyunaConfig, Color } from "@seyuna/cli/types";

package/dist/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@seyuna/postcss",
-  "version": "1.0.0-canary.13",
+  "version": "1.0.0-canary.15",
   "description": "Seyuna UI's postcss plugin",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "dev": "tsc -w",
+    "test": "vitest",
+    "test:run": "vitest run"
   },
   "keywords": [
     "postcss",
@@ -17,6 +20,10 @@
     "type": "git",
     "url": "git+https://github.com/seyuna-corp/seyuna-postcss.git"
   },
+  "dependencies": {
+    "@seyuna/cli": "^1.0.0-canary.28",
+    "postcss-value-parser": "^4.2.0"
+  },
   "peerDependencies": {
     "postcss": "^8.5.6"
   },
@@ -26,11 +33,13 @@
     "@semantic-release/exec": "^7.1.0",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^11.0.3",
-    "@semantic-release/npm": "^12.0.2",
+    "@semantic-release/npm": "^13.1.3",
     "@semantic-release/release-notes-generator": "^14.0.3",
     "@types/node": "^20.0.0",
     "postcss": "^8.5.6",
-    "semantic-release": "^24.2.7",
-    "typescript": "^5.0.0"
+    "postcss-selector-parser": "^7.1.0",
+    "semantic-release": "^25.0.2",
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.16"
   }
 }

package/src/at-rules/color-scheme.ts

@@ -0,0 +1,52 @@
+import { Rule, AtRule, ChildNode } from "postcss";
+import { PluginContext } from "../config";
+
+/**
+ * Custom PostCSS plugin handler factory for `@light` and `@dark` at-rules.
+ */
+function createColorSchemeHandler(scheme: 'light' | 'dark') {
+  return (atRule: AtRule, context: PluginContext) => {
+    const { options } = context;
+    const modeAttribute = options.modeAttribute;
+    const clonedNodes: ChildNode[] = [];
+
+    // Clone all child nodes inside the block
+    atRule.each((node: ChildNode) => {
+      clonedNodes.push(node.clone());
+    });
+
+    /**
+     * Rule 1: [data-mode="scheme"] & { ... } (Explicit mode)
+     */
+    const explicitRule = new Rule({
+      selector: `[${modeAttribute}="${scheme}"] &`,
+      source: atRule.source,
+    });
+    clonedNodes.forEach((node) => explicitRule.append(node.clone()));
+
+    /**
+     * Rule 2: @media (prefers-color-scheme: scheme) { [data-mode="system"] & { ... } } (System preference)
+     */
+    const mediaAtRule = new AtRule({
+      name: "media",
+      params: `(prefers-color-scheme: ${scheme})`,
+      source: atRule.source,
+    });
+
+    const systemRule = new Rule({
+      selector: `[${modeAttribute}="system"] &`,
+      source: atRule.source,
+    });
+    clonedNodes.forEach((node) => systemRule.append(node.clone()));
+
+    mediaAtRule.append(systemRule);
+
+    /**
+     * Replace the original at-rule with the generated rules.
+     */
+    atRule.replaceWith(mediaAtRule, explicitRule);
+  };
+}
+
+export const light = createColorSchemeHandler('light');
+export const dark = createColorSchemeHandler('dark');