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

package/src/plugin.ts

@@ -1,34 +1,26 @@
 import { PluginCreator } from "postcss";
 import { functions } from "./functions";
 import { atRuleHandlers } from "./at-rules";
+import { loadConfig, PluginOptions as ConfigOptions, PluginContext } from "./config";
+import { processFunctions, FunctionMap } from "./parser";
 
-export interface PluginOptions {
-  functions?: Record<string, (...args: string[]) => string>;
-}
-
-export const dynamicFunctionsPlugin: PluginCreator<PluginOptions> = (
+export const dynamicFunctionsPlugin: PluginCreator<ConfigOptions> = (
   opts = {}
 ) => {
-  const fnMap = { ...functions, ...opts.functions };
+  const { config, options } = loadConfig(opts);
+  const fnMap: FunctionMap = { ...functions, ...opts.functions };
+  const context: PluginContext = {
+    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: string) => 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
@@ -36,7 +28,7 @@ export const dynamicFunctionsPlugin: PluginCreator<PluginOptions> = (
       // Iterate over handlers in order (array) instead of object spread
       for (const { name, handler } of atRuleHandlers) {
         if (atRule.name === name) {
-          handler(atRule);
+          handler(atRule, context);
         }
       }
     },

package/src/types.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 type { Config as SeyunaConfig, Color } from "@seyuna/cli/types";

package/tests/plugin.test.ts

@@ -0,0 +1,251 @@
+import { describe, it, expect } from 'vitest';
+import postcss from 'postcss';
+import plugin from '../src/index';
+
+const mockConfig = {
+  ui: {
+    theme: {
+      hues: {
+        primary: "200",
+        secondary: "100"
+      },
+      light: {
+        lightness: 0.66,
+        colors: {
+          surface: { lightness: 1, chroma: 0, hue: 0 }
+        }
+      },
+      dark: {
+        lightness: 0.66,
+        colors: {
+          surface: { lightness: 0, chroma: 0, hue: 0 }
+        }
+      },
+      breakpoints: {
+        tablet: "48rem"
+      }
+    }
+  }
+};
+
+async function run(input: string, opts = {}) {
+  return postcss([plugin(opts)]).process(input, { from: undefined });
+}
+
+describe('Seyuna PostCSS Plugin', () => {
+  it('processes sc() function', async () => {
+    const input = '.test { color: sc(primary); }';
+    const output = '.test { color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 1)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes sc() with alpha', async () => {
+    const input = '.test { color: sc(primary, 0.5); }';
+    const output = '.test { color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 0.5)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes alpha() function', async () => {
+    const input = '.test { color: alpha(oklch(0.5 0.1 200 / 1), 0.5); }';
+    const output = 'color: oklch(0.5 0.1 200 / 0.5)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes lighten() function', async () => {
+    const input = '.test { color: lighten(oklch(0.5 0.1 200 / 1), 0.1); }';
+    const output = 'color: oklch(0.6 0.1 200 / 1)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes lighten() with CSS variables', async () => {
+    const input = '.test { color: lighten(oklch(var(--l) 0.1 200 / 1), 0.1); }';
+    const output = 'color: oklch(calc(var(--l) + 0.1) 0.1 200 / 1)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes theme() function', async () => {
+    // We pass the config via opts for testing
+    const input = '.test { border-radius: theme(ui.theme.breakpoints.tablet); }';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain('.test { border-radius: 48rem');
+  });
+
+  it('processes @xs container at-rule', async () => {
+    const input = '@xs { .box { color: red; } }';
+    const result = await run(input);
+    expect(result.css).toContain('@container (min-width: 20rem)');
+    expect(result.css).toContain('.box { color: red');
+  });
+
+  it('processes @light at-rule', async () => {
+    const input = '@light { .test { color: black; } }';
+    const result = await run(input);
+    expect(result.css).toContain('@media (prefers-color-scheme: light)');
+    expect(result.css).toContain('[data-mode="system"] &');
+    expect(result.css).toContain('[data-mode="light"] &');
+  });
+
+  it('processes mixins using @define-mixin and @apply', async () => {
+    const input = `
+      @define-mixin btn {
+        padding: 1rem;
+        border-radius: 4px;
+      }
+      .primary-btn {
+        @apply btn;
+        color: white;
+      }
+    `;
+    const result = await run(input);
+    expect(result.css).toContain('.primary-btn {');
+    expect(result.css).toContain('padding: 1rem');
+    expect(result.css).toContain('border-radius: 4px');
+    expect(result.css).toContain('color: white');
+    expect(result.css).not.toContain('@define-mixin');
+  });
+
+  it('processes @if directive with literal', async () => {
+    const input = `
+      .test {
+        @if (true) {
+          color: red;
+        }
+        @if (false) {
+          color: blue;
+        }
+      }
+    `;
+    const result = await run(input);
+    expect(result.css).toContain('color: red');
+    expect(result.css).not.toContain('color: blue');
+  });
+
+  it('processes @if directive with theme()', async () => {
+    const input = `
+      .glass {
+        @if (theme(ui.features.glass)) {
+          backdrop-filter: blur(10px);
+        }
+      }
+    `;
+    const config = {
+      ui: {
+        features: {
+          glass: "true"
+        }
+      }
+    };
+    const result = await run(input, { config });
+    expect(result.css).toContain('backdrop-filter: blur(10px)');
+  });
+
+  it('resolves custom media tokens', async () => {
+    const input = `
+      @media (--tablet) {
+        .sidebar { display: block; }
+      }
+    `;
+    const config = {
+      media: {
+        tablet: "(min-width: 768px)"
+      }
+    };
+    const result = await run(input, { config });
+    expect(result.css).toContain('@media (min-width: 768px)');
+  });
+
+  it('handles @custom-media directive', async () => {
+    const input = `
+      @custom-media --mobile (max-width: 480px);
+      @media (--mobile) {
+        .full-width { width: 100%; }
+      }
+    `;
+    const result = await run(input);
+    expect(result.css).toContain('@media (max-width: 480px)');
+  });
+
+  it('processes alpha() with color name', async () => {
+    const input = '.test { color: alpha(primary, 0.5); }';
+    const output = 'color: oklch(var(--primary-lightness) var(--primary-chroma) var(--primary-hue) / 0.5)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes lighten() with color name', async () => {
+    const input = '.test { color: lighten(primary, 0.1); }';
+    const output = 'color: oklch(calc(var(--primary-lightness) + 0.1) var(--primary-chroma) var(--primary-hue) / 1)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes darken() with color name', async () => {
+    const input = '.test { color: darken(primary, 0.1); }';
+    const output = 'color: oklch(calc(var(--primary-lightness) - 0.1) var(--primary-chroma) var(--primary-hue) / 1)';
+    const result = await run(input);
+    expect(result.css).toContain(output);
+  });
+
+  it('processes contrast() with color name', async () => {
+    const input = '.test { color: contrast(surface); }';
+    const output = 'color: oklch(calc((var(--surface-lightness) - 0.6) * -1000) 0 0)';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain(output);
+  });
+
+  it('processes contrast() with standard color', async () => {
+    const input = '.test { color: contrast(primary); }';
+    const output = 'color: oklch(calc((var(--lightness) - 0.6) * -1000) 0 0)';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain(output);
+  });
+
+  it('processes alpha() with standard color (sc)', async () => {
+    const input = '.test { color: alpha(primary, 0.5); }';
+    // 'primary' is in hues in mockConfig, so it should use var(--lightness) and var(--chroma)
+    const output = 'color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 0.5)';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain(output);
+  });
+
+  it('processes alpha() with fixed color (fc)', async () => {
+    const input = '.test { color: alpha(surface, 0.5); }';
+    // 'surface' is in light.colors/dark.colors in mockConfig, so it should use its own lightness/chroma
+    const output = 'color: oklch(var(--surface-lightness) var(--surface-chroma) var(--surface-hue) / 0.5)';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain(output);
+  });
+
+  it('processes nested functions: contrast(fc(white))', async () => {
+    const input = '.test { color: contrast(fc(white)); }';
+    // fc(white) -> oklch(var(--white-lightness) ...)
+    // contrast extracts lightness -> var(--white-lightness)
+    const output = 'color: oklch(calc((var(--white-lightness) - 0.6) * -1000) 0 0)';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain(output);
+  });
+
+  it('processes nested functions: alpha(sc(primary), 0.5)', async () => {
+    const input = '.test { color: alpha(sc(primary), 0.5); }';
+    // sc(primary) -> oklch(var(--lightness) var(--chroma) var(--primary-hue) / 1)
+    // alpha(..., 0.5) extracts components and reapplies alpha
+    const output = 'color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 0.5)';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain(output);
+  });
+
+  it('processes multiple nested functions: contrast(alpha(fc(surface), 1))', async () => {
+    const input = '.test { color: contrast(alpha(fc(surface), 1)); }';
+    // inner-most: fc(surface) -> oklch(var(--surface-lightness) ...)
+    // next: alpha(..., 1) -> oklch(var(--surface-lightness) ...)
+    // outer: contrast extracts lightness -> var(--surface-lightness)
+    const output = 'color: oklch(calc((var(--surface-lightness) - 0.6) * -1000) 0 0)';
+    const result = await run(input, { config: mockConfig });
+    expect(result.css).toContain(output);
+  });
+});

package/tsconfig.json

@@ -1,12 +1,12 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "module": "CommonJS",
+    "module": "ES2020",
     "lib": ["ES2020"],
     "declaration": true,
     "outDir": "dist",
     "strict": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "skipLibCheck": true
   },

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

@@ -1,23 +0,0 @@
-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

@@ -1,65 +0,0 @@
-"use strict";
-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 inside the @dark block
-    // (so we can reuse them in both generated rules).
-    atRule.each((node) => {
-        clonedNodes.push(node.clone());
-    });
-    /**
-     * 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) => 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)",
-    });
-    // Wrap cloned rules under `[data-mode="system"]`
-    const systemRule = new postcss_1.Rule({
-        selector: `[data-mode="system"] &`,
-    });
-    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,23 +0,0 @@
-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

@@ -1,65 +0,0 @@
-"use strict";
-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 inside the @light block
-    // (so we can reuse them in both generated rules).
-    atRule.each((node) => {
-        clonedNodes.push(node.clone());
-    });
-    /**
-     * 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) => 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)",
-    });
-    // Wrap cloned rules under `[data-mode="system"]`
-    const systemRule = new postcss_1.Rule({
-        selector: `[data-mode="system"] &`,
-    });
-    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/spacing.d.ts

@@ -1 +0,0 @@
-export default function spacing(multiplier: string): string;

package/dist/functions/spacing.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = spacing;
-function spacing(multiplier) {
-    return `${parseFloat(multiplier) * 1}rem`;
-}

package/src/at-rules/dark.ts

@@ -1,69 +0,0 @@
-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 inside the @dark block
-  // (so we can reuse them in both generated rules).
-  atRule.each((node: ChildNode) => {
-    clonedNodes.push(node.clone());
-  });
-
-  /**
-   * 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()));
-
-  /**
-   * 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)",
-  });
-
-  // Wrap cloned rules under `[data-mode="system"]`
-  const systemRule = new Rule({
-    selector: `[data-mode="system"] &`,
-  });
-  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/src/at-rules/light.ts

@@ -1,69 +0,0 @@
-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 inside the @light block
-  // (so we can reuse them in both generated rules).
-  atRule.each((node: ChildNode) => {
-    clonedNodes.push(node.clone());
-  });
-
-  /**
-   * 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()));
-
-  /**
-   * 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)",
-  });
-
-  // Wrap cloned rules under `[data-mode="system"]`
-  const systemRule = new Rule({
-    selector: `[data-mode="system"] &`,
-  });
-  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/src/functions/spacing.ts

@@ -1,3 +0,0 @@
-export default function spacing(multiplier: string) {
-  return `${parseFloat(multiplier) * 1}rem`;
-}