effcss 3.12.1 → 4.0.1

package/dist/types/_provider/_process/palette.d.ts

@@ -0,0 +1,105 @@
+import type { TCreateScope } from '../../_provider/scope';
+type THue = 'pri' | 'sec' | 'suc' | 'inf' | 'war' | 'dan';
+type TLightness = 'xs' | 's' | 'm' | 'l' | 'xl';
+type TChroma = 'gray' | 'pale' | 'base' | 'rich';
+type TMode = 'bg' | 'fg';
+/**
+ * Palette generator
+ * @description
+ * Allows to create palette colors
+ */
+export interface IPalette {
+    state: {
+        l: TLightness;
+        c: TChroma;
+        h: THue;
+        a: number;
+        m: TMode;
+    };
+    /**
+     * Returns `xs` lightness color
+     */
+    get xs(): IPalette;
+    /**
+     * Returns `s` lightness color
+     */
+    get s(): IPalette;
+    /**
+     * Returns `m` lightness color
+     */
+    get m(): IPalette;
+    /**
+     * Returns `l` lightness color
+     */
+    get l(): IPalette;
+    /**
+     * Returns `xl` lightness color
+     */
+    get xl(): IPalette;
+    /**
+     * Returns lightness color dictionary
+     */
+    get lightness(): Record<TLightness, IPalette>;
+    /**
+     * Returns zero chroma color
+     */
+    get gray(): IPalette;
+    /**
+     * Returns pale chroma color
+     */
+    get pale(): IPalette;
+    /**
+     * Returns base chroma color
+     */
+    get base(): IPalette;
+    /**
+     * Returns rich chroma color
+     */
+    get rich(): IPalette;
+    /**
+     * Returns chroma color dictionary
+     */
+    get chroma(): Record<TChroma, IPalette>;
+    /**
+     * Returns primary hue color
+     */
+    get pri(): IPalette;
+    /**
+     * Returns secondary hue color
+     */
+    get sec(): IPalette;
+    /**
+     * Returns success hue color
+     */
+    get suc(): IPalette;
+    /**
+     * Returns info hue color
+     */
+    get inf(): IPalette;
+    /**
+     * Returns warning hue color
+     */
+    get war(): IPalette;
+    /**
+     * Returns danger hue color
+     */
+    get dan(): IPalette;
+    /**
+     * Returns hue color dictionary
+     */
+    get hue(): Record<THue, IPalette>;
+    /**
+     * Returns specified alpha color
+     */
+    alpha(a?: number): IPalette;
+    /**
+     * Returns background color
+     */
+    get bg(): IPalette;
+    /**
+     * Returns foreground color
+     */
+    get fg(): IPalette;
+}
+export declare const resolvePalette: (varExp: ReturnType<ReturnType<TCreateScope>>["varExp"]) => IPalette;
+export {};

package/dist/types/{src/_provider → _provider}/collect.d.ts

