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

package/dist/errors.d.ts

@@ -0,0 +1,7 @@
+import { Node } from 'postcss';
+import { PluginContext } from './types.js';
+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 +1,7 @@
-export default function color(name: string, alpha?: string, lightness?: string, chroma?: string): string;
+import { PluginContext } from "../types.js";
+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,18 +1,63 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = color;
-function color(name, alpha, lightness, chroma) {
-    let a = "1";
-    let l = "var(--lightness)";
-    let c = "var(--chroma)";
-    if (alpha && alpha !== "null") {
-        a = alpha;
+/**
+ * Resolves a color name to its CSS variables based on its type (standard or fixed)
+ */
+function getColorVariables(context, color, type) {
+    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 (lightness && lightness !== "null") {
-        l = lightness;
+    if (type === 'fc' && !isFixed) {
+        throw new Error(`Fixed color '${color}' not found in seyuna.json colors`);
     }
-    if (chroma && chroma !== "null") {
-        c = chroma;
+    if (isStandard) {
+        return {
+            l: "var(--lightness)",
+            c: "var(--chroma)",
+            h: `var(--${color}-hue)`,
+        };
     }
-    return `oklch(${l} ${c} var(--${name}) / ${a})`;
+    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, name, alpha, lightness, 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;
+    return `oklch(${l} ${c} ${vars.h} / ${a})`;
+}
+export function fc(context, name, alpha, lightness, 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;
+    return `oklch(${l} ${c} ${vars.h} / ${a})`;
+}
+export function alpha(context, color, value) {
+    const { l, c, h } = getColorVariables(context, color);
+    return `oklch(${l} ${c} ${h} / ${value})`;
+}
+export function lighten(context, color, amount) {
+    const { l, c, h } = getColorVariables(context, color);
+    return `oklch(calc(${l} + ${amount}) ${c} ${h} / 1)`;
+}
+export function darken(context, color, amount) {
+    const { l, c, h } = getColorVariables(context, color);
+    return `oklch(calc(${l} - ${amount}) ${c} ${h} / 1)`;
+}
+export function contrast(context, color) {
+    const { l } = getColorVariables(context, color);
+    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 "../types.js";
+export type FnHandler = (context: PluginContext, ...args: string[]) => string;
 export declare const functions: Record<string, FnHandler>;

package/dist/functions/index.js

@@ -1,12 +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 = __importDefault(require("./color"));
-const spacing_1 = __importDefault(require("./spacing"));
-exports.functions = {
-    color: color_1.default,
-    spacing: spacing_1.default,
+import { sc, fc, alpha, lighten, darken, contrast } from "./color.js";
+import { theme } from "./theme.js";
+export const functions = {
+    sc,
+    fc,
+    alpha,
+    lighten,
+    darken,
+    contrast,
+    theme,
 };

package/dist/functions/theme.d.ts

@@ -0,0 +1,6 @@
+import { PluginContext } from "../types.js";
+/**
+ * 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 './types.js';
+/**
+ * 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.js";
+/**
+ * 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("./types.js").PluginOptions> & {
     postcss: boolean;
-    functions: Record<string, import("./functions").FnHandler>;
+    functions: Record<string, import("./functions/index.js").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.js';
+import { functions } from './functions/index.js';
+// 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, FunctionMap } from './types.js';
+export type { FunctionMap } from './types.js';
+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.js';
+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>;
-}
+import { PluginOptions } from "./types.js";
 export declare const dynamicFunctionsPlugin: PluginCreator<PluginOptions>;

package/dist/plugin.js

@@ -1,29 +1,29 @@
-"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/index.js";
+import { atRuleHandlers } from "./at-rules/index.js";
+import { loadConfig } from "./config.js";
+import { processFunctions } from "./parser.js";
+export const dynamicFunctionsPlugin = (opts = {}) => {
+    const { config, options } = loadConfig(opts);
+    const fnMap = { ...functions, ...opts.functions };
+    const context = {
+        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) => a.trim().replace(/^['"]|['"]$/g, ""));
-                    return fnMap[fnName](...args);
-                });
-            }
-            decl.value = value;
+            decl.value = processFunctions(decl.value, fnMap, decl, context);
         },
-        AtRule: {
-            ...at_rules_1.atRuleHandlers,
+        // Override AtRule handler to ensure ordered execution
+        AtRule(atRule) {
+            // Iterate over handlers in order (array) instead of object spread
+            for (const { name, handler } of atRuleHandlers) {
+                if (atRule.name === name) {
+                    handler(atRule, context);
+                }
+            }
         },
     };
 };
-exports.dynamicFunctionsPlugin = dynamicFunctionsPlugin;
-exports.dynamicFunctionsPlugin.postcss = true;
+dynamicFunctionsPlugin.postcss = true;

package/dist/types.d.ts

@@ -0,0 +1,59 @@
+/**
+ * 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;
+}
+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;
+}

package/dist/types.js

@@ -0,0 +1,3 @@
+// Local type definitions to avoid @seyuna/cli runtime import
+// The @seyuna/cli package imports Deno polyfills that conflict with Vite/Astro
+export {};

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@seyuna/postcss",
-  "version": "1.0.0-canary.2",
+  "version": "1.0.0-canary.20",
   "description": "Seyuna UI's postcss plugin",
+  "type": "module",
   "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 +21,9 @@
     "type": "git",
     "url": "git+https://github.com/seyuna-corp/seyuna-postcss.git"
   },
+  "dependencies": {
+    "postcss-value-parser": "^4.2.0"
+  },
   "peerDependencies": {
     "postcss": "^8.5.6"
   },
@@ -26,11 +33,14 @@
     "@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",
+    "conventional-changelog-conventionalcommits": "^9.1.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/release.config.mjs

@@ -4,7 +4,12 @@
 export default {
   branches: [{ name: "canary", prerelease: "canary" }, "main"],
   plugins: [
-    "@semantic-release/commit-analyzer",
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        preset: "conventionalcommits",
+      },
+    ],
     "@semantic-release/release-notes-generator",
     ["@semantic-release/changelog", { changelogFile: "CHANGELOG.md" }],
     [

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

@@ -0,0 +1,52 @@
+import { Rule, AtRule, ChildNode } from "postcss";
+import { PluginContext } from "../types.js";
+
+/**
+ * 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');

package/src/at-rules/color.ts

@@ -0,0 +1,33 @@
+import { 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,57 @@
+import { 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 AtRule({
+      name: "container",
+      params: `(min-width: ${minWidth})`,
+      source: atRule.source,
+    });
+
+    clonedNodes.forEach((node) => containerAtRule.append(node));
+
+    atRule.replaceWith(containerAtRule);
+  }
+}