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

package/dist/parser.d.ts

@@ -1,4 +1,4 @@
 import { Node } from 'postcss';
-import { PluginContext } from './config';
+import { PluginContext } from './config.js';
 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

@@ -1,5 +1,5 @@
 import valueParser from 'postcss-value-parser';
-import { reportError } from './errors';
+import { reportError } from './errors.js';
 export function processFunctions(value, fnMap, node, context) {
     const parsed = valueParser(value);
     // Helper to process nodes recursively (inner-first)

package/dist/plugin.d.ts

@@ -1,3 +1,3 @@
 import { PluginCreator } from "postcss";
-import { PluginOptions as ConfigOptions } from "./config";
+import { PluginOptions as ConfigOptions } from "./config.js";
 export declare const dynamicFunctionsPlugin: PluginCreator<ConfigOptions>;

package/dist/plugin.js

@@ -1,7 +1,7 @@
-import { functions } from "./functions";
-import { atRuleHandlers } from "./at-rules";
-import { loadConfig } from "./config";
-import { processFunctions } from "./parser";
+import { functions } from "./functions/index.js";
+import { atRuleHandlers } from "./at-rules/index.js";
+import { loadConfig } from "./config.js";
+import { processFunctions } from "./parser.js";
 export const dynamicFunctionsPlugin = (opts = {}) => {
     const { config, options } = loadConfig(opts);
     const fnMap = { ...functions, ...opts.functions };
@@ -9,7 +9,6 @@ export const dynamicFunctionsPlugin = (opts = {}) => {
         config,
         options,
         functions: fnMap,
-        mixins: {},
     };
     return {
         postcssPlugin: "postcss-dynamic-functions",

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@seyuna/postcss",
-  "version": "1.0.0-canary.15",
+  "version": "1.0.0-canary.17",
   "description": "Seyuna UI's postcss plugin",
+  "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -36,6 +37,7 @@
     "@semantic-release/npm": "^13.1.3",
     "@semantic-release/release-notes-generator": "^14.0.3",
     "@types/node": "^20.0.0",
+    "conventional-changelog-conventionalcommits": "^9.1.0",
     "postcss": "^8.5.6",
     "postcss-selector-parser": "^7.1.0",
     "semantic-release": "^25.0.2",

package/release.config.mjs

@@ -4,7 +4,12 @@
 export default {
   branches: [{ name: "canary", prerelease: "canary" }, "main"],
   plugins: [
-    "@semantic-release/commit-analyzer",
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        preset: "conventionalcommits",
+      },
+    ],
     "@semantic-release/release-notes-generator",
     ["@semantic-release/changelog", { changelogFile: "CHANGELOG.md" }],
     [

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

@@ -1,5 +1,5 @@
 import { Rule, AtRule, ChildNode } from "postcss";
-import { PluginContext } from "../config";
+import { PluginContext } from "../config.js";
 
 /**
  * Custom PostCSS plugin handler factory for `@light` and `@dark` at-rules.

package/src/at-rules/color.ts

@@ -1,6 +1,6 @@
 import { AtRule } from "postcss";
-import { PluginContext } from "../config";
-import { generateRules } from "../helpers";
+import { PluginContext } from "../config.js";
+import { generateRules } from "../helpers.js";
 
 /**
  * Handler for @each-standard-color

package/src/at-rules/container.ts

@@ -1,5 +1,5 @@
 import { AtRule, ChildNode } from "postcss";
-import { PluginContext } from "../config";
+import { PluginContext } from "../config.js";
 
 /**
  * Custom PostCSS plugin handler for responsive at-rules.

package/src/at-rules/index.ts

@@ -1,11 +1,8 @@
 import { AtRule } from "postcss";
-import { eachStandardColor, eachFixedColor } from "./color";
-import container from "./container";
-import { light, dark } from "./color-scheme";
-import { defineMixin, applyMixin } from "./mixin";
-import { conditional } from "./conditional";
-import { resolveCustomMedia, defineCustomMedia } from "./custom-media";
-import { PluginContext } from "../config";
+import { eachStandardColor, eachFixedColor } from "./color.js";
+import container from "./container.js";
+import { light, dark } from "./color-scheme.js";
+import { PluginContext } from "../config.js";
 
 // Each handler has a name (matches the at-rule) and the function
 export interface AtRuleHandler {
@@ -15,12 +12,7 @@ export interface AtRuleHandler {
 
 // Ordered array ensures execution order
 export const atRuleHandlers: AtRuleHandler[] = [
-  { name: "define-mixin", handler: defineMixin },
-  { name: "custom-media", handler: defineCustomMedia },
-  { name: "apply", handler: applyMixin },
-  { name: "if", handler: conditional },
-  { name: "media", handler: resolveCustomMedia },
-  { name: "each-standard-color", handler: eachStandardColor }, // first
+  { name: "each-standard-color", handler: eachStandardColor },
   { name: "each-fixed-color", handler: eachFixedColor },
   { name: "light", handler: light },
   { name: "dark", handler: dark },
@@ -30,5 +22,4 @@ export const atRuleHandlers: AtRuleHandler[] = [
   { name: "lg", handler: container },
   { name: "xl", handler: container },
   { name: "2xl", handler: container },
-  // add more handlers here as needed
 ];

package/src/config.ts

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
-import { SeyunaConfig } from './types';
-import { FunctionMap } from './parser';
+import { SeyunaConfig } from './types.js';
+import { FunctionMap } from './parser.js';
 
 export interface PluginOptions {
   configPath?: string;
@@ -11,13 +11,10 @@ export interface PluginOptions {
   functions?: FunctionMap;
 }
 
-import { ChildNode } from 'postcss';
-
 export interface PluginContext {
   config: SeyunaConfig;
   options: Required<PluginOptions>;
   functions: FunctionMap;
-  mixins: Record<string, ChildNode[]>;
 }
 
 const DEFAULT_OPTIONS: Required<PluginOptions> = {

package/src/errors.ts

@@ -1,5 +1,5 @@
 import { Node } from 'postcss';
-import { PluginContext } from './config';
+import { PluginContext } from "./config.js";
 
 export function reportError(
   message: string,

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})`;
-}
+import { PluginContext } from "../config.js";
 
 /**
  * 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/functions/index.ts

@@ -1,6 +1,6 @@
-import { sc, fc, alpha, lighten, darken, contrast } from "./color";
-import { theme } from "./theme";
-import { PluginContext } from "../config";
+import { sc, fc, alpha, lighten, darken, contrast } from "./color.js";
+import { theme } from "./theme.js";
+import { PluginContext } from "../config.js";
 
 export type FnHandler = (context: PluginContext, ...args: string[]) => string;
 

package/src/functions/theme.ts

@@ -1,4 +1,4 @@
-import { PluginContext } from "../config";
+import { PluginContext } from "../config.js";
 
 /**
  * Accesses values from the Seyuna configuration using dot notation

package/src/helpers.ts

@@ -1,6 +1,6 @@
 import { Rule, ChildNode, Declaration, AtRule } from "postcss";
-import { processFunctions } from "./parser";
-import { PluginContext } from "./config";
+import { processFunctions } from "./parser.js";
+import { PluginContext } from "./config.js";
 
 /**
  * Helper: clone nodes and replace {name} placeholders safely

package/src/index.ts

@@ -1,5 +1,5 @@
-import { dynamicFunctionsPlugin } from './plugin';
-import { functions } from './functions';
+import { dynamicFunctionsPlugin } from './plugin.js';
+import { functions } from './functions/index.js';
 
 // CommonJS-friendly export
 const plugin = Object.assign(dynamicFunctionsPlugin, {

package/src/parser.ts

@@ -1,7 +1,7 @@
 import valueParser from 'postcss-value-parser';
 import { Node } from 'postcss';
-import { PluginContext } from './config';
-import { reportError } from './errors';
+import { PluginContext } from './config.js';
+import { reportError } from './errors.js';
 
 export type FunctionMap = Record<string, (context: PluginContext, ...args: string[]) => string>;
 

package/src/plugin.ts

@@ -1,8 +1,8 @@
 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";
+import { functions } from "./functions/index.js";
+import { atRuleHandlers } from "./at-rules/index.js";
+import { loadConfig, PluginOptions as ConfigOptions, PluginContext } from "./config.js";
+import { processFunctions, FunctionMap } from "./parser.js";
 
 export const dynamicFunctionsPlugin: PluginCreator<ConfigOptions> = (
   opts = {}
@@ -13,7 +13,6 @@ export const dynamicFunctionsPlugin: PluginCreator<ConfigOptions> = (
     config,
     options,
     functions: fnMap,
-    mixins: {},
   };
 
   return {

package/test-import.mjs

@@ -0,0 +1,2 @@
+import plugin from './dist/index.js';
+console.log('Plugin loaded:', plugin);