@@ -1,24 +1,21 @@
-/**
- * Create stylesheet maker collector
- * @param params - collector params
- */
-export declare const createCollector: () => {
+export type TCollector = {
     /**
      * Collect maker
      * @param maker - stylesheet maker
      * @param key - stylesheet key
      */
-    use(maker: Function, key: string): string;
+    use(maker: Function): string;
     /**
-     * Collect makers
-     * @param makers - stylesheet makers dict
+     * Replace collected maker
+     * @param maker - next maker
+     * @param original - original maker
      */
-    useMany(makers: Record<string, Function>): string[];
+    remake(maker: Function, key: Function): string;
     /**
      * Get key of collected maker
      * @param maker - stylesheet maker
      */
-    getKey(maker: Function): string | undefined;
+    key(maker?: Function): string;
     /**
      * Get all collected keys
      */
@@ -28,3 +25,10 @@ export declare const createCollector: () => {
      */
     makers: Record<string, Function>;
 };
+/**
+ * Create stylesheet maker collector
+ * @param params - collector params
+ */
+export declare const createCollector: ({ prefix }: {
+    prefix: string;
+}) => TCollector;

package/dist/types/{src/_provider → _provider}/manage.d.ts

@@ -8,21 +8,16 @@ type TStyleRoot = {
 /**
  * Style manager
  */
-interface IStyleManager {
+export type TManager = {
     /**
      * Get stylesheet by key
      * @param key - stylesheet key
      */
     get(key?: string): CSSStyleSheet | undefined;
-    /**
-     * Get index of stylesheet
-     * @param styleSheet - CSSStylesheet
-     */
-    getIndex(styleSheet: CSSStyleSheet): number;
     /**
      * Get all stylesheets dictionary
      */
-    getAll(): Record<string, CSSStyleSheet>;
+    all(): Record<string, CSSStyleSheet>;
     /**
      * Add stylesheet
      * @param key - stylesheet key
@@ -34,12 +29,6 @@ interface IStyleManager {
      * @param key - stylesheet key
      */
     hydrate(key: string): string | undefined;
-    /**
-     * Replace stylesheet content
-     * @param key - stylesheet key
-     * @param styles - stylesheet content
-     */
-    replace(key: string, styles: string): TOptBool;
     /**
      * Remove stylesheet
      * @param key - stylesheet key
@@ -56,11 +45,6 @@ interface IStyleManager {
      * @param styles - stylesheet content
      */
     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
@@ -70,17 +54,12 @@ interface IStyleManager {
      * Switch stylesheet on
      * @param key - stylesheet key
      */
-    on(...keys: (string | undefined)[]): TOptBool;
+    on(...keys: (string | undefined)[]): void;
     /**
      * 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;
+    off(...keys: (string | undefined)[]): void;
     /**
      * Register style root
      * @param consumer - style root
@@ -91,15 +70,20 @@ interface IStyleManager {
      * @param consumer - style root
      */
     unregister(consumer: TStyleRoot): void;
-    /**
-     * Apply style changes to dependent nodes
-     */
-    notify(): void;
-}
+};
 /**
- * Create {@link IStyleManager | style manager}
+ * Create {@link TManager | style manager}
  * @param params - manager params
- * @returns IStyleManager
+ * @returns TManager
  */
-export declare function createManager(initStyles?: NodeListOf<HTMLStyleElement>): IStyleManager;
+export declare function createManager({ initStyles, emulate }?: {
+    initStyles?: {
+        dataset?: {
+            effcss?: string;
+        };
+        disabled: boolean;
+        textContent: string | null;
+    }[];
+    emulate?: boolean;
+}): TManager;
 export {};

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

@@ -0,0 +1,84 @@
+import type { TCreateScope } from './scope';
+import { resolveAtRules } from './_process/atrules';
+import { resolveUnits } from './_process/units';
+import { resolvePseudo } from './_process/pseudo';
+import { resolveColor } from './_process/color';
+import { resolvePalette } from './_process/palette';
+import { resolveCoef } from './_process/coef';
+import { dash, comma, space, range, each, when, merge } from './utils';
+type TScope = ReturnType<ReturnType<TCreateScope>>;
+export interface IMakerParams {
+    dash: typeof dash;
+    comma: typeof comma;
+    space: typeof space;
+    range: typeof range;
+    each: typeof each;
+    merge: typeof merge;
+    when: typeof when;
+    /**
+     * BEM selector resolver
+     */
+    bem: TScope['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>;
+    /**
+     * Color palette
+     */
+    palette: ReturnType<typeof resolvePalette>;
+    /**
+     * Coefficient
+     */
+    coef: ReturnType<typeof resolveCoef>;
+    /**
+     * Resolve theme variable
+     * @param name - name
+     * @param fallback - fallback value
+     */
+    themeVar: TScope['varExp'];
+    /**
+     * Scalable size value
+     */
+    size: (coef?: number | string) => string;
+    /**
+     * Scalable time value
+     */
+    time: (coef?: number | string) => string;
+    /**
+     * Scalable angle value
+     */
+    angle: (coef?: number | string) => string;
+}
+export type TProcessor = {
+    /**
+     * Compile stylesheet maker to CSSStylesheet content
+     * @param params - params
+     */
+    compile(params: {
+        key: string;
+        maker: (params: IMakerParams) => object;
+    }): string;
+};
+type TCreateProcessor = (params: {
+    scope: ReturnType<TCreateScope>;
+    globalKey: string;
+}) => TProcessor;
+/**
+ * Create style processor
+ * @param params - processor params
+ */
+export declare const createProcessor: TCreateProcessor;
+export {};

package/dist/types/{src/_provider → _provider}/scope.d.ts

@@ -8,12 +8,18 @@ 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 TLeaves<T> = T extends object ? {
+    [K in keyof T]: `${Exclude<K, symbol>}${TLeaves<T[K]> extends never ? "" : `.${TLeaves<T[K]>}`}`;
+}[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 TStyleSheet = Record<string, Record<string, Record<string, string | number>>>;
+export type Leaves<T> = T extends object ? {
+    [K in keyof T]: `${Exclude<K, symbol>}${Leaves<T[K]> extends never ? '' : `.${Leaves<T[K]>}`}`;
+}[keyof T] : never;
 export type TMonoResolver<T extends TStyleSheet, B extends keyof T, E extends keyof T[B]> = {
     /**
      * Specify block
@@ -37,13 +43,22 @@ export type TMonoResolver<T extends TStyleSheet, B extends keyof T, E extends ke
         [key in string]: string;
     };
 };
-type TResolveSelector = <T extends TStyleSheet>(params: TBEM<T>) => string;
+type TResolveSelector = <T extends TStyleSheet>(params: TStringBEM<T>) => string;
 type TResolveAttr = {
     <T extends TStyleSheet>(params: TBEM<T>): Record<string, string>;
     <T extends TStyleSheet>(): TMonoResolver<T, "", "">;
 };
 type TParts = (string | number)[];
-type TScope = {
+export type TDefaultTheme = {
+    angle: number;
+    size: number;
+    time: number;
+    coef: Record<number, number>;
+    hue: Record<'pri' | 'sec' | 'suc' | 'inf' | 'war' | 'dan', number>;
+    lightness: Record<'bg' | 'fg', Record<'xs' | 's' | 'm' | 'l' | 'xl', number>>;
+    chroma: Record<'bg' | 'fg', Record<'pale' | 'base' | 'rich' | 'gray', number>>;
+};
+export type TScope = {
     /**
      * BEM selector resolver
      */
@@ -55,20 +70,20 @@ type TScope = {
     /**
      * Name resolver
      */
-    name: (...parts: TParts) => string;
+    name: (parts: TParts | string) => string;
     /**
      * Var name
      */
-    varName: (...parts: TParts) => string;
+    varName: (name: TParts | string) => string;
     /**
      * Var expression
      */
-    varExp: (...parts: TParts) => string;
+    varExp: <T extends Record<string, object | number | string | boolean> = TDefaultTheme>(name: TLeaves<T>, fallback?: string | number) => string;
 };
 /**
  * Style scope resolver
  */
-type TScopeResolver = {
+export type TScopeResolver = {
     (key: string): TScope;
     dict?: Record<string, Record<string, string>>;
 };

package/dist/types/_provider/theme.d.ts

@@ -0,0 +1,49 @@
+import { TScope } from './scope';
+type TThemeParams<T extends object> = Partial<T> & {
+    $light?: Partial<T>;
+    $dark?: Partial<T>;
+};
+type TThemeAction = {
+    type: 'delete';
+    payload: {
+        name: string;
+    };
+} | {
+    type: 'update';
+    payload: {
+        params: object;
+        name?: string;
+    };
+} | {
+    type: 'add';
+    payload: {
+        params: object;
+        name: string;
+    };
+};
+export type TThemeValue = {
+    [key in (string | number)]: string | number | boolean | TThemeValue;
+};
+export type TThemeController = {
+    get(name?: string): TThemeValue;
+    add(params: TThemeValue, name: string): void;
+    delete(name: string): void;
+    update(params: TThemeValue, name?: string): void;
+    switch(name?: string): void;
+    vars<T extends object = object>(theme?: string): TThemeParams<T>;
+    get list(): string[];
+    get current(): string | '';
+    get all(): Record<string, object>;
+    get actions(): TThemeAction[];
+};
+export declare const createThemeController: ({ provider, init, scope, onChange }: {
+    provider: {
+        getAttribute(name: string): string | null;
+        removeAttribute(name: string): void;
+        setAttribute(name: string, value: string): void;
+    };
+    init?: TThemeAction[];
+    onChange: () => void;
+    scope: TScope;
+}) => TThemeController;
+export {};

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

@@ -0,0 +1,10 @@
+type TStrOrNum = string | number;
+type TJoinArr = (...val: TStrOrNum[]) => string;
+export declare const range: (size: number, handler: (k: number) => object) => object;
+export declare const each: <V extends Record<TStrOrNum, any>>(rules: V, handler: (k: V extends ArrayLike<any> ? string : keyof V, v: V extends ArrayLike<any> ? NoInfer<V[number]> : NoInfer<V[keyof V]>) => object) => object;
+export declare const when: (condition: number | boolean | undefined | null, rules: object, otherwise?: object) => object;
+export declare const dash: TJoinArr;
+export declare const comma: TJoinArr;
+export declare const space: TJoinArr;
+export declare const merge: (target: Record<string, any>, ...sources: any[]) => any;
+export {};

package/dist/types/{src/index.d.ts → index.d.ts}

@@ -1,13 +1,44 @@
-import { createProcessor } from './_provider/process';
-import { createCollector } from './_provider/collect';
-import { createScope } from './_provider/scope';
-import type { TProviderAttrParams, TProviderSettings } from './common';
-export declare const TAG_NAME = "effcss-provider";
-type TResolveAttr = ReturnType<ReturnType<typeof createScope>>['attr'];
+import type { TProcessor } from './_provider/process';
+import type { TCollector } from './_provider/collect';
+import type { TScopeResolver } from './_provider/scope';
+import type { TThemeController } from './_provider/theme';
+/**
+ * Provider attributes
+ */
+export type TProviderAttrs = {
+    /**
+     * Stylesheet key prefix
+     */
+    pre: string;
+    /**
+     * BEM selector generation mode
+     * @description
+     * `a` - data-attributes
+     * `c` - classes
+     */
+    mode: 'a' | 'c';
+    /**
+     * BEM selectors minification
+     */
+    min: boolean;
+    /**
+     * Root font size in px
+     */
+    size: number;
+    /**
+     * Root time in ms
+     */
+    time: number;
+    /**
+     * Root angle in deg
+     */
+    angle: number;
+};
+type TResolveAttr = ReturnType<TScopeResolver>['attr'];
 /**
  * StyleSheet maker
  */
-export type TStyleSheetMaker = Parameters<ReturnType<typeof createProcessor>['compile']>[0]['maker'];
+export type TStyleSheetMaker = Parameters<TProcessor['compile']>[0]['maker'];
 /**
  * StyleSheet maker utils
  */
@@ -22,11 +53,14 @@ type TStyleTarget = string | TStyleSheetMaker;
  * Basic interface for style provider component.
  */
 export interface IStyleProvider {
+    /**
+     * Provider tag name
+     */
     get tagName(): string;
     /**
      * Get prefix
      */
-    get prefix(): string;
+    get pre(): string;
     /**
      * Get mode
      */
@@ -35,24 +69,14 @@ export interface IStyleProvider {
      * Get min flag
      */
     get min(): boolean;
-    /**
-     * Get hydrate flag
-     * @deprecated The flag will be removed in v4
-     */
-    get hydrate(): boolean | null;
     /**
      * Get stylesheet makers
      */
-    get makers(): ReturnType<typeof createCollector>['makers'];
+    get makers(): TCollector['makers'];
     /**
-     * Get theme value
+     * Theme controller
      */
-    get theme(): string | null;
-    /**
-     * Set theme value
-     * @param val - theme value
-     */
-    set theme(val: string);
+    theme: TThemeController;
     /**
      * Get root size value
      */
@@ -81,48 +105,22 @@ export interface IStyleProvider {
      */
     set angle(val: number | null);
     /**
-     * Get provider settings
-     */
-    get settings(): Partial<TProviderSettings>;
-    /**
-     * Set provider settings
-     */
-    set settings(val: Partial<TProviderSettings>);
-    /**
-     * Use stylesheet maker
-     * @param maker - stylesheet maker
-     * @param key - stylesheet key
-     * @param force - force generation
-     * @returns {@link TResolveAttr | attribute resolver}
-     */
-    use(maker: TStyleSheetMaker, key?: string, force?: boolean): TResolveAttr;
-    /**
-     * Use public stylesheet makers
+     * Use stylesheet makers
      * @param makers - stylesheet makers
      */
-    usePublic(makers: Record<string, TStyleSheetMaker>): Record<string, TResolveAttr>;
+    use: (...makers: TStyleSheetMaker[]) => TResolveAttr[];
     /**
-     * Use private stylesheet makers
-     * @param makers - stylesheet makers
-     */
-    usePrivate(makers: TStyleSheetMaker[]): TResolveAttr[];
-    /**
-     * Resolve stylesheet
-     * @param key - stylesheet key
-     * @returns BEM attribute resolver for stylesheet
+     * Remake stylesheet
+     * @param maker - stylesheet maker
+     * @param original - original maker
      */
-    resolve(key?: string): TResolveAttr;
+    remake(maker: TStyleSheetMaker, original?: TStyleSheetMaker): TResolveAttr;
     /**
      * Prepare CSS from config
      * @param maker - stylesheet maker
      * @param key - stylesheet key
      */
     css(maker: TStyleSheetMaker, key: string): string;
-    /**
-     * Resolve target key
-     * @param target - style target
-     */
-    key(target: TStyleTarget): string | undefined;
     /**
      * Is stylesheet on
      * @param key - stylesheet key
@@ -132,24 +130,23 @@ export interface IStyleProvider {
      * Switch stylesheets on
      * @param targets - target stylesheet maker or key
      */
-    on(...targets: TStyleTarget[]): boolean | undefined;
+    on(...targets: TStyleTarget[]): void;
     /**
      * Switch stylesheets off
      * @param targets - target stylesheet maker or key
      */
-    off(...targets: TStyleTarget[]): boolean | undefined;
+    off(...targets: TStyleTarget[]): void;
     /**
      * Get CSS stylesheets
      * @param targets - target stylesheet makers and/or keys
      */
     stylesheets(targets?: TStyleTarget[]): (CSSStyleSheet | undefined)[];
-    stylesheets(...targets: TStyleTarget[]): (CSSStyleSheet | undefined)[];
     /**
      * String representation that allows save or send current state
      */
     toString(): string;
 }
-export type TBaseStyleSheet = {
+export type TBaseStyleSheetMaker = {
     /**
      * Main block
      */
@@ -165,8 +162,9 @@ export type TBaseStyleSheet = {
         };
     };
 };
-type TUseStylePropviderParams = Partial<TProviderSettings & {
-    attrs?: Partial<TProviderAttrParams>;
+export type IStyleProviderScript = IStyleProvider & HTMLScriptElement;
+type TUseStylePropviderParams = {
+    attrs?: Partial<TProviderAttrs>;
     /**
      * Don`t send provider script tag from server-side
      */
@@ -175,15 +173,13 @@ type TUseStylePropviderParams = Partial<TProviderSettings & {
      * Create Style Provider emulation
      */
     emulate?: boolean;
-}>;
+};
 type TUseStyleProvider = {
     (settings?: TUseStylePropviderParams): IStyleProvider;
     isDefined?: boolean;
 };
-/**
- * Define style provider custom element
- */
-export declare function defineProvider(settings?: Partial<TProviderSettings>): boolean;
+export declare const TAG_NAME: string;
+export declare const DEFAULT_ATTRS: Record<string, string>;
 /**
  * Use Style Provider
  * @description

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "effcss",
-    "version": "3.12.1",
+    "version": "4.0.1",
     "description": "Self-confident CSS-in-JS",
     "type": "module",
     "scripts": {
@@ -17,17 +17,12 @@
     "author": "Marat Sabitov",
     "license": "Apache-2.0",
     "main": "dist/index.js",
-    "types": "dist/types/src/types.d.ts",
+    "types": "dist/types/index.d.ts",
     "exports": {
         ".": {
-            "types": "./dist/types/src/index.d.ts",
+            "types": "./dist/types/index.d.ts",
             "import": "./dist/index.js",
             "require": "./dist/index.js"
-        },
-        "./consumer": {
-            "types": "./dist/types/src/consumer.d.ts",
-            "import": "./dist/consumer.js",
-            "require": "./dist/consumer.js"
         }
     },
     "devDependencies": {