@seyuna/postcss 1.0.0-canary.12 → 1.0.0-canary.14

package/CHANGELOG.md

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

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; }
- *   ...
+ * 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; }
- *   ...
+ * Handler for @each-fixed-color
  */
 export declare function eachFixedColor(atRule: AtRule): void;

package/dist/at-rules/color.js

@@ -5,156 +5,37 @@ var __importDefault = (this && this.__importDefault) || function (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");
+const helpers_1 = require("../helpers");
 /**
- * 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; }
- *   ...
+ * Handler for @each-standard-color
  */
 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) => {
-        const cloned = node.clone();
-        if (cloned.type === "decl") {
-            const decl = cloned;
-            // First replace {name} placeholders
-            let value = decl.value.replace(/\{name\}/g, name);
-            // Detect sc(...) or fc(...) calls and evaluate them
-            if (/sc\(/.test(value)) {
-                const args = value
-                    .match(/sc\(([^)]*)\)/)?.[1]
-                    .split(",")
-                    .map((s) => s.trim().replace(/\{name\}/g, name));
-                if (args)
-                    value = (0, color_1.sc)(...args);
-            }
-            if (/fc\(/.test(value)) {
-                const args = value
-                    .match(/fc\(([^)]*)\)/)?.[1]
-                    .split(",")
-                    .map((s) => s.trim().replace(/\{name\}/g, name));
-                if (args)
-                    value = (0, color_1.fc)(...args);
-            }
-            decl.value = value;
-        }
-        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") {
-            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) {
-        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);
+    const data = JSON.parse(fs_1.default.readFileSync(jsonPath, "utf-8"));
+    const hueNames = Object.keys(data.ui.theme.hues);
+    const rules = (0, helpers_1.generateRules)(hueNames, atRule);
+    if (rules.length)
+        atRule.replaceWith(...rules);
+    else
+        atRule.remove();
 }
 /**
- * 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; }
- *   ...
+ * 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 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, nodeList = nodes) => nodeList.map((node) => {
-        const cloned = node.clone();
-        if (cloned.type === "decl") {
-            const decl = cloned;
-            // First replace {name} placeholders
-            let value = decl.value.replace(/\{name\}/g, name);
-            // Detect sc(...) or fc(...) calls and evaluate them
-            if (/sc\(/.test(value)) {
-                const args = value
-                    .match(/sc\(([^)]*)\)/)?.[1]
-                    .split(",")
-                    .map((s) => s.trim().replace(/\{name\}/g, name));
-                if (args)
-                    value = (0, color_1.sc)(...args);
-            }
-            if (/fc\(/.test(value)) {
-                const args = value
-                    .match(/fc\(([^)]*)\)/)?.[1]
-                    .split(",")
-                    .map((s) => s.trim().replace(/\{name\}/g, name));
-                if (args)
-                    value = (0, color_1.fc)(...args);
-            }
-            decl.value = value;
-        }
-        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") {
-            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) {
-        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);
+    const data = JSON.parse(fs_1.default.readFileSync(jsonPath, "utf-8"));
+    const mergedNames = [
+        ...new Set([
+            ...Object.keys(data.ui.theme.light.colors),
+            ...Object.keys(data.ui.theme.dark.colors),
+        ]),
+    ];
+    const rules = (0, helpers_1.generateRules)(mergedNames, atRule);
+    if (rules.length)
+        atRule.replaceWith(...rules);
+    else
+        atRule.remove();
 }

package/dist/helpers.d.ts

@@ -0,0 +1,10 @@
+import { Rule, ChildNode, AtRule } from "postcss";
+/**
+ * Helper: clone nodes and replace {name} placeholders safely
+ * Returns only valid Rules or Declarations (never raw AtRules)
+ */
+export declare function cloneNodes(nodes: ChildNode[], name: string): ChildNode[];
+/**
+ * Generate CSS rules from a list of names
+ */
+export declare function generateRules(names: string[], atRule: AtRule): Rule[];

package/dist/helpers.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cloneNodes = cloneNodes;
+exports.generateRules = generateRules;
+const postcss_1 = require("postcss");
+const color_1 = require("./functions/color");
+/**
+ * Helper: clone nodes and replace {name} placeholders safely
+ * Returns only valid Rules or Declarations (never raw AtRules)
+ */
+function cloneNodes(nodes, name) {
+    return nodes.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);
+            // Recursively clone child nodes and only keep valid rules/decls
+            rule.nodes = cloneNodes(rule.nodes || [], name).filter((n) => n.type === "rule" || n.type === "decl");
+            if (!rule.nodes.length)
+                return [];
+            return rule;
+        }
+        // Ignore AtRules inside rules — they must be processed first
+        return [];
+    });
+}
+/**
+ * Generate CSS rules from a list of names
+ */
+function generateRules(names, atRule) {
+    const nodes = atRule.nodes ?? [];
+    const generatedRules = [];
+    for (const name of names) {
+        const rule = new postcss_1.Rule({ selector: `&.${name}` });
+        cloneNodes(nodes, name).forEach((n) => {
+            if (n.type === "rule" && n.selector && n.nodes?.length)
+                rule.append(n);
+            if (n.type === "decl")
+                rule.append(n);
+        });
+        if (rule.nodes.length)
+            generatedRules.push(rule);
+    }
+    return generatedRules;
+}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@seyuna/postcss",
-  "version": "1.0.0-canary.12",
+  "version": "1.0.0-canary.14",
   "description": "Seyuna UI's postcss plugin",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "dev": "tsc -w"
   },
   "keywords": [
     "postcss",
@@ -30,6 +31,7 @@
     "@semantic-release/release-notes-generator": "^14.0.3",
     "@types/node": "^20.0.0",
     "postcss": "^8.5.6",
+    "postcss-selector-parser": "^7.1.0",
     "semantic-release": "^24.2.7",
     "typescript": "^5.0.0"
   }

