effcss
Version:
Self-confident CSS-in-JS
221 lines (220 loc) • 5 kB
TypeScript
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;
/**
* Root color string
*/
color: string;
/**
* Root easing function
*/
easing: string;
};
type TResolveAttr = ReturnType<TScopeResolver>['attr'];
/**
* StyleSheet maker
*/
export type TStyleSheetMaker = Parameters<TProcessor['compile']>[0]['maker'];
/**
* StyleSheet maker utils
*/
export type TStyleSheetUtils = Parameters<TStyleSheetMaker>[0];
/**
* Style target
*/
type TStyleTarget = string | TStyleSheetMaker;
/**
* Style provider
* @description
* Basic interface for style provider component.
*/
export interface IStyleProvider {
/**
* Provider tag name
*/
get tagName(): string;
/**
* Get prefix
*/
get pre(): string;
/**
* Get mode
*/
get mode(): string;
/**
* Get min flag
*/
get min(): boolean;
/**
* Get stylesheet makers
*/
get makers(): TCollector['makers'];
/**
* Theme controller
*/
theme: TThemeController;
/**
* Get root size value
*/
get size(): number | null;
/**
* Set root size value
* @param val - rem value in px
*/
set size(val: number | null);
/**
* Get root time value
*/
get time(): number | null;
/**
* Set root time value
* @param val - time value in ms
*/
set time(val: number | null);
/**
* Get root angle value
*/
get angle(): number | null;
/**
* Set root angle value
* @param val - angle value in ms
*/
set angle(val: number | null);
/**
* Get root color value
*/
get color(): string | null;
/**
* Set root color value
* @param val - angle value in ms
*/
set color(val: string | null);
/**
* Get root easing function
*/
get easing(): string | null;
/**
* Set root easing function
* @param val - easing function
*/
set easing(val: string | null);
/**
* Use stylesheet makers
* @param makers - stylesheet makers
*/
use: (...makers: TStyleSheetMaker[]) => TResolveAttr[];
/**
* Remake stylesheet
* @param maker - stylesheet maker
* @param original - original maker
*/
remake(maker: TStyleSheetMaker, original?: TStyleSheetMaker): TResolveAttr;
/**
* Prepare CSS from config
* @param maker - stylesheet maker
* @param key - stylesheet key
*/
css(maker: TStyleSheetMaker, key: string): string;
/**
* Is stylesheet on
* @param key - stylesheet key
*/
status(key: TStyleTarget): boolean;
/**
* Switch stylesheets on
* @param targets - target stylesheet maker or key
*/
on(...targets: TStyleTarget[]): void;
/**
* Switch stylesheets off
* @param targets - target stylesheet maker or key
*/
off(...targets: TStyleTarget[]): void;
/**
* Get CSS stylesheets
* @param targets - target stylesheet makers and/or keys
*/
stylesheets(targets?: TStyleTarget[]): (CSSStyleSheet | undefined)[];
/**
* String representation that allows save or send current state
*/
toString(): string;
}
export type TBaseStyleSheetMaker = {
/**
* Main block
*/
'': {
/**
* Main block modifiers
*/
'': {
/**
* Theme
*/
theme: string;
};
};
};
export type IStyleProviderScript = IStyleProvider & HTMLScriptElement;
type TUseStylePropviderParams = {
attrs?: Partial<TProviderAttrs>;
/**
* Don`t send provider script tag from server-side
*/
noscript?: boolean;
/**
* Create Style Provider emulation
*/
emulate?: boolean;
/**
* Use as global object
*/
global?: boolean;
};
type TUseStyleProvider = {
(settings?: TUseStylePropviderParams): IStyleProvider;
isDefined?: boolean;
};
export declare const TAG_NAME: string;
export declare const DEFAULT_ATTRS: Record<string, string>;
/**
* Use Style Provider
* @description
* The function defines and creates a provider script in the browser and emulates the provider on the server.
* @param settings - provider settings
*/
export declare const useStyleProvider: TUseStyleProvider;
export {};