effcss 1.3.6 → 2.0.1

package/dist/types/src/css/functions.d.ts

@@ -1,443 +0,0 @@
-/**
- * Join args with dash
- * @param args
- */
-export declare const dash: (...args: (string | number)[]) => string;
-/**
- * Join args with space
- * @param args
- */
-export declare const space: (...args: (string | number)[]) => string;
-/**
- * Join args with comma
- * @param args
- */
-export declare const comma: (...args: (string | number)[]) => string;
-/**
- * Put value in parentheses
- * @param val
- */
-export declare const parentheses: (val: string | number) => string;
-/**
- * Transformer
- * @param target
- * @param transform
- */
-export declare const transformer: <K extends string, T extends (string | number), V extends (string | number)>(target: Record<K, T>, transform: (val: [string | number, T]) => [string | number, V]) => Record<K, V>;
-/**
- * Value transformer
- * @param target
- * @param transformVal
- */
-export declare const valTransformer: <K extends string, T extends (string | number), V extends (string | number)>(target: Record<K, T>, handler: (val: T) => V) => Record<K, V>;
-/**
- * Constructs `attr(val)` expression
- * @param val
- */
-export declare const attr: (val: string | number) => string;
-/**
- * Constructs `url(val)` expression
- * @param val
- */
-export declare const url: (val: string | number) => string;
-/**
- * Add a string inside `calc(val)` expression
- * @param val
- */
-export declare const calcExp: (val: string) => string;
-/**
- * Constructs `@keyframes key` expression
- * @param val
- */
-export declare const atKeyframes: (val: string) => string;
-/**
- * Constructs `fitContent(val)` expression
- * @param val
- */
-export declare const fitContent: (val: string | number) => string;
-/**
- * Constructs `minmax(min, max)` expression
- * @param val
- */
-export declare const minmax: (min: string | number, max: string | number) => string;
-/**
- * Constructs `repeat(count, tracks)` expression
- * @param val
- */
-export declare const repeat: (count: string | number, tracks: string | number) => string;
-/**
- * Constructs `scale3d(val)` expression
- * @param val
- */
-export declare const scale3d: (val: string | number) => string;
-/**
- * Constructs `scaleX(val)` expression
- * @param val
- */
-export declare const scaleX: (val: string | number) => string;
-/**
- * Constructs `scaleY(val)` expression
- * @param val
- */
-export declare const scaleY: (val: string | number) => string;
-/**
- * Constructs `scaleZ(val)` expression
- * @param val
- */
-export declare const scaleZ: (val: string | number) => string;
-/**
- * Constructs `scale(val)` expression
- * @param val
- */
-export declare const scale: (val: string | number) => string;
-/**
- * Constructs `translate3d(x, y, z)` expression
- * @param x
- * @param y
- * @param z
- */
-export declare const translate3d: (x: string | number, y: string | number, z: string | number) => string;
-/**
- * Constructs `translateX(val)` expression
- * @param val
- */
-export declare const translateX: (val: string | number) => string;
-/**
- * Constructs `translateY(val)` expression
- * @param val
- */
-export declare const translateY: (val: string | number) => string;
-/**
- * Constructs `translateZ(val)` expression
- * @param val
- */
-export declare const translateZ: (val: string | number) => string;
-/**
- * Constructs `translate(x, y)` expression
- * @param x
- * @param y
- */
-export declare const translate: (x: string | number, y: string | number) => string;
-/**
- * Constructs `rotate(val)` expression
- * @param val
- */
-export declare const rotate: (val: string | number) => string;
-/**
- * Constructs `rotateX(val)` expression
- * @param val
- */
-export declare const rotateX: (val: string | number) => string;
-/**
- * Constructs `rotateX(val)` expression
- * @param val
- */
-export declare const rotateY: (val: string | number) => string;
-/**
- * Constructs `rotateX(val)` expression
- * @param val
- */
-export declare const rotateZ: (val: string | number) => string;
-/**
- * Constructs `rotate3d(x, y, z)` expression
- * @param x
- * @param y
- * @param z
- * @param a
- */
-export declare const rotate3d: (x: string | number, y: string | number, z: string | number, a: string | number) => string;
-/**
- * Constructs `skew(x, y)` expression
- * @param x
- * @param y
- */
-export declare const skew: (x: string | number, y: string | number) => string;
-/**
- * Constructs `skewX(val)` expression
- * @param val
- */
-export declare const skewX: (val: string | number) => string;
-/**
- * Constructs `skewY(val)` expression
- * @param val
- */
-export declare const skewY: (val: string | number) => string;
-/**
- * Constructs `perspective(val)` expression
- * @param val
- */
-export declare const perspective: (val: string | number) => string;
-/**
- * Constructs `opacity(val)` expression
- * @param val
- */
-export declare const opacity: (val: string | number) => string;
-/**
- * Constructs `blur(val)` expression
- * @param val
- */
-export declare const blur: (val: string | number) => string;
-/**
- * Constructs `contrast(val)` expression
- * @param val
- */
-export declare const contrast: (val: string | number) => string;
-/**
- * Constructs `drop-shadow(val)` expression
- * @param val
- */
-export declare const dropShadow: (val: string | number) => string;
-/**
- * Constructs `saturate(val)` expression
- * @param val
- */
-export declare const saturate: (val: string | number) => string;
-/**
- * Constructs `invert(val)` expression
- * @param val
- */
-export declare const invert: (val: string | number) => string;
-/**
- * Constructs `sepia(val)` expression
- * @param val
- */
-export declare const sepia: (val: string | number) => string;
-/**
- * Constructs `hue-rotate(val)` expression
- * @param val
- */
-export declare const hueRotate: (val: string | number) => string;
-/**
- * Constructs `grayscale(val)` expression
- * @param val
- */
-export declare const grayscale: (val: string | number) => string;
-/**
- * Constructs `blur(val)` expression
- * @param val
- */
-export declare const brightness: (val: string | number) => string;
-/**
- * Constructs `oklch(from f l c h / alpha)` expression
- * @param params
- */
-export declare const oklchFrom: ({ f, l, c, h, a }: {
-    f: string;
-    l?: string | number;
-    c?: string | number;
-    h?: string | number;
-    a?: string | number;
-}) => string;
-/**
- * Constructs `light-dark(val)` expression
- * @param val
- */
-export declare const lightDark: (l: string, d: string) => string;
-/**
- * Constructs `color-mix(m, c1 p1, c2, p2)` expression
- * @param val
- */
-export declare const colorMix: ({ m, c1, c2, p1, p2 }: {
-    m: string;
-    c1: string;
-    c2: string;
-    p1?: number;
-    p2?: number;
-}) => string;
-/**
- * Constructs `prefers-color-scheme: key` expression
- * @param params
- */
-export declare const preferColorScheme: (val: string) => string;
-/**
- * Constructs `linear-gradient(val)` expression
- * @param val
- */
-export declare const linearGradient: (val: string | number) => string;
-/**
- * Constructs `radial-gradient(val)` expression
- * @param val
- */
-export declare const radialGradient: (val: string | number) => string;
-/**
- * Constructs `conic-gradient(val)` expression
- * @param val
- */
-export declare const conicGradient: (val: string | number) => string;
-/**
- * Constructs `val:active` expression
- * @param val
- */
-export declare const pseudoActive: (val: string) => string;
-/**
- * Constructs `val:focus` expression
- * @param val
- */
-export declare const pseudoFocus: (val: string) => string;
-/**
- * Constructs `val:hover` expression
- * @param val
- */
-export declare const pseudoHover: (val: string) => string;
-/**
- * Constructs `val:visited` expression
- * @param val
- */
-export declare const pseudoVisited: (val: string) => string;
-/**
- * Constructs `val:link` expression
- * @param val
- */
-export declare const pseudoLink: (val: string) => string;
-/**
- * Constructs `val::before` expression
- * @param val
- */
-export declare const pseudoBefore: (val?: string) => string;
-/**
- * Constructs `val::after` expression
- * @param val
- */
-export declare const pseudoAfter: (val?: string) => string;
-/**
- * Constructs `::part(val)` expression
- * @param val
- */
-export declare const pseudoPart: (val: string) => string;
-/**
- * Constructs `::slotted(val)` expression
- * @param val
- */
-export declare const pseudoSlotted: (val: string) => string;
-/**
- * Constructs `:has(val)` expression
- * @param val
- */
-export declare const pseudoHas: (val: string) => string;
-/**
- * Constructs `:is(val)` expression
- * @param val
- */
-export declare const pseudoIs: (val: string) => string;
-/**
- * Constructs `:not(val)` expression
- * @param val
- */
-export declare const pseudoNot: (val: string) => string;
-/**
- * Constructs `:nth-child(val)` expression
- * @param val
- */
-export declare const pseudoNthChild: (val: string) => string;
-/**
- * Constructs `:nth-of-type(val)` expression
- * @param val
- */
-export declare const pseudoNthOfType: (val: string) => string;
-/**
- * Constructs `:host(val)` expression
- * @param val
- */
-export declare const pseudoHost: (val: string) => string;
-/**
- * Constructs `:state(val)` expression
- * @param val
- */
-export declare const pseudoState: (val: string) => string;
-/**
- * Constructs `:where(val)` expression
- * @param val
- */
-export declare const pseudoWhere: (val: string) => string;
-export declare const pseudoOddChild: () => string;
-export declare const pseudoEvenChild: () => string;
-/**
- * Transform object values to `percents`
- * @param params
- */
-export declare const toPercent: <T extends string>(params?: Record<string | number, string | number>) => Record<T, string> | undefined;
-/**
- * Transform args to `percent` object
- * @param params
- */
-export declare const argsToPercent: <T extends number>(...args: T[]) => Record<T, string>;
-/**
- * Transform object values to `rem`s
- * @param params
- */
-export declare const toRem: <T extends string>(params?: Record<string | number, string | number>) => Record<T, string> | undefined;
-/**
- * Transform object values to `ms`s
- * @param params
- */
-export declare const toMs: <T extends string>(params?: Record<string | number, string | number>) => Record<T, string> | undefined;
-/**
- * Transform object values to `px`s
- * @param params
- */
-export declare const toPx: <T extends string>(params?: Record<string | number, string | number>) => Record<T, string> | undefined;
-/**
- * Transform object values to `deg`s
- * @param params
- */
-export declare const toDeg: <T extends string | number>(params?: Record<T, string | number>) => Record<T, string> | undefined;
-/**
- * Transform object values to `vw`s
- * @param params
- */
-export declare const toVw: <T extends string | number>(params?: Record<T, string | number>) => Record<T, string> | undefined;
-/**
- * Transform object values to `vh`s
- * @param params
- */
-export declare const toVh: <T extends string | number>(params?: Record<T, string | number>) => Record<T, string> | undefined;
-/**
- * Transform object values to `vmin`s
- * @param params
- */
-export declare const toVmin: <T extends string | number>(params?: Record<T, string | number>) => Record<T, string> | undefined;
-/**
- * Transform object values to `vmax`s
- * @param params
- */
-export declare const toVmax: <T extends string | number>(params?: Record<T, string | number>) => Record<T, string> | undefined;
-/**
- * Transform object values to `cqb`s
- * @param params
- */
-export declare const toCqb: <T extends string | number>(params?: Record<T, string | number>) => Record<T, string> | undefined;
-/**
- * Transform object values to `cqi`s
- * @param params
- */
-export declare const toCqi: <T extends string | number>(params?: Record<T, string | number>) => Record<T, string> | undefined;
-/**
- * Transform object values to `cqw`s
- * @param params
- */
-export declare const toCqw: <T extends string | number>(params?: Record<T, string | number>) => Record<T, string> | undefined;
-/**
- * Transform object values to `cqh`s
- * @param params
- */
-export declare const toCqh: <T extends string | number>(params?: Record<T, string | number>) => Record<T, string> | undefined;
-/**
- * Transform object values to `cqmin`s
- * @param params
- */
-export declare const toCqmin: <T extends string | number>(params?: Record<T, string | number>) => Record<T, string> | undefined;
-/**
- * Transform object values to `cqmax`s
- * @param params
- */
-export declare const toCqmax: <T extends string | number>(params?: Record<T, string | number>) => Record<T, string> | undefined;
-/**
- * Transform object values to `span`s
- * @param params
- */
-export declare const toSpan: <T extends string | number>(params?: Record<T, string | number>) => Record<T, string> | undefined;
-/**
- * Transform args to `deg` object
- * @param params
- */
-export declare const argsToDeg: <T extends number>(...args: T[]) => Record<T, string>;

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