package/src/at-rules/color.ts

@@ -2,182 +2,36 @@ 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";
+import { generateRules } from "../helpers";
 
 /**
- * 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; }
- *   ...
+ * 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 hues = data.ui.theme.hues;
-  const hueNamesSet = new Set(Object.keys(hues));
+  const data: SeyunaConfig = JSON.parse(fs.readFileSync(jsonPath, "utf-8"));
+  const hueNames = Object.keys(data.ui.theme.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;
-
-        // First replace {name} placeholders
-        let value = decl.value.replace(/\{name\}/g, name);
-
-        // Detect sc(...) or fc(...) calls and evaluate them
-        if (/sc\(/.test(value)) {
-          const args = value
-            .match(/sc\(([^)]*)\)/)?.[1]
-            .split(",")
-            .map((s: string) => s.trim().replace(/\{name\}/g, name));
-          if (args)
-            value = sc(...(args as [string, string?, string?, string?]));
-        }
-
-        if (/fc\(/.test(value)) {
-          const args = value
-            .match(/fc\(([^)]*)\)/)?.[1]
-            .split(",")
-            .map((s: string) => s.trim().replace(/\{name\}/g, name));
-          if (args)
-            value = fc(...(args as [string, string?, string?, string?]));
-        }
-
-        decl.value = value;
-      } 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") {
-        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) {
-    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);
+  const rules = generateRules(hueNames, atRule);
+  if (rules.length) atRule.replaceWith(...rules);
+  else atRule.remove();
 }
 
 /**
- * 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; }
- *   ...
+ * 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 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,
-    nodeList: ChildNode[] = nodes
-  ): ChildNode[] =>
-    nodeList.map((node) => {
-      const cloned = node.clone();
-
-      if (cloned.type === "decl") {
-        const decl = cloned as Declaration;
-
-        // First replace {name} placeholders
-        let value = decl.value.replace(/\{name\}/g, name);
-
-        // Detect sc(...) or fc(...) calls and evaluate them
-        if (/sc\(/.test(value)) {
-          const args = value
-            .match(/sc\(([^)]*)\)/)?.[1]
-            .split(",")
-            .map((s: string) => s.trim().replace(/\{name\}/g, name));
-          if (args)
-            value = sc(...(args as [string, string?, string?, string?]));
-        }
-
-        if (/fc\(/.test(value)) {
-          const args = value
-            .match(/fc\(([^)]*)\)/)?.[1]
-            .split(",")
-            .map((s: string) => s.trim().replace(/\{name\}/g, name));
-          if (args)
-            value = fc(...(args as [string, string?, string?, string?]));
-        }
-
-        decl.value = value;
-      } 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") {
-        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) {
-    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);
+  const data: SeyunaConfig = JSON.parse(fs.readFileSync(jsonPath, "utf-8"));
+
+  const mergedNames = [
+    ...new Set([
+      ...Object.keys(data.ui.theme.light.colors),
+      ...Object.keys(data.ui.theme.dark.colors),
+    ]),
+  ];
+
+  const rules = generateRules(mergedNames, atRule);
+  if (rules.length) atRule.replaceWith(...rules);
+  else atRule.remove();
 }

package/src/helpers.ts

@@ -0,0 +1,73 @@
+import { Rule, ChildNode, Declaration, AtRule } from "postcss";
+import { fc, sc } from "./functions/color";
+
+/**
+ * Helper: clone nodes and replace {name} placeholders safely
+ * Returns only valid Rules or Declarations (never raw AtRules)
+ */
+export function cloneNodes(nodes: ChildNode[], name: string): ChildNode[] {
+  return nodes.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);
+
+      // Recursively clone child nodes and only keep valid rules/decls
+      rule.nodes = cloneNodes(rule.nodes || [], name).filter(
+        (n) => n.type === "rule" || n.type === "decl"
+      );
+
+      if (!rule.nodes.length) return [];
+      return rule;
+    }
+
+    // Ignore AtRules inside rules — they must be processed first
+    return [];
+  });
+}
+
+/**
+ * Generate CSS rules from a list of names
+ */
+export function generateRules(names: string[], atRule: AtRule): Rule[] {
+  const nodes = atRule.nodes ?? [];
+  const generatedRules: Rule[] = [];
+
+  for (const name of names) {
+    const rule = new Rule({ selector: `&.${name}` });
+    cloneNodes(nodes, name).forEach((n) => {
+      if (n.type === "rule" && n.selector && n.nodes?.length) rule.append(n);
+      if (n.type === "decl") rule.append(n);
+    });
+
+    if (rule.nodes.length) generatedRules.push(rule);
+  }
+
+  return generatedRules;
+}