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

package/src/functions/color.ts

@@ -1,61 +1,26 @@
 import { PluginContext } from "../config";
 
-/**
- * Utility to parse an oklch string and return its parts
- */
-function parseOklch(color: string) {
-  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: PluginContext,
-  name: string,
-  alpha?: string,
-  lightness?: string,
-  chroma?: string
-) {
-  let a: string = alpha && alpha !== "null" ? alpha : "1";
-  let l: string = lightness && lightness !== "null" ? lightness : "var(--lightness)";
-  let c: string = chroma && chroma !== "null" ? chroma : "var(--chroma)";
-  let h: string = `var(--${name}-hue)`;
-
-  return `oklch(${l} ${c} ${h} / ${a})`;
-}
-
-export function fc(
-  context: PluginContext,
-  name: string,
-  alpha?: string,
-  lightness?: string,
-  chroma?: string
-) {
-  let a: string = alpha && alpha !== "null" ? alpha : "1";
-  let l: string = lightness && lightness !== "null" ? lightness : `var(--${name}-lightness)`;
-  let c: string = chroma && chroma !== "null" ? chroma : `var(--${name}-chroma)`;
-  let h: string = `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: PluginContext, color: string) {
+function getColorVariables(context: PluginContext, color: string, type?: 'sc' | 'fc') {
   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) {
+  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 (type === 'fc' && !isFixed) {
+    throw new Error(`Fixed color '${color}' not found in seyuna.json colors`);
+  }
+
+  if (isStandard) {
     return {
       l: "var(--lightness)",
       c: "var(--chroma)",
@@ -63,8 +28,7 @@ function getColorVariables(context: PluginContext, color: string) {
     };
   }
 
-  // Check if it's a fixed color (fc)
-  if (color in colors || color in lightColors || color in darkColors) {
+  if (isFixed) {
     return {
       l: `var(--${color}-lightness)`,
       c: `var(--${color}-chroma)`,
@@ -72,72 +36,55 @@ function getColorVariables(context: PluginContext, color: string) {
     };
   }
 
-  // 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)`,
-  };
+  throw new Error(`Color '${color}' not found in seyuna.json`);
 }
 
-export function alpha(context: PluginContext, color: string, value: string) {
-  const parsed = parseOklch(color);
-  if (parsed) {
-    return `oklch(${parsed.l} ${parsed.c} ${parsed.h} / ${value})`;
-  }
+export function sc(
+  context: PluginContext,
+  name: string,
+  alpha?: string,
+  lightness?: string,
+  chroma?: string
+) {
+  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})`;
+}
+
+export function fc(
+  context: PluginContext,
+  name: string,
+  alpha?: string,
+  lightness?: string,
+  chroma?: string
+) {
+  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})`;
+}
+
+export function alpha(context: PluginContext, color: string, value: string) {
   const { l, c, h } = getColorVariables(context, color);
   return `oklch(${l} ${c} ${h} / ${value})`;
 }
 
 export function lighten(context: PluginContext, color: string, amount: string) {
-  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})`;
-  }
-
   const { l, c, h } = getColorVariables(context, color);
   return `oklch(calc(${l} + ${amount}) ${c} ${h} / 1)`;
 }
 
 export function darken(context: PluginContext, color: string, amount: string) {
-  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})`;
-  }
-
   const { l, c, h } = getColorVariables(context, color);
   return `oklch(calc(${l} - ${amount}) ${c} ${h} / 1)`;
 }
 
 export function contrast(context: PluginContext, color: string) {
-  const parsed = parseOklch(color);
-  let l: string;
-
-  if (parsed) {
-    l = parsed.l;
-  } else {
-    const vars = getColorVariables(context, color);
-    l = vars.l;
-  }
-
-  // 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)
+  const { l } = getColorVariables(context, color);
   return `oklch(calc((${l} - 0.6) * -1000) 0 0)`;
 }

package/src/plugin.ts

