effcss 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/README.md +48 -99
  2. package/dist/build/define-provider-with-configs.min.js +1 -1
  3. package/dist/build/define-provider.min.js +1 -1
  4. package/dist/css/dict.js +1 -1
  5. package/dist/index.js +1 -1
  6. package/dist/types/src/_provider/constants.d.ts +2 -2
  7. package/dist/types/src/_provider/manage.d.ts +4 -3
  8. package/dist/types/src/_provider/process.d.ts +7 -13
  9. package/dist/types/src/configs/basic/Agent.d.ts +2 -2
  10. package/dist/types/src/configs/basic/AgentColor.d.ts +2 -2
  11. package/dist/types/src/configs/basic/Animation.d.ts +2 -2
  12. package/dist/types/src/configs/basic/Background.d.ts +2 -2
  13. package/dist/types/src/configs/basic/Border.d.ts +2 -2
  14. package/dist/types/src/configs/basic/BorderExt.d.ts +2 -2
  15. package/dist/types/src/configs/basic/Box.d.ts +2 -2
  16. package/dist/types/src/configs/basic/Color.d.ts +2 -2
  17. package/dist/types/src/configs/basic/Column.d.ts +2 -2
  18. package/dist/types/src/configs/basic/FlexContainer.d.ts +2 -2
  19. package/dist/types/src/configs/basic/FlexItem.d.ts +2 -2
  20. package/dist/types/src/configs/basic/Font.d.ts +2 -2
  21. package/dist/types/src/configs/basic/GridContainer.d.ts +2 -2
  22. package/dist/types/src/configs/basic/GridItem.d.ts +2 -2
  23. package/dist/types/src/configs/basic/Indent.d.ts +2 -2
  24. package/dist/types/src/configs/basic/Inset.d.ts +2 -2
  25. package/dist/types/src/configs/basic/Mask.d.ts +2 -2
  26. package/dist/types/src/configs/basic/Object.d.ts +2 -2
  27. package/dist/types/src/configs/basic/Outline.d.ts +2 -2
  28. package/dist/types/src/configs/basic/Scroll.d.ts +2 -2
  29. package/dist/types/src/configs/basic/ScrollExt.d.ts +2 -2
  30. package/dist/types/src/configs/basic/Size.d.ts +2 -2
  31. package/dist/types/src/configs/basic/SizeExt.d.ts +2 -2
  32. package/dist/types/src/configs/basic/Text.d.ts +2 -2
  33. package/dist/types/src/configs/basic/Transform.d.ts +2 -2
  34. package/dist/types/src/configs/basic/Transition.d.ts +2 -2
  35. package/dist/types/src/configs/basic/User.d.ts +2 -2
  36. package/dist/types/src/configs/basic/View.d.ts +2 -2
  37. package/dist/types/src/configs/ext/Keyframes.d.ts +2 -2
  38. package/dist/types/src/configs/ext/Reset.d.ts +2 -2
  39. package/dist/types/src/css/functions.d.ts +2 -2
  40. package/dist/types/src/index.d.ts +22 -6
  41. package/dist/types/src/types.d.ts +221 -255
  42. package/dist/types/src/utils.d.ts +108 -25
  43. package/dist/utils.js +1 -1
  44. package/package.json +1 -1
  45. package/dist/types/allConfigs.d.ts +0 -1
  46. package/dist/types/defineProvider.d.ts +0 -1
  47. package/dist/types/defineProviderWithConfigs.d.ts +0 -1
@@ -1,25 +1,54 @@
1
- import { IStyleProvider, TStyleConfig } from "types";
1
+ import { IStyleConfig, IStyleProvider, TStyleSheetConfig } from './types';
2
+ /**
3
+ * Prefix which will be used for autogenerated
4
+ * - variable names;
5
+ * - keyframes names;
6
+ * - stylesheet keys.
7
+ */
2
8
  export declare const PREFIX = "eff";
9
+ /**
10
+ * Id for special script element,
11
+ * which contains initial style config
12
+ */
3
13
  export declare const SETTINGS_ID = "effcss";
14
+ /**
15
+ * Name of the custom style provider element
16
+ */
4
17
  export declare const COMPONENT_NAME = "style-provider";
5
18
  /**
6
19
  * Create settings script element
7
- * @param settings
8
- * @param params
20
+ * @param settings - settings object
21
+ * @param params - params for settings element
22
+ * @see {@link IStyleConfig}
9
23
  */