@@ -1,197 +0,0 @@
-import { IStyleConfig, IStyleDispatcher, IStyleProvider, TGetBEMResolver, TKeyGenerator, TStyleSheetConfig } from './types';
-/**
- * Prefix which will be used for autogenerated
- * - variable names;
- * - keyframes names;
- * - stylesheet keys.
- */
-export declare const PREFIX = "eff";
-/**
- * Id for special script element,
- * which contains initial style config
- */
-export declare const SETTINGS_ID = "effcss";
-/**
- * Name of the custom style provider element
- */
-export declare const COMPONENT_NAME = "style-provider";
-/**
- * Create settings script element
- * @param settings - settings object
- * @param params - params for settings element
- * @see {@link IStyleConfig}
- */
-export declare const createSettingsElement: (settings: IStyleConfig, params?: {
-    /**
-     * Settings element id
-     * @defaultValue
-     * @see {@link SETTINGS_ID}
-     */
-    id: string;
-}) => Node;
-/**
- * Create settings HTML string
- * @param settings - settings object
- * @param params - params for settings element
- * @see {@link IStyleConfig}
- */
-export declare const createSettingsHTML: (settings: IStyleConfig, params?: {
-    /**
-     * Settings element id
-     * @defaultValue
-     * @see {@link SETTINGS_ID}
-     */
-    id: string;
-}) => string;
-/**
- * Get style provider component
- * @param root - style provider scope
- * @description
- * Use this function to get the first provider element found in the document
- * @see {@link IStyleProvider}
- */
-export declare const getProvider: (root?: Document, name?: string) => IStyleProvider;
-/**
- * Compile stylesheet
- * @param key - stylesheet key
- * @param config - stylesheet config
- * @param provider - style provider
- * @see {@link IStyleProvider}
- */
-export declare const compileStyleSheet: (key: string, config: TStyleSheetConfig, provider?: IStyleProvider) => boolean | undefined;
-/**
- * Use stylesheet
- * @param config - stylesheet config
- * @param provider - style provider
- * @see {@link IStyleProvider}
- */
-export declare const useStyleSheet: (config: TStyleSheetConfig, provider?: IStyleProvider) => (e?: string) => (m?: string | object) => Record<string, string>;
-/**
- * Expand stylesheet
- * @param key - stylesheet key
- * @param config - stylesheet config
- * @param provider - style provider
- * @see {@link IStyleProvider}
- */
-export declare const expandStyleSheet: (key: string, config: string[], provider?: IStyleProvider) => number | undefined;
-/**
- * Process styles
- * @param styles - stylesheet dictionary
- * @param ext - extra rules config
- * @param provider - style provider
- * @see {@link IStyleProvider}
- */
-export declare const processStyles: (styles?: Record<string, TStyleSheetConfig>, ext?: Record<string, string[]>, provider?: IStyleProvider) => void;
-/**
- * Resolve stylesheet
- * @param key stylesheet key
- * @param provider - style provider
- * @see {@link IStyleProvider}
- */
-export declare const resolveStyleSheet: (key: string, provider?: IStyleProvider) => (e?: string) => (m?: string | object) => Record<string, string>;
-/**
- * Get stylesheet from provider
- * @param key - stylesheet key
- * @param provider - style provider
- * @see {@link IStyleProvider}
- */
-export declare const getStyleSheet: (key: string, provider?: IStyleProvider) => CSSStyleSheet | undefined;
-/**
- * Add stylesheet to provider
- * @param key - stylesheet key
- * @param provider - style provider
- * @see {@link IStyleProvider}
- */
-export declare const addStyleSheet: (key: string, stylesheet: CSSStyleSheet, provider?: IStyleProvider) => true | void;
-/**
- * Remove stylesheet from provider
- * @param key - stylesheet key
- * @param provider - style provider
- * @see {@link IStyleProvider}
- */
-export declare const removeStyleSheet: (key: string, provider?: IStyleProvider) => true | void;
-/**
- * Stringify stylesheet
- * @param key - stylesheet key
- * @param provider - style provider
- * @see {@link IStyleProvider}
- */
-export declare const stringifyStyleSheet: (key: string, provider?: IStyleProvider) => string;
-/**
- * Get all stylesheets
- * @param provider - style provider
- * @see {@link IStyleProvider}
- */
-export declare const stringifyAllStyles: (provider?: IStyleProvider) => string;
-/**
- * Get rules count for stylesheet
- * @param key - stylesheet key
- * @param provider - style provider
- * @see {@link IStyleProvider}
- */
-export declare const getRulesCount: (key: string, provider?: IStyleProvider) => number;
-/**
- * Get total rules count
- * @param provider - style provider
- * @see {@link IStyleProvider}
- */
-export declare const getTotalRulesCount: (provider?: IStyleProvider) => number;
-/**
- * Generate stylesheet key
- * @param configs - current stylesheet configs
- */
-export declare const generateStyleSheetKey: TKeyGenerator;
-/**
- * BEM resolver
- * @param params - BEM resolver params
- */
-export declare const getBEMResolver: TGetBEMResolver;
-/**
- * Basic class for manipulating stylesheets
- */
-export declare class StyleDispatcher implements IStyleDispatcher {
-    /**
-     * Dispatcher root element
-     * @description
-     * Scope where style provider will be searched for
-     */
-    root: Document;
-    /**
-     * Style provider
-     */
-    provider: IStyleProvider;
-    construstor(root?: Document): void;
-    /**
-     * Use stylesheet
-     * @param config - stylesheet config
-     * @see {@link useStyleSheet}
-     */
-    use: (config: TStyleSheetConfig) => (e?: string) => (m?: string | object) => Record<string, string>;
-    /**
-     * Compile stylesheet
-     * @param key - stylesheet key
-     * @param config - stylesheet config
-     * @see {@link compileStyleSheet}
-     */
-    compile: (key: string, config: TStyleSheetConfig) => boolean | undefined;
-    /**
-     * Expand stylesheet
-     * @param key - stylesheet key
-     * @param config - stylesheet config
-     * @see {@link expandStyleSheet}
-     */
-    expand: (key: string, config: string[]) => number | undefined;
-    /**
-     * Process styles
-     * @param styles - stylesheet dictionary
-     * @param ext - stylesheet extra rules
-     * @see {@link processStyles}
-     */
-    process: (styles?: Record<string, TStyleSheetConfig>, ext?: Record<string, string[]>) => void;
-    /**
-     * Resolve stylesheet
-     * @param key - stylesheet key
-     * @see {@link resolveStyleSheet}
-     */
-    resolve: (key: string) => (e?: string) => (m?: string | object) => Record<string, string>;
-}

