@seyuna/postcss 0.0.1-dev.9 → 1.0.0-canary.10

package/.github/workflows/release.yml

@@ -1,156 +1,41 @@
-name: Build, Release, and Publish
+name: Release
 
 on:
   push:
     branches:
-      - stable
-      - next
-      - dev
-  workflow_dispatch:
+      - main
+      - canary
 
 permissions:
   contents: write
+  issues: write
+  pull-requests: write
   id-token: write
 
 jobs:
-  build:
-    name: Build Plugin
+  release:
+    name: Semantic Release
     runs-on: ubuntu-latest
-    outputs:
-      version: ${{ steps.version.outputs.version }}
-
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Read version from package.json
-        id: version
-        run: |
-          VERSION=$(node -p "require('./package.json').version")
-          echo "version=$VERSION" >> $GITHUB_OUTPUT
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          registry-url: https://registry.npmjs.org
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build TypeScript
-        run: npm run build
-
-      - name: List dist contents before upload
-        run: ls -l dist
-
-      - name: Upload build artifact
-        uses: actions/upload-artifact@v4
+      - uses: actions/checkout@v4
         with:
-          name: plugin-dist
-          path: dist
+          fetch-depth: 0
 
-  publish:
-    name: Publish to npm
-    runs-on: ubuntu-latest
-    needs: build
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Set up Node.js
+      - name: Setup Node.js with npm auth
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          registry-url: https://registry.npmjs.org
-
-      - name: Download build artifact
-        uses: actions/download-artifact@v4
-        with:
-          name: plugin-dist
-          path: dist
-
-      - name: Authenticate with npm
-        run: npm config set //registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}
-
-      - name: Determine npm tag
-        id: tag
-        run: |
-          BRANCH="${GITHUB_REF##*/}"
-          if [ "$BRANCH" = "stable" ]; then
-            echo "tag=latest" >> $GITHUB_OUTPUT
-          else
-            echo "tag=$BRANCH" >> $GITHUB_OUTPUT
-          fi
+          registry-url: https://registry.npmjs.org/
+          scope: "@seyuna"
+          always-auth: true
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Install dependencies
         run: npm ci
 
-      - name: Check if version exists on npm
-        id: version_check
-        run: |
-          PKG_NAME=$(node -p "require('./package.json').name")
-          PKG_VERSION=$(node -p "require('./package.json').version")
-          if npm view "$PKG_NAME@$PKG_VERSION" > /dev/null 2>&1; then
-            echo "exists=true" >> $GITHUB_OUTPUT
-          else
-            echo "exists=false" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Publish package
-        if: steps.version_check.outputs.exists != 'true'
-        run: npm publish --access public --tag ${{ steps.tag.outputs.tag }}
-
-  release:
-    name: Create GitHub Release
-    runs-on: ubuntu-latest
-    needs: [build, publish]
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Download build artifact
-        uses: actions/download-artifact@v4
-        with:
-          name: plugin-dist
-          path: dist
-
-      - name: Generate changelog
-        run: |
-          last_tag=$(git tag --sort=-creatordate | grep '^v' | grep -v "v${{ needs.build.outputs.version }}" | head -n 1)
-
-          if [ -z "$last_tag" ]; then
-            changelog=$(git log --merges --pretty=format:"* %s (%h)")
-          else
-            changelog=$(git log "$last_tag"..HEAD --merges --pretty=format:"* %s (%h)")
-          fi
-
-          {
-            echo "Automated release for version v${{ needs.build.outputs.version }}"
-            echo ""
-            echo "## Changes"
-            echo ""
-            echo "$changelog"
-          } > RELEASE_NOTES.md
-
-      - name: Check if GitHub release exists
-        id: release_check
-        run: |
-          if gh release view "v${{ needs.build.outputs.version }}" >/dev/null 2>&1; then
-            echo "exists=true" >> $GITHUB_OUTPUT
-          else
-            echo "exists=false" >> $GITHUB_OUTPUT
-          fi
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Create GitHub Release
-        if: steps.release_check.outputs.exists != 'true'
-        run: |
-          gh release create "v${{ needs.build.outputs.version }}" \
-            --title "v${{ needs.build.outputs.version }}" \
-            --notes-file RELEASE_NOTES.md
+      - name: Run Semantic Release
         env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release

