effcss 2.2.0 → 3.0.0

package/dist/types/src/_provider/_process/color.d.ts

@@ -0,0 +1,97 @@
+import { TCreateScope } from '../../common';
+type TChangeStr = (val: string) => string;
+type TChangeColor = (color: string | object, val?: number | string) => string;
+type TPaletteState = {
+    l: string | number;
+    c: string | number;
+    h: string | number;
+    a: string | number;
+};
+export declare const resolveColor: (vars: ReturnType<ReturnType<TCreateScope>>["varExp"]) => {
+    /**
+     * Create color object
+     */
+    create: (params?: Partial<TPaletteState>) => {
+        /**
+         * Palette state
+         */
+        state: TPaletteState;
+        merge: <Theme>(value: Theme extends Partial<TPaletteState> ? Theme : object) => /*elided*/ any;
+        /**
+         * Set lightness
+         * @param l - lightness value
+         */
+        l: <Theme>(val: Theme extends {
+            l: Record<string, number | string>;
+        } ? Exclude<keyof Theme["l"], symbol> : string | number) => /*elided*/ any;
+        /**
+         * Set chroma
+         * @param c - chroma value
+         */
+        c: <Theme>(val: Theme extends {
+            c: Record<string, number | string>;
+        } ? Exclude<keyof Theme["c"], symbol> : string | number) => /*elided*/ any;
+        /**
+         * Set hue
+         * @param h - hue value
+         */
+        h: <Theme>(val: Theme extends {
+            h: Record<string, number | string>;
+        } ? Exclude<keyof Theme["h"], symbol> : string | number) => /*elided*/ any;
+        /**
+         * Set alpha
+         * @param value - alpha value
+         */
+        a: <Theme>(val: Theme extends {
+            a: Record<string, number | string>;
+        } ? Exclude<keyof Theme["a"], symbol> : string | number) => /*elided*/ any;
+        /**
+         * Color string
+         */
+        readonly s: string;
+        toString(): string;
+    };
+    /**
+     * oklch()
+     */
+    oklch: TChangeStr;
+    /**
+     * Increase color lightness
+     */
+    lighten: TChangeColor;
+    /**
+     * Decrease color lightness
+     */
+    darken: TChangeColor;
+    /**
+     * Increase color chroma
+     */
+    saturate: TChangeColor;
+    /**
+     * Decrease color chroma
+     */
+    desaturate: TChangeColor;
+    /**
+     * Increase color alpha
+     */
+    fadein: TChangeColor;
+    /**
+     * Decrease color alpha
+     */
+    fadeout: TChangeColor;
+    /**
+     * Rotate color hue
+     */
+    spin: TChangeColor;
+    /**
+     * Mix colors
+     */
+    mix: ({ base, mixin, method, bpart, mpart }: {
+        base: string | object;
+        mixin: string | object;
+        bpart?: number;
+        mpart?: number;
+        method?: "srgb" | "srgb-linear" | "display-p3" | "a98-rgb" | "prophoto-rgb" | "rec2020" | "lab" | "oklab" | "xyz" | "xyz-d50" | "xyz-d65" | "hsl" | "hwb" | "lch" | "oklch";
+    }) => string;
+};
+export {};

package/dist/types/src/_provider/_process/pseudo.d.ts

