@seyuna/postcss 1.0.0-canary.3 → 1.0.0-canary.5

package/CHANGELOG.md

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

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

@@ -1,2 +1,23 @@
 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,27 +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) {
     const clonedNodes = [];
-    // Clone all child nodes so we can reuse them
+    // Clone all child nodes inside the @dark block
+    // (so we can reuse them in both generated rules).
     atRule.each((node) => {
         clonedNodes.push(node.clone());
     });
-    // Create `[data-mode="dark"] &` rule
-    const dataAttrRule = new postcss_1.Rule({
+    /**
+     * 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"] &`,
     });
-    clonedNodes.forEach((node) => dataAttrRule.append(node.clone()));
-    // Create `@media (prefers-color-scheme: dark)` wrapper
+    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)",
     });
-    const mediaRule = new postcss_1.Rule({
-        selector: `&`,
+    // Wrap cloned rules under `[data-mode="system"]`
+    const systemRule = new postcss_1.Rule({
+        selector: `[data-mode="system"] &`,
     });
-    clonedNodes.forEach((node) => mediaRule.append(node.clone()));
-    mediaAtRule.append(mediaRule);
-    // Replace original @dark rule with both new rules
-    atRule.replaceWith(mediaAtRule, dataAttrRule);
+    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/light.d.ts

@@ -1,2 +1,23 @@
 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,27 +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) {
     const clonedNodes = [];
-    // Clone all child nodes so we can reuse them
+    // Clone all child nodes inside the @light block
+    // (so we can reuse them in both generated rules).
     atRule.each((node) => {
         clonedNodes.push(node.clone());
     });
-    // Create `[data-mode="light"] &` rule
-    const dataAttrRule = new postcss_1.Rule({
+    /**
+     * 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"] &`,
     });
-    clonedNodes.forEach((node) => dataAttrRule.append(node.clone()));
-    // Create `@media (prefers-color-scheme: light)` wrapper
+    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)",
     });
-    const mediaRule = new postcss_1.Rule({
-        selector: `&`,
+    // Wrap cloned rules under `[data-mode="system"]`
+    const systemRule = new postcss_1.Rule({
+        selector: `[data-mode="system"] &`,
     });
-    clonedNodes.forEach((node) => mediaRule.append(node.clone()));
-    mediaAtRule.append(mediaRule);
-    // Replace original @light rule with both new rules
-    atRule.replaceWith(mediaAtRule, dataAttrRule);
+    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/index.js

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

package/dist/functions/sc.d.ts

@@ -0,0 +1 @@
+export default function sc(name: string, alpha?: string, lightness?: string, chroma?: string): string;

package/dist/functions/{color.js → sc.js}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = color;
-function color(name, alpha, lightness, chroma) {
+exports.default = sc;
+function sc(name, alpha, lightness, chroma) {
     let a = "1";
     let l = "var(--lightness)";
     let c = "var(--chroma)";

package/package.json

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

package/src/at-rules/dark.ts

@@ -1,33 +1,69 @@
 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) {
   const clonedNodes: ChildNode[] = [];
 
-  // Clone all child nodes so we can reuse them
+  // 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());
   });
 
-  // Create `[data-mode="dark"] &` rule
-  const dataAttrRule = new Rule({
+  /**
+   * Rule 1: [data-mode="dark"] & { ... }
+   *
+   * This applies the styles when the user explicitly sets dark mode.
+   */
+  const darkRule = new Rule({
     selector: `[data-mode="dark"] &`,
   });
+  clonedNodes.forEach((node) => darkRule.append(node.clone()));
 
-  clonedNodes.forEach((node) => dataAttrRule.append(node.clone()));
-
-  // Create `@media (prefers-color-scheme: dark)` wrapper
+  /**
+   * 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)",
   });
 
-  const mediaRule = new Rule({
-    selector: `&`,
+  // Wrap cloned rules under `[data-mode="system"]`
+  const systemRule = new Rule({
+    selector: `[data-mode="system"] &`,
   });
+  clonedNodes.forEach((node) => systemRule.append(node.clone()));
 
-  clonedNodes.forEach((node) => mediaRule.append(node.clone()));
-  mediaAtRule.append(mediaRule);
+  // Nest `[data-mode="system"]` inside the @media block
+  mediaAtRule.append(systemRule);
 
-  // Replace original @dark rule with both new rules
-  atRule.replaceWith(mediaAtRule, dataAttrRule);
+  /**
+   * Replace the original @dark rule in the CSS tree
+   * with our two new generated rules.
+   */
+  atRule.replaceWith(mediaAtRule, darkRule);
 }

package/src/at-rules/light.ts

@@ -1,33 +1,69 @@
 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) {
   const clonedNodes: ChildNode[] = [];
 
-  // Clone all child nodes so we can reuse them
+  // 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());
   });
 
-  // Create `[data-mode="light"] &` rule
-  const dataAttrRule = new Rule({
+  /**
+   * Rule 1: [data-mode="light"] & { ... }
+   *
+   * This applies the styles when the user explicitly sets light mode.
+   */
+  const lightRule = new Rule({
     selector: `[data-mode="light"] &`,
   });
+  clonedNodes.forEach((node) => lightRule.append(node.clone()));
 
-  clonedNodes.forEach((node) => dataAttrRule.append(node.clone()));
-
-  // Create `@media (prefers-color-scheme: light)` wrapper
+  /**
+   * 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)",
   });
 
-  const mediaRule = new Rule({
-    selector: `&`,
+  // Wrap cloned rules under `[data-mode="system"]`
+  const systemRule = new Rule({
+    selector: `[data-mode="system"] &`,
   });
+  clonedNodes.forEach((node) => systemRule.append(node.clone()));
 
-  clonedNodes.forEach((node) => mediaRule.append(node.clone()));
-  mediaAtRule.append(mediaRule);
+  // Nest `[data-mode="system"]` inside the @media block
+  mediaAtRule.append(systemRule);
 
-  // Replace original @light rule with both new rules
-  atRule.replaceWith(mediaAtRule, dataAttrRule);
+  /**
+   * Replace the original @light rule in the CSS tree
+   * with our two new generated rules.
+   */
+  atRule.replaceWith(mediaAtRule, lightRule);
 }

package/src/functions/index.ts

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

package/src/functions/{color.ts → sc.ts}

@@ -1,4 +1,4 @@
-export default function color(
+export default function sc(
   name: string,
   alpha?: string,
   lightness?: string,

package/dist/functions/color.d.ts

@@ -1 +0,0 @@
-export default function color(name: string, alpha?: string, lightness?: string, chroma?: string): string;