chaincss 2.1.31 → 2.1.33

package/README.md

@@ -1,4 +1,4 @@
-<h1 align="center">⛓️ ChainCSS</h1>
+<h1 align="center">ChainCSS</h1>
 
 <p align="center">
   <strong>The first CSS-in-JS library with true auto-detection mixed mode.</strong><br>
@@ -20,7 +20,6 @@
   </a>
 </p>
 
----
 
 # What is ChainCSS?
 
@@ -47,7 +46,6 @@ const card = chain()
 
 **No CSS syntax. No template literals. No object literals. Just JavaScript.**
 
----
 
 # Installation
 
@@ -64,6 +62,7 @@ npm install chaincss
 | **Browser CDN** | `import { chain } from "https://cdn.jsdelivr.net/npm/chaincss/dist/browser.js"` |
 | **Browser + import map** | Map `"chaincss"` to `./node_modules/chaincss/dist/browser.js` |
 
+
 ## Vite Configuration
 
 ```ts
@@ -76,7 +75,6 @@ export default defineConfig({
 });
 ```
 
----
 
 # Core API
 
@@ -121,7 +119,6 @@ const heading = chain()
 injectChainStyles({ heading });
 ```
 
----
 
 # Feature Reference
 
@@ -145,6 +142,7 @@ chain()
   .pos("relative");
 ```
 
+
 ## Macros (57)
 
 ### Layout & Display
@@ -292,7 +290,7 @@ chain()
   .$el("responsive");
 ```
 
-**Built-in breakpoints:** `sm`, `md`, `lg`, `xl`, `2xl`, `mobile`, `tablet`, `desktop`, `portrait`, `landscape`, `dark`, `light`, `reducedMotion`, `highContrast`, `print`, `hover`, `no-hover`, `fine`, `coarse`
+**Built-in breakpoints (20):** `sm`, `md`, `lg`, `xl`, `2xl`, `mobile`, `tablet`, `desktop`, `portrait`, `landscape`, `dark`, `light`, `reducedMotion`, `highContrast`, `print`, `hover`, `no-hover`, `fine`, `coarse`
 
 ## Transform Methods
 
@@ -306,7 +304,7 @@ chain()
   .$el("transformed");
 ```
 
-### Math Helpers
+### Math Helpers (15)
 
 ```ts
 chain()
@@ -358,22 +356,33 @@ const theme = new Theme(light);
 theme.toCSSVariables("my-theme"); // -> :root { --my-theme-colors-primary: #3b82f6; ... }
 ```
 
-## Recipe System
+## Recipe System (Variants)
 
 ```ts
 import { recipe } from "chaincss";
 
 const button = recipe({
-  base: {
-    selectors: ["btn"],
-    display: "inline-flex",
-    borderRadius: "8px",
-    fontWeight: 600,
-  },
+base: { selectors: ["btn"], display: "inline-flex", borderRadius: "8px", fontWeight: 600 },
+variants: {
+size: {
+sm: { padding: "8px 16px", fontSize: "14px" },
+lg: { padding: "16px 32px", fontSize: "18px" },
+},
+color: {
+primary: { background: "#3b82f6", color: "white" },
+danger: { background: "#ef4444", color: "white" },
+},
+},
+defaultVariants: { size: "md", color: "primary" },
+compoundVariants: [
+{ variants: { size: "lg", color: "primary" }, style: { fontWeight: 800 } },
+],
 });
+
+const styles = button({ size: "lg", color: "danger" });
 ```
 
-### Animations
+### Animations (42 presets)
 
 ```ts
 chain().fadeIn().$el("el"); chain().slideInUp().$el("el");  chain().slideInUp().$el("el");
@@ -409,7 +418,6 @@ const diff = getStyleDiff(snapshotId1, snapshotId2);
 // -> { added: {...}, removed: {...}, modified: {...} }
 ```
 
----
 
 # CLI
 
@@ -422,7 +430,6 @@ chaincss cache stats
 chaincss timeline list
 ```
 
----
 
 # Configuration
 
@@ -455,7 +462,6 @@ export default {
 };
 ```
 
----
 
 # Framework Integration
 
