@seyuna/postcss 1.0.0-canary.4 → 1.0.0-canary.6

package/CHANGELOG.md

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

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/index.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.atRuleHandlers = void 0;
 const dark_1 = __importDefault(require("./dark"));
 const light_1 = __importDefault(require("./light"));
+const container_1 = __importDefault(require("./container"));
 exports.atRuleHandlers = {
     light: light_1.default,
     dark: dark_1.default,
+    container: container_1.default,
     // add more handlers here as needed
 };

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/package.json

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

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/index.ts

@@ -1,5 +1,6 @@
 import dark from "./dark";
 import light from "./light";
+import container from "./container";
 import type { AtRule } from "postcss";
 
 export type AtRuleHandler = (atRule: AtRule) => void;
@@ -7,5 +8,6 @@ export type AtRuleHandler = (atRule: AtRule) => void;
 export const atRuleHandlers: Record<string, AtRuleHandler> = {
   light,
   dark,
+  container,
   // add more handlers here as needed
 };

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