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

package/CHANGELOG.md

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

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

@@ -1,10 +1,10 @@
 import { AtRule } from "postcss";
 /**
- * Custom PostCSS plugin handler for `@each-seyuna-color` at-rules.
+ * Custom PostCSS plugin handler for `@each-standard-color` at-rules.
  *
  * Example usage:
  *
- *   @each-seyuna-color {
+ *   @each-standard-color {
  *     color: white;
  *   }
  *
@@ -15,4 +15,20 @@ import { AtRule } from "postcss";
  *   .gamma { color: white; }
  *   ...
  */
-export declare function eachSeyunaColor(atRule: AtRule): void;
+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

@@ -3,16 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.eachSeyunaColor = eachSeyunaColor;
+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-seyuna-color` at-rules.
+ * Custom PostCSS plugin handler for `@each-standard-color` at-rules.
  *
  * Example usage:
  *
- *   @each-seyuna-color {
+ *   @each-standard-color {
  *     color: white;
  *   }
  *
@@ -23,15 +24,57 @@ const path_1 = __importDefault(require("path"));
  *   .gamma { color: white; }
  *   ...
  */
-function eachSeyunaColor(atRule) {
+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;
     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([
@@ -51,12 +94,6 @@ function eachSeyunaColor(atRule) {
         }
         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}` });

package/dist/at-rules/index.js

@@ -11,7 +11,8 @@ const container_1 = __importDefault(require("./container"));
 const color_1 = require("./color");
 // Ordered array ensures execution order
 exports.atRuleHandlers = [
-    { name: "each-seyuna-color", handler: color_1.eachSeyunaColor }, // first
+    { 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: "container", handler: container_1.default },

package/package.json

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

package/src/at-rules/color.ts

@@ -4,11 +4,11 @@ import path from "path";
 import { SeyunaConfig } from "../types";
 
 /**
- * Custom PostCSS plugin handler for `@each-seyuna-color` at-rules.
+ * Custom PostCSS plugin handler for `@each-standard-color` at-rules.
  *
  * Example usage:
  *
- *   @each-seyuna-color {
+ *   @each-standard-color {
  *     color: white;
  *   }
  *
@@ -19,17 +19,66 @@ import { SeyunaConfig } from "../types";
  *   .gamma { color: white; }
  *   ...
  */
-export function eachSeyunaColor(atRule: AtRule) {
+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;
   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));
 
@@ -57,13 +106,6 @@ export function eachSeyunaColor(atRule: AtRule) {
       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}` });

package/src/at-rules/index.ts

@@ -2,7 +2,7 @@
 import dark from "./dark";
 import light from "./light";
 import container from "./container";
-import { eachSeyunaColor } from "./color";
+import { eachStandardColor, eachFixedColor } from "./color";
 import type { AtRule } from "postcss";
 
 // Each handler has a name (matches the at-rule) and the function
@@ -13,7 +13,8 @@ export interface AtRuleHandler {
 
 // Ordered array ensures execution order
 export const atRuleHandlers: AtRuleHandler[] = [
-  { name: "each-seyuna-color", handler: eachSeyunaColor }, // first
+  { name: "each-standard-color", handler: eachStandardColor }, // first
+  { name: "each-fixed-color", handler: eachFixedColor },
   { name: "light", handler: light },
   { name: "dark", handler: dark },
   { name: "container", handler: container },