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

package/.github/workflows/release.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Setup Node.js with npm auth
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           registry-url: https://registry.npmjs.org/
           scope: "@seyuna"
           always-auth: true

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [1.0.0-canary.15](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.14...v1.0.0-canary.15) (2026-01-09)
+
+
+### Bug Fixes
+
+* workflow node version upgrade. ([e98349a](https://github.com/seyuna-corp/seyuna-postcss/commit/e98349af69aab446f0ac4d0790112d5c702c1b36))
+
+# [1.0.0-canary.14](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.13...v1.0.0-canary.14) (2025-10-09)
+
+
+### Bug Fixes
+
+* bug in generateRules ([d5b66d3](https://github.com/seyuna-corp/seyuna-postcss/commit/d5b66d32786f554c0e4f7ea98ae526e7f7ac82c5))
+* removed pnpm lock file that ([6d87d61](https://github.com/seyuna-corp/seyuna-postcss/commit/6d87d616a79a2a539b09dea26bc907dee1d437e2))
+* updated lock file ([d52dcfb](https://github.com/seyuna-corp/seyuna-postcss/commit/d52dcfb2bccbd502d744ceb09aa83394df4ac057))
+
 # [1.0.0-canary.13](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.12...v1.0.0-canary.13) (2025-10-07)
 
 

package/README.md

@@ -0,0 +1,179 @@
+# @seyuna/postcss
+
+[![NPM Version](https://img.shields.io/npm/v/@seyuna/postcss.svg)](https://www.npmjs.com/package/@seyuna/postcss)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+> The official PostCSS plugin for the Seyuna UI framework.
+
+---
+
+## 🚀 Overview
+
+`@seyuna/postcss` is a powerful PostCSS plugin that brings the Seyuna design system to your CSS. It leverages the modern **OKLCH** color space, CSS Container Queries, and configuration-driven styling to provide a premium developer experience.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @seyuna/postcss postcss-import postcss-advanced-variables postcss-preset-env --save-dev
+```
+
+## Usage
+
+Add the plugin to your `postcss.config.js` (ESM):
+
+```javascript
+import seyunaPostcss from '@seyuna/postcss';
+import postcssImport from 'postcss-import';
+import postcssAdvancedVariables from 'postcss-advanced-variables';
+import postcssPresetEnv from 'postcss-preset-env';
+
+export default {
+  plugins: [
+    seyunaPostcss({
+      configPath: 'seyuna.json', // Path to your Seyuna config
+      modeAttribute: 'data-mode', // Attribute used for theme switching
+    }),
+    postcssImport,
+    postcssAdvancedVariables,
+    postcssPresetEnv({
+      stage: 3, // Enables features that are in the CSS spec pipeline
+      features: {
+        "nesting-rules": true, // Uses postcss-nesting internally
+      },
+    }),
+  ],
+};
+```
+
+---
+
+## 🎨 The Color System
+
+Seyuna distinguishes between two types of colors to maximize flexibility and maintain consistency.
+
+### 1. Standard Colors (`sc`)
+Standard colors are "hue-only" tokens. They automatically inherit the **lightness** and **chroma** variables assigned to the current mode (light or dark).
+
+- **Usage**: `sc(primary)`
+- **Compiled**: `oklch(var(--lightness) var(--chroma) var(--primary-hue) / 1)`
+
+### 2. Fixed Colors (`fc`)
+Fixed colors ignore the global lightness/chroma context and use their own pre-defined values.
+
+- **Usage**: `fc(white)`
+- **Compiled**: `oklch(var(--white-lightness) var(--white-chroma) var(--white-hue) / 1)`
+
+---
+
+## 🛠️ Custom Functions
+
+### Color Manipulation
+All color functions support both raw `oklch()` strings and color names from your `seyuna.json`.
+
+| Function | Description | Example |
+| :--- | :--- | :--- |
+| `alpha(color, value)` | Sets the opacity of a color. | `alpha(primary, 0.5)` |
+| `lighten(color, amt)` | Increases lightness. | `lighten(primary, 0.1)` |
+| `darken(color, amt)` | Decreases lightness. | `darken(primary, 0.1)` |
+| `contrast(color)` | Returns `black` or `white`. | `color: contrast(primary)` |
+
+### Utilities
+- **`theme(path)`**: Access any value in `seyuna.json` using dot notation.
+  ```css
+  padding: theme(ui.spacing.medium);
+  ```
+
+---
+
+## 🏗️ Powerful At-Rules
+
+### Palette Iterators
+Generate utility classes by iterating over your configuration.
+
+```css
+@each-standard-color {
+  .bg-{name} { background-color: sc({name}); }
+}
+
+@each-fixed-color {
+  .text-{name} { color: fc({name}); }
+}
+```
+
+### Theme Wrappers
+Simplified syntax for light and dark mode overrides.
+
+```css
+.card {
+  background: white;
+  @dark {
+    background: black;
+  }
+}
+```
+
+### Breakpoint Shortcuts
+These generate modern CSS Container Queries. Ensure your parent element has `container-type: inline-size`.
+
+```css
+.grid {
+  grid-template-columns: 1fr;
+  @md {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+```
+*Supported: `@xs`, `@sm`, `@md`, `@lg`, `@xl`, `@xxl`.*
+
+### Mixins & Conditionals
+```css
+@define-mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button {
+  @apply flex-center;
+  
+  @if (theme(ui.features.glass)) {
+    backdrop-filter: blur(10px);
+  }
+}
+```
+
+---
+
+## ⚙️ Configuration (`seyuna.json`)
+
+```json
+{
+  "ui": {
+    "theme": {
+      "hues": {
+        "primary": 240,
+        "secondary": 30
+      },
+      "colors": {
+        "white": { "lightness": 1, "chroma": 0, "hue": 0 }
+      },
+      "light": {
+        "chroma": 0.26,
+        "lightness": 0.66
+      },
+      "dark": {
+        "chroma": 0.26,
+        "lightness": 0.66
+      }
+    }
+  }
+}
+```
+
+---
+
+## 📜 License
+
+MIT © [Seyuna](https://seyuna.com)

package/dist/at-rules/color-scheme.d.ts

@@ -0,0 +1,4 @@
+import { AtRule } from "postcss";
+import { PluginContext } from "../config";
+export declare const light: (atRule: AtRule, context: PluginContext) => void;
+export declare const dark: (atRule: AtRule, context: PluginContext) => void;

package/dist/at-rules/color-scheme.js

@@ -0,0 +1,43 @@
+import { Rule, AtRule } from "postcss";
+/**
+ * Custom PostCSS plugin handler factory for `@light` and `@dark` at-rules.
+ */
+function createColorSchemeHandler(scheme) {
+    return (atRule, context) => {
+        const { options } = context;
+        const modeAttribute = options.modeAttribute;
+        const clonedNodes = [];
+        // Clone all child nodes inside the block
+        atRule.each((node) => {
+            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/dist/at-rules/color.d.ts

@@ -1,9 +1,10 @@
 import { AtRule } from "postcss";
+import { PluginContext } from "../config";
 /**
- * Custom PostCSS handler for @each-standard-color
+ * Handler for @each-standard-color
  */
-export declare function eachStandardColor(atRule: AtRule): void;
+export declare function eachStandardColor(atRule: AtRule, context: PluginContext): void;
 /**
- * Custom PostCSS handler for @each-fixed-color
+ * Handler for @each-fixed-color
  */
-export declare function eachFixedColor(atRule: AtRule): void;
+export declare function eachFixedColor(atRule: AtRule, context: PluginContext): void;

package/dist/at-rules/color.js

@@ -1,95 +1,30 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.eachStandardColor = eachStandardColor;
-exports.eachFixedColor = eachFixedColor;
-const postcss_1 = require("postcss");
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
-const color_1 = require("../functions/color");
+import { generateRules } from "../helpers";
 /**
- * Helper: safely clone nodes and replace {name} placeholders,
- * evaluate fc() and sc() calls.
+ * Handler for @each-standard-color
  */
-function cloneNodesWithName(nodeList, name) {
-    return nodeList.flatMap((node) => {
-        const cloned = node.clone();
-        if (cloned.type === "decl") {
-            const decl = cloned;
-            let value = decl.value.replace(/\{name\}/g, name);
-            if (/sc\(/.test(value)) {
-                const args = value
-                    .match(/sc\(([^)]*)\)/)?.[1]
-                    .split(",")
-                    .map((s) => s.trim());
-                if (args)
-                    value = (0, color_1.sc)(...args);
-            }
-            if (/fc\(/.test(value)) {
-                const args = value
-                    .match(/fc\(([^)]*)\)/)?.[1]
-                    .split(",")
-                    .map((s) => s.trim());
-                if (args)
-                    value = (0, color_1.fc)(...args);
-            }
-            decl.value = value;
-            return decl;
-        }
-        if (cloned.type === "rule") {
-            const rule = cloned;
-            if (!rule.selector)
-                return [];
-            rule.selector = rule.selector.replace(/\{name\}/g, name);
-            rule.nodes = cloneNodesWithName(rule.nodes || [], name);
-            return rule;
-        }
-        if (cloned.type === "atrule") {
-            cloned.params = cloned.params.replace(/\{name\}/g, name);
-            cloned.nodes = cloneNodesWithName(cloned.nodes || [], name);
-            return cloned.nodes.length ? cloned : [];
-        }
-        return [];
-    });
+export function eachStandardColor(atRule, context) {
+    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();
 }
 /**
- * Custom PostCSS handler for @each-standard-color
+ * Handler for @each-fixed-color
  */
-function eachStandardColor(atRule) {
-    const jsonPath = path_1.default.resolve(process.cwd(), "seyuna.json");
-    const data = JSON.parse(fs_1.default.readFileSync(jsonPath, "utf-8"));
-    const hues = data.ui.theme.hues;
-    const hueNames = Object.keys(hues);
-    const nodes = atRule.nodes ?? [];
-    const generatedRules = [];
-    for (const hueName of hueNames) {
-        const rule = new postcss_1.Rule({ selector: `.${hueName}` });
-        cloneNodesWithName(nodes, hueName).forEach((n) => rule.append(n));
-        if (rule.nodes.length)
-            generatedRules.push(rule);
-    }
-    atRule.replaceWith(...generatedRules);
-}
-/**
- * Custom PostCSS handler for @each-fixed-color
- */
-function eachFixedColor(atRule) {
-    const jsonPath = path_1.default.resolve(process.cwd(), "seyuna.json");
-    const data = JSON.parse(fs_1.default.readFileSync(jsonPath, "utf-8"));
-    const light_colors = data.ui.theme.light.colors;
-    const dark_colors = data.ui.theme.dark.colors;
+export function eachFixedColor(atRule, context) {
+    const { config } = context;
     const mergedNames = [
-        ...new Set([...Object.keys(light_colors), ...Object.keys(dark_colors)]),
+        ...new Set([
+            ...(config.ui ? Object.keys(config.ui.theme.light.colors) : []),
+            ...(config.ui ? Object.keys(config.ui.theme.dark.colors) : []),
+        ]),
     ];
-    const nodes = atRule.nodes ?? [];
-    const generatedRules = [];
-    for (const colorName of mergedNames) {
-        const rule = new postcss_1.Rule({ selector: `.${colorName}` });
-        cloneNodesWithName(nodes, colorName).forEach((n) => rule.append(n));
-        if (rule.nodes.length)
-            generatedRules.push(rule);
-    }
-    atRule.replaceWith(...generatedRules);
+    const rules = generateRules(mergedNames, atRule, context);
+    if (rules.length)
+        atRule.replaceWith(...rules);
+    else
+        atRule.remove();
 }

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

@@ -0,0 +1,6 @@
+import { AtRule } from "postcss";
+import { PluginContext } from "../config";
+/**
+ * Handler for @if (condition) { ... }
+ */
+export declare function conditional(atRule: AtRule, context: PluginContext): void;

package/dist/at-rules/conditional.js

@@ -0,0 +1,29 @@
+import { processFunctions } from "../parser";
+/**
+ * Handler for @if (condition) { ... }
+ */
+export function conditional(atRule, context) {
+    const { functions: fnMap } = context;
+    // Clean up params (remove parentheses if present)
+    let condition = atRule.params.trim().replace(/^\(|\)$/g, '').trim();
+    // Process functions in the condition (e.g., theme access)
+    const evaluated = processFunctions(condition, fnMap, atRule, context).trim();
+    // Simple truthy evaluation
+    const isFalsy = !evaluated ||
+        evaluated === 'false' ||
+        evaluated === '0' ||
+        evaluated === 'null' ||
+        evaluated === 'undefined';
+    if (!isFalsy) {
+        // Ungroup the nodes
+        if (atRule.nodes && atRule.nodes.length > 0) {
+            atRule.replaceWith(...atRule.nodes.map(n => n.clone()));
+        }
+        else {
+            atRule.remove();
+        }
+    }
+    else {
+        atRule.remove();
+    }
+}

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

@@ -1,4 +1,5 @@
 import { AtRule } from "postcss";
+import { PluginContext } from "../config";
 /**
  * Custom PostCSS plugin handler for responsive at-rules.
  *
@@ -15,4 +16,4 @@ import { AtRule } from "postcss";
  *   }
  *
  */
-export default function container(atRule: AtRule): void;
+export default function container(atRule: AtRule, context: PluginContext): void;

package/dist/at-rules/container.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = container;
-const postcss_1 = require("postcss");
+import { AtRule } from "postcss";
 /**
  * Custom PostCSS plugin handler for responsive at-rules.
  *
@@ -18,9 +15,10 @@ const postcss_1 = require("postcss");
  *   }
  *
  */
-function container(atRule) {
-    // Map of shortcuts → container widths
-    const breakpoints = {
+export default function container(atRule, context) {
+    const { config } = context;
+    // Default breakpoints
+    const defaultBreakpoints = {
         xs: "20rem",
         sm: "40rem",
         md: "48rem",
@@ -28,15 +26,21 @@ function container(atRule) {
         xl: "80rem",
         "2xl": "96rem",
     };
+    // Merge with config if available (assuming config.ui.breakpoints exists)
+    const breakpoints = {
+        ...defaultBreakpoints,
+        ...(config.ui?.theme?.breakpoints || {}),
+    };
     if (Object.keys(breakpoints).includes(atRule.name)) {
         const minWidth = breakpoints[atRule.name];
         const clonedNodes = [];
         atRule.each((node) => {
             clonedNodes.push(node.clone());
         });
-        const containerAtRule = new postcss_1.AtRule({
+        const containerAtRule = new AtRule({
             name: "container",
             params: `(min-width: ${minWidth})`,
+            source: atRule.source,
         });
         clonedNodes.forEach((node) => containerAtRule.append(node));
         atRule.replaceWith(containerAtRule);

package/dist/at-rules/custom-media.d.ts

@@ -0,0 +1,15 @@
+import { AtRule } from "postcss";
+import { PluginContext } from "../config";
+/**
+ * Global store for CSS-defined custom media (if needed)
+ * However, we primarily use the config.
+ */
+/**
+ * Handler for @media at-rules to resolve custom media tokens
+ */
+export declare function resolveCustomMedia(atRule: AtRule, context: PluginContext): void;
+/**
+ * [Future-proofing] Handler for @custom-media --name query
+ * Adds to the config-like store for the current run
+ */
+export declare function defineCustomMedia(atRule: AtRule, context: PluginContext): void;

package/dist/at-rules/custom-media.js

@@ -0,0 +1,40 @@
+/**
+ * Global store for CSS-defined custom media (if needed)
+ * However, we primarily use the config.
+ */
+/**
+ * Handler for @media at-rules to resolve custom media tokens
+ */
+export function resolveCustomMedia(atRule, context) {
+    const { config } = context;
+    const mediaTokens = config.media || {};
+    // Regex to find --tokens anywhere
+    let params = atRule.params;
+    const tokenRegex = /--[a-zA-Z0-9\-_]+/g;
+    params = params.replace(tokenRegex, (match) => {
+        const tokenName = match.slice(2);
+        if (mediaTokens[tokenName]) {
+            return mediaTokens[tokenName];
+        }
+        return match;
+    });
+    // Clean up double parentheses like ((...)) if any
+    params = params.replace(/\(\((.+)\)\)/g, '($1)');
+    atRule.params = params;
+}
+/**
+ * [Future-proofing] Handler for @custom-media --name query
+ * Adds to the config-like store for the current run
+ */
+export function defineCustomMedia(atRule, context) {
+    const match = atRule.params.match(/^(--[a-zA-Z0-9\-_]+)\s+(.+)$/);
+    if (match) {
+        const name = match[1].slice(2);
+        const query = match[2];
+        if (!context.config.media) {
+            context.config.media = {};
+        }
+        context.config.media[name] = query;
+    }
+    atRule.remove();
+}

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

@@ -1,6 +1,7 @@
-import type { AtRule } from "postcss";
+import { AtRule } from "postcss";
+import { PluginContext } from "../config";
 export interface AtRuleHandler {
     name: string;
-    handler: (atRule: AtRule) => void;
+    handler: (atRule: AtRule, context: PluginContext) => void;
 }
 export declare const atRuleHandlers: AtRuleHandler[];

package/dist/at-rules/index.js

@@ -1,25 +1,25 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.atRuleHandlers = void 0;
-// atRuleHandlers.ts
-const dark_1 = __importDefault(require("./dark"));
-const light_1 = __importDefault(require("./light"));
-const container_1 = __importDefault(require("./container"));
-const color_1 = require("./color");
+import { eachStandardColor, eachFixedColor } from "./color";
+import container from "./container";
+import { light, dark } from "./color-scheme";
+import { defineMixin, applyMixin } from "./mixin";
+import { conditional } from "./conditional";
+import { resolveCustomMedia, defineCustomMedia } from "./custom-media";
 // Ordered array ensures execution order
-exports.atRuleHandlers = [
-    { name: "each-standard-color", handler: color_1.eachStandardColor }, // first
-    { name: "each-fixed-color", handler: color_1.eachFixedColor },
-    { name: "light", handler: light_1.default },
-    { name: "dark", handler: dark_1.default },
-    { name: "xs", handler: container_1.default },
-    { name: "sm", handler: container_1.default },
-    { name: "md", handler: container_1.default },
-    { name: "lg", handler: container_1.default },
-    { name: "xl", handler: container_1.default },
-    { name: "2xl", handler: container_1.default },
+export const atRuleHandlers = [
+    { name: "define-mixin", handler: defineMixin },
+    { name: "custom-media", handler: defineCustomMedia },
+    { name: "apply", handler: applyMixin },
+    { name: "if", handler: conditional },
+    { name: "media", handler: resolveCustomMedia },
+    { name: "each-standard-color", handler: eachStandardColor }, // first
+    { name: "each-fixed-color", handler: eachFixedColor },
+    { name: "light", handler: light },
+    { name: "dark", handler: dark },
+    { name: "xs", handler: container },
+    { name: "sm", handler: container },
+    { name: "md", handler: container },
+    { name: "lg", handler: container },
+    { name: "xl", handler: container },
+    { name: "2xl", handler: container },
     // add more handlers here as needed
 ];

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

@@ -0,0 +1,10 @@
+import { AtRule } from "postcss";
+import { PluginContext } from "../config";
+/**
+ * Handler for @define-mixin [name] { ... }
+ */
+export declare function defineMixin(atRule: AtRule, context: PluginContext): void;
+/**
+ * Handler for @apply [name]
+ */
+export declare function applyMixin(atRule: AtRule, context: PluginContext): void;

package/dist/at-rules/mixin.js

@@ -0,0 +1,37 @@
+import { reportError } from "../errors";
+/**
+ * Handler for @define-mixin [name] { ... }
+ */
+export function defineMixin(atRule, context) {
+    const name = atRule.params.trim();
+    if (!name) {
+        reportError("Mixin name is required", atRule, context);
+        return;
+    }
+    // Store the nodes (cloned)
+    context.mixins[name] = atRule.nodes?.map(n => n.clone()) || [];
+    // Remove the at-rule from the output
+    atRule.remove();
+}
+/**
+ * Handler for @apply [name]
+ */
+export function applyMixin(atRule, context) {
+    const name = atRule.params.trim();
+    if (!name) {
+        reportError("Mixin name is required for @apply", atRule, context);
+        return;
+    }
+    const mixinNodes = context.mixins[name];
+    if (!mixinNodes) {
+        reportError(`Mixin "${name}" not found`, atRule, context);
+        return;
+    }
+    // Inject the nodes, ensuring they have the correct source for mapping
+    const nodesToInject = mixinNodes.map(n => {
+        const cloned = n.clone();
+        cloned.source = atRule.source;
+        return cloned;
+    });
+    atRule.replaceWith(...nodesToInject);
+}