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

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [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)
+
+
+### Bug Fixes
+
+* safely clone nodes and replace {name} placeholders ([8a68ee6](https://github.com/seyuna-corp/seyuna-postcss/commit/8a68ee6f1ade947639151bdbf365c102aa439d37))
+
+# [1.0.0-canary.12](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.11...v1.0.0-canary.12) (2025-09-15)
+
+
+### Bug Fixes
+
+* color functions not running when used inside at-each rules ([995fd98](https://github.com/seyuna-corp/seyuna-postcss/commit/995fd9816f2c2d51caa67add4d3172cee41d0c65))
+
 # [1.0.0-canary.11](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.10...v1.0.0-canary.11) (2025-09-15)
 
 

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

@@ -1,34 +1,9 @@
 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; }
- *   ...
+ * Custom PostCSS handler for @each-standard-color
  */
 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; }
- *   ...
+ * Custom PostCSS handler for @each-fixed-color
  */
 export declare function eachFixedColor(atRule: AtRule): void;

package/dist/at-rules/color.js

@@ -8,116 +8,88 @@ 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");
 /**
- * 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; }
- *   ...
+ * Helper: safely clone nodes and replace {name} placeholders,
+ * evaluate fc() and sc() calls.
  */
-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, nodeList = nodes) => nodeList.map((node) => {
+function cloneNodesWithName(nodeList, name) {
+    return nodeList.flatMap((node) => {
         const cloned = node.clone();
         if (cloned.type === "decl") {
             const decl = cloned;
-            decl.value = decl.value.replace(/\{name\}/g, name);
+            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;
         }
-        else if (cloned.type === "rule") {
+        if (cloned.type === "rule") {
             const rule = cloned;
+            if (!rule.selector)
+                return [];
             rule.selector = rule.selector.replace(/\{name\}/g, name);
-            rule.nodes = cloneNodesWithName(name, rule.nodes || []);
+            rule.nodes = cloneNodesWithName(rule.nodes || [], name);
+            return rule;
         }
-        else if (cloned.type === "atrule") {
-            // If you want {name} in selectors inside at-rules too
+        if (cloned.type === "atrule") {
             cloned.params = cloned.params.replace(/\{name\}/g, name);
-            cloned.nodes = cloneNodesWithName(name, cloned.nodes || []);
+            cloned.nodes = cloneNodesWithName(cloned.nodes || [], name);
+            return cloned.nodes.length ? cloned : [];
         }
-        return cloned;
+        return [];
     });
-    // Generate rules for each hue
-    for (const hueName of hueNamesSet) {
+}
+/**
+ * Custom PostCSS handler for @each-standard-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(hueName).forEach((n) => rule.append(n));
-        generatedRules.push(rule);
+        cloneNodesWithName(nodes, hueName).forEach((n) => rule.append(n));
+        if (rule.nodes.length)
+            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; }
- *   ...
+ * Custom PostCSS handler for @each-fixed-color
  */
 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 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;
-    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 mergedNames = [
+        ...new Set([...Object.keys(light_colors), ...Object.keys(dark_colors)]),
+    ];
     const nodes = atRule.nodes ?? [];
     const generatedRules = [];
-    // Helper to clone nodes and replace {name} placeholder
-    const cloneNodesWithName = (name, nodeList = nodes) => nodeList.map((node) => {
-        const cloned = node.clone();
-        if (cloned.type === "decl") {
-            const decl = cloned;
-            decl.value = decl.value.replace(/\{name\}/g, name);
-        }
-        else if (cloned.type === "rule") {
-            const rule = cloned;
-            rule.selector = rule.selector.replace(/\{name\}/g, name);
-            rule.nodes = cloneNodesWithName(name, rule.nodes || []);
-        }
-        else if (cloned.type === "atrule") {
-            // If you want {name} in selectors inside at-rules too
-            cloned.params = cloned.params.replace(/\{name\}/g, name);
-            cloned.nodes = cloneNodesWithName(name, cloned.nodes || []);
-        }
-        return cloned;
-    });
-    // Generate rules for mergedColorNamesSet
-    for (const colorName of mergedColorNamesSet) {
+    for (const colorName of mergedNames) {
         const rule = new postcss_1.Rule({ selector: `.${colorName}` });
-        cloneNodesWithName(colorName).forEach((n) => rule.append(n));
-        generatedRules.push(rule);
+        cloneNodesWithName(nodes, colorName).forEach((n) => rule.append(n));
+        if (rule.nodes.length)
+            generatedRules.push(rule);
     }
-    // Replace the original @each-seyuna-color at-rule with all the generated rules
     atRule.replaceWith(...generatedRules);
 }

package/package.json

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

package/src/at-rules/color.ts

@@ -2,137 +2,99 @@ import { AtRule, Rule, ChildNode, Declaration } from "postcss";
 import fs from "fs";
 import path from "path";
 import { SeyunaConfig } from "../types";
+import { fc, sc } from "../functions/color";
 
 /**
- * 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; }
- *   ...
+ * Helper: safely clone nodes and replace {name} placeholders,
+ * evaluate fc() and sc() calls.
+ */
+function cloneNodesWithName(nodeList: ChildNode[], name: string): ChildNode[] {
+  return nodeList.flatMap((node) => {
+    const cloned = node.clone();
+
+    if (cloned.type === "decl") {
+      const decl = cloned as Declaration;
+      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 = sc(...(args as [string, string?, string?, string?]));
+      }
+
+      if (/fc\(/.test(value)) {
+        const args = value
+          .match(/fc\(([^)]*)\)/)?.[1]
+          .split(",")
+          .map((s) => s.trim());
+        if (args) value = fc(...(args as [string, string?, string?, string?]));
+      }
+
+      decl.value = value;
+      return decl;
+    }
+
+    if (cloned.type === "rule") {
+      const rule = cloned as Rule;
+      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 [];
+  });
+}
+
+/**
+ * Custom PostCSS handler for @each-standard-color
  */
 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 data: SeyunaConfig = JSON.parse(fs.readFileSync(jsonPath, "utf-8"));
   const hues = data.ui.theme.hues;
-  const hueNamesSet = new Set(Object.keys(hues));
+  const hueNames = 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,
-    nodeList: ChildNode[] = nodes
-  ): ChildNode[] =>
-    nodeList.map((node) => {
-      const cloned = node.clone();
-
-      if (cloned.type === "decl") {
-        const decl = cloned as Declaration;
-        decl.value = decl.value.replace(/\{name\}/g, name);
-      } else if (cloned.type === "rule") {
-        const rule = cloned as Rule;
-        rule.selector = rule.selector.replace(/\{name\}/g, name);
-        rule.nodes = cloneNodesWithName(name, rule.nodes || []);
-      } else if (cloned.type === "atrule") {
-        // If you want {name} in selectors inside at-rules too
-        cloned.params = cloned.params.replace(/\{name\}/g, name);
-        cloned.nodes = cloneNodesWithName(name, cloned.nodes || []);
-      }
-
-      return cloned;
-    });
-
-  // Generate rules for each hue
-  for (const hueName of hueNamesSet) {
+  for (const hueName of hueNames) {
     const rule = new Rule({ selector: `.${hueName}` });
-    cloneNodesWithName(hueName).forEach((n) => rule.append(n));
-    generatedRules.push(rule);
+    cloneNodesWithName(nodes, hueName).forEach((n) => rule.append(n));
+    if (rule.nodes.length) 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; }
- *   ...
+ * Custom PostCSS handler for @each-fixed-color
  */
 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 data: SeyunaConfig = JSON.parse(fs.readFileSync(jsonPath, "utf-8"));
   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,
-  ]);
+  const mergedNames = [
+    ...new Set([...Object.keys(light_colors), ...Object.keys(dark_colors)]),
+  ];
 
-  // 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,
-    nodeList: ChildNode[] = nodes
-  ): ChildNode[] =>
-    nodeList.map((node) => {
-      const cloned = node.clone();
-
-      if (cloned.type === "decl") {
-        const decl = cloned as Declaration;
-        decl.value = decl.value.replace(/\{name\}/g, name);
-      } else if (cloned.type === "rule") {
-        const rule = cloned as Rule;
-        rule.selector = rule.selector.replace(/\{name\}/g, name);
-        rule.nodes = cloneNodesWithName(name, rule.nodes || []);
-      } else if (cloned.type === "atrule") {
-        // If you want {name} in selectors inside at-rules too
-        cloned.params = cloned.params.replace(/\{name\}/g, name);
-        cloned.nodes = cloneNodesWithName(name, cloned.nodes || []);
-      }
-
-      return cloned;
-    });
-
-  // Generate rules for mergedColorNamesSet
-  for (const colorName of mergedColorNamesSet) {
+  for (const colorName of mergedNames) {
     const rule = new Rule({ selector: `.${colorName}` });
-    cloneNodesWithName(colorName).forEach((n) => rule.append(n));
-    generatedRules.push(rule);
+    cloneNodesWithName(nodes, colorName).forEach((n) => rule.append(n));
+    if (rule.nodes.length) generatedRules.push(rule);
   }
 
-  // Replace the original @each-seyuna-color at-rule with all the generated rules
   atRule.replaceWith(...generatedRules);
 }