@seyuna/postcss 1.0.0-canary.2 → 1.0.0-canary.21

package/dist/config.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadConfig = loadConfig;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const DEFAULT_OPTIONS = {
+    configPath: 'seyuna.json',
+    modeAttribute: 'data-mode',
+    strict: false,
+    config: undefined,
+    functions: undefined,
+};
+let cachedConfig = null;
+let cachedConfigPath = null;
+function loadConfig(options = {}) {
+    const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
+    if (mergedOptions.config) {
+        return { config: mergedOptions.config, options: mergedOptions };
+    }
+    const configPath = path_1.default.resolve(process.cwd(), mergedOptions.configPath);
+    // Cache config if it's the same path
+    if (cachedConfig && cachedConfigPath === configPath) {
+        return { config: cachedConfig, options: mergedOptions };
+    }
+    try {
+        if (!fs_1.default.existsSync(configPath)) {
+            if (mergedOptions.strict) {
+                throw new Error(`Seyuna config not found at ${configPath}`);
+            }
+            return {
+                config: { ui: { theme: { hues: {}, light: { colors: {} }, dark: { colors: {} } } } },
+                options: mergedOptions,
+            };
+        }
+        const data = JSON.parse(fs_1.default.readFileSync(configPath, 'utf-8'));
+        cachedConfig = data;
+        cachedConfigPath = configPath;
+        return { config: data, options: mergedOptions };
+    }
+    catch (error) {
+        if (mergedOptions.strict) {
+            throw error;
+        }
+        console.warn(`[Seyuna PostCSS] Warning: Failed to load config: ${error instanceof Error ? error.message : String(error)}`);
+        return {
+            config: { ui: { theme: { hues: {}, light: { colors: {} }, dark: { colors: {} } } } },
+            options: mergedOptions,
+        };
+    }
+}

package/dist/errors.d.ts

@@ -0,0 +1,7 @@
+import { Node } from 'postcss';
+import { PluginContext } from './types.js';
+export declare function reportError(message: string, node: Node, context: PluginContext, options?: {
+    word?: string;
+    index?: number;
+}): void;
+export declare function reportWarning(message: string, node: Node): void;

package/dist/errors.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reportError = reportError;
+exports.reportWarning = reportWarning;
+function reportError(message, node, context, options = {}) {
+    const { options: pluginOptions } = context;
+    const formattedMessage = `[Seyuna PostCSS] ${message}`;
+    if (pluginOptions.strict) {
+        throw node.error(formattedMessage, options);
+    }
+    else {
+        reportWarning(formattedMessage, node);
+    }
+}
+function reportWarning(message, node) {
+    const result = node.root().toResult();
+    node.warn(result, `[Seyuna PostCSS] ${message}`);
+}

package/dist/functions/color.d.ts

@@ -1 +1,7 @@
-export default function color(name: string, alpha?: string, lightness?: string, chroma?: string): string;
+import { PluginContext } from "../types.js";
+export declare function sc(context: PluginContext, name: string, alpha?: string, lightness?: string, chroma?: string): string;
+export declare function fc(context: PluginContext, name: string, alpha?: string, lightness?: string, chroma?: string): string;
+export declare function alpha(context: PluginContext, color: string, value: string): string;
+export declare function lighten(context: PluginContext, color: string, amount: string): string;
+export declare function darken(context: PluginContext, color: string, amount: string): string;
+export declare function contrast(context: PluginContext, color: string): string;

package/dist/functions/color.js

