@seyuna/postcss 1.0.0-canary.37 → 1.0.0-canary.39

package/dist/errors.d.ts

@@ -1,6 +1,4 @@
+import type { Node } from "postcss";
 import { PluginContext } from "./types.js";
-export declare function reportError(message: string, node: any, context: PluginContext, options?: {
-    word?: string;
-    index?: number;
-}): void;
-export declare function reportWarning(message: string, node: any, context?: PluginContext): void;
+export declare function reportError(message: string, node: Node, context: PluginContext): void;
+export declare function reportWarning(message: string, node: Node, context?: PluginContext): void;

package/dist/errors.js

@@ -1,7 +1,5 @@
-export function reportError(message, node, context, options = {}) {
-    const { options: pluginOptions } = context;
-    const formattedMessage = `[Seyuna PostCSS] ${message}`;
-    reportWarning(formattedMessage, node, context);
+export function reportError(message, node, context) {
+    reportWarning(message, node, context);
 }
 export function reportWarning(message, node, context) {
     if (context?.result) {

package/dist/functions/color.d.ts

@@ -1,7 +1,7 @@
 import { PluginContext } from "../types.js";
-export declare function SeyunaStandardColor(context: PluginContext, name: string, alpha?: string, lightness?: string, chroma?: string): string;
-export declare function SeyunaFixedColor(context: PluginContext, name: string, alpha?: string, lightness?: string, chroma?: string): string;
+export declare function SeyunaTone(context: PluginContext, name: string, alpha?: string, lightness?: string, chroma?: string): string;
+export declare function SeyunaSwatch(context: PluginContext, name: string, alpha?: string, lightness?: string, chroma?: string): string;
 export declare function SeyunaAlpha(context: PluginContext, color: string, value: string): string;
-export declare function SeyunaLighten(context: PluginContext, color: string, amount: string): string;
-export declare function SeyunaDarken(context: PluginContext, color: string, amount: string): string;
+export declare function SeyunaTint(context: PluginContext, color: string, amount: string): string;
+export declare function SeyunaShade(context: PluginContext, color: string, amount: string): string;
 export declare function SeyunaContrast(context: PluginContext, color: string): string;

package/dist/functions/color.js

@@ -47,14 +47,14 @@ function getColorVariables(context, color, type) {
         h: `var(--${color}-hue)`,
     };
 }
-export function SeyunaStandardColor(context, name, alpha, lightness, chroma) {
+export function SeyunaTone(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 SeyunaFixedColor(context, name, alpha, lightness, chroma) {
+export function SeyunaSwatch(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;
@@ -65,11 +65,11 @@ export function SeyunaAlpha(context, color, value) {
     const { l, c, h } = getColorVariables(context, color);
     return `oklch(${l} ${c} ${h} / ${value})`;
 }
-export function SeyunaLighten(context, color, amount) {
+export function SeyunaTint(context, color, amount) {
     const { l, c, h } = getColorVariables(context, color);
     return `oklch(calc(${l} + ${amount}) ${c} ${h} / 1)`;
 }
-export function SeyunaDarken(context, color, amount) {
+export function SeyunaShade(context, color, amount) {
     const { l, c, h } = getColorVariables(context, color);
     return `oklch(calc(${l} - ${amount}) ${c} ${h} / 1)`;
 }

package/dist/functions/index.js

@@ -1,11 +1,9 @@
-import { SeyunaStandardColor, SeyunaFixedColor, SeyunaAlpha, SeyunaLighten, SeyunaDarken, SeyunaContrast, } from "./color.js";
-import { SeyunaTheme } from "./theme.js";
+import { SeyunaTone, SeyunaSwatch, SeyunaAlpha, SeyunaTint, SeyunaShade, SeyunaContrast, } from "./color.js";
 export const functions = {
-    SeyunaStandardColor,
-    SeyunaFixedColor,
+    SeyunaTone,
+    SeyunaSwatch,
     SeyunaAlpha,
-    SeyunaLighten,
-    SeyunaDarken,
+    SeyunaTint,
+    SeyunaShade,
     SeyunaContrast,
-    SeyunaTheme,
 };

package/dist/helpers.d.ts

@@ -1,13 +1,11 @@
-import Rule from "postcss/lib/rule";
-import { PluginContext } from './types.js';
+import { type AtRule, type ChildNode } 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: any[], // ChildNode[]
-name: string, context: PluginContext): any[];
+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: any, // AtRule
-context: PluginContext): Rule[];
+export declare function generateRules(names: string[], atRule: AtRule, context: PluginContext): ChildNode[];

package/dist/helpers.js

@@ -1,18 +1,22 @@
-import Rule from "postcss/lib/rule";
-// import type { ChildNode, Declaration, AtRule } from "postcss";
+import postcss from "postcss";
 import { processFunctions } from "./parser.js";
+function getSelectorTemplate(params) {
+    const trimmed = params.trim();
+    if (!trimmed)
+        return undefined;
+    return trimmed.replace(/^['"]|['"]$/g, "");
+}
 /**
  * Helper: clone nodes and replace {name} placeholders safely
  * Returns only valid Rules or Declarations (never raw AtRules)
  */
-export function cloneNodes(nodes, // ChildNode[]
-name, context) {
+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; // Declaration
-            let value = decl.value.replace(/\{name\}/g, name);
+            const decl = cloned;
+            const value = decl.value.replace(/\{name\}/g, name);
             // Process functions using the robust parser
             decl.value = processFunctions(value, fnMap, decl, context);
             return decl;
@@ -35,23 +39,23 @@ name, context) {
 /**
  * Generate CSS rules from a list of names
  */
-export function generateRules(names, atRule, // AtRule
-context) {
+export function generateRules(names, atRule, context) {
     const nodes = atRule.nodes ?? [];
-    const generatedRules = [];
+    const generatedNodes = [];
+    const selectorTemplate = getSelectorTemplate(atRule.params);
     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);
+        const clonedNodes = cloneNodes(nodes, name, context);
+        const topLevelRules = clonedNodes.filter((node) => node.type === "rule");
+        const topLevelDecls = clonedNodes.filter((node) => node.type === "decl");
+        generatedNodes.push(...topLevelRules);
+        if (topLevelDecls.length > 0) {
+            const rule = postcss.rule({
+                selector: (selectorTemplate ?? `&.${name}`).replace(/\{name\}/g, name),
+                source: atRule.source,
+            });
+            rule.append(...topLevelDecls);
+            generatedNodes.push(rule);
+        }
     }
-    return generatedRules;
+    return generatedNodes;
 }

package/dist/index.d.ts

@@ -1,2 +1,9 @@
-declare const plugin: any;
+import { dynamicFunctionsPlugin } from './plugin.js';
+import { functions } from './functions/index.js';
+declare const plugin: import("postcss").PluginCreator<import("./types.js").PluginOptions> & {
+    postcss: boolean;
+    functions: Record<string, import("./functions/index.js").FnHandler>;
+};
 export default plugin;
+export { dynamicFunctionsPlugin, functions };
+export type { Color, Palette, Theme, Mode, UI, SeyunaConfig, FunctionMap, PluginOptions, PluginContext, } from "./types.js";

package/dist/index.js

@@ -6,3 +6,4 @@ const plugin = Object.assign(dynamicFunctionsPlugin, {
     functions
 });
 export default plugin;
+export { dynamicFunctionsPlugin, functions };

package/dist/parser.js

@@ -2,58 +2,45 @@ 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.
+    function splitArgs(nodes) {
+        const args = [];
+        let currentArg = "";
+        for (const argNode of nodes) {
+            if (argNode.type === "div" && argNode.value === ",") {
+                args.push(currentArg.trim());
+                currentArg = "";
+                continue;
             }
-        });
-        // 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);
-                        }
-                    }
-                }
+            currentArg += valueParser.stringify(argNode);
+        }
+        if (currentArg.trim() || nodes.length > 0) {
+            args.push(currentArg.trim());
+        }
+        return args.map((arg) => arg.replace(/^['"]|['"]$/g, ""));
+    }
+    function traverse(nodes) {
+        for (const nodeIter of nodes) {
+            if (nodeIter.type !== "function") {
+                continue;
+            }
+            traverse(nodeIter.nodes);
+            const handler = fnMap[nodeIter.value];
+            if (!handler) {
+                continue;
+            }
+            const functionName = nodeIter.value;
+            try {
+                const result = handler(context, ...splitArgs(nodeIter.nodes));
+                const replacementNode = nodeIter;
+                replacementNode.type = "word";
+                replacementNode.value = result;
+                replacementNode.nodes = [];
+            }
+            catch (error) {
+                reportError(`Failed to process function "${functionName}": ${error instanceof Error ? error.message : String(error)}`, node, context);
             }
         }
-        traverse(parsedValue.nodes);
     }
-    processNode(parsed);
+    traverse(parsed.nodes);
     return parsed.toString();
 }

package/dist/plugin.d.ts

@@ -1 +1,3 @@
-export declare const dynamicFunctionsPlugin: any;
+import type { PluginCreator } from "postcss";
+import { PluginOptions } from "./types.js";
+export declare const dynamicFunctionsPlugin: PluginCreator<PluginOptions>;

package/dist/plugin.js

@@ -1,4 +1,3 @@
-// import type { PluginCreator } from "postcss";
 import { functions } from "./functions/index.js";
 import { atRuleHandlers } from "./at-rules/index.js";
 import { loadConfigAsync } from "./config.js";
@@ -7,40 +6,37 @@ export const dynamicFunctionsPlugin = (opts = {}) => {
     let context;
     let fnMap;
     return {
-        postcssPlugin: "postcss-dynamic-functions",
+        postcssPlugin: "@seyuna/postcss",
         async Once() {
-            try {
-                const { config, options } = await loadConfigAsync(opts);
-                fnMap = { ...functions, ...opts.functions };
-                context = {
-                    config,
-                    options,
-                    functions: fnMap,
-                    result: undefined
-                };
-            }
-            catch (e) {
-                throw e;
-            }
+            const { config, options } = await loadConfigAsync(opts);
+            fnMap = { ...functions, ...(opts.functions ?? {}) };
+            context = {
+                config,
+                options,
+                functions: fnMap,
+                result: undefined,
+                state: {
+                    hasInjectedSeyuna: false,
+                },
+            };
         },
         Declaration(decl, { result }) {
             if (!context || !fnMap)
                 return;
-            // Update context with the current result object
             context.result = result;
             const newValue = processFunctions(decl.value, fnMap, decl, context);
             if (newValue !== decl.value) {
                 decl.value = newValue;
             }
         },
-        // Override AtRule handler to ensure ordered execution
-        AtRule(atRule) {
+        AtRule(atRule, { result }) {
             if (!context)
                 return;
-            // Iterate over handlers in order (array) instead of object spread
+            context.result = result;
             for (const { name, handler } of atRuleHandlers) {
                 if (atRule.name === name) {
                     handler(atRule, context);
+                    break;
                 }
             }
         },

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import type { Result } from "postcss";
 /**
  * Represents a color in the Oklch color space.
  */
@@ -24,6 +25,7 @@ export interface Theme {
     colors: Record<string, Color>;
     light: Palette;
     dark: Palette;
+    breakpoints?: Record<string, string>;
 }
 /**
  * Supported color appearance modes.
@@ -53,5 +55,8 @@ export interface PluginContext {
         modeAttribute: string;
     };
     functions: FunctionMap;
-    result?: any;
+    result?: Result;
+    state: {
+        hasInjectedSeyuna: boolean;
+    };
 }

package/dist/types.js

@@ -1,3 +1 @@
-// 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,10 +1,22 @@
 {
   "name": "@seyuna/postcss",
-  "version": "1.0.0-canary.37",
-  "description": "Seyuna UI's postcss plugin",
+  "version": "1.0.0-canary.39",
+  "description": "PostCSS design system compiler for Seyuna's theme-aware OKLCH tokens and at-rules",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
   "scripts": {
     "build": "tsc && mkdir -p dist/styles && cp src/styles/* dist/styles/",
     "dev": "tsc -w",
@@ -14,7 +26,12 @@
   "keywords": [
     "postcss",
     "plugin",
-    "seyuna"
+    "seyuna",
+    "design-system",
+    "oklch",
+    "theming",
+    "container-queries",
+    "design-tokens"
   ],
   "license": "MIT",
   "repository": {

package/.github/workflows/release.yml

@@ -1,41 +0,0 @@
-name: Release
-
-on:
-  push:
-    branches:
-      - main
-      - canary
-
-permissions:
-  contents: write
-  issues: write
-  pull-requests: write
-  id-token: write
-
-jobs:
-  release:
-    name: Semantic Release
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Setup Node.js with npm auth
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-          registry-url: https://registry.npmjs.org/
-          scope: "@seyuna"
-          always-auth: true
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run Semantic Release
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: npx semantic-release

package/.vscode/settings.json

@@ -1,4 +0,0 @@
-{
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
-}

package/dist/functions/theme.d.ts

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

package/dist/functions/theme.js

@@ -1,17 +0,0 @@
-/**
- * Accesses values from the Seyuna configuration using dot notation
- * Example: theme(ui.theme.breakpoints.tablet)
- */
-export function SeyunaTheme(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/release.config.mjs

@@ -1,37 +0,0 @@
-/**
- * @type {import('semantic-release').GlobalConfig}
- */
-export default {
-  branches: [{ name: "canary", prerelease: "canary" }, "main"],
-  plugins: [
-    [
-      "@semantic-release/commit-analyzer",
-      {
-        preset: "conventionalcommits",
-      },
-    ],
-    "@semantic-release/release-notes-generator",
-    ["@semantic-release/changelog", { changelogFile: "CHANGELOG.md" }],
-    [
-      "@semantic-release/exec", // Runs build before publishing
-      {
-        prepareCmd: "npm run build",
-      },
-    ],
-    [
-      "@semantic-release/npm", // Publishes to npm
-      {
-        npmPublish: true,
-      },
-    ],
-    [
-      "@semantic-release/git", // Commits updated files
-      {
-        assets: ["package.json", "package-lock.json", "CHANGELOG.md"],
-        message:
-          "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}",
-      },
-    ],
-    "@semantic-release/github", // Creates GitHub release
-  ],
-};

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

@@ -1,54 +0,0 @@
-import Rule from "postcss/lib/rule";
-import AtRule from "postcss/lib/at-rule";
-// import type { 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: any, context: PluginContext) => {
-    const { options } = context;
-    const modeAttribute = options.modeAttribute;
-    const clonedNodes: any[] = [];
-
-    // Clone all child nodes inside the block
-    atRule.each((node: any) => {
-      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

@@ -1,33 +0,0 @@
-// import type { AtRule } from "postcss";
-import { PluginContext } from "../types.js";
-import { generateRules } from "../helpers.js";
-
-/**
- * Handler for @each-standard-color
- */
-export function eachStandardColor(atRule: any, 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: any, 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();
-}