10
- export declare const createSettingsElement: (settings: object, params?: {
24
+ export declare const createSettingsElement: (settings: IStyleConfig, params?: {
25
+ /**
26
+ * Settings element id
27
+ * @defaultValue
28
+ * @see {@link SETTINGS_ID}
29
+ */
11
30
  id: string;
12
31
  }) => Node;
13
32
  /**
14
33
  * Create settings HTML string
15
- * @param settings
16
- * @param params
34
+ * @param settings - settings object
35
+ * @param params - params for settings element
36
+ * @see {@link IStyleConfig}
17
37
  */
18
- export declare const createSettingsHTML: (settings: object, params?: {
38
+ export declare const createSettingsHTML: (settings: IStyleConfig, params?: {
39
+ /**
40
+ * Settings element id
41
+ * @defaultValue
42
+ * @see {@link SETTINGS_ID}
43
+ */
19
44
  id: string;
20
45
  }) => string;
21
46
  /**
22
- * Get provider component
47
+ * Get style provider component
48
+ * @param root - style provider scope
49
+ * @description
50
+ * Use this function to get the first provider element found in the document
51
+ * @see {@link IStyleProvider}
23
52
  */
24
53
  export declare const getProvider: (root?: Document) => IStyleProvider;
25
54
  /**
@@ -27,70 +56,124 @@ export declare const getProvider: (root?: Document) => IStyleProvider;
27
56
  * @param key - stylesheet key
28
57
  * @param config - stylesheet config
29
58
  * @param provider - style provider
59
+ * @see {@link IStyleProvider}
30
60
  */
31
- export declare const compileStyleSheet: (key: string, config: TStyleConfig, provider?: IStyleProvider) => boolean | void;
61
+ export declare const compileStyleSheet: (key: string, config: TStyleSheetConfig, provider?: IStyleProvider) => boolean | void;
32
62
  /**
33
63
  * Use stylesheet
34
64
  * @param config - stylesheet config
35
65
  * @param provider - style provider
66
+ * @see {@link IStyleProvider}
36
67
  */
37
- export declare const useStyleSheet: (config: TStyleConfig, provider?: IStyleProvider) => any;
68
+ export declare const useStyleSheet: (config: TStyleSheetConfig, provider?: IStyleProvider) => void | ((e?: string) => (m?: string) => Record<string, string>);
38
69
  /**
39
70
  * Expand stylesheet
40
71
  * @param key - stylesheet key
41
72
  * @param config - stylesheet config
42
73
  * @param provider - style provider
74
+ * @see {@link IStyleProvider}
43
75
  */
44
76
  export declare const expandStyleSheet: (key: string, config: string[], provider?: IStyleProvider) => number | undefined;
45
77
  /**
46
78
  * Process styles
47
- * @param styles - styles config
48
- * @param ext - ext config
79
+ * @param styles - stylesheet dictionary
80
+ * @param ext - extra rules config
81
+ * @param provider - style provider
82
+ * @see {@link IStyleProvider}
49
83
  */
50
- export declare const processStyles: (styles?: Record<string, TStyleConfig>, ext?: Record<string, string[]>, provider?: IStyleProvider) => void;
84
+ export declare const processStyles: (styles?: Record<string, TStyleSheetConfig>, ext?: Record<string, string[]>, provider?: IStyleProvider) => void;
51
85
  /**
52
86
  * Get stylesheet from provider
53
- * @param key
87
+ * @param key - stylesheet key
88
+ * @param provider - style provider
89
+ * @see {@link IStyleProvider}
54
90
  */
55
91
  export declare const getStyleSheet: (key: string, provider?: IStyleProvider) => CSSStyleSheet | undefined;
56
92
  /**
57
93
  * Add stylesheet to provider
58
- * @param key
94
+ * @param key - stylesheet key
95
+ * @param provider - style provider
96
+ * @see {@link IStyleProvider}
59
97
  */
60
98
  export declare const addStyleSheet: (key: string, stylesheet: CSSStyleSheet, provider?: IStyleProvider) => true | void | undefined;
61
99
  /**
62
100
  * Remove stylesheet from provider
63
- * @param key
101
+ * @param key - stylesheet key
102
+ * @param provider - style provider
103
+ * @see {@link IStyleProvider}
64
104
  */
65
105
  export declare const removeStyleSheet: (key: string, provider?: IStyleProvider) => true | void | undefined;
66
106
  /**
67
107
  * Stringify stylesheet
68
- * @param key
69
- * @param provider
108
+ * @param key - stylesheet key
109
+ * @param provider - style provider
110
+ * @see {@link IStyleProvider}
70
111
  */
71
112
  export declare const stringifyStyleSheet: (key: string, provider?: IStyleProvider) => string;
72
113
  /**
73
114
  * Get all stylesheets
74
- * @param key
115
+ * @param provider - style provider
116
+ * @see {@link IStyleProvider}
75
117
  */
76
118
  export declare const stringifyAllStyles: (provider?: IStyleProvider) => string;
77
119
  /**
78
120
  * Get rules count for stylesheet
79
- * @param key
80
- * @param provider
121
+ * @param key - stylesheet key
122
+ * @param provider - style provider
123
+ * @see {@link IStyleProvider}
81
124
  */
82
125
  export declare const getRulesCount: (key: string, provider?: IStyleProvider) => number;
83
126
  /**
84
127
  * Get total rules count
85
- * @param provider
128
+ * @param provider - style provider
129
+ * @see {@link IStyleProvider}
86
130
  */
87
131
  export declare const getTotalRulesCount: (provider?: IStyleProvider) => number;
132
+ /**
133
+ * Change object [Symbol.toPrimitive] method
134
+ * @param params - object which should be able to convert to a string
135
+ */
136
+ export declare const convertable: (params: Record<string | typeof Symbol.toPrimitive, string | number | Function>) => Record<string | typeof Symbol.toPrimitive, string | number | Function>;
137
+ /**
138
+ * Basic class for manipulating stylesheets
139
+ */
88
140
  export declare class StyleDispatcher {
141
+ /**
142
+ * Dispatcher root element
143
+ * @description
144
+ * Scope where style provider will be searched for
145
+ */
89
146
  root: Document;
147
+ /**
148
+ * Style provider
149
+ */
90
150
  provider?: IStyleProvider;
91
151
  construstor(root?: Document): void;
92
- use: (config: TStyleConfig) => any;
93
- compile: (key: string, config: TStyleConfig) => boolean | void;
152
+ /**
153
+ * Use stylesheet
154
+ * @param config - stylesheet config
155
+ * @see {@link useStyleSheet}
156
+ */
157
+ use: (config: TStyleSheetConfig) => void | ((e?: string) => (m?: string) => Record<string, string>);
158
+ /**
159
+ * Compile stylesheet
160
+ * @param key - stylesheet key
161
+ * @param config - stylesheet config
162
+ * @see {@link compileStyleSheet}
163
+ */
164
+ compile: (key: string, config: TStyleSheetConfig) => boolean | void;
165
+ /**
166
+ * Expand stylesheet
167
+ * @param key - stylesheet key
168
+ * @param config - stylesheet config
169
+ * @see {@link expandStyleSheet}
170
+ */
94
171
  expand: (key: string, config: string[]) => number | undefined;
95
- process: (styles?: Record<string, TStyleConfig>, ext?: Record<string, string[]>) => void;
172
+ /**
173
+ * Process styles
174
+ * @param styles - stylesheet dictionary
175
+ * @param ext - stylesheet extra rules
176
+ * @see {@link processStyles}
177
+ */
178
+ process: (styles?: Record<string, TStyleSheetConfig>, ext?: Record<string, string[]>) => void;
96
179
  }
package/dist/utils.js CHANGED
@@ -1 +1 @@
1
- const e="eff",r="effcss",t="style-provider",i=(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},o=(e,t)=>{const i=JSON.stringify(e);return`<script id="${(null==t?void 0:t.id)||r}" 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=n())=>r.useStyleSheet(e),d=(e,r,t=n())=>t.expandStyleSheet(e,r),v=(e,r,t=n())=>t.processStyles(e,r),u=(e,r=n())=>{var t;return null===(t=null==r?void 0:r.manager)||void 0===t?void 0:t.get(e)},a=(e,r,t=n())=>{var i;return null===(i=null==t?void 0:t.manager)||void 0===i?void 0:i.add(e,r)},c=(e,r=n())=>{var t;return null===(t=null==r?void 0:r.manager)||void 0===t?void 0:t.remove(e)},p=(e,r=n())=>{var t;return[...(null===(t=u(e,r))||void 0===t?void 0:t.cssRules)||[]].map((e=>e.cssText)).join("")},h=(e=n())=>{var r;return Object.keys((null===(r=null==e?void 0:e.manager)||void 0===r?void 0:r.getAll())||{}).map((r=>p(r,e))).join("")},m=(e,r=n())=>{var t,i;return(null===(i=null===(t=u(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 y{constructor(){this.root=document,this.use=e=>s(e,this.provider),this.compile=(e,r)=>l(e,r,this.provider),this.expand=(e,r)=>d(e,r,this.provider),this.process=(e,r)=>v(e,r,this.provider)}construstor(e){e&&(this.root=e),this.provider=n(this.root)}}export{t as COMPONENT_NAME,e as PREFIX,r as SETTINGS_ID,y as StyleDispatcher,a as addStyleSheet,l as compileStyleSheet,i as createSettingsElement,o as createSettingsHTML,d as expandStyleSheet,n as getProvider,m as getRulesCount,u as getStyleSheet,g as getTotalRulesCount,v as processStyles,c as removeStyleSheet,h as stringifyAllStyles,p as stringifyStyleSheet,s as useStyleSheet};
1
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "effcss",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "description": "Next generation CSS-in-JS library",
5
5
  "scripts": {
6
6
  "build": "rollup -c",
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export {};