@seyuna/postcss 1.0.0-canary.6 → 1.0.0-canary.7

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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)
 
 

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

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

package/dist/at-rules/color.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.eachSeyunaColor = eachSeyunaColor;
+const postcss_1 = require("postcss");
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+/**
+ * Custom PostCSS plugin handler for `@each-seyuna-color` at-rules.
+ *
+ * Example usage:
+ *
+ *   @each-seyuna-color {
+ *     color: white;
+ *   }
+ *
+ * Will generate:
+ *
+ *   .alpha { color: white; }
+ *   .beta { color: white; }
+ *   .gamma { color: white; }
+ *   ...
+ */
+function eachSeyunaColor(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 light_colors = data.ui.theme.light;
+    const dark_colors = data.ui.theme.dark;
+    const hueNamesSet = new Set(Object.keys(hues));
+    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 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);
+    }
+    // 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/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,12 +4,16 @@ 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"));
 const container_1 = __importDefault(require("./container"));
-exports.atRuleHandlers = {
-    light: light_1.default,
-    dark: dark_1.default,
-    container: container_1.default,
+const color_1 = require("./color");
+// Ordered array ensures execution order
+exports.atRuleHandlers = [
+    { name: "each-seyuna-color", handler: color_1.eachSeyunaColor }, // first
+    { name: "light", handler: light_1.default },
+    { name: "dark", handler: dark_1.default },
+    { name: "container", handler: container_1.default },
     // add more handlers here as needed
-};
+];

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.6",
+  "version": "1.0.0-canary.7",
   "description": "Seyuna UI's postcss plugin",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/at-rules/color.ts

@@ -0,0 +1,76 @@
+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-seyuna-color` at-rules.
+ *
+ * Example usage:
+ *
+ *   @each-seyuna-color {
+ *     color: white;
+ *   }
+ *
+ * Will generate:
+ *
+ *   .alpha { color: white; }
+ *   .beta { color: white; }
+ *   .gamma { color: white; }
+ *   ...
+ */
+export function eachSeyunaColor(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 light_colors = data.ui.theme.light;
+  const dark_colors = data.ui.theme.dark;
+
+  const hueNamesSet = new Set(Object.keys(hues));
+  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 each hue
+  for (const hueName of hueNamesSet) {
+    const rule = new Rule({ selector: `.${hueName}` });
+    cloneNodesWithName(hueName).forEach((n) => rule.append(n));
+    generatedRules.push(rule);
+  }
+
+  // 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/index.ts

@@ -1,13 +1,21 @@
+// atRuleHandlers.ts
 import dark from "./dark";
 import light from "./light";
 import container from "./container";
+import { eachSeyunaColor } 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,
-  container,
+// Ordered array ensures execution order
+export const atRuleHandlers: AtRuleHandler[] = [
+  { name: "each-seyuna-color", handler: eachSeyunaColor }, // first
+  { name: "light", handler: light },
+  { name: "dark", handler: dark },
+  { name: "container", handler: container },
   // add more handlers here as needed
-};
+];

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;
+};