@@ -13,7 +13,6 @@ export const dynamicFunctionsPlugin: PluginCreator<ConfigOptions> = (
     config,
     options,
     functions: fnMap,
-    mixins: {},
   };
 
   return {

package/tests/plugin.test.ts

@@ -9,6 +9,10 @@ const mockConfig = {
         primary: "200",
         secondary: "100"
       },
+      colors: {
+        white: { lightness: 1, chroma: 0, hue: 0 },
+        black: { lightness: 0, chroma: 0, hue: 0 }
+      },
       light: {
         lightness: 0.66,
         colors: {
@@ -28,8 +32,9 @@ const mockConfig = {
   }
 };
 
-async function run(input: string, opts = {}) {
-  return postcss([plugin(opts)]).process(input, { from: undefined });
+async function run(input: string, opts: any = {}) {
+  const mergedOpts = { config: mockConfig, ...opts };
+  return postcss([plugin(mergedOpts)]).process(input, { from: undefined });
 }
 
 describe('Seyuna PostCSS Plugin', () => {
@@ -47,23 +52,23 @@ describe('Seyuna PostCSS Plugin', () => {
     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)';
+  it('processes alpha() function with color name', async () => {
+    const input = '.test { color: alpha(primary, 0.5); }';
+    const output = 'color: oklch(var(--lightness) var(--chroma) var(--primary-hue) / 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)';
+  it('processes lighten() function with color name', async () => {
+    const input = '.test { color: lighten(primary, 0.1); }';
+    const output = 'color: oklch(calc(var(--lightness) + 0.1) var(--chroma) var(--primary-hue) / 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)';
+  it('processes darken() function with color name', async () => {
+    const input = '.test { color: darken(primary, 0.1); }';
+    const output = 'color: oklch(calc(var(--lightness) - 0.1) var(--chroma) var(--primary-hue) / 1)';
     const result = await run(input);
     expect(result.css).toContain(output);
   });
@@ -90,108 +95,21 @@ describe('Seyuna PostCSS Plugin', () => {
     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 () => {
+  it('processes alpha() with standard color', 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);
+    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 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);
+  it('processes alpha() with fixed color', async () => {
+    const input = '.test { color: alpha(surface, 0.5); }';
+    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 contrast() with color name', async () => {
+  it('processes contrast() with fixed color', 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 });
@@ -205,47 +123,21 @@ describe('Seyuna PostCSS Plugin', () => {
     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('throws error for unknown standard color in strict mode', async () => {
+    const input = '.test { color: sc(unknown); }';
+    await expect(run(input, { config: mockConfig, strict: true }))
+      .rejects.toThrow(/Standard color 'unknown' not found/);
   });
 
-  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('throws error for unknown fixed color in strict mode', async () => {
+    const input = '.test { color: fc(unknown); }';
+    await expect(run(input, { config: mockConfig, strict: true }))
+      .rejects.toThrow(/Fixed color 'unknown' not found/);
   });
 
-  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);
+  it('throws error for unknown color in alpha() in strict mode', async () => {
+    const input = '.test { color: alpha(unknown, 0.5); }';
+    await expect(run(input, { config: mockConfig, strict: true }))
+      .rejects.toThrow(/Color 'unknown' not found in seyuna.json/);
   });
 });

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

@@ -1,6 +0,0 @@
-import { AtRule } from "postcss";
-import { PluginContext } from "../config";
-/**
- * Handler for @if (condition) { ... }
- */
-export declare function conditional(atRule: AtRule, context: PluginContext): void;

package/dist/at-rules/conditional.js

@@ -1,29 +0,0 @@
-import { processFunctions } from "../parser";
-/**
- * Handler for @if (condition) { ... }
- */
-export function conditional(atRule, context) {
-    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();
-    }
-}

package/dist/at-rules/custom-media.d.ts

@@ -1,15 +0,0 @@
-import { AtRule } from "postcss";
-import { PluginContext } from "../config";
-/**
- * Global store for CSS-defined custom media (if needed)
- * However, we primarily use the config.
- */
-/**
- * Handler for @media at-rules to resolve custom media tokens
- */
-export declare function resolveCustomMedia(atRule: AtRule, context: PluginContext): void;
-/**
- * [Future-proofing] Handler for @custom-media --name query
- * Adds to the config-like store for the current run
- */
-export declare function defineCustomMedia(atRule: AtRule, context: PluginContext): void;

package/dist/at-rules/custom-media.js

@@ -1,40 +0,0 @@
-/**
- * Global store for CSS-defined custom media (if needed)
- * However, we primarily use the config.
- */
-/**
- * Handler for @media at-rules to resolve custom media tokens
- */
-export function resolveCustomMedia(atRule, context) {
-    const { config } = context;
-    const mediaTokens = config.media || {};
-    // Regex to find --tokens anywhere
-    let params = atRule.params;
-    const tokenRegex = /--[a-zA-Z0-9\-_]+/g;
-    params = params.replace(tokenRegex, (match) => {
-        const tokenName = match.slice(2);
-        if (mediaTokens[tokenName]) {
-            return mediaTokens[tokenName];
-        }
-        return match;
-    });
-    // Clean up double parentheses like ((...)) if any
-    params = params.replace(/\(\((.+)\)\)/g, '($1)');
-    atRule.params = params;
-}
-/**
- * [Future-proofing] Handler for @custom-media --name query
- * Adds to the config-like store for the current run
- */
-export function defineCustomMedia(atRule, context) {
-    const match = atRule.params.match(/^(--[a-zA-Z0-9\-_]+)\s+(.+)$/);
-    if (match) {
-        const name = match[1].slice(2);
-        const query = match[2];
-        if (!context.config.media) {
-            context.config.media = {};
-        }
-        context.config.media[name] = query;
-    }
-    atRule.remove();
-}

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

@@ -1,10 +0,0 @@
-import { AtRule } from "postcss";
-import { PluginContext } from "../config";
-/**
- * Handler for @define-mixin [name] { ... }
- */
-export declare function defineMixin(atRule: AtRule, context: PluginContext): void;
-/**
- * Handler for @apply [name]
- */
-export declare function applyMixin(atRule: AtRule, context: PluginContext): void;

package/dist/at-rules/mixin.js

@@ -1,37 +0,0 @@
-import { reportError } from "../errors";
-/**
- * Handler for @define-mixin [name] { ... }
- */
-export function defineMixin(atRule, context) {
-    const name = atRule.params.trim();
-    if (!name) {
-        reportError("Mixin name is required", atRule, context);
-        return;
-    }
-    // Store the nodes (cloned)
-    context.mixins[name] = atRule.nodes?.map(n => n.clone()) || [];
-    // Remove the at-rule from the output
-    atRule.remove();
-}
-/**
- * Handler for @apply [name]
- */
-export function applyMixin(atRule, context) {
-    const name = atRule.params.trim();
-    if (!name) {
-        reportError("Mixin name is required for @apply", atRule, context);
-        return;
-    }
-    const mixinNodes = context.mixins[name];
-    if (!mixinNodes) {
-        reportError(`Mixin "${name}" not found`, atRule, context);
-        return;
-    }
-    // Inject the nodes, ensuring they have the correct source for mapping
-    const nodesToInject = mixinNodes.map(n => {
-        const cloned = n.clone();
-        cloned.source = atRule.source;
-        return cloned;
-    });
-    atRule.replaceWith(...nodesToInject);
-}

package/src/at-rules/conditional.ts

@@ -1,34 +0,0 @@
-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();
-  }
-}

package/src/at-rules/custom-media.ts

@@ -1,50 +0,0 @@
-import { AtRule } from "postcss";
-import { PluginContext } from "../config";
-
-/**
- * Global store for CSS-defined custom media (if needed)
- * However, we primarily use the config.
- */
-
-/**
- * Handler for @media at-rules to resolve custom media tokens
- */
-export function resolveCustomMedia(atRule: AtRule, context: PluginContext) {
-  const { config } = context;
-  const mediaTokens = (config as any).media || {};
-
-  // Regex to find --tokens anywhere
-  let params = atRule.params;
-  const tokenRegex = /--[a-zA-Z0-9\-_]+/g;
-
-  params = params.replace(tokenRegex, (match) => {
-    const tokenName = match.slice(2);
-    if (mediaTokens[tokenName]) {
-      return mediaTokens[tokenName];
-    }
-    return match;
-  });
-
-  // Clean up double parentheses like ((...)) if any
-  params = params.replace(/\(\((.+)\)\)/g, '($1)');
-
-  atRule.params = params;
-}
-
-/**
- * [Future-proofing] Handler for @custom-media --name query
- * Adds to the config-like store for the current run
- */
-export function defineCustomMedia(atRule: AtRule, context: PluginContext) {
-  const match = atRule.params.match(/^(--[a-zA-Z0-9\-_]+)\s+(.+)$/);
-  if (match) {
-    const name = match[1].slice(2);
-    const query = match[2];
-    
-    if (!(context.config as any).media) {
-       (context.config as any).media = {};
-    }
-    (context.config as any).media[name] = query;
-  }
-  atRule.remove();
-}