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

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seyuna/postcss",
-  "version": "1.0.0-canary.3",
+  "version": "1.0.0-canary.4",
   "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);
 }