@@ -0,0 +1,146 @@
+type TSimplePseudo = (val?: string | number) => string;
+type TComplexPseudo = (content: string | number, val?: string | number) => string;
+type TPseudo = {
+    /**
+     * :root
+     */
+    r: TSimplePseudo;
+    /**
+     * :hover
+     */
+    h: TSimplePseudo;
+    /**
+     * :focus
+     */
+    f: TSimplePseudo;
+    /**
+     * :focus-visible
+     */
+    fv: TSimplePseudo;
+    /**
+     * :active
+     */
+    a: TSimplePseudo;
+    /**
+     * :visited
+     */
+    v: TSimplePseudo;
+    /**
+     * :valid
+     */
+    val: TSimplePseudo;
+    /**
+     * :invalid
+     */
+    inv: TSimplePseudo;
+    /**
+     * :empty
+     */
+    e: TSimplePseudo;
+    /**
+     * :disabled
+     */
+    d: TSimplePseudo;
+    /**
+     * :required
+     */
+    rq: TSimplePseudo;
+    /**
+     * :optional
+     */
+    o: TSimplePseudo;
+    /**
+     * :modal
+     */
+    m: TSimplePseudo;
+    /**
+     * :link
+     */
+    l: TSimplePseudo;
+    /**
+     * :placeholder
+     */
+    ph: TSimplePseudo;
+    /**
+     * :first-child
+     */
+    fc: TSimplePseudo;
+    /**
+     * :last-child
+     */
+    lc: TSimplePseudo;
+    /**
+     * :obly-child
+     */
+    oc: TSimplePseudo;
+    /**
+     * :nth-child(odd)
+     */
+    odd: TSimplePseudo;
+    /**
+     * :nth-child(even)
+     */
+    even: TSimplePseudo;
+    /**
+     * :first-of-type
+     */
+    ft: TSimplePseudo;
+    /**
+     * :last-of-type
+     */
+    lt: TSimplePseudo;
+    /**
+     * :only-of-type
+     */
+    ot: TSimplePseudo;
+    /**
+     * ::before
+     */
+    bef: TSimplePseudo;
+    /**
+     * ::after
+     */
+    aft: TSimplePseudo;
+    /**
+     * ::backdrop
+     */
+    bd: TSimplePseudo;
+    /**
+     * :has
+     */
+    has: TComplexPseudo;
+    /**
+     * :not
+     */
+    not: TComplexPseudo;
+    /**
+     * :is
+     */
+    is: TComplexPseudo;
+    /**
+     * :where
+     */
+    wh: TComplexPseudo;
+    /**
+     * :state
+     */
+    st: TComplexPseudo;
+    /**
+     * :nth-child
+     */
+    nthc: TComplexPseudo;
+    /**
+     * :nth-of-type
+     */
+    ntho: TComplexPseudo;
+    /**
+     * :dir
+     */
+    dir: TComplexPseudo;
+    /**
+     * :lang
+     */
+    lang: TComplexPseudo;
+};
+export declare const resolvePseudo: () => TPseudo;
+export {};

package/dist/types/src/_provider/_process/units.d.ts

@@ -0,0 +1,16 @@
+export type TGetUnit = (val: number | string) => string;
+export declare const resolveUnits: () => {
+    px: TGetUnit;
+    vh: TGetUnit;
+    vw: TGetUnit;
+    rem: TGetUnit;
+    deg: TGetUnit;
+    ms: TGetUnit;
+    pc: TGetUnit;
+    cqw: TGetUnit;
+    cqh: TGetUnit;
+    cqb: TGetUnit;
+    cqi: TGetUnit;
+    cqmin: TGetUnit;
+    cqmax: TGetUnit;
+};

package/dist/types/src/_provider/_process/utils.d.ts

@@ -0,0 +1 @@
+export declare const parseStyles: (styles: object) => any;

package/dist/types/src/_provider/manage.d.ts