@@ -484,11 +490,8 @@ function Card() {
 ```ts
 import { chain } from "chaincss";
 
-const styles = chain()
-  .display("grid")
-  .cols(3)
-  .gap(16)
-  .$el("grid");
+const styles = chain().display("grid").cols(3).gap(16).$el("grid");
+// <div :class="styles.selectors[0]">
 ```
 
 ## Svelte
@@ -496,10 +499,8 @@ const styles = chain()
 ```ts
 import { chain } from "chaincss";
 
-const styles = chain()
-  .flex()
-  .center()
-  .$el("centered");
+const styles = chain().flex().center().$el("centered");
+// <div class={styles.selectors[0]}>
 ```
 
 ### Vanilla JS
@@ -519,7 +520,6 @@ const styles = chain()
 </script>
 ```
 
----
 
 ## Complete Feature List
 
@@ -541,9 +541,6 @@ const styles = chain()
 | Dev Tools | 3 | Suggestions Engine, Timeline, Component Generator |
 | Tests | 258 | 18 test files, 0 failures |
 
----
-
----
 
 # Performance
 
@@ -553,7 +550,6 @@ const styles = chain()
 - LRU persistent caching
 - Shared property deduplication
 
----
 
 # Contributing
 
@@ -567,7 +563,6 @@ npm install
 npm test
 ```
 
----
 
 # License
 

package/dist/cli/index.js

@@ -2639,13 +2639,13 @@ var init_compiler = __esm({
     init_cache_manager();
     init_content_addressable_cache();
     init_shorthands();
-    __filename = (() => {
+    __filename = typeof import.meta !== "undefined" ? (() => {
       try {
         return fileURLToPath(import.meta.url);
       } catch {
         return "";
       }
-    })();
+    })() : "";
     __dirname = __filename ? path6.dirname(__filename) : "";
     ChainCSSCompiler = class {
       config;

package/dist/compiler/btt.d.ts

@@ -4,6 +4,8 @@
  */
 import { DesignTokens } from './tokens.js';
 import type { AtomicOptimizer } from './atomic-optimizer.js';
+import type { StyleDefinition } from '../core/types.js';
+export type { StyleDefinition };
 export { setBreakpoints } from './breakpoints.js';
 export { chain, enableDebug } from './Chain.js';
 export { enableTimeline, getStyleHistory, getStyleChanges, getStyleDiff, exportTimeline, clearTimeline, takeSnapshot, isTimelineEnabled } from './timeline.js';
@@ -48,14 +50,6 @@ export interface ThemeBlock {
     tokens: any;
     fallback: any;
 }
-export interface StyleDefinition {
-    selectors: string[];
-    hover?: Record<string, string | number>;
-    atRules?: AtRule[];
-    nestedRules?: NestedRule[];
-    themes?: ThemeBlock[];
-    [cssProperty: string]: any;
-}
 export declare const run: (...args: any[]) => string;
 export declare const compile: (obj: Record<string, StyleDefinition>) => string;
 export { atomicOptimizer, chains as chainObject };

package/dist/compiler/recipe.d.ts

@@ -1,8 +1,4 @@
-interface StyleDefinition {
-    selectors: string[];
-    hover?: Record<string, string | number>;
-    [key: string]: any;
-}
+import type { StyleDefinition } from '../core/types.js';
 export interface RecipeOptions<TVariants extends Record<string, Record<string, any>>> {
     base?: StyleDefinition | (() => StyleDefinition);
     variants?: TVariants;
@@ -32,4 +28,3 @@ export type Recipe<TVariants extends Record<string, Record<string, any>>> = {
     getVariantClassNames: () => Record<string, string>;
 };
 export declare function recipe<TVariants extends Record<string, Record<string, any>>>(options: RecipeOptions<TVariants>): Recipe<TVariants>;
-export {};

package/dist/core/types.d.ts

@@ -12,8 +12,10 @@ export interface StyleDefinition {
     _generateComponent?: boolean;
     _framework?: 'react' | 'vue' | 'svelte' | 'solid' | 'auto';
     _propsDefinition?: Record<string, any>;
-    /** Explicit bucket for custom CSS properties to avoid index signature issues */
+    /** Explicit bucket for custom CSS properties */
     customProperties?: Record<string, string | number>;
+    /** Allow arbitrary CSS properties */
+    [cssProperty: string]: any;
 }
 export interface AtRule {
     type: 'media' | 'keyframes' | 'font-face' | 'supports' | 'container' | 'layer' | 'counter-style' | 'property';

package/dist/index.js

@@ -6077,13 +6077,13 @@ var PersistentCache = class {
 };
 
 // src/core/compiler.ts
-var __filename = (() => {
+var __filename = typeof import.meta !== "undefined" ? (() => {
   try {
     return fileURLToPath(import.meta.url);
   } catch {
     return "";
   }
-})();
+})() : "";
 var __dirname = __filename ? path5.dirname(__filename) : "";
 var ChainCSSCompiler = class {
   config;

package/dist/plugins/vite.js

@@ -2531,13 +2531,13 @@ var PersistentCache = class {
 };
 
 // src/core/compiler.ts
-var __filename = (() => {
+var __filename = typeof import.meta !== "undefined" ? (() => {
   try {
     return fileURLToPath(import.meta.url);
   } catch {
     return "";
   }
-})();
+})() : "";
 var __dirname = __filename ? path5.dirname(__filename) : "";
 var ChainCSSCompiler = class {
   config;

package/dist/runtime/injector.d.ts

@@ -1,4 +1,4 @@
-export interface StyleDefinition {
+export interface RuntimeStyleDefinition {
     selectors?: string[];
     hover?: Record<string, string | number>;
     [key: string]: any;
@@ -33,7 +33,7 @@ declare class StyleInjector {
      */
     resolveToken(value: any): any;
     private generateCSS;
-    injectMultiple(styles: Record<string, StyleDefinition>, moduleId?: string): Record<string, string>;
+    injectMultiple(styles: Record<string, RuntimeStyleDefinition>, moduleId?: string): Record<string, string>;
     writeToDOM(css: string): void;
     removeModule(moduleId: string): void;
     removeAll(): void;
@@ -45,9 +45,9 @@ declare class StyleInjector {
 }
 export declare const styleInjector: StyleInjector;
 export declare const setTokens: (t: TokenStore) => void;
-export declare const compileRuntime: (s: Record<string, StyleDefinition>, moduleId?: string) => Record<string, string>;
+export declare const compileRuntime: (s: Record<string, RuntimeStyleDefinition>, moduleId?: string) => Record<string, string>;
 export declare const removeRuntimeModule: (moduleId: string) => void;
 export declare const clearRuntimeStyles: () => void;
 export declare const enableRuntimeDebug: (enabled: boolean) => void;
-export declare function runRuntime(...styles: StyleDefinition[]): string;
+export declare function runRuntime(...styles: RuntimeStyleDefinition[]): string;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chaincss",
-  "version": "2.1.31",
-  "description": "ChainCSS v3.0 - The first CSS-in-JS library with true auto-detection mixed mode. Zero runtime by default, dynamic when you need it.",
+  "version": "2.1.33",
+  "description": "ChainCSS - The first CSS-in-JS library with true auto-detection mixed mode. Zero runtime by default, dynamic when you need it.",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -39,8 +39,8 @@
     "build:core": "esbuild src/index.ts --bundle --platform=node --format=esm --outfile=dist/index.js --packages=external",
     "build:cli": "esbuild src/cli/index.ts --bundle --platform=node --format=esm --outfile=dist/cli/index.js --packages=external && chmod +x dist/cli/index.js",
     "build:plugins": "esbuild src/plugins/vite.ts --bundle --platform=node --format=esm --outfile=dist/plugins/vite.js --packages=external && esbuild src/plugins/webpack.ts --bundle --platform=node --format=esm --outfile=dist/plugins/webpack.js --packages=external",
-    "build:runtime": "esbuild src/runtime/index.ts --bundle --platform=browser --format=esm --outfile=dist/runtime/index.js --external:react --external:react-dom --external:vue --external:svelte",
-    "build:browser": "esbuild src/browser.ts --bundle --platform=browser --format=esm --outfile=dist/browser.js --external:react --external:react-dom --external:vue --external:svelte",
+    "build:runtime": "esbuild src/runtime/index.ts --bundle --platform=browser --format=esm --outfile=dist/runtime/index.js --external:react --external:react-dom --external:vue --external:svelte --external:url",
+    "build:browser": "esbuild src/browser.ts --bundle --platform=browser --format=esm --outfile=dist/browser.js --external:react --external:react-dom --external:vue --external:svelte --external:url",
     "build:compiler": "esbuild src/compiler/index.ts --bundle --platform=node --format=esm --outfile=dist/compiler/index.js --packages=external",
     "dev": "tsc -w",
     "prepublishOnly": "npm run build",

package/src/compiler/btt.ts

@@ -19,6 +19,8 @@ import { animationPresets, createAnimation } from './animations.js';
 import { helpers } from './helpers.js';
 import type { AnimationConfig } from './animations.js';
 import { chain, setTokenContext } from './Chain.js';
+import type { StyleDefinition } from '../core/types.js';
+export type { StyleDefinition };
 import { takeSnapshot as ts, isTimelineEnabled as timelineActive } from './timeline.js';
 
 // ============================================================================
@@ -170,14 +172,7 @@ export interface AtRule {
 export interface NestedRule { selector: string; styles: Record<string, string | number>; }
 export interface ThemeBlock { name: string; styles: StyleDefinition; tokens: any; fallback: any; }
 
-export interface StyleDefinition {
-  selectors: string[];
-  hover?: Record<string, string | number>;
-  atRules?: AtRule[];
-  nestedRules?: NestedRule[];
-  themes?: ThemeBlock[];
-  [cssProperty: string]: any;
-}
+// StyleDefinition imported from core/types.ts
 
 // ============================================================================
 // AT-Rule Processing

package/src/compiler/recipe.ts

@@ -3,12 +3,7 @@
  * Recipe System - Type-safe component variants
  */
 import { chain } from './Chain.js';
-// Local type to avoid circular import with btt.ts
-interface StyleDefinition {
-  selectors: string[];
-  hover?: Record<string, string | number>;
-  [key: string]: any;
-}
+import type { StyleDefinition } from '../core/types.js';
 import { run } from './btt.js';
 
 export interface RecipeOptions<TVariants extends Record<string, Record<string, any>>> {

package/src/core/compiler.ts

@@ -25,8 +25,8 @@ import { PersistentCache } from '../compiler/content-addressable-cache.js';
 import { shorthandMap, macros } from '../compiler/shorthands.js';
 import type { AtomicClass } from '../compiler/atomic-optimizer.js';
 
-const __filename = (() => { try { return fileURLToPath(import.meta.url); } catch { return ""; } })();
-const __dirname = __filename ? path.dirname(__filename) : "";
+const __filename = typeof import.meta !== 'undefined' ? (() => { try { return fileURLToPath(import.meta.url); } catch { return ''; } })() : '';
+const __dirname = __filename ? path.dirname(__filename) : '';
 
 interface CachedStyleEntry {
   result: {

package/src/core/types.ts

@@ -14,8 +14,10 @@ export interface StyleDefinition {
   _generateComponent?: boolean;
   _framework?: 'react' | 'vue' | 'svelte' | 'solid' | 'auto';
   _propsDefinition?: Record<string, any>;
-  /** Explicit bucket for custom CSS properties to avoid index signature issues */
+  /** Explicit bucket for custom CSS properties */
   customProperties?: Record<string, string | number>;
+  /** Allow arbitrary CSS properties */
+  [cssProperty: string]: any;
 }
 
 export interface AtRule {

package/src/runtime/injector.ts

@@ -5,7 +5,8 @@ import { processStyleObject } from '../core/common-utils.js';
 
 const TOKEN_V2_KEY = '__CHAINCSS_V2_TOKENS__';
 
-export interface StyleDefinition {
+// Runtime-specific style def — selectors optional
+export interface RuntimeStyleDefinition {
   selectors?: string[];
   hover?: Record<string, string | number>;
   [key: string]: any;
@@ -110,7 +111,7 @@ class StyleInjector {
     });
   }
 
-  private generateCSS(style: StyleDefinition, className: string): string {
+  private generateCSS(style: RuntimeStyleDefinition, className: string): string {
     let css = '';
     const selector = `.${className}`;
 
@@ -139,7 +140,7 @@ class StyleInjector {
     return css;
   }
 
-  injectMultiple(styles: Record<string, StyleDefinition>, moduleId?: string): Record<string, string> {
+  injectMultiple(styles: Record<string, RuntimeStyleDefinition>, moduleId?: string): Record<string, string> {
     const result: Record<string, string> = {};
     let newCSS = '';
     const moduleClasses = new Set<string>();
@@ -233,13 +234,13 @@ export const styleInjector = new StyleInjector();
 
 // --- PUBLIC API ---
 export const setTokens = (t: TokenStore) => styleInjector.setTokens(t);
-export const compileRuntime = (s: Record<string, StyleDefinition>, moduleId?: string) =>
+export const compileRuntime = (s: Record<string, RuntimeStyleDefinition>, moduleId?: string) =>
   styleInjector.injectMultiple(s, moduleId);
 export const removeRuntimeModule = (moduleId: string) => styleInjector.removeModule(moduleId);
 export const clearRuntimeStyles = () => styleInjector.removeAll();
 export const enableRuntimeDebug = (enabled: boolean) => styleInjector.enableDebug(enabled);
 
-export function runRuntime(...styles: StyleDefinition[]): string {
+export function runRuntime(...styles: RuntimeStyleDefinition[]): string {
   let css = '';
   for (const style of styles) {
     if (style.selectors && style.selectors.length > 0) {