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

package/CHANGELOG.md

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

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

@@ -1,9 +1,9 @@
 import { AtRule } from "postcss";
 /**
- * Custom PostCSS handler for @each-standard-color
+ * Handler for @each-standard-color
  */
 export declare function eachStandardColor(atRule: AtRule): void;
 /**
- * Custom PostCSS handler for @each-fixed-color
+ * Handler for @each-fixed-color
  */
 export declare function eachFixedColor(atRule: AtRule): void;

package/dist/at-rules/color.js

@@ -5,91 +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");
 /**
- * Helper: safely clone nodes and replace {name} placeholders,
- * evaluate fc() and sc() calls.
- */
-function cloneNodesWithName(nodeList, name) {
-    return nodeList.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);
-            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
+ * 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(nodes, hueName).forEach((n) => rule.append(n));
-        if (rule.nodes.length)
-            generatedRules.push(rule);
-    }
-    atRule.replaceWith(...generatedRules);
+    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 handler for @each-fixed-color
+ * Handler for @each-fixed-color
  */
 function eachFixedColor(atRule) {
     const jsonPath = path_1.default.resolve(process.cwd(), "seyuna.json");
     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 mergedNames = [
-        ...new Set([...Object.keys(light_colors), ...Object.keys(dark_colors)]),
+        ...new Set([
+            ...Object.keys(data.ui.theme.light.colors),
+            ...Object.keys(data.ui.theme.dark.colors),
+        ]),
     ];
-    const nodes = atRule.nodes ?? [];
-    const generatedRules = [];
-    for (const colorName of mergedNames) {
-        const rule = new postcss_1.Rule({ selector: `.${colorName}` });
-        cloneNodesWithName(nodes, colorName).forEach((n) => rule.append(n));
-        if (rule.nodes.length)
-            generatedRules.push(rule);
-    }
-    atRule.replaceWith(...generatedRules);
+    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.13",
+  "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,99 +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";
 
 /**
- * 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
+ * Handler for @each-standard-color
  */
 export function eachStandardColor(atRule: AtRule) {
   const jsonPath = path.resolve(process.cwd(), "seyuna.json");
   const data: SeyunaConfig = JSON.parse(fs.readFileSync(jsonPath, "utf-8"));
-  const hues = data.ui.theme.hues;
-  const hueNames = Object.keys(hues);
-
-  const nodes = atRule.nodes ?? [];
-  const generatedRules: Rule[] = [];
+  const hueNames = Object.keys(data.ui.theme.hues);
 
-  for (const hueName of hueNames) {
-    const rule = new Rule({ selector: `.${hueName}` });
-    cloneNodesWithName(nodes, hueName).forEach((n) => rule.append(n));
-    if (rule.nodes.length) generatedRules.push(rule);
-  }
-
-  atRule.replaceWith(...generatedRules);
+  const rules = generateRules(hueNames, atRule);
+  if (rules.length) atRule.replaceWith(...rules);
+  else atRule.remove();
 }
 
 /**
- * Custom PostCSS handler for @each-fixed-color
+ * Handler for @each-fixed-color
  */
 export function eachFixedColor(atRule: AtRule) {
   const jsonPath = path.resolve(process.cwd(), "seyuna.json");
   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 mergedNames = [
-    ...new Set([...Object.keys(light_colors), ...Object.keys(dark_colors)]),
+    ...new Set([
+      ...Object.keys(data.ui.theme.light.colors),
+      ...Object.keys(data.ui.theme.dark.colors),
+    ]),
   ];
 
-  const nodes = atRule.nodes ?? [];
-  const generatedRules: Rule[] = [];
-
-  for (const colorName of mergedNames) {
-    const rule = new Rule({ selector: `.${colorName}` });
-    cloneNodesWithName(nodes, colorName).forEach((n) => rule.append(n));
-    if (rule.nodes.length) generatedRules.push(rule);
-  }
-
-  atRule.replaceWith(...generatedRules);
+  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;
+}