@@ -1,7 +1,102 @@
-import { IStyleManager } from '../types';
+type TOptBool = boolean | undefined;
+/**
+ * Style root
+ */
+type TStyleRoot = {
+    adoptedStyleSheets: CSSStyleSheet[];
+};
+/**
+ * Style manager
+ * @description
+ * Manages CSS stylesheets.
+ */
+interface IStyleManager {
+    /**
+     * Get stylesheet by key
+     * @param key - stylesheet key
+     */
+    get(key?: string): CSSStyleSheet | undefined;
+    /**
+     * Get index of stylesheet
+     * @param styleSheet - CSS stylesheet
+     */
+    getIndex(styleSheet: CSSStyleSheet): number;
+    /**
+     * Get all stylesheets dictionary
+     */
+    getAll(): Record<string, CSSStyleSheet>;
+    /**
+     * Add stylesheet
+     * @param key - stylesheet key
+     * @param stylesheet - CSSStylesheet instance
+     */
+    add(key: string, stylesheet: CSSStyleSheet): TOptBool;
+    /**
+     * Replace stylesheet content
+     * @param key - stylesheet key
+     * @param styles - stylesheet content string
+     */
+    replace(key: string, styles: string): TOptBool;
+    /**
+     * Remove stylesheet
+     * @param key - stylesheet key
+     * @returns `true` if stylesheet is removed
+     */
+    remove(key: string): TOptBool;
+    /**
+     * Remove all stylesheets
+     */
+    removeAll(): void;
+    /**
+     * Pack styles into CSSStyleSheet and add it into stylesheet dictionary
+     * @param key - stylesheet key
+     * @param styles - stylesheet content string
+     */
+    pack(key: string, styles: string): TOptBool;
+    /**
+     * Check if stylesheet exist
+     * @param key - stylesheet key
+     */
+    has(key?: string): boolean;
+    /**
+     * Is stylesheet on
+     * @param key - stylesheet key
+     */
+    status(key?: string): boolean;
+    /**
+     * Switch stylesheet on
+     * @param key - stylesheet key
+     */
+    on(...keys: (string | undefined)[]): TOptBool;
+    /**
+     * Switch stylesheet off
+     * @param key - stylesheet key
+     */
+    off(...keys: (string | undefined)[]): TOptBool;
+    /**
+     * Apply stylesheets to style root
+     * @param consumer - style root
+     */
+    apply(consumer: TStyleRoot): void;
+    /**
+     * Register style root
+     * @param consumer - style root
+     */
+    register(consumer: TStyleRoot): void;
+    /**
+     * Unregister style root
+     * @param consumer - style root
+     */
+    unregister(consumer: TStyleRoot): void;
+    /**
+     * Apply style changes to dependent nodes
+     */
+    notify(): void;
+}
 /**
  * Create {@link IStyleManager | style manager}
  * @param params - manager params
  * @returns IStyleManager
  */
 export declare function createManager(): IStyleManager;
+export {};

package/dist/types/src/_provider/process.d.ts