package/CHANGELOG.md

@@ -0,0 +1,79 @@
+# [1.0.0-canary.10](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.9...v1.0.0-canary.10) (2025-09-10)
+
+
+### Bug Fixes
+
+* registered each breakpoint to the same handler for at-rule `container` ([f3f5b36](https://github.com/seyuna-corp/seyuna-postcss/commit/f3f5b3665291dc94e92f3f7c2b2a576b4bdb4517))
+
+# [1.0.0-canary.9](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.8...v1.0.0-canary.9) (2025-09-10)
+
+
+### Bug Fixes
+
+* colors selector in at-rule `each-fixed-color` ([31adb28](https://github.com/seyuna-corp/seyuna-postcss/commit/31adb28f3576a0dcfb78a9aadf331ee4b7ef3e0c))
+
+# [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)
+
+
+### 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)
+
+
+### Features
+
+* add new color function 'fc' ([70e961f](https://github.com/seyuna-corp/seyuna-postcss/commit/70e961fb0b0a13e358de15b42a87b7890f3fc5c0))
+
+
+### BREAKING CHANGES
+
+* changed how 'sc' functions, not backward-compatible
+
+# [1.0.0-canary.5](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.4...v1.0.0-canary.5) (2025-08-25)
+
+
+### Bug Fixes
+
+* changed color function name to sc to avoid conflicts with the default css color() function ([a46e96c](https://github.com/seyuna-corp/seyuna-postcss/commit/a46e96c74839f930d39a2c273c822a689a942783))
+
+# [1.0.0-canary.4](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.3...v1.0.0-canary.4) (2025-08-24)
+
+
+### Bug Fixes
+
+* at-rules for mode now ensure that [data-mode=system] before enforcing prefers-color-scheme ([475055d](https://github.com/seyuna-corp/seyuna-postcss/commit/475055db1d5662d25631953af669bf64b2e0468e))
+
+# [1.0.0-canary.3](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.2...v1.0.0-canary.3) (2025-08-24)
+
+
+### Bug Fixes
+
+* prioritized data-mode over prefers-color-scheme for [@dark](https://github.com/dark) & [@light](https://github.com/light) rules ([1dafbe7](https://github.com/seyuna-corp/seyuna-postcss/commit/1dafbe74c2ceae8faf28f55ac64846e9e752405b))
+
+# [1.0.0-canary.2](https://github.com/seyuna-corp/seyuna-postcss/compare/v1.0.0-canary.1...v1.0.0-canary.2) (2025-08-08)
+
+
+### Bug Fixes
+
+* added os mode selectors to dark and light at-rules ([aab8f42](https://github.com/seyuna-corp/seyuna-postcss/commit/aab8f42f05d8bfedf45b19352134254f2da4d9f0))
+
+# 1.0.0-canary.1 (2025-08-07)
+
+
+### Bug Fixes
+
+* Clone all child nodes inside [@rules](https://github.com/rules) to prevent them from being detached ([6697d34](https://github.com/seyuna-corp/seyuna-postcss/commit/6697d34e604b1de1f319eee060604c4efc201251))

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

@@ -0,0 +1,34 @@
+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; }
+ *   ...
+ */
+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

@@ -0,0 +1,105 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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"));
+/**
+ * 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; }
+ *   ...
+ */
+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.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) => 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 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/container.d.ts

@@ -0,0 +1,18 @@
+import { AtRule } from "postcss";
+/**
+ * Custom PostCSS plugin handler for responsive at-rules.
+ *
+ * Example:
+ *
+ *   @xs {
+ *     .box { color: red; }
+ *   }
+ *
+ * Into:
+ *
+ *   @xs (min-width: 234px) {
+ *     .box { color: red; }
+ *   }
+ *
+ */
+export default function container(atRule: AtRule): void;

package/dist/at-rules/container.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = container;
+const postcss_1 = require("postcss");
+/**
+ * Custom PostCSS plugin handler for responsive at-rules.
+ *
+ * Example:
+ *
+ *   @xs {
+ *     .box { color: red; }
+ *   }
+ *
+ * Into:
+ *
+ *   @xs (min-width: 234px) {
+ *     .box { color: red; }
+ *   }
+ *
+ */
+function container(atRule) {
+    // Map of shortcuts → container widths
+    const breakpoints = {
+        xs: "20rem",
+        sm: "40rem",
+        md: "48rem",
+        lg: "64rem",
+        xl: "80rem",
+        "2xl": "96rem",
+    };
+    if (Object.keys(breakpoints).includes(atRule.name)) {
+        const minWidth = breakpoints[atRule.name];
+        const clonedNodes = [];
+        atRule.each((node) => {
+            clonedNodes.push(node.clone());
+        });
+        const containerAtRule = new postcss_1.AtRule({
+            name: "container",
+            params: `(min-width: ${minWidth})`,
+        });
+        clonedNodes.forEach((node) => containerAtRule.append(node));
+        atRule.replaceWith(containerAtRule);
+    }
+}

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

@@ -1,2 +1,23 @@
-import { type AtRule } from "postcss";
+import { AtRule } from "postcss";
+/**
+ * Custom PostCSS plugin handler for `@dark` at-rules.
+ *
+ * Transforms:
+ *
+ *   @dark {
+ *     color: white;
+ *   }
+ *
+ * Into:
+ *
+ *   @media (prefers-color-scheme: dark) {
+ *     [data-mode="system"] & {
+ *       color: white;
+ *     }
+ *   }
+ *
+ *   [data-mode="dark"] & {
+ *     color: white;
+ *   }
+ */
 export default function dark(atRule: AtRule): void;

package/dist/at-rules/dark.js

@@ -2,12 +2,64 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = dark;
 const postcss_1 = require("postcss");
+/**
+ * Custom PostCSS plugin handler for `@dark` at-rules.
+ *
+ * Transforms:
+ *
+ *   @dark {
+ *     color: white;
+ *   }
+ *
+ * Into:
+ *
+ *   @media (prefers-color-scheme: dark) {
+ *     [data-mode="system"] & {
+ *       color: white;
+ *     }
+ *   }
+ *
+ *   [data-mode="dark"] & {
+ *     color: white;
+ *   }
+ */
 function dark(atRule) {
-    // Create a new nested rule: [data-mode="dark"] & { ... }
-    const nestedRule = new postcss_1.Rule({
+    const clonedNodes = [];
+    // Clone all child nodes inside the @dark block
+    // (so we can reuse them in both generated rules).
+    atRule.each((node) => {
+        clonedNodes.push(node.clone());
+    });
+    /**
+     * Rule 1: [data-mode="dark"] & { ... }
+     *
+     * This applies the styles when the user explicitly sets dark mode.
+     */
+    const darkRule = new postcss_1.Rule({
         selector: `[data-mode="dark"] &`,
-        nodes: atRule.nodes, // move children inside
     });
-    // Replace @dark atRule with the new nested rule
-    atRule.replaceWith(nestedRule);
+    clonedNodes.forEach((node) => darkRule.append(node.clone()));
+    /**
+     * Rule 2: @media (prefers-color-scheme: dark) { [data-mode="system"] & { ... } }
+     *
+     * This applies the styles only when:
+     *   - The user’s OS prefers dark mode
+     *   - AND the app is in "system" mode (i.e. follow system preference)
+     */
+    const mediaAtRule = new postcss_1.AtRule({
+        name: "media",
+        params: "(prefers-color-scheme: dark)",
+    });
+    // Wrap cloned rules under `[data-mode="system"]`
+    const systemRule = new postcss_1.Rule({
+        selector: `[data-mode="system"] &`,
+    });
+    clonedNodes.forEach((node) => systemRule.append(node.clone()));
+    // Nest `[data-mode="system"]` inside the @media block
+    mediaAtRule.append(systemRule);
+    /**
+     * Replace the original @dark rule in the CSS tree
+     * with our two new generated rules.
+     */
+    atRule.replaceWith(mediaAtRule, darkRule);
 }

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,10 +4,22 @@ 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"));
-exports.atRuleHandlers = {
-    light: light_1.default,
-    dark: dark_1.default,
+const container_1 = __importDefault(require("./container"));
+const color_1 = require("./color");
+// Ordered array ensures execution order
+exports.atRuleHandlers = [
+    { 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: "xs", handler: container_1.default },
+    { name: "sm", handler: container_1.default },
+    { name: "md", handler: container_1.default },
+    { name: "lg", handler: container_1.default },
+    { name: "xl", handler: container_1.default },
+    { name: "2xl", handler: container_1.default },
     // add more handlers here as needed
-};
+];

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

@@ -1,2 +1,23 @@
-import { type AtRule } from "postcss";
+import { AtRule } from "postcss";
+/**
+ * Custom PostCSS plugin handler for `@light` at-rules.
+ *
+ * Transforms:
+ *
+ *   @light {
+ *     color: white;
+ *   }
+ *
+ * Into:
+ *
+ *   @media (prefers-color-scheme: light) {
+ *     [data-mode="system"] & {
+ *       color: white;
+ *     }
+ *   }
+ *
+ *   [data-mode="light"] & {
+ *     color: white;
+ *   }
+ */
 export default function light(atRule: AtRule): void;

package/dist/at-rules/light.js

@@ -2,12 +2,64 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = light;
 const postcss_1 = require("postcss");
+/**
+ * Custom PostCSS plugin handler for `@light` at-rules.
+ *
+ * Transforms:
+ *
+ *   @light {
+ *     color: white;
+ *   }
+ *
+ * Into:
+ *
+ *   @media (prefers-color-scheme: light) {
+ *     [data-mode="system"] & {
+ *       color: white;
+ *     }
+ *   }
+ *
+ *   [data-mode="light"] & {
+ *     color: white;
+ *   }
+ */
 function light(atRule) {
-    // Create a new nested rule: [data-mode="light"] & { ... }
-    const nestedRule = new postcss_1.Rule({
+    const clonedNodes = [];
+    // Clone all child nodes inside the @light block
+    // (so we can reuse them in both generated rules).
+    atRule.each((node) => {
+        clonedNodes.push(node.clone());
+    });
+    /**
+     * Rule 1: [data-mode="light"] & { ... }
+     *
+     * This applies the styles when the user explicitly sets light mode.
+     */
+    const lightRule = new postcss_1.Rule({
         selector: `[data-mode="light"] &`,
-        nodes: atRule.nodes, // move children inside
     });
-    // Replace @light atRule with the new nested rule
-    atRule.replaceWith(nestedRule);
+    clonedNodes.forEach((node) => lightRule.append(node.clone()));
+    /**
+     * Rule 2: @media (prefers-color-scheme: light) { [data-mode="system"] & { ... } }
+     *
+     * This applies the styles only when:
+     *   - The user’s OS prefers light mode
+     *   - AND the app is in "system" mode (i.e. follow system preference)
+     */
+    const mediaAtRule = new postcss_1.AtRule({
+        name: "media",
+        params: "(prefers-color-scheme: light)",
+    });
+    // Wrap cloned rules under `[data-mode="system"]`
+    const systemRule = new postcss_1.Rule({
+        selector: `[data-mode="system"] &`,
+    });
+    clonedNodes.forEach((node) => systemRule.append(node.clone()));
+    // Nest `[data-mode="system"]` inside the @media block
+    mediaAtRule.append(systemRule);
+    /**
+     * Replace the original @light rule in the CSS tree
+     * with our two new generated rules.
+     */
+    atRule.replaceWith(mediaAtRule, lightRule);
 }

package/dist/functions/color.d.ts

@@ -1 +1,2 @@
-export default function color(name: string, alpha?: string, lightness?: string, chroma?: string): string;
+export declare function sc(name: string, alpha?: string, lightness?: string, chroma?: string): string;
+export declare function fc(name: string, alpha?: string, lightness?: string, chroma?: string): string;

package/dist/functions/color.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = color;
-function color(name, alpha, lightness, chroma) {
+exports.sc = sc;
+exports.fc = fc;
+function sc(name, alpha, lightness, chroma) {
     let a = "1";
     let l = "var(--lightness)";
     let c = "var(--chroma)";
@@ -14,5 +15,20 @@ function color(name, alpha, lightness, chroma) {
     if (chroma && chroma !== "null") {
         c = chroma;
     }
-    return `oklch(${l} ${c} var(--${name}) / ${a})`;
+    return `oklch(${l} ${c} var(--${name}-hue) / ${a})`;
+}
+function fc(name, alpha, lightness, chroma) {
+    let a = "1";
+    let l = `var(--${name}-lightness)`;
+    let c = `var(--${name}-chroma)`;
+    if (alpha && alpha !== "null") {
+        a = alpha;
+    }
+    if (lightness && lightness !== "null") {
+        l = lightness;
+    }
+    if (chroma && chroma !== "null") {
+        c = chroma;
+    }
+    return `oklch(${l} ${c} var(--${name}-hue) / ${a})`;
 }

package/dist/functions/index.js

@@ -4,9 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.functions = void 0;
-const color_1 = __importDefault(require("./color"));
+const color_1 = require("./color");
 const spacing_1 = __importDefault(require("./spacing"));
 exports.functions = {
-    color: color_1.default,
+    sc: color_1.sc,
+    fc: color_1.fc,
     spacing: spacing_1.default,
 };

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,12 +1,11 @@
 {
   "name": "@seyuna/postcss",
-  "version": "0.0.1-dev.9",
+  "version": "1.0.0-canary.10",
   "description": "Seyuna UI's postcss plugin",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsc",
-    "prepare": "npm run build"
+    "build": "tsc"
   },
   "keywords": [
     "postcss",
@@ -14,12 +13,24 @@
     "seyuna"
   ],
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/seyuna-corp/seyuna-postcss.git"
+  },
   "peerDependencies": {
     "postcss": "^8.5.6"
   },
   "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/exec": "^7.1.0",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^11.0.3",
+    "@semantic-release/npm": "^12.0.2",
+    "@semantic-release/release-notes-generator": "^14.0.3",
     "@types/node": "^20.0.0",
-    "typescript": "^5.0.0",
-    "postcss": "^8.5.6"
+    "postcss": "^8.5.6",
+    "semantic-release": "^24.2.7",
+    "typescript": "^5.0.0"
   }
 }

package/release.config.mjs

@@ -0,0 +1,32 @@
+/**
+ * @type {import('semantic-release').GlobalConfig}
+ */
+export default {
+  branches: [{ name: "canary", prerelease: "canary" }, "main"],
+  plugins: [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    ["@semantic-release/changelog", { changelogFile: "CHANGELOG.md" }],
+    [
+      "@semantic-release/exec", // Runs build before publishing
+      {
+        prepareCmd: "npm run build",
+      },
+    ],
+    [
+      "@semantic-release/npm", // Publishes to npm
+      {
+        npmPublish: true,
+      },
+    ],
+    [
+      "@semantic-release/git", // Commits updated files
+      {
+        assets: ["package.json", "package-lock.json", "CHANGELOG.md"],
+        message:
+          "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}",
+      },
+    ],
+    "@semantic-release/github", // Creates GitHub release
+  ],
+};

package/src/at-rules/color.ts

@@ -0,0 +1,118 @@
+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-standard-color` at-rules.
+ *
+ * Example usage:
+ *
+ *   @each-standard-color {
+ *     color: white;
+ *   }
+ *
+ * Will generate:
+ *
+ *   .alpha { color: white; }
+ *   .beta { color: white; }
+ *   .gamma { color: white; }
+ *   ...
+ */
+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.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) =>
+    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 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/container.ts

@@ -0,0 +1,47 @@
+import { AtRule, ChildNode } from "postcss";
+
+/**
+ * Custom PostCSS plugin handler for responsive at-rules.
+ *
+ * Example:
+ *
+ *   @xs {
+ *     .box { color: red; }
+ *   }
+ *
+ * Into:
+ *
+ *   @xs (min-width: 234px) {
+ *     .box { color: red; }
+ *   }
+ *
+ */
+export default function container(atRule: AtRule) {
+  // Map of shortcuts → container widths
+  const breakpoints: Record<string, string> = {
+    xs: "20rem",
+    sm: "40rem",
+    md: "48rem",
+    lg: "64rem",
+    xl: "80rem",
+    "2xl": "96rem",
+  };
+
+  if (Object.keys(breakpoints).includes(atRule.name)) {
+    const minWidth = breakpoints[atRule.name];
+
+    const clonedNodes: ChildNode[] = [];
+    atRule.each((node: ChildNode) => {
+      clonedNodes.push(node.clone());
+    });
+
+    const containerAtRule = new AtRule({
+      name: "container",
+      params: `(min-width: ${minWidth})`,
+    });
+
+    clonedNodes.forEach((node) => containerAtRule.append(node));
+
+    atRule.replaceWith(containerAtRule);
+  }
+}

package/src/at-rules/dark.ts

@@ -1,12 +1,69 @@
-import { Rule, type AtRule } from "postcss";
+import { Rule, AtRule, ChildNode } from "postcss";
 
+/**
+ * Custom PostCSS plugin handler for `@dark` at-rules.
+ *
+ * Transforms:
+ *
+ *   @dark {
+ *     color: white;
+ *   }
+ *
+ * Into:
+ *
+ *   @media (prefers-color-scheme: dark) {
+ *     [data-mode="system"] & {
+ *       color: white;
+ *     }
+ *   }
+ *
+ *   [data-mode="dark"] & {
+ *     color: white;
+ *   }
+ */
 export default function dark(atRule: AtRule) {
-  // Create a new nested rule: [data-mode="dark"] & { ... }
-  const nestedRule = new Rule({
+  const clonedNodes: ChildNode[] = [];
+
+  // Clone all child nodes inside the @dark block
+  // (so we can reuse them in both generated rules).
+  atRule.each((node: ChildNode) => {
+    clonedNodes.push(node.clone());
+  });
+
+  /**
+   * Rule 1: [data-mode="dark"] & { ... }
+   *
+   * This applies the styles when the user explicitly sets dark mode.
+   */
+  const darkRule = new Rule({
     selector: `[data-mode="dark"] &`,
-    nodes: atRule.nodes, // move children inside
   });
+  clonedNodes.forEach((node) => darkRule.append(node.clone()));
+
+  /**
+   * Rule 2: @media (prefers-color-scheme: dark) { [data-mode="system"] & { ... } }
+   *
+   * This applies the styles only when:
+   *   - The user’s OS prefers dark mode
+   *   - AND the app is in "system" mode (i.e. follow system preference)
+   */
+  const mediaAtRule = new AtRule({
+    name: "media",
+    params: "(prefers-color-scheme: dark)",
+  });
+
+  // Wrap cloned rules under `[data-mode="system"]`
+  const systemRule = new Rule({
+    selector: `[data-mode="system"] &`,
+  });
+  clonedNodes.forEach((node) => systemRule.append(node.clone()));
+
+  // Nest `[data-mode="system"]` inside the @media block
+  mediaAtRule.append(systemRule);
 
-  // Replace @dark atRule with the new nested rule
-  atRule.replaceWith(nestedRule);
+  /**
+   * Replace the original @dark rule in the CSS tree
+   * with our two new generated rules.
+   */
+  atRule.replaceWith(mediaAtRule, darkRule);
 }

package/src/at-rules/index.ts

@@ -1,11 +1,27 @@
+// atRuleHandlers.ts
 import dark from "./dark";
 import light from "./light";
+import container from "./container";
+import { eachStandardColor, eachFixedColor } 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,
+// Ordered array ensures execution order
+export const atRuleHandlers: AtRuleHandler[] = [
+  { name: "each-standard-color", handler: eachStandardColor }, // first
+  { name: "each-fixed-color", handler: eachFixedColor },
+  { name: "light", handler: light },
+  { name: "dark", handler: dark },
+  { name: "xs", handler: container },
+  { name: "sm", handler: container },
+  { name: "md", handler: container },
+  { name: "lg", handler: container },
+  { name: "xl", handler: container },
+  { name: "2xl", handler: container },
   // add more handlers here as needed
-};
+];

package/src/at-rules/light.ts

@@ -1,12 +1,69 @@
-import { Rule, type AtRule } from "postcss";
+import { Rule, AtRule, ChildNode } from "postcss";
 
+/**
+ * Custom PostCSS plugin handler for `@light` at-rules.
+ *
+ * Transforms:
+ *
+ *   @light {
+ *     color: white;
+ *   }
+ *
+ * Into:
+ *
+ *   @media (prefers-color-scheme: light) {
+ *     [data-mode="system"] & {
+ *       color: white;
+ *     }
+ *   }
+ *
+ *   [data-mode="light"] & {
+ *     color: white;
+ *   }
+ */
 export default function light(atRule: AtRule) {
-  // Create a new nested rule: [data-mode="light"] & { ... }
-  const nestedRule = new Rule({
+  const clonedNodes: ChildNode[] = [];
+
+  // Clone all child nodes inside the @light block
+  // (so we can reuse them in both generated rules).
+  atRule.each((node: ChildNode) => {
+    clonedNodes.push(node.clone());
+  });
+
+  /**
+   * Rule 1: [data-mode="light"] & { ... }
+   *
+   * This applies the styles when the user explicitly sets light mode.
+   */
+  const lightRule = new Rule({
     selector: `[data-mode="light"] &`,
-    nodes: atRule.nodes, // move children inside
   });
+  clonedNodes.forEach((node) => lightRule.append(node.clone()));
+
+  /**
+   * Rule 2: @media (prefers-color-scheme: light) { [data-mode="system"] & { ... } }
+   *
+   * This applies the styles only when:
+   *   - The user’s OS prefers light mode
+   *   - AND the app is in "system" mode (i.e. follow system preference)
+   */
+  const mediaAtRule = new AtRule({
+    name: "media",
+    params: "(prefers-color-scheme: light)",
+  });
+
+  // Wrap cloned rules under `[data-mode="system"]`
+  const systemRule = new Rule({
+    selector: `[data-mode="system"] &`,
+  });
+  clonedNodes.forEach((node) => systemRule.append(node.clone()));
+
+  // Nest `[data-mode="system"]` inside the @media block
+  mediaAtRule.append(systemRule);
 
-  // Replace @light atRule with the new nested rule
-  atRule.replaceWith(nestedRule);
+  /**
+   * Replace the original @light rule in the CSS tree
+   * with our two new generated rules.
+   */
+  atRule.replaceWith(mediaAtRule, lightRule);
 }

package/src/functions/color.ts

@@ -1,4 +1,4 @@
-export default function color(
+export function sc(
   name: string,
   alpha?: string,
   lightness?: string,
@@ -20,5 +20,30 @@ export default function color(
     c = chroma;
   }
 
-  return `oklch(${l} ${c} var(--${name}) / ${a})`;
+  return `oklch(${l} ${c} var(--${name}-hue) / ${a})`;
+}
+
+export function fc(
+  name: string,
+  alpha?: string,
+  lightness?: string,
+  chroma?: string
+) {
+  let a: string = "1";
+  let l: string = `var(--${name}-lightness)`;
+  let c: string = `var(--${name}-chroma)`;
+
+  if (alpha && alpha !== "null") {
+    a = alpha;
+  }
+
+  if (lightness && lightness !== "null") {
+    l = lightness;
+  }
+
+  if (chroma && chroma !== "null") {
+    c = chroma;
+  }
+
+  return `oklch(${l} ${c} var(--${name}-hue) / ${a})`;
 }

package/src/functions/index.ts

@@ -1,9 +1,10 @@
-import color from "./color";
+import { sc, fc } from "./color";
 import spacing from "./spacing";
 
 export type FnHandler = (...args: string[]) => string;
 
 export const functions: Record<string, FnHandler> = {
-  color,
+  sc,
+  fc,
   spacing,
 };

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