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

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/tsconfig.json

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

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();
-}

package/src/at-rules/mixin.ts

@@ -1,46 +0,0 @@
-import { AtRule, ChildNode } from "postcss";
-import { PluginContext } from "../config";
-import { reportError } from "../errors";
-
-/**
- * Handler for @define-mixin [name] { ... }
- */
-export function defineMixin(atRule: AtRule, context: PluginContext) {
-  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: AtRule, context: PluginContext) {
-  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);
-}