@seyuna/postcss 1.0.0-canary.1 → 1.0.0-canary.10

package/CHANGELOG.md

@@ -1,3 +1,76 @@
+# [1.0.0-canary.10](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.9...v1.0.0-canary.10) (2025-09-10)
+
+
+### Bug Fixes
+
+* registered each breakpoint to the same handler for at-rule `container` ([f3f5b36](https://github.com/seyuna-corp/seyuna-postcss/commit/f3f5b3665291dc94e92f3f7c2b2a576b4bdb4517))
+
+# [1.0.0-canary.9](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.8...v1.0.0-canary.9) (2025-09-10)
+
+
+### Bug Fixes
+
+* colors selector in at-rule `each-fixed-color` ([31adb28](https://github.com/seyuna-corp/seyuna-postcss/commit/31adb28f3576a0dcfb78a9aadf331ee4b7ef3e0c))
+
+# [1.0.0-canary.8](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.7...v1.0.0-canary.8) (2025-09-10)
+
+
+### Features
+
+* added at-rule `each-fixed-color` ([699ee0d](https://github.com/seyuna-corp/seyuna-postcss/commit/699ee0defd1fbb0ff91a90c1e13358b1ef9832b2))
+
+
+### BREAKING CHANGES
+
+* at-rule `each-seyuna-color` renamed to `each-standard-color`
+
+# [1.0.0-canary.7](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.6...v1.0.0-canary.7) (2025-09-10)
+
+
+### Features
+
+* Added at-rule ([8a08289](https://github.com/seyuna-corp/seyuna-postcss/commit/8a08289023f4aa6f65d56e10697e64d02444f118))
+
+# [1.0.0-canary.6](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.5...v1.0.0-canary.6) (2025-09-09)
+
+
+### Features
+
+* add new color function 'fc' ([70e961f](https://github.com/seyuna-corp/seyuna-postcss/commit/70e961fb0b0a13e358de15b42a87b7890f3fc5c0))
+
+
+### BREAKING CHANGES
+
+* changed how 'sc' functions, not backward-compatible
+
+# [1.0.0-canary.5](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.4...v1.0.0-canary.5) (2025-08-25)
+
+
+### Bug Fixes
+
+* changed color function name to sc to avoid conflicts with the default css color() function ([a46e96c](https://github.com/seyuna-corp/seyuna-postcss/commit/a46e96c74839f930d39a2c273c822a689a942783))
+
+# [1.0.0-canary.4](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.3...v1.0.0-canary.4) (2025-08-24)
+
+
+### Bug Fixes
+
+* at-rules for mode now ensure that [data-mode=system] before enforcing prefers-color-scheme ([475055d](https://github.com/seyuna-corp/seyuna-postcss/commit/475055db1d5662d25631953af669bf64b2e0468e))
+
+# [1.0.0-canary.3](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.2...v1.0.0-canary.3) (2025-08-24)
+
+
+### Bug Fixes
+
+* prioritized data-mode over prefers-color-scheme for [@dark](https://github.com/dark) & [@light](https://github.com/light) rules ([1dafbe7](https://github.com/seyuna-corp/seyuna-postcss/commit/1dafbe74c2ceae8faf28f55ac64846e9e752405b))
+
+# [1.0.0-canary.2](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.1...v1.0.0-canary.2) (2025-08-08)
+
+
+### Bug Fixes
+
+* added os mode selectors to dark and light at-rules ([aab8f42](https://github.com/seyuna-corp/seyuna-postcss/commit/aab8f42f05d8bfedf45b19352134254f2da4d9f0))
+
 # 1.0.0-canary.1 (2025-08-07)
 
 

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

@@ -0,0 +1,34 @@
+import { AtRule } from "postcss";
+/**
+ * Custom PostCSS plugin handler for `@each-standard-color` at-rules.
+ *
+ * Example usage:
+ *
+ *   @each-standard-color {
+ *     color: white;
+ *   }
+ *
+ * Will generate:
+ *
+ *   .alpha { color: white; }
+ *   .beta { color: white; }
+ *   .gamma { color: white; }
+ *   ...
+ */
+export declare function eachStandardColor(atRule: AtRule): void;
+/**
+ * Custom PostCSS plugin handler for `@each-fixed-color` at-rules.
+ *
+ * Example usage:
+ *
+ *   @each-fixed-color {
+ *     color: white;
+ *   }
+ *
+ * Will generate:
+ *
+ *   .primary { color: white; }
+ *   .secondary { color: white; }
+ *   ...
+ */
+export declare function eachFixedColor(atRule: AtRule): void;

package/dist/at-rules/color.js

@@ -0,0 +1,105 @@
+"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"));
+/**
+ * Custom PostCSS plugin handler for `@each-standard-color` at-rules.
+ *
+ * Example usage:
+ *
+ *   @each-standard-color {
+ *     color: white;
+ *   }
+ *
+ * Will generate:
+ *
+ *   .alpha { color: white; }
+ *   .beta { color: white; }
+ *   .gamma { color: white; }
+ *   ...
+ */
+function eachStandardColor(atRule) {
+    // Read seyuna.json from project root
+    const jsonPath = path_1.default.resolve(process.cwd(), "seyuna.json");
+    const fileContents = fs_1.default.readFileSync(jsonPath, "utf-8");
+    const data = JSON.parse(fileContents);
+    const hues = data.ui.theme.hues;
+    const hueNamesSet = new Set(Object.keys(hues));
+    // Guard against atRule.nodes being undefined
+    const nodes = atRule.nodes ?? [];
+    const generatedRules = [];
+    // Helper to clone nodes and replace {name} placeholder
+    const cloneNodesWithName = (name) => nodes.map((node) => {
+        const cloned = node.clone();
+        // Only process declarations
+        if (cloned.type === "decl") {
+            const decl = cloned;
+            decl.value = decl.value.replace(/\{name\}/g, name);
+        }
+        return cloned;
+    });
+    // Generate rules for each hue
+    for (const hueName of hueNamesSet) {
+        const rule = new postcss_1.Rule({ selector: `.${hueName}` });
+        cloneNodesWithName(hueName).forEach((n) => rule.append(n));
+        generatedRules.push(rule);
+    }
+    // Replace the original @each-seyuna-color at-rule with all the generated rules
+    atRule.replaceWith(...generatedRules);
+}
+/**
+ * Custom PostCSS plugin handler for `@each-fixed-color` at-rules.
+ *
+ * Example usage:
+ *
+ *   @each-fixed-color {
+ *     color: white;
+ *   }
+ *
+ * Will generate:
+ *
+ *   .primary { color: white; }
+ *   .secondary { color: white; }
+ *   ...
+ */
+function eachFixedColor(atRule) {
+    // Read seyuna.json from project root
+    const jsonPath = path_1.default.resolve(process.cwd(), "seyuna.json");
+    const fileContents = fs_1.default.readFileSync(jsonPath, "utf-8");
+    const data = JSON.parse(fileContents);
+    const light_colors = data.ui.theme.light.colors;
+    const dark_colors = data.ui.theme.dark.colors;
+    const lightColorNamesSet = new Set(Object.keys(light_colors));
+    const darkColorNamesSet = new Set(Object.keys(dark_colors));
+    const mergedColorNamesSet = new Set([
+        ...lightColorNamesSet,
+        ...darkColorNamesSet,
+    ]);
+    // Guard against atRule.nodes being undefined
+    const nodes = atRule.nodes ?? [];
+    const generatedRules = [];
+    // Helper to clone nodes and replace {name} placeholder
+    const cloneNodesWithName = (name) => nodes.map((node) => {
+        const cloned = node.clone();
+        // Only process declarations
+        if (cloned.type === "decl") {
+            const decl = cloned;
+            decl.value = decl.value.replace(/\{name\}/g, name);
+        }
+        return cloned;
+    });
+    // Generate rules for mergedColorNamesSet
+    for (const colorName of mergedColorNamesSet) {
+        const rule = new postcss_1.Rule({ selector: `.${colorName}` });
+        cloneNodesWithName(colorName).forEach((n) => rule.append(n));
+        generatedRules.push(rule);
+    }
+    // Replace the original @each-seyuna-color at-rule with all the generated rules
+    atRule.replaceWith(...generatedRules);
+}

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

@@ -0,0 +1,18 @@
+import { AtRule } from "postcss";
+/**
+ * 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): void;

package/dist/at-rules/container.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = container;
+const postcss_1 = require("postcss");
+/**
+ * Custom PostCSS plugin handler for responsive at-rules.
+ *
+ * Example:
+ *
+ *   @xs {
+ *     .box { color: red; }
+ *   }
+ *
+ * Into:
+ *
+ *   @xs (min-width: 234px) {
+ *     .box { color: red; }
+ *   }
+ *
+ */
+function container(atRule) {
+    // Map of shortcuts → container widths
+    const breakpoints = {
+        xs: "20rem",
+        sm: "40rem",
+        md: "48rem",
+        lg: "64rem",
+        xl: "80rem",
+        "2xl": "96rem",
+    };
+    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({
+            name: "container",
+            params: `(min-width: ${minWidth})`,
+        });
+        clonedNodes.forEach((node) => containerAtRule.append(node));
+        atRule.replaceWith(containerAtRule);
+    }
+}

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

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

package/dist/at-rules/dark.js

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

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

@@ -1,3 +1,6 @@
 import type { AtRule } from "postcss";
-export type AtRuleHandler = (atRule: AtRule) => void;
-export declare const atRuleHandlers: Record<string, AtRuleHandler>;
+export interface AtRuleHandler {
+    name: string;
+    handler: (atRule: AtRule) => void;
+}
+export declare const atRuleHandlers: AtRuleHandler[];

package/dist/at-rules/index.js

@@ -4,10 +4,22 @@ var __importDefault = (this && this.__importDefault) || function (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"));
-exports.atRuleHandlers = {
-    light: light_1.default,
-    dark: dark_1.default,
+const container_1 = __importDefault(require("./container"));
+const color_1 = require("./color");
+// 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 },
     // add more handlers here as needed
-};
+];

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

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

package/dist/at-rules/light.js

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

package/dist/functions/color.d.ts

@@ -1 +1,2 @@
-export default function color(name: string, alpha?: string, lightness?: string, chroma?: string): string;
+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;

package/dist/functions/color.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = color;
-function color(name, alpha, lightness, chroma) {
+exports.sc = sc;
+exports.fc = fc;
+function sc(name, alpha, lightness, chroma) {
     let a = "1";
     let l = "var(--lightness)";
     let c = "var(--chroma)";
@@ -14,5 +15,20 @@ function color(name, alpha, lightness, chroma) {
     if (chroma && chroma !== "null") {
         c = chroma;
     }
-    return `oklch(${l} ${c} var(--${name}) / ${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;
+    }
+    if (lightness && lightness !== "null") {
+        l = lightness;
+    }
+    if (chroma && chroma !== "null") {
+        c = chroma;
+    }
+    return `oklch(${l} ${c} var(--${name}-hue) / ${a})`;
 }

package/dist/functions/index.js

@@ -4,9 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.functions = void 0;
-const color_1 = __importDefault(require("./color"));
+const color_1 = require("./color");
 const spacing_1 = __importDefault(require("./spacing"));
 exports.functions = {
-    color: color_1.default,
+    sc: color_1.sc,
+    fc: color_1.fc,
     spacing: spacing_1.default,
 };

package/dist/plugin.js

@@ -20,8 +20,14 @@ const dynamicFunctionsPlugin = (opts = {}) => {
             }
             decl.value = value;
         },
-        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 at_rules_1.atRuleHandlers) {
+                if (atRule.name === name) {
+                    handler(atRule);
+                }
+            }
         },
     };
 };

package/dist/types.d.ts

@@ -0,0 +1,19 @@
+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 {};

package/dist/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seyuna/postcss",
-  "version": "1.0.0-canary.1",
+  "version": "1.0.0-canary.10",
   "description": "Seyuna UI's postcss plugin",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/at-rules/color.ts

@@ -0,0 +1,118 @@
+import { AtRule, Rule, ChildNode, Declaration } from "postcss";
+import fs from "fs";
+import path from "path";
+import { SeyunaConfig } from "../types";
+
+/**
+ * Custom PostCSS plugin handler for `@each-standard-color` at-rules.
+ *
+ * Example usage:
+ *
+ *   @each-standard-color {
+ *     color: white;
+ *   }
+ *
+ * Will generate:
+ *
+ *   .alpha { color: white; }
+ *   .beta { color: white; }
+ *   .gamma { color: white; }
+ *   ...
+ */
+export function eachStandardColor(atRule: AtRule) {
+  // Read seyuna.json from project root
+  const jsonPath = path.resolve(process.cwd(), "seyuna.json");
+  const fileContents = fs.readFileSync(jsonPath, "utf-8");
+  const data: SeyunaConfig = JSON.parse(fileContents);
+  const hues = data.ui.theme.hues;
+  const hueNamesSet = new Set(Object.keys(hues));
+
+  // Guard against atRule.nodes being undefined
+  const nodes = atRule.nodes ?? [];
+
+  const generatedRules: Rule[] = [];
+
+  // Helper to clone nodes and replace {name} placeholder
+  const cloneNodesWithName = (name: string) =>
+    nodes.map((node) => {
+      const cloned = node.clone();
+
+      // Only process declarations
+      if (cloned.type === "decl") {
+        const decl = cloned as Declaration;
+        decl.value = decl.value.replace(/\{name\}/g, name);
+      }
+
+      return cloned;
+    });
+
+  // Generate rules for each hue
+  for (const hueName of hueNamesSet) {
+    const rule = new Rule({ selector: `.${hueName}` });
+    cloneNodesWithName(hueName).forEach((n) => rule.append(n));
+    generatedRules.push(rule);
+  }
+
+  // Replace the original @each-seyuna-color at-rule with all the generated rules
+  atRule.replaceWith(...generatedRules);
+}
+
+/**
+ * Custom PostCSS plugin handler for `@each-fixed-color` at-rules.
+ *
+ * Example usage:
+ *
+ *   @each-fixed-color {
+ *     color: white;
+ *   }
+ *
+ * Will generate:
+ *
+ *   .primary { color: white; }
+ *   .secondary { color: white; }
+ *   ...
+ */
+export function eachFixedColor(atRule: AtRule) {
+  // Read seyuna.json from project root
+  const jsonPath = path.resolve(process.cwd(), "seyuna.json");
+  const fileContents = fs.readFileSync(jsonPath, "utf-8");
+  const data: SeyunaConfig = JSON.parse(fileContents);
+  const light_colors = data.ui.theme.light.colors;
+  const dark_colors = data.ui.theme.dark.colors;
+  const lightColorNamesSet = new Set(Object.keys(light_colors));
+  const darkColorNamesSet = new Set(Object.keys(dark_colors));
+
+  const mergedColorNamesSet = new Set([
+    ...lightColorNamesSet,
+    ...darkColorNamesSet,
+  ]);
+
+  // Guard against atRule.nodes being undefined
+  const nodes = atRule.nodes ?? [];
+
+  const generatedRules: Rule[] = [];
+
+  // Helper to clone nodes and replace {name} placeholder
+  const cloneNodesWithName = (name: string) =>
+    nodes.map((node) => {
+      const cloned = node.clone();
+
+      // Only process declarations
+      if (cloned.type === "decl") {
+        const decl = cloned as Declaration;
+        decl.value = decl.value.replace(/\{name\}/g, name);
+      }
+
+      return cloned;
+    });
+
+  // Generate rules for mergedColorNamesSet
+  for (const colorName of mergedColorNamesSet) {
+    const rule = new Rule({ selector: `.${colorName}` });
+    cloneNodesWithName(colorName).forEach((n) => rule.append(n));
+    generatedRules.push(rule);
+  }
+
+  // Replace the original @each-seyuna-color at-rule with all the generated rules
+  atRule.replaceWith(...generatedRules);
+}

package/src/at-rules/container.ts

@@ -0,0 +1,47 @@
+import { AtRule, ChildNode } from "postcss";
+
+/**
+ * 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) {
+  // Map of shortcuts → container widths
+  const breakpoints: Record<string, string> = {
+    xs: "20rem",
+    sm: "40rem",
+    md: "48rem",
+    lg: "64rem",
+    xl: "80rem",
+    "2xl": "96rem",
+  };
+
+  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})`,
+    });
+
+    clonedNodes.forEach((node) => containerAtRule.append(node));
+
+    atRule.replaceWith(containerAtRule);
+  }
+}

package/src/at-rules/dark.ts

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

package/src/at-rules/index.ts

@@ -1,11 +1,27 @@
+// atRuleHandlers.ts
 import dark from "./dark";
 import light from "./light";
+import container from "./container";
+import { eachStandardColor, eachFixedColor } from "./color";
 import type { AtRule } from "postcss";
 
-export type AtRuleHandler = (atRule: AtRule) => void;
+// Each handler has a name (matches the at-rule) and the function
+export interface AtRuleHandler {
+  name: string;
+  handler: (atRule: AtRule) => void;
+}
 
-export const atRuleHandlers: Record<string, AtRuleHandler> = {
-  light,
-  dark,
+// Ordered array ensures execution order
+export const atRuleHandlers: AtRuleHandler[] = [
+  { 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/src/at-rules/light.ts

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

package/src/functions/color.ts

@@ -1,4 +1,4 @@
-export default function color(
+export function sc(
   name: string,
   alpha?: string,
   lightness?: string,
@@ -20,5 +20,30 @@ export default function color(
     c = chroma;
   }
 
-  return `oklch(${l} ${c} var(--${name}) / ${a})`;
+  return `oklch(${l} ${c} var(--${name}-hue) / ${a})`;
+}
+
+export function fc(
+  name: string,
+  alpha?: string,
+  lightness?: string,
+  chroma?: string
+) {
+  let a: string = "1";
+  let l: string = `var(--${name}-lightness)`;
+  let c: string = `var(--${name}-chroma)`;
+
+  if (alpha && alpha !== "null") {
+    a = alpha;
+  }
+
+  if (lightness && lightness !== "null") {
+    l = lightness;
+  }
+
+  if (chroma && chroma !== "null") {
+    c = chroma;
+  }
+
+  return `oklch(${l} ${c} var(--${name}-hue) / ${a})`;
 }

package/src/functions/index.ts

@@ -1,9 +1,10 @@
-import color from "./color";
+import { sc, fc } from "./color";
 import spacing from "./spacing";
 
 export type FnHandler = (...args: string[]) => string;
 
 export const functions: Record<string, FnHandler> = {
-  color,
+  sc,
+  fc,
   spacing,
 };

package/src/plugin.ts

@@ -31,8 +31,14 @@ export const dynamicFunctionsPlugin: PluginCreator<PluginOptions> = (
       decl.value = value;
     },
 
-    AtRule: {
-      ...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);
+        }
+      }
     },
   };
 };

package/src/types.ts

@@ -0,0 +1,19 @@
+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;
+};