chaincss 2.0.7 → 2.1.0

package/dist/cli/types.d.ts

@@ -1,3 +1,5 @@
+import type { ChainCSSConfig as CoreChainCSSConfig } from '../core/types.js';
+export type ChainCSSConfig = CoreChainCSSConfig;
 export interface CLIOptions {
     input?: string;
     output?: string;
@@ -25,27 +27,56 @@ export interface BuildOptions {
     config?: string;
     watch?: boolean;
     verbose?: boolean;
+    atomic?: boolean;
+    minify?: boolean;
 }
-export interface ChainCSSConfig {
-    inputs?: string[];
+export interface WatchOptions {
+    config?: string;
+    verbose?: boolean;
+    atomic?: boolean;
+}
+export interface CacheOptions {
+    action: 'clear' | 'stats' | 'prune' | 'list' | 'inspect' | 'delete' | 'validate' | 'backup';
+    key?: string;
+    force?: boolean;
+    maxAge?: number;
+    maxSize?: number;
+    output?: string;
+    verbose?: boolean;
+}
+export interface TimelineOptions {
+    action: 'list' | 'diff' | 'changes' | 'stats' | 'export' | 'clear' | 'watch';
+    snapshot1?: string;
+    snapshot2?: string;
     output?: string;
-    tokens?: {
-        enabled?: boolean;
-        prefix?: string;
-    };
-    atomic?: {
-        enabled?: boolean;
-        threshold?: number;
-        naming?: 'hash' | 'readable';
-        minify?: boolean;
-        mode?: 'standard' | 'atomic' | 'hybrid';
-        verbose?: boolean;
-    };
-    prefixer?: {
-        enabled?: boolean;
-        browsers?: string[];
-    };
-    watch?: boolean;
     verbose?: boolean;
 }
-//# sourceMappingURL=types.d.ts.map
+export interface InitOptions {
+    force?: boolean;
+    template?: 'full' | 'minimal';
+    typescript?: boolean;
+    framework?: 'react' | 'vue' | 'svelte' | 'solid';
+}
+export type CommandHandler<T = any> = (options: T) => Promise<void> | void;
+export interface CLICommand {
+    name: string;
+    description: string;
+    options?: Array<{
+        flags: string;
+        description: string;
+        defaultValue?: any;
+    }>;
+    handler: CommandHandler;
+}
+export interface BuildResult {
+    success: boolean;
+    compiledFiles: number;
+    duration: number;
+    errors: Error[];
+    warnings: string[];
+    stats?: {
+        totalStyles: number;
+        atomicStyles: number;
+        cssSize: number;
+    };
+}

package/dist/cli/utils/config-loader.d.ts

@@ -5,4 +5,3 @@
 import type { ChainCSSConfig } from '../types.js';
 export declare function loadConfig(configPath?: string): Promise<ChainCSSConfig>;
 export declare function saveConfigTemplate(outputPath?: string, full?: boolean): void;
-//# sourceMappingURL=config-loader.d.ts.map

package/dist/cli/utils/file-utils.d.ts

@@ -1,9 +1,33 @@
-export declare function findInputFiles(patterns: string[]): string[];
+export interface FindOptions {
+    ignore?: string[];
+    absolute?: boolean;
+}
+export declare function findInputFiles(patterns: string[], options?: FindOptions): string[];
 export declare function ensureDirectory(dir: string): void;
 export declare function getRelativePath(filePath: string, baseDir: string): string;
-export declare function getOutputPath(inputFile: string, outputDir: string): string;
+export declare function getOutputPath(inputFile: string, outputDir: string, extension?: string): string;
 export declare function fileExists(filePath: string): boolean;
 export declare function readFile(filePath: string): string;
 export declare function writeFile(filePath: string, content: string): void;
 export declare function deleteFile(filePath: string): void;
-//# sourceMappingURL=file-utils.d.ts.map
+export declare function copyFile(source: string, destination: string): void;
+export declare function getFileSize(filePath: string): number;
+export declare function getFileHash(filePath: string): string;
+export declare function isDirectory(dirPath: string): boolean;
+export declare function ensureCleanDir(dir: string): void;
+declare const _default: {
+    findInputFiles: typeof findInputFiles;
+    ensureDirectory: typeof ensureDirectory;
+    getRelativePath: typeof getRelativePath;
+    getOutputPath: typeof getOutputPath;
+    fileExists: typeof fileExists;
+    readFile: typeof readFile;
+    writeFile: typeof writeFile;
+    deleteFile: typeof deleteFile;
+    copyFile: typeof copyFile;
+    getFileSize: typeof getFileSize;
+    getFileHash: typeof getFileHash;
+    isDirectory: typeof isDirectory;
+    ensureCleanDir: typeof ensureCleanDir;
+};
+export default _default;

package/dist/cli/utils/logger.d.ts

@@ -14,4 +14,3 @@ export declare class Logger {
     progress(current: number, total: number, message: string): void;
 }
 export declare function createLogger(verbose?: boolean): Logger;
-//# sourceMappingURL=logger.d.ts.map

package/dist/compiler/Chain.d.ts

@@ -0,0 +1,215 @@
+import * as CSS from 'csstype';
+import { shorthandMap } from './shorthands.js';
+import { AnimationConfig } from './animations.js';
+/**
+ * Helper to extract the correct CSS value type for a shorthand
+ */
+type GetCSSValue<T extends string> = T extends keyof CSS.Properties ? CSS.Properties[T] : any;
+/**
+ * Automatically generate methods for standard 1-to-1 shorthands
+ */
+type ShorthandMethods = {
+    [K in keyof typeof shorthandMap]: (value: GetCSSValue<typeof shorthandMap[K]>) => Chain;
+};
+/**
+ * Special handler methods
+ */
+interface SpecialMethods {
+    mx(value: string | number): Chain;
+    my(value: string | number): Chain;
+    px(value: string | number): Chain;
+    py(value: string | number): Chain;
+    size(value: string | number): Chain;
+    inset(value: string | number | {
+        top?: any;
+        right?: any;
+        bottom?: any;
+        left?: any;
+    }): Chain;
+    insetX(value: string | number): Chain;
+    insetY(value: string | number): Chain;
+    gap(value: string | number): Chain;
+    gapX(value: string | number): Chain;
+    gapY(value: string | number): Chain;
+    borderX(value: string): Chain;
+    borderY(value: string): Chain;
+    border(value: string | number): Chain;
+    flex(value?: string | boolean): Chain;
+    inlineFlex(value?: any): Chain;
+    grid(value?: string | boolean): Chain;
+    inlineGrid(value?: any): Chain;
+    cols(value: number | string): Chain;
+    rows(value: number | string): Chain;
+    center(type?: 'flex' | 'inline'): Chain;
+    flexCenter(dir?: 'row' | 'col' | 'column'): Chain;
+    gridCenter(): Chain;
+    stack(config: string | number | 'row' | {
+        spacing: any;
+        dir?: 'row' | 'col';
+    }): Chain;
+    gridTable(minWidth: string | number): Chain;
+    aspect(ratio: 'square' | 'video' | 'golden' | string): Chain;
+    hide(): Chain;
+    show(): Chain;
+    unselectable(): Chain;
+    scrollable(axis?: 'x' | 'y' | 'both'): Chain;
+    safeArea(edge?: 'top' | 'bottom' | 'left' | 'right' | 'all' | string[]): Chain;
+    absolute(coords?: {
+        top?: any;
+        right?: any;
+        bottom?: any;
+        left?: any;
+    }): Chain;
+    fixed(coords?: {
+        top?: any;
+        right?: any;
+        bottom?: any;
+        left?: any;
+    }): Chain;
+    sticky(coords?: {
+        top?: any;
+        right?: any;
+        bottom?: any;
+        left?: any;
+    }): Chain;
+    relative(coords?: {
+        top?: any;
+        right?: any;
+        bottom?: any;
+        left?: any;
+    }): Chain;
+    circle(size: string | number): Chain;
+    square(size: string | number): Chain;
+    truncate(): Chain;
+    fluidText(config: {
+        min: number | string;
+        max: number | string;
+        vw?: string;
+    }): Chain;
+    glass(blur?: string | number): Chain;
+    glow(config: string | {
+        color: string;
+        size?: number;
+    }): Chain;
+    textGradient(colors: string[] | {
+        colors: string[];
+        angle?: number;
+    }): Chain;
+    meshGradient(colors: string[]): Chain;
+    noise(opacity?: number): Chain;
+    skeleton(active: boolean | {
+        active: boolean;
+        color?: string;
+        highlight?: string;
+    }): Chain;
+    clickScale(amount?: number): Chain;
+    onInteracting(callback: (css: Chain) => void): Chain;
+    children(callback: (css: Chain) => void): Chain;
+    dark(callback: (css: Chain) => void): Chain;
+    light(callback: (css: Chain) => void): Chain;
+    scale(value: number): Chain;
+    rotate(value: string | number): Chain;
+    x(value: string | number): Chain;
+    y(value: string | number): Chain;
+    skew(value: string | number): Chain;
+    pill(): Chain;
+    containerMacro(maxWidth?: string | number): Chain;
+    fullScreen(zIndex?: number): Chain;
+    shimmer(): Chain;
+    bento(cols?: number): Chain;
+    pressable(): Chain;
+    focusRing(color?: string): Chain;
+    outlineDebug(): Chain;
+    parallax(scale?: number): Chain;
+    lineClamp(lines?: number): Chain;
+    frostedNav(blur?: number | string): Chain;
+}
+interface ChainBase {
+    $el(...selectors: string[]): any;
+    end(): Chain;
+    hover(): Chain;
+    nest(selector: string, callback: (css: Chain) => void): Chain;
+    use(mixin: Record<string, any>): Chain;
+    when(condition: boolean, callback: (css: Chain) => void): Chain;
+    responsive(breakpoint: string, callback: (css: Chain) => void): Chain;
+    media(query: string, callback: (css: Chain) => void): Chain;
+    supports(condition: string, callback: (css: Chain) => void): Chain;
+    containerQuery(condition: string, callback: (css: Chain) => void): Chain;
+    layer(name: string, callback: (css: Chain) => void): Chain;
+    keyframes(name: string, steps: Record<string, any>): Chain;
+    fontFace(properties: Record<string, string>): Chain;
+    componentName(name: string): Chain;
+    component(framework?: 'react' | 'vue' | 'svelte' | 'solid' | 'auto'): Chain;
+    props(propsDefinition?: Record<string, any>): Chain;
+    animation(name: string, config?: AnimationConfig): Chain;
+    animate(name: string, keyframes: Record<string, any>, config?: AnimationConfig): Chain;
+    duration(v: string): Chain;
+    delay(v: string): Chain;
+    timing(v: string): Chain;
+    iteration(v: string | number): Chain;
+    infinite(): Chain;
+    calc(expr: string): any;
+    add(...args: any[]): any;
+    subtract(...args: any[]): any;
+    sub(...args: any[]): any;
+    multiply(...args: any[]): any;
+    mul(...args: any[]): any;
+    divide(...args: any[]): any;
+    div(...args: any[]): any;
+    mpx(v: number | string): string;
+    rem(v: number | string): string;
+    em(v: number | string): string;
+    percent(v: number | string): string;
+    vw(v: number | string): string;
+    vh(v: number | string): string;
+    min(...args: any[]): any;
+    max(...args: any[]): any;
+    clamp(min: any, val: any, max: any): any;
+    debug(): Chain;
+    explain(shorthand: string): Chain;
+}
+type CSSMethods = {
+    [K in keyof CSS.Properties]-?: (value: CSS.Properties[K]) => Chain;
+};
+export type Chain = SpecialMethods & ChainBase & CSSMethods & ShorthandMethods;
+export declare function setTokenContext(context: any): void;
+export declare function getTokenContext(): any;
+export declare function enableDebug(enable?: boolean): void;
+export declare class ChainClass {
+    private catcher;
+    private useTokens;
+    private hoverCatcher;
+    private valueCache;
+    private readonly MAX_CACHE_SIZE;
+    __proxy: any;
+    constructor(useTokens?: boolean);
+    private resolveValue;
+    private setTransform;
+    private setProperty;
+    get(prop: string | symbol): any;
+    private finalize;
+    private macroHandler;
+    private createHover;
+    private endHover;
+    private useMixin;
+    private whenCondition;
+    private nestSelector;
+    private setComponentName;
+    private setComponent;
+    private setProps;
+    private enableDebugMode;
+    private explainShorthand;
+    private applyAnimation;
+    private createAnimation;
+    private applyResponsive;
+    private applyMedia;
+    private defineKeyframes;
+    private defineFontFace;
+    private applySupports;
+    private applyContainerQuery;
+    private applyLayer;
+    private clear;
+}
+export declare function createChain(useTokens?: boolean): Chain;
+export declare const chain: (useTokens?: boolean) => Chain;
+export {};

package/dist/compiler/animations.d.ts

@@ -0,0 +1,76 @@
+export interface AnimationConfig {
+    duration?: string;
+    delay?: string;
+    timing?: string;
+    iteration?: string | number;
+    direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+    fillMode?: 'none' | 'forwards' | 'backwards' | 'both';
+    playState?: 'running' | 'paused';
+    name?: string;
+}
+export interface KeyframeDefinition {
+    [key: string]: Record<string, string | number>;
+}
+export declare const animationPresets: Record<string, KeyframeDefinition>;
+export declare const DEFAULT_ANIMATION_CONFIG: Required<AnimationConfig>;
+export declare const timingFunctions: {
+    linear: string;
+    ease: string;
+    easeIn: string;
+    easeOut: string;
+    easeInOut: string;
+    bounce: string;
+    elastic: string;
+    smooth: string;
+    sharp: string;
+};
+export declare function createAnimation(animationName: string, config?: AnimationConfig): Record<string, any>;
+export declare function createKeyframesCSS(name: string, steps: KeyframeDefinition, prefix?: boolean): string;
+export declare function getAnimationPreset(name: string): KeyframeDefinition | undefined;
+export declare function hasAnimationPreset(name: string): boolean;
+export declare function getAnimationPresetNames(): string[];
+export declare function registerAnimationPreset(name: string, steps: KeyframeDefinition, overwrite?: boolean): boolean;
+export declare function registerAnimationPresets(presets: Record<string, KeyframeDefinition>, overwrite?: boolean): void;
+export declare function combineAnimations(animations: Array<{
+    name: string;
+    duration?: string;
+    delay?: string;
+}>): Record<string, any>;
+export declare function staggerChildren(baseDelay?: string, increment?: string, count?: number): Record<number, string>;
+export declare function msToTime(ms: number): string;
+export interface AnimationStep {
+    name: string;
+    duration?: string;
+    delay?: string;
+}
+export declare function createAnimationSequence(steps: AnimationStep[]): Record<string, any>;
+export declare function isValidAnimation(name: string): boolean;
+export declare function getAnimationSuggestion(name: string): string | null;
+declare const _default: {
+    animationPresets: Record<string, KeyframeDefinition>;
+    createAnimation: typeof createAnimation;
+    createKeyframesCSS: typeof createKeyframesCSS;
+    getAnimationPreset: typeof getAnimationPreset;
+    hasAnimationPreset: typeof hasAnimationPreset;
+    getAnimationPresetNames: typeof getAnimationPresetNames;
+    registerAnimationPreset: typeof registerAnimationPreset;
+    registerAnimationPresets: typeof registerAnimationPresets;
+    combineAnimations: typeof combineAnimations;
+    staggerChildren: typeof staggerChildren;
+    createAnimationSequence: typeof createAnimationSequence;
+    isValidAnimation: typeof isValidAnimation;
+    getAnimationSuggestion: typeof getAnimationSuggestion;
+    timingFunctions: {
+        linear: string;
+        ease: string;
+        easeIn: string;
+        easeOut: string;
+        easeInOut: string;
+        bounce: string;
+        elastic: string;
+        smooth: string;
+        sharp: string;
+    };
+    DEFAULT_ANIMATION_CONFIG: Required<AnimationConfig>;
+};
+export default _default;

package/dist/compiler/atomic-optimizer.d.ts

@@ -1,8 +1,11 @@
 export interface AtomicClass {
     className: string;
     prop: string;
-    value: string;
+    value: any;
     usageCount: number;
+    rules?: string;
+    createdAt?: number;
+    hash?: string;
 }
 export interface AtomicOptimizerStats {
     totalStyles: number;
@@ -10,6 +13,7 @@ export interface AtomicOptimizerStats {
     standardStyles: number;
     uniqueProperties: number;
     savings: string;
+    cacheHitRate?: number;
 }
 export interface AtomicOptimizerOptions {
     enabled?: boolean;
@@ -34,6 +38,7 @@ export interface ComponentClassMapEntry {
     atomicClasses: string[];
     hoverAtomicClasses: string[];
     selectors: string[];
+    componentClassName?: string;
 }
 export interface OptimizeResult {
     css: string;
@@ -44,9 +49,11 @@ export interface OptimizeResult {
     componentMap?: Map<string, ComponentClassMapEntry>;
 }
 export declare class AtomicOptimizer {
+    private config;
     options: Required<AtomicOptimizerOptions>;
-    usageCount: Map<string, number>;
-    atomicClasses: Map<string, AtomicClass>;
+    private usageCount;
+    private atomicClasses;
+    atomicMap: Record<string, string>;
     componentClassMap: Map<string, ComponentClassMapEntry>;
     stats: {
         totalStyles: number;
@@ -54,23 +61,51 @@ export declare class AtomicOptimizer {
         standardStyles: number;
         uniqueProperties: number;
         savings: number;
+        cacheHits: number;
+        cacheMisses: number;
     };
-    constructor(options?: AtomicOptimizerOptions);
+    constructor(config: any);
+    componentMap: Map<string, ComponentClassMapEntry>;
+    /**
+     * Get usage count for a specific property-value pair
+     */
+    getUsageCount(prop: string, value: string, context?: string): number;
+    /**
+     * Increment usage count for a specific property-value pair
+     */
+    incrementUsageCount(prop: string, value: string, context?: string): void;
+    /**
+     * Get the usage count map for debugging
+     */
+    getUsageCountMap(): Map<string, number>;
     private loadCache;
     private saveCache;
-    private trackStyles;
+    trackStyles(styles: any[]): void;
+    process(styleChain: string): void;
+    private processStyleObject;
+    private generateClassName;
     private incrementUsage;
     private shouldBeAtomic;
-    private generateClassName;
     private getOrCreateAtomic;
-    private getKeyFromClassName;
-    private generateAtomicCSS;
-    private generateComponentCSS;
-    optimize(stylesInput: any[] | Record<string, any>): OptimizeResult;
+    getKeyFromClassName(className: string): string | null;
+    generateAtomicCSS(): string;
+    generateComponentCSS(style: any, selectors: string[], context?: string): {
+        css: string;
+        atomicClasses: string[];
+    };
+    /**
+     * Generate a clean component name without any prefixes
+     */
+    private getCleanComponentName;
+    private generatePseudoCSS;
+    optimize(styles: Record<string, any>): OptimizeResult;
+    private processPseudoState;
+    reset(): void;
     getStats(): AtomicOptimizerStats;
-    getAtomicClass(prop: string, value: string): string | null;
+    getAtomicClass(prop: string, value: string, context?: string): string | null;
     getAllAtomicClasses(): AtomicClass[];
     clearCache(): void;
+    getComponentMapEntry(name: string): ComponentClassMapEntry | undefined;
+    getAtomicMap(): Record<string, string>;
 }
 export { AtomicOptimizer as default };
-//# sourceMappingURL=atomic-optimizer.d.ts.map

package/dist/compiler/breakpoints.d.ts

@@ -0,0 +1,46 @@
+export interface BreakpointConfig {
+    name: string;
+    minWidth?: number;
+    maxWidth?: number;
+    query: string;
+    priority?: number;
+}
+export type BreakpointsMap = Record<string, string>;
+export type BreakpointValues = Record<string, number>;
+export declare const BREAKPOINT_VALUES: Record<string, number>;
+export declare let currentBreakpoints: BreakpointsMap;
+export declare function setBreakpoints(breakpoints: Partial<BreakpointsMap>): void;
+export declare function getBreakpoint(name: string): string | undefined;
+export declare function getAllBreakpoints(): BreakpointsMap;
+export declare function resetBreakpoints(): void;
+export declare function addBreakpoint(name: string, query: string): void;
+export declare function removeBreakpoint(name: string): boolean;
+export declare function createMediaQuery(min?: number | string, max?: number | string, unit?: 'px' | 'rem' | 'em'): string;
+export declare function getBreakpointValue(name: string): number | undefined;
+export declare function getBreakpointRange(name: string): {
+    min: number;
+    max: number;
+} | null;
+export declare function generateBreakpointCSS(selector: string, styles: Record<string, any>): string;
+export declare function getSortedBreakpoints(): Array<{
+    name: string;
+    query: string;
+    minWidth: number;
+}>;
+export declare function getBreakpointForWidth(width: number): string | null;
+export declare function hasBreakpoint(name: string): boolean;
+export declare function getBreakpointNames(): string[];
+export interface ResponsiveStyle<T = any> {
+    base?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+    '2xl'?: T;
+    [key: string]: T | undefined;
+}
+export declare function generateResponsiveCSS(selector: string, styles: ResponsiveStyle<Record<string, any>>): string;
+export declare function responsive<T>(value: T | ResponsiveStyle<T>, defaultBreakpoint?: keyof ResponsiveStyle): ResponsiveStyle<T>;
+export declare function mergeResponsiveStyles(...styles: ResponsiveStyle<any>[]): ResponsiveStyle<any>;
+export declare function getBreakpointQuery(name: string, unit?: 'px' | 'rem' | 'em'): string | undefined;
+export declare function logBreakpoints(): void;