effcss 1.1.4 → 1.2.1

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

@@ -1,92 +1,179 @@
-import { IStyleProvider, TStyleConfig } from "types";
+import { IStyleConfig, IStyleProvider, 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";
-export declare const COMPONENT_NAME = "style-provider";
 /**
- * Get provider styles
+ * Name of the custom style provider element
  */
-export declare const getProviderStyles: () => string;
+export declare const COMPONENT_NAME = "style-provider";
 /**
  * Create settings script element
- * @param settings
- * @param params
+ * @param settings - settings object
+ * @param params - params for settings element
+ * @see {@link IStyleConfig}
  */
-export declare const createSettingsElement: (settings: object, params?: {
+export declare const createSettingsElement: (settings: IStyleConfig, params?: {
+    /**
+     * Settings element id
+     * @defaultValue
+     * @see {@link SETTINGS_ID}
+     */
     id: string;
 }) => Node;
 /**
  * Create settings HTML string
- * @param settings
- * @param params
+ * @param settings - settings object
+ * @param params - params for settings element
+ * @see {@link IStyleConfig}
  */
-export declare const createSettingsHTML: (settings: object, params?: {
+export declare const createSettingsHTML: (settings: IStyleConfig, params?: {
+    /**
+     * Settings element id
+     * @defaultValue
+     * @see {@link SETTINGS_ID}
+     */
     id: string;
 }) => string;
 /**
- * Get provider component
+ * 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) => IStyleProvider;
 /**
  * Compile stylesheet
  * @param key - stylesheet key
- * @param config - style config
+ * @param config - stylesheet config
  * @param provider - style provider
+ * @see {@link IStyleProvider}
  */
-export declare const compileStyleSheet: (key: string, config: TStyleConfig, provider?: IStyleProvider) => boolean | void;
+export declare const compileStyleSheet: (key: string, config: TStyleSheetConfig, provider?: IStyleProvider) => boolean | void;
+/**
+ * Use stylesheet
+ * @param config - stylesheet config
+ * @param provider - style provider
+ * @see {@link IStyleProvider}
+ */
+export declare const useStyleSheet: (config: TStyleSheetConfig, provider?: IStyleProvider) => void | ((e?: string) => (m?: string) => Record<string, string>);
 /**
  * Expand stylesheet
  * @param key - stylesheet key
- * @param config - style config
+ * @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 - styles config
- * @param ext - ext config
+ * @param styles - stylesheet dictionary
+ * @param ext - extra rules config
+ * @param provider - style provider
+ * @see {@link IStyleProvider}
  */
-export declare const processStyles: (styles?: Record<string, TStyleConfig>, ext?: Record<string, string[]>, provider?: IStyleProvider) => void;
+export declare const processStyles: (styles?: Record<string, TStyleSheetConfig>, ext?: Record<string, string[]>, provider?: IStyleProvider) => void;
 /**
  * Get stylesheet from provider
- * @param key
+ * @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
+ * @param key - stylesheet key
+ * @param provider - style provider
+ * @see {@link IStyleProvider}
  */
 export declare const addStyleSheet: (key: string, stylesheet: CSSStyleSheet, provider?: IStyleProvider) => true | void | undefined;
 /**
  * Remove stylesheet from provider
- * @param key
+ * @param key - stylesheet key
+ * @param provider - style provider
+ * @see {@link IStyleProvider}
  */
 export declare const removeStyleSheet: (key: string, provider?: IStyleProvider) => true | void | undefined;
 /**
  * Stringify stylesheet
- * @param key
- * @param provider
+ * @param key - stylesheet key
+ * @param provider - style provider
+ * @see {@link IStyleProvider}
  */
 export declare const stringifyStyleSheet: (key: string, provider?: IStyleProvider) => string;
 /**
  * Get all stylesheets
- * @param key
+ * @param provider - style provider
+ * @see {@link IStyleProvider}
  */
 export declare const stringifyAllStyles: (provider?: IStyleProvider) => string;
 /**
  * Get rules count for stylesheet
- * @param key
- * @param provider
+ * @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
+ * @param provider - style provider
+ * @see {@link IStyleProvider}
  */
 export declare const getTotalRulesCount: (provider?: IStyleProvider) => number;
+/**
+ * Change object [Symbol.toPrimitive] method
+ * @param params - object which should be able to convert to a string
+ */
+export declare const convertable: (params: Record<string | typeof Symbol.toPrimitive, string | number | Function>) => Record<string | typeof Symbol.toPrimitive, string | number | Function>;
+/**
+ * Basic class for manipulating stylesheets
+ */
 export declare class StyleDispatcher {
+    /**
+     * Dispatcher root element
+     * @description
+     * Scope where style provider will be searched for
+     */
     root: Document;
+    /**
+     * Style provider
+     */
     provider?: IStyleProvider;
     construstor(root?: Document): void;
-    compile: (key: string, config: TStyleConfig) => boolean | void;
+    /**
+     * Use stylesheet
+     * @param config - stylesheet config
+     * @see {@link useStyleSheet}
+     */
+    use: (config: TStyleSheetConfig) => void | ((e?: string) => (m?: string) => Record<string, string>);
+    /**
+     * Compile stylesheet
+     * @param key - stylesheet key
+     * @param config - stylesheet config
+     * @see {@link compileStyleSheet}
+     */
+    compile: (key: string, config: TStyleSheetConfig) => boolean | void;
+    /**
+     * Expand stylesheet
+     * @param key - stylesheet key
+     * @param config - stylesheet config
+     * @see {@link expandStyleSheet}
+     */
     expand: (key: string, config: string[]) => number | undefined;
-    process: (styles?: Record<string, TStyleConfig>, ext?: Record<string, string[]>) => void;
+    /**
+     * Process styles
+     * @param styles - stylesheet dictionary
+     * @param ext - stylesheet extra rules
+     * @see {@link processStyles}
+     */
+    process: (styles?: Record<string, TStyleSheetConfig>, ext?: Record<string, string[]>) => void;
 }

package/dist/utils.js

@@ -1 +1 @@
-const e="effcss",r="style-provider",t=()=>`${r} {display: contents;}`,i=(r,t)=>{const i=JSON.stringify(r),o=(null==t?void 0:t.id)||e,n=document.createElement("script");return n.id=o,n.type="application/json",n.innerHTML=i,n},o=(r,t)=>{const i=JSON.stringify(r);return`<script id="${(null==t?void 0:t.id)||e}" type="application/json">${i}<\/script>`},n=(e=document)=>{var r;return null===(r=e.getElementsByTagName("style-provider"))||void 0===r?void 0:r[0]},l=(e,r,t=n())=>t.compileStyleSheet(e,r),s=(e,r,t=n())=>t.expandStyleSheet(e,r),d=(e,r,t=n())=>t.processStyles(e,r),v=(e,r=n())=>{var t;return null===(t=null==r?void 0:r.manager)||void 0===t?void 0:t.get(e)},u=(e,r,t=n())=>{var i;return null===(i=null==t?void 0:t.manager)||void 0===i?void 0:i.add(e,r)},a=(e,r=n())=>{var t;return null===(t=null==r?void 0:r.manager)||void 0===t?void 0:t.remove(e)},c=(e,r=n())=>{var t;return[...(null===(t=v(e,r))||void 0===t?void 0:t.cssRules)||[]].map((e=>e.cssText)).join("")},p=(e=n())=>{var r;return Object.keys((null===(r=null==e?void 0:e.manager)||void 0===r?void 0:r.getAll())||{}).map((r=>c(r,e))).join("")},m=(e,r=n())=>{var t,i;return(null===(i=null===(t=v(e,r))||void 0===t?void 0:t.cssRules)||void 0===i?void 0:i.length)||0},g=(e=n())=>{var r;return Object.keys((null===(r=null==e?void 0:e.manager)||void 0===r?void 0:r.getAll())||{}).reduce(((r,t)=>r+m(t,e)),0)};class h{constructor(){this.root=document,this.compile=(e,r)=>l(e,r,this.provider),this.expand=(e,r)=>s(e,r,this.provider),this.process=(e,r)=>d(e,r,this.provider)}construstor(e){e&&(this.root=e),this.provider=n(this.root)}}export{r as COMPONENT_NAME,e as SETTINGS_ID,h as StyleDispatcher,u as addStyleSheet,l as compileStyleSheet,i as createSettingsElement,o as createSettingsHTML,s as expandStyleSheet,n as getProvider,t as getProviderStyles,m as getRulesCount,v as getStyleSheet,g as getTotalRulesCount,d as processStyles,a as removeStyleSheet,p as stringifyAllStyles,c as stringifyStyleSheet};
+const e="eff",i="effcss",t="style-provider",r=(e,t)=>{const r=JSON.stringify(e),o=(null==t?void 0:t.id)||i,n=document.createElement("script");return n.id=o,n.type="application/json",n.innerHTML=r,n},o=(e,t)=>{const r=JSON.stringify(e);return`<script id="${(null==t?void 0:t.id)||i}" type="application/json">${r}<\/script>`},n=(e=document)=>{var i;return null===(i=e.getElementsByTagName("style-provider"))||void 0===i?void 0:i[0]},l=(e,i,t=n())=>t.compileStyleSheet(e,i),s=(e,i=n())=>i.useStyleSheet(e),d=(e,i,t=n())=>t.expandStyleSheet(e,i),v=(e,i,t=n())=>t.processStyles(e,i),u=(e,i=n())=>{var t;return null===(t=null==i?void 0:i.manager)||void 0===t?void 0:t.get(e)},a=(e,i,t=n())=>{var r;return null===(r=null==t?void 0:t.manager)||void 0===r?void 0:r.add(e,i)},c=(e,i=n())=>{var t;return null===(t=null==i?void 0:i.manager)||void 0===t?void 0:t.remove(e)},p=(e,i=n())=>{var t;return[...(null===(t=u(e,i))||void 0===t?void 0:t.cssRules)||[]].map((e=>e.cssText)).join("")},m=(e=n())=>{var i;return Object.keys((null===(i=null==e?void 0:e.manager)||void 0===i?void 0:i.getAll())||{}).map((i=>p(i,e))).join("")},h=(e,i=n())=>{var t,r;return(null===(r=null===(t=u(e,i))||void 0===t?void 0:t.cssRules)||void 0===r?void 0:r.length)||0},y=(e=n())=>{var i;return Object.keys((null===(i=null==e?void 0:e.manager)||void 0===i?void 0:i.getAll())||{}).reduce(((i,t)=>i+h(t,e)),0)},g=e=>(e[Symbol.toPrimitive]=function(){return Object.entries(this).map((e=>e.join("-"))).join(" ")},e);class S{constructor(){this.root=document,this.use=e=>s(e,this.provider),this.compile=(e,i)=>l(e,i,this.provider),this.expand=(e,i)=>d(e,i,this.provider),this.process=(e,i)=>v(e,i,this.provider)}construstor(e){e&&(this.root=e),this.provider=n(this.root)}}export{t as COMPONENT_NAME,e as PREFIX,i as SETTINGS_ID,S as StyleDispatcher,a as addStyleSheet,l as compileStyleSheet,g as convertable,r as createSettingsElement,o as createSettingsHTML,d as expandStyleSheet,n as getProvider,h as getRulesCount,u as getStyleSheet,y as getTotalRulesCount,v as processStyles,c as removeStyleSheet,m as stringifyAllStyles,p as stringifyStyleSheet,s as useStyleSheet};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "effcss",
-  "version": "1.1.4",
+  "version": "1.2.1",
   "description": "Next generation CSS-in-JS library",
   "scripts": {
     "build": "rollup -c",

package/dist/types/allConfigs.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/defineProvider.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/defineProviderWithConfigs.d.ts

@@ -1 +0,0 @@
-export {};