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

package/CHANGELOG.md

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

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

@@ -1,2 +1,2 @@
-import { type AtRule } from "postcss";
+import { AtRule } from "postcss";
 export default function dark(atRule: AtRule): void;

package/dist/at-rules/dark.js

@@ -3,13 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = dark;
 const postcss_1 = require("postcss");
 function dark(atRule) {
-    const nestedRule = new postcss_1.Rule({
+    const clonedNodes = [];
+    // Clone all child nodes so we can reuse them
+    atRule.each((node) => {
+        clonedNodes.push(node.clone());
+    });
+    // Create `[data-mode="dark"] &` rule
+    const dataAttrRule = new postcss_1.Rule({
         selector: `[data-mode="dark"] &`,
     });
-    // Clone all child nodes to prevent them from being detached
-    atRule.each((node) => {
-        nestedRule.append(node.clone());
+    clonedNodes.forEach((node) => dataAttrRule.append(node.clone()));
+    // Create `@media (prefers-color-scheme: dark)` wrapper
+    const mediaAtRule = new postcss_1.AtRule({
+        name: "media",
+        params: "(prefers-color-scheme: dark)",
+    });
+    const mediaRule = new postcss_1.Rule({
+        selector: `&`,
     });
-    // Replace @dark atRule with the new nested rule
-    atRule.replaceWith(nestedRule);
+    clonedNodes.forEach((node) => mediaRule.append(node.clone()));
+    mediaAtRule.append(mediaRule);
+    // Replace original @dark rule with both new rules
+    atRule.replaceWith(mediaAtRule, dataAttrRule);
 }

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

@@ -1,2 +1,2 @@
-import { type AtRule } from "postcss";
+import { AtRule } from "postcss";
 export default function light(atRule: AtRule): void;

package/dist/at-rules/light.js

@@ -3,13 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = light;
 const postcss_1 = require("postcss");
 function light(atRule) {
-    const nestedRule = new postcss_1.Rule({
+    const clonedNodes = [];
+    // Clone all child nodes so we can reuse them
+    atRule.each((node) => {
+        clonedNodes.push(node.clone());
+    });
+    // Create `[data-mode="light"] &` rule
+    const dataAttrRule = new postcss_1.Rule({
         selector: `[data-mode="light"] &`,
     });
-    // Clone all child nodes to prevent them from being detached
-    atRule.each((node) => {
-        nestedRule.append(node.clone());
+    clonedNodes.forEach((node) => dataAttrRule.append(node.clone()));
+    // Create `@media (prefers-color-scheme: light)` wrapper
+    const mediaAtRule = new postcss_1.AtRule({
+        name: "media",
+        params: "(prefers-color-scheme: light)",
+    });
+    const mediaRule = new postcss_1.Rule({
+        selector: `&`,
     });
-    // Replace @light atRule with the new nested rule
-    atRule.replaceWith(nestedRule);
+    clonedNodes.forEach((node) => mediaRule.append(node.clone()));
+    mediaAtRule.append(mediaRule);
+    // Replace original @light rule with both new rules
+    atRule.replaceWith(mediaAtRule, dataAttrRule);
 }

package/package.json

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

package/src/at-rules/dark.ts

@@ -1,15 +1,33 @@
-import { Rule, type AtRule, type ChildNode } from "postcss";
+import { Rule, AtRule, ChildNode } from "postcss";
 
 export default function dark(atRule: AtRule) {
-  const nestedRule = new Rule({
+  const clonedNodes: ChildNode[] = [];
+
+  // Clone all child nodes so we can reuse them
+  atRule.each((node: ChildNode) => {
+    clonedNodes.push(node.clone());
+  });
+
+  // Create `[data-mode="dark"] &` rule
+  const dataAttrRule = new Rule({
     selector: `[data-mode="dark"] &`,
   });
 
-  // Clone all child nodes to prevent them from being detached
-  atRule.each((node: ChildNode) => {
-    nestedRule.append(node.clone());
+  clonedNodes.forEach((node) => dataAttrRule.append(node.clone()));
+
+  // Create `@media (prefers-color-scheme: dark)` wrapper
+  const mediaAtRule = new AtRule({
+    name: "media",
+    params: "(prefers-color-scheme: dark)",
+  });
+
+  const mediaRule = new Rule({
+    selector: `&`,
   });
 
-  // Replace @dark atRule with the new nested rule
-  atRule.replaceWith(nestedRule);
+  clonedNodes.forEach((node) => mediaRule.append(node.clone()));
+  mediaAtRule.append(mediaRule);
+
+  // Replace original @dark rule with both new rules
+  atRule.replaceWith(mediaAtRule, dataAttrRule);
 }

package/src/at-rules/light.ts

@@ -1,15 +1,33 @@
-import { Rule, type AtRule, type ChildNode } from "postcss";
+import { Rule, AtRule, ChildNode } from "postcss";
 
 export default function light(atRule: AtRule) {
-  const nestedRule = new Rule({
+  const clonedNodes: ChildNode[] = [];
+
+  // Clone all child nodes so we can reuse them
+  atRule.each((node: ChildNode) => {
+    clonedNodes.push(node.clone());
+  });
+
+  // Create `[data-mode="light"] &` rule
+  const dataAttrRule = new Rule({
     selector: `[data-mode="light"] &`,
   });
 
-  // Clone all child nodes to prevent them from being detached
-  atRule.each((node: ChildNode) => {
-    nestedRule.append(node.clone());
+  clonedNodes.forEach((node) => dataAttrRule.append(node.clone()));
+
+  // Create `@media (prefers-color-scheme: light)` wrapper
+  const mediaAtRule = new AtRule({
+    name: "media",
+    params: "(prefers-color-scheme: light)",
+  });
+
+  const mediaRule = new Rule({
+    selector: `&`,
   });
 
-  // Replace @light atRule with the new nested rule
-  atRule.replaceWith(nestedRule);
+  clonedNodes.forEach((node) => mediaRule.append(node.clone()));
+  mediaAtRule.append(mediaRule);
+
+  // Replace original @light rule with both new rules
+  atRule.replaceWith(mediaAtRule, dataAttrRule);
 }