@seyuna/postcss 1.0.0-canary.37 → 1.0.0-canary.39

package/src/helpers.ts

@@ -1,75 +0,0 @@
-import Rule from "postcss/lib/rule";
-// import type { ChildNode, Declaration, AtRule } from "postcss";
-import { processFunctions } from "./parser.js";
-import { PluginContext } from './types.js';
-
-/**
- * Helper: clone nodes and replace {name} placeholders safely
- * Returns only valid Rules or Declarations (never raw AtRules)
- */
-export function cloneNodes(
-  nodes: any[], // ChildNode[]
-  name: string,
-  context: PluginContext
-): any[] { // ChildNode[]
-  const { functions: fnMap } = context;
-  
-  return nodes.flatMap((node) => {
-    const cloned = node.clone();
-
-    if (cloned.type === "decl") {
-      const decl = cloned as any; // Declaration
-      let value = decl.value.replace(/\{name\}/g, name);
-
-      // Process functions using the robust parser
-      decl.value = processFunctions(value, fnMap, decl, context);
-      
-      return decl;
-    }
-
-    if (cloned.type === "rule") {
-      const rule = cloned as Rule;
-      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
- */
-export function generateRules(
-  names: string[],
-  atRule: any, // AtRule
-  context: PluginContext
-): Rule[] {
-  const nodes = atRule.nodes ?? [];
-  const generatedRules: Rule[] = [];
-
-  for (const name of names) {
-    const rule = new Rule({
-      selector: `&.${name}`,
-      source: atRule.source,
-    });
-    cloneNodes(nodes, name, context).forEach((n) => {
-      if (n.type === "rule" && n.selector && (n as Rule).nodes?.length) rule.append(n);
-      if (n.type === "decl") rule.append(n);
-    });
-
-    if (rule.nodes.length) generatedRules.push(rule);
-  }
-
-  return generatedRules;
-}

package/src/index.ts

@@ -1,10 +0,0 @@
-import { dynamicFunctionsPlugin } from './plugin.js';
-import { functions } from './functions/index.js';
-
-// CommonJS-friendly export
-const plugin = Object.assign(dynamicFunctionsPlugin, {
-  postcss: true,
-  functions
-});
-
-export default plugin;

package/src/parser.ts

@@ -1,81 +0,0 @@
-import valueParser from 'postcss-value-parser';
-// import type { Node } from 'postcss';
-import { PluginContext, FunctionMap } from './types.js';
-import { reportError } from './errors.js';
-
-// Re-export FunctionMap for backwards compatibility
-export type { FunctionMap } from './types.js';
-
-export function processFunctions(
-  value: string,
-  fnMap: FunctionMap,
-  node: any,
-  context: PluginContext
-): string {
-  const parsed = valueParser(value);
-
-  // Helper to process nodes recursively (inner-first)
-  function processNode(parsedValue: valueParser.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: valueParser.Node[]) {
-      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: string[] = [];
-            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 as any).type = 'word';
-              (nodeIter as any).value = result;
-              (nodeIter as any).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/src/plugin.ts

@@ -1,58 +0,0 @@
-// import type { PluginCreator } from "postcss";
-import { functions } from "./functions/index.js";
-import { atRuleHandlers } from "./at-rules/index.js";
-import { loadConfig, loadConfigAsync } from "./config.js";
-import { PluginOptions, PluginContext, FunctionMap } from "./types.js";
-import { processFunctions } from "./parser.js";
-
-export const dynamicFunctionsPlugin: any = (
-  opts = {}
-) => {
-  let context: PluginContext | undefined;
-  let fnMap: FunctionMap | undefined;
-
-  return {
-    postcssPlugin: "postcss-dynamic-functions",
-
-    async Once() {
-      try {
-        const { config, options } = await loadConfigAsync(opts);
-        fnMap = { ...functions, ...(opts as any).functions };
-        context = {
-          config,
-          options,
-          functions: fnMap as FunctionMap,
-          result: undefined
-        };
-      } catch (e) {
-        throw e;
-      }
-    },
-
-    Declaration(decl: any, { result }: any) {
-      if (!context || !fnMap) return;
-      
-      // Update context with the current result object
-      context.result = result;
-
-      const newValue = processFunctions(decl.value, fnMap, decl, context);
-      
-      if (newValue !== decl.value) {
-        decl.value = newValue;
-      }
-    },
-
-    // Override AtRule handler to ensure ordered execution
-    AtRule(atRule: any) {
-      if (!context) return;
-      // Iterate over handlers in order (array) instead of object spread
-      for (const { name, handler } of atRuleHandlers) {
-        if (atRule.name === name) {
-          handler(atRule, context);
-        }
-      }
-    },
-  };
-};
-
-dynamicFunctionsPlugin.postcss = true;

package/src/styles/seyuna-global.css

@@ -1,94 +0,0 @@
-@layer reset, base, components, utilities;
-
-@layer reset {
-  /* 
-  Reset all elements to a zeroed baseline to ensure consistency in all browsers.
-*/
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-    font-family: inherit;
-  }
-
-  /* 
-  Prevent automatic font size adjustments on mobile devices to keep text rendering consistent across platforms.
-*/
-  html {
-    -moz-text-size-adjust: none; /* Firefox */
-    -webkit-text-size-adjust: none; /* Safari / older WebKit browsers */
-    text-size-adjust: none; /* Modern spec-compliant browsers */
-    color: var(--text);
-    background-color: var(--background);
-    font-size: max(1rem, 0.833vw);
-  }
-
-  /* 
-  Remove default list styling from unordered and ordered lists that 
-  explicitly use role="list".
-*/
-  ul[role="list"],
-  ol[role="list"] {
-    list-style: none;
-  }
-
-  /* 
-  Ensure the body element always fills at least the full height of the viewport
-  so short pages don't collapse. Improve text rendering across browsers by
-  enabling smoother grayscale antialiasing. Set the body as a container
-  (queryable by its inline size) for use with CSS container queries, and
-  enable smooth scrolling for anchor links and programmatic scroll actions.
-*/
-  body {
-    min-height: 100vh;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    container-type: inline-size;
-    scroll-behavior: smooth;
-  }
-
-  /* 
-  Improve heading readability by evenly distributing words across lines.
-  This prevents awkward line breaks and creates more balanced, aesthetic headings.
-*/
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    text-wrap: balance;
-  }
-
-  /* 
-  Reset all link styles to inherit from parent elements.
-  This removes default colors, underlines, and visited/hover states.
-*/
-  a {
-    all: unset;
-    color: inherit;
-    text-decoration: none;
-    cursor: pointer;
-  }
-
-  /* 
-  Ensure images and <picture> elements scale within their container,
-  preventing overflow and maintaining layout integrity on any screen size.
-*/
-  img,
-  picture {
-    max-width: 100%;
-    display: block;
-  }
-
-  /* 
-  Add extra scroll margin above and below elements targeted via anchors.
-  This prevents the element from hugging the top edge of the viewport when navigated to.
-*/
-  :target {
-    scroll-margin-block: 1rem;
-  }
-}

package/src/types.ts

@@ -1,71 +0,0 @@
-// Local type definitions to avoid @seyuna/cli runtime import
-// The @seyuna/cli package imports Deno polyfills that conflict with Vite/Astro
-
-/**
- * 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;
-  output_dir?: string;
-}
-
-/**
- * Root configuration structure for a Seyuna project.
- */
-export interface SeyunaConfig {
-  ui?: UI;
-}
-
-// Shared types to avoid circular dependencies between config.ts and parser.ts
-
-export type FunctionMap = Record<
-  string,
-  (context: PluginContext, ...args: string[]) => string
->;
-
-export interface PluginOptions {
-  config?: SeyunaConfig;
-  functions?: FunctionMap;
-}
-
-export interface PluginContext {
-  config: SeyunaConfig;
-  options: Required<PluginOptions> & { modeAttribute: string };
-  functions: FunctionMap;
-  result?: any; // PostCSS Result
-}

package/tests/plugin.test.ts

@@ -1,244 +0,0 @@
-import { describe, it, expect } from "vitest";
-import postcss from "postcss";
-import plugin from "../src/index";
-
-const mockConfig = {
-  ui: {
-    theme: {
-      hues: {
-        primary: "200",
-        secondary: "100",
-      },
-      colors: {
-        white: { lightness: 1, chroma: 0, hue: 0 },
-        black: { lightness: 0, chroma: 0, hue: 0 },
-      },
-      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: any = {}) {
-  const mergedOpts = { config: mockConfig, ...opts };
-  return postcss([plugin(mergedOpts)]).process(input, { from: undefined });
-}
-
-describe("Seyuna PostCSS Plugin", () => {
-  it("processes SeyunaStandardColor() function", async () => {
-    const input = ".test { color: SeyunaStandardColor(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 SeyunaStandardColor() with alpha", async () => {
-    const input = ".test { color: SeyunaStandardColor(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 SeyunaAlpha() function with color name", async () => {
-    const input = ".test { color: SeyunaAlpha(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 SeyunaLighten() function with color name", async () => {
-    const input = ".test { color: SeyunaLighten(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 SeyunaDarken() function with color name", async () => {
-    const input = ".test { color: SeyunaDarken(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 SeyunaTheme() function", async () => {
-    // We pass the config via opts for testing
-    const input =
-      ".test { border-radius: SeyunaTheme(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 SeyunaAlpha() with standard color", async () => {
-    const input = ".test { color: SeyunaAlpha(primary, 0.5); }";
-    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 SeyunaAlpha() with fixed color", async () => {
-    const input = ".test { color: SeyunaAlpha(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 SeyunaContrast() with fixed color", async () => {
-    const input = ".test { color: SeyunaContrast(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 SeyunaContrast() with standard color", async () => {
-    const input = ".test { color: SeyunaContrast(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 @seyuna;", async () => {
-    const input = "@seyuna;";
-    const result = await run(input, { config: mockConfig });
-
-    // Check for root variables (hues)
-    expect(result.css).toContain(":root");
-    expect(result.css).toContain("--primary-hue: 200");
-    expect(result.css).toContain("--secondary-hue: 100");
-    expect(result.css).toContain("--alpha-hue: 15");
-    expect(result.css).toContain("--omega-hue: 360");
-
-    // Check for mode selectors
-    expect(result.css).toContain('[data-mode="light"]');
-    expect(result.css).toContain('[data-mode="dark"]');
-    expect(result.css).toContain("--lightness: 0.66");
-
-    // Check for system preference media queries
-    expect(result.css).toContain("@media (prefers-color-scheme: light)");
-    expect(result.css).toContain("@media (prefers-color-scheme: dark)");
-
-    // Check for base styles (reset)
-    expect(result.css).toContain("@layer reset");
-    expect(result.css).toContain("-webkit-text-size-adjust: none");
-
-    // Check for palette colors
-    expect(result.css).toContain("--surface-lightness: 1");
-  });
-
-  it('configures via @config "seyuna"', async () => {
-    const input = `
-      @config "seyuna" {
-        --hue-custom: 123;
-        --color-brand: 0.5 0.2 100;
-        --light-lightness: 0.8;
-      }
-      @seyuna;
-      .test { 
-        color: SeyunaStandardColor(custom);
-        background: SeyunaFixedColor(brand);
-      }
-    `;
-    const result = await postcss([plugin({ config: undefined })]).process(
-      input,
-      { from: undefined },
-    );
-
-    expect(result.css).not.toContain("@config");
-    expect(result.css).toContain("--custom-hue: 123");
-    expect(result.css).toContain(
-      "color: oklch(var(--lightness) var(--chroma) var(--custom-hue) / 1)",
-    );
-    expect(result.css).toContain(
-      "background: oklch(var(--brand-lightness) var(--brand-chroma) var(--brand-hue) / 1)",
-    );
-  });
-
-  it("overrides fixed colors in mode blocks", async () => {
-    const input = `
-      @config "seyuna" {
-        --color-brand: 0.5 0.2 100;
-        --light-color-brand: 1 0 100;
-      }
-      @seyuna;
-    `;
-    const result = await postcss([plugin({ config: undefined })]).process(
-      input,
-      { from: undefined },
-    );
-
-    // Global :root should have the original
-    expect(result.css).toContain(":root");
-    expect(result.css).toContain("--brand-lightness: 0.5");
-
-    // Light mode should have the override
-    expect(result.css).toContain('[data-mode="light"]');
-    expect(result.css).toContain("--brand-lightness: 1");
-  });
-
-  it("injects the CSS reset via @seyuna;", async () => {
-    const input = "@seyuna;";
-    const result = await run(input, { config: mockConfig });
-
-    // Verify layers
-    expect(result.css).toContain("@layer reset, base, components, utilities;");
-    expect(result.css).toContain("@layer reset {");
-
-    // Verify key reset properties
-    expect(result.css).toContain("box-sizing: border-box;");
-    expect(result.css).toContain("-webkit-text-size-adjust: none;");
-    expect(result.css).toContain("text-size-adjust: none;");
-    expect(result.css).toContain("container-type: inline-size;");
-    expect(result.css).toContain("text-wrap: balance;");
-    expect(result.css).toContain("all: unset;");
-    expect(result.css).toContain("scroll-margin-block: 1rem;");
-  });
-
-  it("uses resilient variables for untyped functions in config-less environments", async () => {
-    const input = ".test { color: SeyunaAlpha(unknown, 0.5); }";
-    const result = await postcss([plugin({ config: undefined })]).process(
-      input,
-      {
-        from: undefined,
-      },
-    );
-
-    expect(result.css).toContain(
-      "color: oklch(var(--unknown-lightness, var(--lightness)) var(--unknown-chroma, var(--chroma)) var(--unknown-hue) / 0.5)",
-    );
-  });
-});

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "NodeNext",
-    "lib": ["ES2020"],
-    "declaration": true,
-    "outDir": "dist",
-    "strict": true,
-    "moduleResolution": "NodeNext",
-    "esModuleInterop": true,
-    "skipLibCheck": true
-  },
-  "include": ["src/**/*.ts"]
-}