@@ -1,18 +1,72 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = color;
-function color(name, alpha, lightness, chroma) {
-    let a = "1";
-    let l = "var(--lightness)";
-    let c = "var(--chroma)";
-    if (alpha && alpha !== "null") {
-        a = alpha;
+exports.sc = sc;
+exports.fc = fc;
+exports.alpha = alpha;
+exports.lighten = lighten;
+exports.darken = darken;
+exports.contrast = contrast;
+/**
+ * Resolves a color name to its CSS variables based on its type (standard or fixed)
+ */
+function getColorVariables(context, color, type) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { config } = context;
+    const hues = ((_b = (_a = config === null || config === void 0 ? void 0 : config.ui) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.hues) || {};
+    const colors = ((_d = (_c = config === null || config === void 0 ? void 0 : config.ui) === null || _c === void 0 ? void 0 : _c.theme) === null || _d === void 0 ? void 0 : _d.colors) || {};
+    const lightColors = ((_g = (_f = (_e = config === null || config === void 0 ? void 0 : config.ui) === null || _e === void 0 ? void 0 : _e.theme) === null || _f === void 0 ? void 0 : _f.light) === null || _g === void 0 ? void 0 : _g.colors) || {};
+    const darkColors = ((_k = (_j = (_h = config === null || config === void 0 ? void 0 : config.ui) === null || _h === void 0 ? void 0 : _h.theme) === null || _j === void 0 ? void 0 : _j.dark) === null || _k === void 0 ? void 0 : _k.colors) || {};
+    const isStandard = color in hues;
+    const isFixed = color in colors || color in lightColors || color in darkColors;
+    if (type === 'sc' && !isStandard) {
+        throw new Error(`Standard color '${color}' not found in seyuna.json hues`);
     }
-    if (lightness && lightness !== "null") {
-        l = lightness;
+    if (type === 'fc' && !isFixed) {
+        throw new Error(`Fixed color '${color}' not found in seyuna.json colors`);
     }
-    if (chroma && chroma !== "null") {
-        c = chroma;
+    if (isStandard) {
+        return {
+            l: "var(--lightness)",
+            c: "var(--chroma)",
+            h: `var(--${color}-hue)`,
+        };
     }
-    return `oklch(${l} ${c} var(--${name}) / ${a})`;
+    if (isFixed) {
+        return {
+            l: `var(--${color}-lightness)`,
+            c: `var(--${color}-chroma)`,
+            h: `var(--${color}-hue)`,
+        };
+    }
+    throw new Error(`Color '${color}' not found in seyuna.json`);
+}
+function sc(context, name, alpha, lightness, chroma) {
+    const vars = getColorVariables(context, name, 'sc');
+    const a = alpha && alpha !== "null" ? alpha : "1";
+    const l = lightness && lightness !== "null" ? lightness : vars.l;
+    const c = chroma && chroma !== "null" ? chroma : vars.c;
+    return `oklch(${l} ${c} ${vars.h} / ${a})`;
+}
+function fc(context, name, alpha, lightness, chroma) {
+    const vars = getColorVariables(context, name, 'fc');
+    const a = alpha && alpha !== "null" ? alpha : "1";
+    const l = lightness && lightness !== "null" ? lightness : vars.l;
+    const c = chroma && chroma !== "null" ? chroma : vars.c;
+    return `oklch(${l} ${c} ${vars.h} / ${a})`;
+}
+function alpha(context, color, value) {
+    const { l, c, h } = getColorVariables(context, color);
+    return `oklch(${l} ${c} ${h} / ${value})`;
+}
+function lighten(context, color, amount) {
+    const { l, c, h } = getColorVariables(context, color);
+    return `oklch(calc(${l} + ${amount}) ${c} ${h} / 1)`;
+}
+function darken(context, color, amount) {
+    const { l, c, h } = getColorVariables(context, color);
+    return `oklch(calc(${l} - ${amount}) ${c} ${h} / 1)`;
+}
+function contrast(context, color) {
+    const { l } = getColorVariables(context, color);
+    return `oklch(calc((${l} - 0.6) * -1000) 0 0)`;
 }

package/dist/functions/index.d.ts

@@ -1,2 +1,3 @@
-export type FnHandler = (...args: string[]) => string;
+import { PluginContext } from "../types.js";
+export type FnHandler = (context: PluginContext, ...args: string[]) => string;
 export declare const functions: Record<string, FnHandler>;

package/dist/functions/index.js

@@ -1,12 +1,14 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.functions = void 0;
-const color_1 = __importDefault(require("./color"));
-const spacing_1 = __importDefault(require("./spacing"));
+const color_js_1 = require("./color.js");
+const theme_js_1 = require("./theme.js");
 exports.functions = {
-    color: color_1.default,
-    spacing: spacing_1.default,
+    sc: color_js_1.sc,
+    fc: color_js_1.fc,
+    alpha: color_js_1.alpha,
+    lighten: color_js_1.lighten,
+    darken: color_js_1.darken,
+    contrast: color_js_1.contrast,
+    theme: theme_js_1.theme,
 };

package/dist/functions/theme.d.ts

@@ -0,0 +1,6 @@
+import { PluginContext } from "../types.js";
+/**
+ * Accesses values from the Seyuna configuration using dot notation
+ * Example: theme(ui.theme.breakpoints.tablet)
+ */
+export declare function theme(context: PluginContext, path: string): string;

package/dist/functions/theme.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.theme = theme;
+/**
+ * Accesses values from the Seyuna configuration using dot notation
+ * Example: theme(ui.theme.breakpoints.tablet)
+ */
+function theme(context, path) {
+    const parts = path.split('.');
+    let current = context.config;
+    for (const part of parts) {
+        if (current && typeof current === 'object' && part in current) {
+            current = current[part];
+        }
+        else {
+            return path; // Return original path if not found
+        }
+    }
+    return String(current);
+}

package/dist/helpers.d.ts

@@ -0,0 +1,12 @@
+import postcss from "postcss";
+import type { ChildNode, AtRule } from "postcss";
+import { PluginContext } from './types.js';
+/**
+ * Helper: clone nodes and replace {name} placeholders safely
+ * Returns only valid Rules or Declarations (never raw AtRules)
+ */
+export declare function cloneNodes(nodes: ChildNode[], name: string, context: PluginContext): ChildNode[];
+/**
+ * Generate CSS rules from a list of names
+ */
+export declare function generateRules(names: string[], atRule: AtRule, context: PluginContext): postcss.Rule[];

package/dist/helpers.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cloneNodes = cloneNodes;
+exports.generateRules = generateRules;
+const postcss_1 = __importDefault(require("postcss"));
+const parser_js_1 = require("./parser.js");
+/**
+ * Helper: clone nodes and replace {name} placeholders safely
+ * Returns only valid Rules or Declarations (never raw AtRules)
+ */
+function cloneNodes(nodes, name, context) {
+    const { functions: fnMap } = context;
+    return nodes.flatMap((node) => {
+        const cloned = node.clone();
+        if (cloned.type === "decl") {
+            const decl = cloned;
+            let value = decl.value.replace(/\{name\}/g, name);
+            // Process functions using the robust parser
+            decl.value = (0, parser_js_1.processFunctions)(value, fnMap, decl, context);
+            return decl;
+        }
+        if (cloned.type === "rule") {
+            const rule = cloned;
+            if (!rule.selector)
+                return [];
+            rule.selector = rule.selector.replace(/\{name\}/g, name);
+            // Recursively clone child nodes and only keep valid rules/decls
+            rule.nodes = cloneNodes(rule.nodes || [], name, context).filter((n) => n.type === "rule" || n.type === "decl");
+            if (!rule.nodes.length)
+                return [];
+            return rule;
+        }
+        // Ignore AtRules inside rules — they must be processed first
+        return [];
+    });
+}
+/**
+ * Generate CSS rules from a list of names
+ */
+function generateRules(names, atRule, context) {
+    var _a;
+    const nodes = (_a = atRule.nodes) !== null && _a !== void 0 ? _a : [];
+    const generatedRules = [];
+    for (const name of names) {
+        const rule = new postcss_1.default.Rule({
+            selector: `&.${name}`,
+            source: atRule.source,
+        });
+        cloneNodes(nodes, name, context).forEach((n) => {
+            var _a;
+            if (n.type === "rule" && n.selector && ((_a = n.nodes) === null || _a === void 0 ? void 0 : _a.length))
+                rule.append(n);
+            if (n.type === "decl")
+                rule.append(n);
+        });
+        if (rule.nodes.length)
+            generatedRules.push(rule);
+    }
+    return generatedRules;
+}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-declare const _default: import("postcss").PluginCreator<import("./plugin").PluginOptions> & {
+declare const plugin: import("postcss").PluginCreator<import("./types.js").PluginOptions> & {
     postcss: boolean;
-    functions: Record<string, import("./functions").FnHandler>;
+    functions: Record<string, import("./functions/index.js").FnHandler>;
 };
-export = _default;
+export default plugin;

package/dist/index.js

@@ -1,7 +1,10 @@
 "use strict";
-const plugin_1 = require("./plugin");
-const functions_1 = require("./functions");
-module.exports = Object.assign(plugin_1.dynamicFunctionsPlugin, {
+Object.defineProperty(exports, "__esModule", { value: true });
+const plugin_js_1 = require("./plugin.js");
+const index_js_1 = require("./functions/index.js");
+// CommonJS-friendly export
+const plugin = Object.assign(plugin_js_1.dynamicFunctionsPlugin, {
     postcss: true,
-    functions: functions_1.functions
+    functions: index_js_1.functions
 });
+exports.default = plugin;

package/dist/parser.d.ts

@@ -0,0 +1,4 @@
+import { Node } from 'postcss';
+import { PluginContext, FunctionMap } from './types.js';
+export type { FunctionMap } from './types.js';
+export declare function processFunctions(value: string, fnMap: FunctionMap, node: Node, context: PluginContext): string;

package/dist/parser.js

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processFunctions = processFunctions;
+const postcss_value_parser_1 = __importDefault(require("postcss-value-parser"));
+const errors_js_1 = require("./errors.js");
+function processFunctions(value, fnMap, node, context) {
+    const parsed = (0, postcss_value_parser_1.default)(value);
+    // Helper to process nodes recursively (inner-first)
+    function processNode(parsedValue) {
+        parsedValue.walk((nodeIter) => {
+            // If nested nodes exist (e.g., in a function), process them first
+            if (nodeIter.type === 'function' && nodeIter.nodes.length > 0) {
+                // Here we recursively process child nodes before handling the current function
+                // However, value-parser's walk is already a visitor. To do inner-first,
+                // we can either walk in reverse or specifically handle children.
+                // A simpler way: since walk visits all, we can check if it's a function
+                // and if it's one we handle, we process its arguments.
+            }
+        });
+        // Actually, a manual walk is safer for inner-first replacement
+        function traverse(nodes) {
+            for (const nodeIter of nodes) {
+                if (nodeIter.type === 'function') {
+                    // Process inner functions first
+                    traverse(nodeIter.nodes);
+                    // Now handle this function if it's in our map
+                    if (fnMap[nodeIter.value]) {
+                        const handler = fnMap[nodeIter.value];
+                        const args = [];
+                        let currentArg = '';
+                        nodeIter.nodes.forEach((argNode) => {
+                            if (argNode.type === 'div' && argNode.value === ',') {
+                                args.push(currentArg.trim());
+                                currentArg = '';
+                            }
+                            else {
+                                currentArg += postcss_value_parser_1.default.stringify(argNode);
+                            }
+                        });
+                        if (currentArg) {
+                            args.push(currentArg.trim());
+                        }
+                        const cleanedArgs = args.map(arg => arg.replace(/^['"]|['"]$/g, ''));
+                        try {
+                            const result = handler(context, ...cleanedArgs);
+                            // Replace function with its result
+                            nodeIter.type = 'word';
+                            nodeIter.value = result;
+                            nodeIter.nodes = []; // Clear children
+                        }
+                        catch (error) {
+                            (0, errors_js_1.reportError)(`Failed to process function "${nodeIter.value}": ${error instanceof Error ? error.message : String(error)}`, node, context);
+                        }
+                    }
+                }
+            }
+        }
+        traverse(parsedValue.nodes);
+    }
+    processNode(parsed);
+    return parsed.toString();
+}

package/dist/plugin.d.ts

@@ -1,5 +1,3 @@
-import { PluginCreator } from "postcss";
-export interface PluginOptions {
-    functions?: Record<string, (...args: string[]) => string>;
-}
+import type { PluginCreator } from "postcss";
+import { PluginOptions } from "./types.js";
 export declare const dynamicFunctionsPlugin: PluginCreator<PluginOptions>;

package/dist/plugin.js

@@ -1,27 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dynamicFunctionsPlugin = void 0;
-const functions_1 = require("./functions");
-const at_rules_1 = require("./at-rules");
+const index_js_1 = require("./functions/index.js");
+const index_js_2 = require("./at-rules/index.js");
+const config_js_1 = require("./config.js");
+const parser_js_1 = require("./parser.js");
 const dynamicFunctionsPlugin = (opts = {}) => {
-    const fnMap = { ...functions_1.functions, ...opts.functions };
+    let context;
+    let fnMap;
     return {
         postcssPlugin: "postcss-dynamic-functions",
+        Once() {
+            const { config, options } = (0, config_js_1.loadConfig)(opts);
+            fnMap = { ...index_js_1.functions, ...opts.functions };
+            context = {
+                config,
+                options,
+                functions: fnMap,
+            };
+        },
         Declaration(decl) {
-            let value = decl.value;
-            for (const fnName in fnMap) {
-                const regex = new RegExp(`${fnName}\\(([^)]*)\\)`, "g");
-                value = value.replace(regex, (_match, argsStr) => {
-                    const args = argsStr
-                        .split(",")
-                        .map((a) => a.trim().replace(/^['"]|['"]$/g, ""));
-                    return fnMap[fnName](...args);
-                });
-            }
-            decl.value = value;
+            if (!context || !fnMap)
+                return;
+            decl.value = (0, parser_js_1.processFunctions)(decl.value, fnMap, decl, context);
         },
-        AtRule: {
-            ...at_rules_1.atRuleHandlers,
+        // Override AtRule handler to ensure ordered execution
+        AtRule(atRule) {
+            if (!context)
+                return;
+            // Iterate over handlers in order (array) instead of object spread
+            for (const { name, handler } of index_js_2.atRuleHandlers) {
+                if (atRule.name === name) {
+                    handler(atRule, context);
+                }
+            }
         },
     };
 };

package/dist/types.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Represents a color in the Oklch color space.
+ */
+export interface Color {
+    lightness: number;
+    chroma: number;
+    hue: number;
+}
+/**
+ * A set of colors for a specific theme mode.
+ */
+export interface Palette {
+    chroma: number;
+    lightness: number;
+    background: Color;
+    text: Color;
+    colors: Record<string, Color>;
+}
+/**
+ * The complete theme specification.
+ */
+export interface Theme {
+    hues: Record<string, number>;
+    colors: Record<string, Color>;
+    light: Palette;
+    dark: Palette;
+}
+/**
+ * Supported color appearance modes.
+ */
+export type Mode = "system" | "light" | "dark";
+/**
+ * UI Engine Configuration.
+ */
+export interface UI {
+    theme: Theme;
+    mode: Mode;
+    output_dir?: string;
+}
+/**
+ * Root configuration structure for a Seyuna project.
+ */
+export interface SeyunaConfig {
+    license?: string;
+    ui?: UI;
+}
+export type FunctionMap = Record<string, (context: PluginContext, ...args: string[]) => string>;
+export interface PluginOptions {
+    configPath?: string;
+    modeAttribute?: string;
+    strict?: boolean;
+    config?: SeyunaConfig;
+    functions?: FunctionMap;
+}
+export interface PluginContext {
+    config: SeyunaConfig;
+    options: Required<PluginOptions>;
+    functions: FunctionMap;
+}

package/dist/types.js

@@ -0,0 +1,4 @@
+"use strict";
+// Local type definitions to avoid @seyuna/cli runtime import
+// The @seyuna/cli package imports Deno polyfills that conflict with Vite/Astro
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@seyuna/postcss",
-  "version": "1.0.0-canary.2",
+  "version": "1.0.0-canary.21",
   "description": "Seyuna UI's postcss plugin",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "dev": "tsc -w",
+    "test": "vitest",
+    "test:run": "vitest run"
   },
   "keywords": [
     "postcss",
@@ -17,6 +20,9 @@
     "type": "git",
     "url": "git+https://github.com/seyuna-corp/seyuna-postcss.git"
   },
+  "dependencies": {
+    "postcss-value-parser": "^4.2.0"
+  },
   "peerDependencies": {
     "postcss": "^8.5.6"
   },
@@ -26,11 +32,14 @@
     "@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/npm": "^13.1.3",
     "@semantic-release/release-notes-generator": "^14.0.3",
     "@types/node": "^20.0.0",
+    "conventional-changelog-conventionalcommits": "^9.1.0",
     "postcss": "^8.5.6",
-    "semantic-release": "^24.2.7",
-    "typescript": "^5.0.0"
+    "postcss-selector-parser": "^7.1.0",
+    "semantic-release": "^25.0.2",
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.16"
   }
 }

package/release.config.mjs

@@ -4,7 +4,12 @@
 export default {
   branches: [{ name: "canary", prerelease: "canary" }, "main"],
   plugins: [
-    "@semantic-release/commit-analyzer",
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        preset: "conventionalcommits",
+      },
+    ],
     "@semantic-release/release-notes-generator",
     ["@semantic-release/changelog", { changelogFile: "CHANGELOG.md" }],
     [

package/src/at-rules/color-scheme.ts

@@ -0,0 +1,53 @@
+import postcss from "postcss";
+import type { AtRule, ChildNode } from "postcss";
+import { PluginContext } from "../types.js";
+
+/**
+ * Custom PostCSS plugin handler factory for `@light` and `@dark` at-rules.
+ */
+function createColorSchemeHandler(scheme: 'light' | 'dark') {
+  return (atRule: AtRule, context: PluginContext) => {
+    const { options } = context;
+    const modeAttribute = options.modeAttribute;
+    const clonedNodes: ChildNode[] = [];
+
+    // Clone all child nodes inside the block
+    atRule.each((node: ChildNode) => {
+      clonedNodes.push(node.clone());
+    });
+
+    /**
+     * Rule 1: [data-mode="scheme"] & { ... } (Explicit mode)
+     */
+    const explicitRule = new postcss.Rule({
+      selector: `[${modeAttribute}="${scheme}"] &`,
+      source: atRule.source,
+    });
+    clonedNodes.forEach((node) => explicitRule.append(node.clone()));
+
+    /**
+     * Rule 2: @media (prefers-color-scheme: scheme) { [data-mode="system"] & { ... } } (System preference)
+     */
+    const mediaAtRule = new postcss.AtRule({
+      name: "media",
+      params: `(prefers-color-scheme: ${scheme})`,
+      source: atRule.source,
+    });
+
+    const systemRule = new postcss.Rule({
+      selector: `[${modeAttribute}="system"] &`,
+      source: atRule.source,
+    });
+    clonedNodes.forEach((node) => systemRule.append(node.clone()));
+
+    mediaAtRule.append(systemRule);
+
+    /**
+     * Replace the original at-rule with the generated rules.
+     */
+    atRule.replaceWith(mediaAtRule, explicitRule);
+  };
+}
+
+export const light = createColorSchemeHandler('light');
+export const dark = createColorSchemeHandler('dark');