@@ -1,22 +1,98 @@
-import { IStyleProcessor, IStyleResolver } from '../types';
-/**
- * Processor constructor params
- * @private
- */
-interface IConstructorParams {
-    sets?: Record<string, Record<string, string | number>>;
-    keys?: Record<string, string | number>;
-    resolver: IStyleResolver;
+import type { TDeafultBreakpoints, TCreateScope } from '../common';
+import { resolveAtRules } from './_process/atrules';
+import { resolveUnits } from './_process/units';
+import { resolvePseudo } from './_process/pseudo';
+import { resolveColor } from './_process/color';
+import { getBaseHandlers } from './_process/base';
+type Leaves<T> = T extends object ? {
+    [K in keyof T]: `${Exclude<K, symbol>}${Leaves<T[K]> extends never ? '' : `.${Leaves<T[K]>}`}`;
+}[keyof T] : never;
+interface IMakerParams extends ReturnType<typeof getBaseHandlers> {
+    /**
+     * StyleSheet key
+     */
+    key: string;
+    /**
+     * BEM selector resolver
+     */
+    bem: ReturnType<ReturnType<TCreateScope>>['selector'];
+    /**
+     * CSS units
+     */
+    units: ReturnType<typeof resolveUnits>;
+    /**
+     * Pseudoclasses and pseudoelements
+     */
+    pseudo: ReturnType<typeof resolvePseudo>;
+    /**
+     * At-rules
+     */
+    at: ReturnType<typeof resolveAtRules>;
+    /**
+     * Colors
+     */
+    color: ReturnType<typeof resolveColor>;
+    /**
+     * Global vars
+     */
+    vars: <G>(val: Leaves<G>) => string;
+    /**
+     * Width limit queries
+     */
+    limit: {
+        /**
+         * `(min-width: val)` query
+         * @param val - breakpoint
+         * @param scope - container name for `@container`
+         */
+        up: <T = TDeafultBreakpoints>(val: Exclude<keyof T, Symbol> | number, scope?: string) => string;
+        /**
+         * `(max-width: val)` query
+         * @param val - breakpoint
+         * @param scope - container name for `@container`
+         */
+        down: <T = TDeafultBreakpoints>(val: Exclude<keyof T, Symbol> | number, scope?: string) => string;
+        /**
+         * `(min-width: from) and (max-width: to)` query
+         * @param from - start breakpoint
+         * @param to - end breakpoint
+         * @param scope - container name for `@container`
+         */
+        between: <T = TDeafultBreakpoints>(from: Exclude<keyof T, Symbol> | number, to: Exclude<keyof T, Symbol> | number, scope?: string) => string;
+        /**
+         * `(min-width: val) and (max-width: val)` query
+         * @param val - breakpoint
+         * @param scope - container name for `@container`
+         */
+        only: <T = TDeafultBreakpoints>(val: Exclude<keyof T, Symbol> | number, scope?: string) => string;
+    };
 }
+type TCreateProcessor = (params: {
+    scope: ReturnType<TCreateScope>;
+    globalKey?: string;
+    bp?: Record<string, string | number>;
+}) => {
+    /**
+     * Compile style maker to CSS stylesheet text content
+     * @param params - params
+     */
+    compile(params: {
+        key: string;
+        maker: (params: IMakerParams) => object;
+    }): string;
+};
+export declare const baseHandlers: {
+    dash: (...val: (string | number)[]) => string;
+    comma: (...val: (string | number)[]) => string;
+    space: (...val: (string | number)[]) => string;
+    range: (size: number, handler: (k: number) => object) => object;
+    each: <V>(rules: Record<string, V> | V[], handler: (k: string | number, v: V) => object) => object;
+    merge: (target: Record<string, any>, ...sources: Record<string, any>[]) => Record<string, any>;
+    when: (condition: boolean | undefined, rules: object, otherwise?: object) => object;
+};
 /**
- * Put value in curly braces
- * @param val
- */
-export declare const curlyBraces: (val: string | number) => string;
-/**
- * Create {@link IStyleProcessor | style processor}
+ * Create style processor
  * @param params - processor params
- * @returns IStyleProcessor
  */
-export declare function createProcessor(params: IConstructorParams): IStyleProcessor;
+export declare const createProcessor: TCreateProcessor;
 export {};

package/dist/types/src/common.d.ts

@@ -0,0 +1,172 @@
+/**
+ * Provider attributes
+ */
+export type TProviderAttrs = {
+    /**
+     * Hydratation flag
+     */
+    hydrate: string | null;
+    /**
+     * Private stylesheet prefix
+     */
+    prefix: string | null;
+    /**
+     * BEM selector generation mode
+     * @description
+     * `a` - data-attributes
+     * `c` - classes
+     */
+    mode: 'a' | 'c' | null;
+    /**
+     * Theme
+     */
+    theme: string | null;
+};
+/**
+ * Provider settings
+ */
+export type TProviderSettings = {
+    /**
+     * Breakpoints
+     */
+    bp: Record<string, number | string>;
+    /**
+     * Global vars for each theme
+     */
+    vars: Record<string, object>;
+    /**
+     * Stylesheet makers
+     */
+    makers: Record<string, Function>;
+    /**
+     * Switched off stylesheets
+     */
+    off: string[];
+};
+type TStrDict = Record<string, string>;
+type Paths<T> = T extends object ? {
+    [K in keyof T]: `${Exclude<K, symbol>}${'' | Paths<T[K]> extends '' ? '' : `.${Paths<T[K]>}`}`;
+}[keyof T] : T extends string ? T : never;
+type TDeepPartial<T> = T extends object ? {
+    [P in keyof T]?: TDeepPartial<T[P]>;
+} : T;
+type TBlocks<T> = Exclude<keyof T, symbol | number>;
+type TElems<T> = T extends object ? {
+    [K in keyof T]: `${Exclude<K, symbol>}${T[K] extends object ? `.${Exclude<keyof T[K], symbol | ''>}` : never}`;
+}[keyof T] : never;
+type TMods<T> = T extends object ? {
+    [K in keyof T]: `${Exclude<K, symbol>}${'' | Paths<T[K]> extends '' ? '' : `.${Paths<T[K]>}`}`;
+}[keyof T] : T extends string ? T : never;
+type TStringBEM<T> = TBlocks<T> | TMods<T> | TElems<T>;
+type TBEM<T> = TDeepPartial<T> | TStringBEM<T> | TStringBEM<T>[];
+type TResolveSelector = <T extends object>(params: TBEM<T>) => string;
+type TResolveAttr = <T extends object>(params: TBEM<T>) => TStrDict;
+type TScope = {
+    /**
+     * BEM selector resolver
+     */
+    selector: TResolveSelector;
+    /**
+     * BEM attribute resolver
+     */
+    attr: TResolveAttr;
+    /**
+     * Name resolver
+     */
+    name: (...parts: (string | number)[] | string[]) => string;
+    /**
+     * Var name
+     */
+    varName: (...parts: (string | number)[] | string[]) => string;
+    /**
+     * Var expression
+     */
+    varExp: (...parts: (string | number)[]) => string;
+};
+/**
+ * Style scope resolver
+ */
+type TScopeResolver = (key: string) => TScope;
+/**
+ * Create stylesheet scope
+ */
+export type TCreateScope = (params?: {
+    mode?: string | null;
+}) => TScopeResolver;
+export declare const TAG_NAME = "effcss-provider";
+export declare const DEFAULT_ATTRS: TProviderAttrs;
+export declare const DEFAULT_BREAKPOINTS: {
+    '3xs': number;
+    '2xs': number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+};
+export type TDeafultBreakpoints = typeof DEFAULT_BREAKPOINTS;
+/**
+ * Default provider settings
+ */
+export declare const DEFAULT_SETTINGS: Partial<TProviderSettings>;
+/**
+ * Create BEM resolver
+ * @param params - BEM resolver params
+ */
+export declare const createScope: TCreateScope;
+/**
+ * Create stylesheet key maker
+ * @param params - collector params
+ */
+export declare const createKeyMaker: ({ prefix }: {
+    prefix: string;
+}) => {
+    /**
+     * Base stylesheet key
+     */
+    base: string;
+    /**
+     * Current stylesheet key
+     */
+    current: string;
+    /**
+     * Create next key
+     */
+    next(): string;
+    /**
+     * Reset current key
+     */
+    reset(): void;
+};
+/**
+ * Create stylesheet maker collector
+ * @param params - collector params
+ */
+export declare const createCollector: () => {
+    /**
+     * Collect maker
+     * @param maker - stylesheet maker
+     * @param key - stylesheet key
+     */
+    use(maker: Function, key: string): string;
+    /**
+     * Collect makers
+     * @param makers - stylesheet makers dict
+     */
+    useMany(makers: Record<string, Function>): string[];
+    /**
+     * Get key of collected maker
+     * @param maker - stylesheet maker
+     */
+    getKey(maker: Function): string | undefined;
+    /**
+     * Get all collected keys
+     */
+    keys: string[];
+    /**
+     * Get all collected makers
+     */
+    makers: Record<string, Function>;
+};
+export {};

package/dist/types/src/consumer.d.ts

@@ -0,0 +1,7 @@
+import type { TProviderAttrs } from './common';
+import type { IStyleProvider } from './index';
+/**
+ * Create style dispatcher
+ * @param params - dispatcher params
+ */
+export declare const createConsumer: (attrs?: Partial<TProviderAttrs>) => IStyleProvider;