@seyuna/postcss 1.0.0-canary.14 → 1.0.0-canary.15

package/dist/functions/color.d.ts

@@ -1,2 +1,7 @@
-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;
+import { PluginContext } from "../config";
+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,34 +1,110 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.sc = sc;
-exports.fc = fc;
-function sc(name, alpha, lightness, chroma) {
-    let a = "1";
-    let l = "var(--lightness)";
-    let c = "var(--chroma)";
-    if (alpha && alpha !== "null") {
-        a = alpha;
+/**
+ * Utility to parse an oklch string and return its parts
+ */
+function parseOklch(color) {
+    const match = color.match(/oklch\(([^ ]+) ([^ ]+) ([^ /]+)(?: \/ ([^)]+))?\)/);
+    if (!match)
+        return null;
+    return {
+        l: match[1],
+        c: match[2],
+        h: match[3],
+        a: match[4] || "1",
+    };
+}
+export function sc(context, name, alpha, lightness, chroma) {
+    let a = alpha && alpha !== "null" ? alpha : "1";
+    let l = lightness && lightness !== "null" ? lightness : "var(--lightness)";
+    let c = chroma && chroma !== "null" ? chroma : "var(--chroma)";
+    let h = `var(--${name}-hue)`;
+    return `oklch(${l} ${c} ${h} / ${a})`;
+}
+export function fc(context, name, alpha, lightness, chroma) {
+    let a = alpha && alpha !== "null" ? alpha : "1";
+    let l = lightness && lightness !== "null" ? lightness : `var(--${name}-lightness)`;
+    let c = chroma && chroma !== "null" ? chroma : `var(--${name}-chroma)`;
+    let h = `var(--${name}-hue)`;
+    return `oklch(${l} ${c} ${h} / ${a})`;
+}
+/**
+ * Resolves a color name to its CSS variables based on its type (standard or fixed)
+ */
+function getColorVariables(context, color) {
+    const { config } = context;
+    const hues = config?.ui?.theme?.hues || {};
+    const colors = config?.ui?.theme?.colors || {};
+    const lightColors = config?.ui?.theme?.light?.colors || {};
+    const darkColors = config?.ui?.theme?.dark?.colors || {};
+    // Check if it's a standard color (sc)
+    if (color in hues) {
+        return {
+            l: "var(--lightness)",
+            c: "var(--chroma)",
+            h: `var(--${color}-hue)`,
+        };
+    }
+    // Check if it's a fixed color (fc)
+    if (color in colors || color in lightColors || color in darkColors) {
+        return {
+            l: `var(--${color}-lightness)`,
+            c: `var(--${color}-chroma)`,
+            h: `var(--${color}-hue)`,
+        };
     }
-    if (lightness && lightness !== "null") {
-        l = lightness;
+    // Fallback to assume it's a fixed color if unknown but used as a name
+    return {
+        l: `var(--${color}-lightness)`,
+        c: `var(--${color}-chroma)`,
+        h: `var(--${color}-hue)`,
+    };
+}
+export function alpha(context, color, value) {
+    const parsed = parseOklch(color);
+    if (parsed) {
+        return `oklch(${parsed.l} ${parsed.c} ${parsed.h} / ${value})`;
     }
-    if (chroma && chroma !== "null") {
-        c = chroma;
+    const { l, c, h } = getColorVariables(context, color);
+    return `oklch(${l} ${c} ${h} / ${value})`;
+}
+export function lighten(context, color, amount) {
+    const parsed = parseOklch(color);
+    if (parsed) {
+        if (parsed.l.startsWith('var(')) {
+            return `oklch(calc(${parsed.l} + ${amount}) ${parsed.c} ${parsed.h} / ${parsed.a})`;
+        }
+        const lValue = parseFloat(parsed.l);
+        const amtValue = parseFloat(amount);
+        return `oklch(${Math.min(1, lValue + amtValue)} ${parsed.c} ${parsed.h} / ${parsed.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;
+    const { l, c, h } = getColorVariables(context, color);
+    return `oklch(calc(${l} + ${amount}) ${c} ${h} / 1)`;
+}
+export function darken(context, color, amount) {
+    const parsed = parseOklch(color);
+    if (parsed) {
+        if (parsed.l.startsWith('var(')) {
+            return `oklch(calc(${parsed.l} - ${amount}) ${parsed.c} ${parsed.h} / ${parsed.a})`;
+        }
+        const lValue = parseFloat(parsed.l);
+        const amtValue = parseFloat(amount);
+        return `oklch(${Math.max(0, lValue - amtValue)} ${parsed.c} ${parsed.h} / ${parsed.a})`;
     }
-    if (lightness && lightness !== "null") {
-        l = lightness;
+    const { l, c, h } = getColorVariables(context, color);
+    return `oklch(calc(${l} - ${amount}) ${c} ${h} / 1)`;
+}
+export function contrast(context, color) {
+    const parsed = parseOklch(color);
+    let l;
+    if (parsed) {
+        l = parsed.l;
     }
-    if (chroma && chroma !== "null") {
-        c = chroma;
+    else {
+        const vars = getColorVariables(context, color);
+        l = vars.l;
     }
-    return `oklch(${l} ${c} var(--${name}-hue) / ${a})`;
+    // Dynamic CSS contrast logic:
+    // (L - 0.6) * -1000 will be:
+    // - very negative if L > 0.6 (clamped to 0 / black)
+    // - very positive if L < 0.6 (clamped to 1 / white)
+    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 "../config";
+export type FnHandler = (context: PluginContext, ...args: string[]) => string;
 export declare const functions: Record<string, FnHandler>;

package/dist/functions/index.js

@@ -1,13 +1,11 @@
-"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 = require("./color");
-const spacing_1 = __importDefault(require("./spacing"));
-exports.functions = {
-    sc: color_1.sc,
-    fc: color_1.fc,
-    spacing: spacing_1.default,
+import { sc, fc, alpha, lighten, darken, contrast } from "./color";
+import { theme } from "./theme";
+export const functions = {
+    sc,
+    fc,
+    alpha,
+    lighten,
+    darken,
+    contrast,
+    theme,
 };

package/dist/functions/theme.d.ts

@@ -0,0 +1,6 @@
+import { PluginContext } from "../config";
+/**
+ * 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,17 @@
+/**
+ * Accesses values from the Seyuna configuration using dot notation
+ * Example: theme(ui.theme.breakpoints.tablet)
+ */
+export 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

@@ -1,10 +1,11 @@
 import { Rule, ChildNode, AtRule } from "postcss";
+import { PluginContext } from "./config";
 /**
  * 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): ChildNode[];
+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): Rule[];
+export declare function generateRules(names: string[], atRule: AtRule, context: PluginContext): Rule[];

package/dist/helpers.js

@@ -1,36 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cloneNodes = cloneNodes;
-exports.generateRules = generateRules;
-const postcss_1 = require("postcss");
-const color_1 = require("./functions/color");
+import { Rule } from "postcss";
+import { processFunctions } from "./parser";
 /**
  * Helper: clone nodes and replace {name} placeholders safely
  * Returns only valid Rules or Declarations (never raw AtRules)
  */
-function cloneNodes(nodes, name) {
+export 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);
-            if (/sc\(/.test(value)) {
-                const args = value
-                    .match(/sc\(([^)]*)\)/)?.[1]
-                    .split(",")
-                    .map((s) => s.trim());
-                if (args)
-                    value = (0, color_1.sc)(...args);
-            }
-            if (/fc\(/.test(value)) {
-                const args = value
-                    .match(/fc\(([^)]*)\)/)?.[1]
-                    .split(",")
-                    .map((s) => s.trim());
-                if (args)
-                    value = (0, color_1.fc)(...args);
-            }
-            decl.value = value;
+            // Process functions using the robust parser
+            decl.value = processFunctions(value, fnMap, decl, context);
             return decl;
         }
         if (cloned.type === "rule") {
@@ -39,7 +21,7 @@ function cloneNodes(nodes, name) {
                 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).filter((n) => n.type === "rule" || n.type === "decl");
+            rule.nodes = cloneNodes(rule.nodes || [], name, context).filter((n) => n.type === "rule" || n.type === "decl");
             if (!rule.nodes.length)
                 return [];
             return rule;
@@ -51,12 +33,15 @@ function cloneNodes(nodes, name) {
 /**
  * Generate CSS rules from a list of names
  */
-function generateRules(names, atRule) {
+export function generateRules(names, atRule, context) {
     const nodes = atRule.nodes ?? [];
     const generatedRules = [];
     for (const name of names) {
-        const rule = new postcss_1.Rule({ selector: `&.${name}` });
-        cloneNodes(nodes, name).forEach((n) => {
+        const rule = new Rule({
+            selector: `&.${name}`,
+            source: atRule.source,
+        });
+        cloneNodes(nodes, name, context).forEach((n) => {
             if (n.type === "rule" && n.selector && n.nodes?.length)
                 rule.append(n);
             if (n.type === "decl")

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("./config").PluginOptions> & {
     postcss: boolean;
     functions: Record<string, import("./functions").FnHandler>;
 };
-export = _default;
+export default plugin;

package/dist/index.js

@@ -1,7 +1,8 @@
-"use strict";
-const plugin_1 = require("./plugin");
-const functions_1 = require("./functions");
-module.exports = Object.assign(plugin_1.dynamicFunctionsPlugin, {
+import { dynamicFunctionsPlugin } from './plugin';
+import { functions } from './functions';
+// CommonJS-friendly export
+const plugin = Object.assign(dynamicFunctionsPlugin, {
     postcss: true,
-    functions: functions_1.functions
+    functions
 });
+export default plugin;

package/dist/parser.d.ts

@@ -0,0 +1,4 @@
+import { Node } from 'postcss';
+import { PluginContext } from './config';
+export type FunctionMap = Record<string, (context: PluginContext, ...args: string[]) => string>;
+export declare function processFunctions(value: string, fnMap: FunctionMap, node: Node, context: PluginContext): string;

package/dist/parser.js

@@ -0,0 +1,59 @@
+import valueParser from 'postcss-value-parser';
+import { reportError } from './errors';
+export function processFunctions(value, fnMap, node, context) {
+    const parsed = valueParser(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 += valueParser.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) {
+                            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>;
-}
-export declare const dynamicFunctionsPlugin: PluginCreator<PluginOptions>;
+import { PluginOptions as ConfigOptions } from "./config";
+export declare const dynamicFunctionsPlugin: PluginCreator<ConfigOptions>;

package/dist/plugin.js

@@ -1,35 +1,30 @@
-"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 dynamicFunctionsPlugin = (opts = {}) => {
-    const fnMap = { ...functions_1.functions, ...opts.functions };
+import { functions } from "./functions";
+import { atRuleHandlers } from "./at-rules";
+import { loadConfig } from "./config";
+import { processFunctions } from "./parser";
+export const dynamicFunctionsPlugin = (opts = {}) => {
+    const { config, options } = loadConfig(opts);
+    const fnMap = { ...functions, ...opts.functions };
+    const context = {
+        config,
+        options,
+        functions: fnMap,
+        mixins: {},
+    };
     return {
         postcssPlugin: "postcss-dynamic-functions",
         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;
+            decl.value = processFunctions(decl.value, fnMap, decl, context);
         },
         // Override AtRule handler to ensure ordered execution
         AtRule(atRule) {
             // Iterate over handlers in order (array) instead of object spread
-            for (const { name, handler } of at_rules_1.atRuleHandlers) {
+            for (const { name, handler } of atRuleHandlers) {
                 if (atRule.name === name) {
-                    handler(atRule);
+                    handler(atRule, context);
                 }
             }
         },
     };
 };
-exports.dynamicFunctionsPlugin = dynamicFunctionsPlugin;
-exports.dynamicFunctionsPlugin.postcss = true;
+dynamicFunctionsPlugin.postcss = true;

package/dist/types.d.ts

@@ -1,19 +1 @@
-export interface SeyunaConfig {
-    ui: {
-        theme: {
-            hues: Record<string, number>;
-            light: {
-                colors: Record<string, Color>;
-            };
-            dark: {
-                colors: Record<string, Color>;
-            };
-        };
-    };
-}
-type Color = {
-    lightness: number;
-    chroma: number;
-    hue: number;
-};
-export {};
+export type { Config as SeyunaConfig, Color } from "@seyuna/cli/types";

package/dist/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@seyuna/postcss",
-  "version": "1.0.0-canary.14",
+  "version": "1.0.0-canary.15",
   "description": "Seyuna UI's postcss plugin",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc",
-    "dev": "tsc -w"
+    "dev": "tsc -w",
+    "test": "vitest",
+    "test:run": "vitest run"
   },
   "keywords": [
     "postcss",
@@ -18,6 +20,10 @@
     "type": "git",
     "url": "git+https://github.com/seyuna-corp/seyuna-postcss.git"
   },
+  "dependencies": {
+    "@seyuna/cli": "^1.0.0-canary.28",
+    "postcss-value-parser": "^4.2.0"
+  },
   "peerDependencies": {
     "postcss": "^8.5.6"
   },
@@ -27,12 +33,13 @@
     "@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",
     "postcss": "^8.5.6",
     "postcss-selector-parser": "^7.1.0",
-    "semantic-release": "^24.2.7",
-    "typescript": "^5.0.0"
+    "semantic-release": "^25.0.2",
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.16"
   }
 }

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

@@ -0,0 +1,52 @@
+import { Rule, AtRule, ChildNode } from "postcss";
+import { PluginContext } from "../config";
+
+/**
+ * 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 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 AtRule({
+      name: "media",
+      params: `(prefers-color-scheme: ${scheme})`,
+      source: atRule.source,
+    });
+
+    const systemRule = new 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');

package/src/at-rules/color.ts

@@ -1,18 +1,15 @@
-import { AtRule, Rule, ChildNode, Declaration } from "postcss";
-import fs from "fs";
-import path from "path";
-import { SeyunaConfig } from "../types";
+import { AtRule } from "postcss";
+import { PluginContext } from "../config";
 import { generateRules } from "../helpers";
 
 /**
  * Handler for @each-standard-color
  */
-export function eachStandardColor(atRule: AtRule) {
-  const jsonPath = path.resolve(process.cwd(), "seyuna.json");
-  const data: SeyunaConfig = JSON.parse(fs.readFileSync(jsonPath, "utf-8"));
-  const hueNames = Object.keys(data.ui.theme.hues);
+export function eachStandardColor(atRule: AtRule, context: PluginContext) {
+  const { config } = context;
+  const hueNames = config.ui ? Object.keys(config.ui.theme.hues) : [];
 
-  const rules = generateRules(hueNames, atRule);
+  const rules = generateRules(hueNames, atRule, context);
   if (rules.length) atRule.replaceWith(...rules);
   else atRule.remove();
 }
@@ -20,18 +17,17 @@ export function eachStandardColor(atRule: AtRule) {
 /**
  * Handler for @each-fixed-color
  */
-export function eachFixedColor(atRule: AtRule) {
-  const jsonPath = path.resolve(process.cwd(), "seyuna.json");
-  const data: SeyunaConfig = JSON.parse(fs.readFileSync(jsonPath, "utf-8"));
+export function eachFixedColor(atRule: AtRule, context: PluginContext) {
+  const { config } = context;
 
   const mergedNames = [
     ...new Set([
-      ...Object.keys(data.ui.theme.light.colors),
-      ...Object.keys(data.ui.theme.dark.colors),
+      ...(config.ui ? Object.keys(config.ui.theme.light.colors) : []),
+      ...(config.ui ? Object.keys(config.ui.theme.dark.colors) : []),
     ]),
   ];
 
-  const rules = generateRules(mergedNames, atRule);
+  const rules = generateRules(mergedNames, atRule, context);
   if (rules.length) atRule.replaceWith(...rules);
   else atRule.remove();
 }

package/src/at-rules/conditional.ts

@@ -0,0 +1,34 @@
+import { AtRule } from "postcss";
+import { PluginContext } from "../config";
+import { processFunctions } from "../parser";
+
+/**
+ * Handler for @if (condition) { ... }
+ */
+export function conditional(atRule: AtRule, context: PluginContext) {
+  const { functions: fnMap } = context;
+  
+  // Clean up params (remove parentheses if present)
+  let condition = atRule.params.trim().replace(/^\(|\)$/g, '').trim();
+
+  // Process functions in the condition (e.g., theme access)
+  const evaluated = processFunctions(condition, fnMap, atRule, context).trim();
+
+  // Simple truthy evaluation
+  const isFalsy = !evaluated || 
+                  evaluated === 'false' || 
+                  evaluated === '0' || 
+                  evaluated === 'null' || 
+                  evaluated === 'undefined';
+
+  if (!isFalsy) {
+    // Ungroup the nodes
+    if (atRule.nodes && atRule.nodes.length > 0) {
+      atRule.replaceWith(...atRule.nodes.map(n => n.clone()));
+    } else {
+      atRule.remove();
+    }
+  } else {
+    atRule.remove();
+  }
+}