package/dist/utils.js

@@ -1 +0,0 @@
-const e=e=>"object"==typeof e,t="eff",r="effcss",i="style-provider",o=(e,t)=>{const i=JSON.stringify(e),o=(null==t?void 0:t.id)||r,n=document.createElement("script");return n.id=o,n.type="application/json",n.innerHTML=i,n},n=(e,t)=>{const i=JSON.stringify(e);return`<script id="${(null==t?void 0:t.id)||r}" type="application/json">${i}<\/script>`},s=(e=document,t=i)=>{var r;return null===(r=e.getElementsByTagName(t))||void 0===r?void 0:r[0]},l=(e,t,r=s())=>r.compileStyleSheet(e,t),d=(e,t=s())=>t.useStyleSheet(e),v=(e,t,r=s())=>r.expandStyleSheet(e,t),u=(e,t,r=s())=>r.processStyles(e,t),a=(e,t=s())=>t.resolveStyleSheet(e),c=(e,t=s())=>{var r;return null===(r=null==t?void 0:t.manager)||void 0===r?void 0:r.get(e)},p=(e,t,r=s())=>{var i;return null===(i=null==r?void 0:r.manager)||void 0===i?void 0:i.add(e,t)},m=(e,t=s())=>{var r;return null===(r=null==t?void 0:t.manager)||void 0===r?void 0:r.remove(e)},h=(e,t=s())=>{var r;return[...(null===(r=c(e,t))||void 0===r?void 0:r.cssRules)||[]].map((e=>e.cssText)).join("")},g=(e=s())=>{var t;return Object.keys((null===(t=null==e?void 0:e.manager)||void 0===t?void 0:t.getAll())||{}).map((t=>h(t,e))).join("")},y=(e,t=s())=>{var r;return function e(t){return t?t.length+[...t].reduce(((t,r)=>t+e(null==r?void 0:r.cssRules)),0):0}(null===(r=c(e,t))||void 0===r?void 0:r.cssRules)},j=(e=s())=>{var t;return Object.keys((null===(t=null==e?void 0:e.manager)||void 0===t?void 0:t.getAll())||{}).reduce(((t,r)=>t+y(r,e)),0)},S=e=>e.size.toString(36),f=t=>{const r=e=>Object.entries(e).reduce(((e,[t,r])=>(void 0!==r&&e.push(t+(r?"-"+r:"")),e)),[]).join(" "),i=(e,t)=>Object.defineProperties({[e]:t},{k:{value:e},v:{value:t}});return"c"===t.mode?{selector:({b:e,e:t,m:r,mv:i,s:o})=>`.${e}${(t?"__"+t:"")+(r?"_"+r:"")+(r&&i?"_"+i:"")+(o?":"+o:"")}`,attr:t=>o=>n=>{let s=n||"";e(s)&&(s=r(s));const l=t+(o?"__"+o:"");return s=l+(s?" "+(null==s?void 0:s.split(" ").map((e=>l+"_"+e.split("-").join("_"))).join(" ")):""),i("class",s)}}:{selector:({b:e,e:t,m:r,mv:i,s:o})=>`[data-${e}${t?"-"+t:""}${r||o?'~="'+(r||"")+(i?"-"+i:"")+(o?":"+o:"")+'"':""}]`,attr:t=>o=>n=>{const s=`data-${t}${o?"-"+o:""}`;let l=n||"";return e(l)&&(l=r(l)),i(s,l)}}};class ${constructor(){this.root=document,this.use=e=>d(e,this.provider),this.compile=(e,t)=>l(e,t,this.provider),this.expand=(e,t)=>v(e,t,this.provider),this.process=(e,t)=>u(e,t,this.provider),this.resolve=e=>a(e,this.provider)}construstor(e){e&&(this.root=e),this.provider=s(this.root)}}export{i as COMPONENT_NAME,t as PREFIX,r as SETTINGS_ID,$ as StyleDispatcher,p as addStyleSheet,l as compileStyleSheet,o as createSettingsElement,n as createSettingsHTML,v as expandStyleSheet,S as generateStyleSheetKey,f as getBEMResolver,s as getProvider,y as getRulesCount,c as getStyleSheet,j as getTotalRulesCount,u as processStyles,m as removeStyleSheet,a as resolveStyleSheet,g as stringifyAllStyles,h as stringifyStyleSheet,d as useStyleSheet};