@slimr/css 2.0.3 → 2.0.5

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 (18) hide show
  1. package/cjs/core.d.ts +115 -0
  2. package/cjs/core.js +214 -0
  3. package/cjs/core.js.map +1 -0
  4. package/cjs/core.ts +290 -0
  5. package/cjs/index.d.ts +2 -0
  6. package/cjs/index.js +21 -0
  7. package/cjs/index.js.map +1 -0
  8. package/cjs/index.ts +2 -0
  9. package/esm/core.d.ts +115 -0
  10. package/esm/core.js +207 -0
  11. package/esm/core.js.map +1 -0
  12. package/esm/core.ts +290 -0
  13. package/esm/index.d.ts +2 -0
  14. package/esm/index.js +3 -0
  15. package/esm/index.js.map +1 -0
  16. package/esm/index.ts +2 -0
  17. package/package.json +1 -1
  18. package/slimr-css-2.0.3.tgz +0 -0
package/cjs/core.d.ts ADDED
@@ -0,0 +1,115 @@
1
+ /** Breakpoints like chakra */
2
+ export declare const breakPoints: string[];
3
+ type allowableAny = any;
4
+ /** Joins class names and filters out blanks */
5
+ export declare function classJoin(...classes: allowableAny[]): string;
6
+ export interface ShorthandProps {
7
+ /** shorthand for css:align-items */
8
+ ai?: string;
9
+ /** shorthand for css:border */
10
+ b?: string | number;
11
+ /** shorthand for css:border-radius */
12
+ br?: string | number;
13
+ /** shorthand for css:background */
14
+ bg?: string;
15
+ /** shorthand for css:color */
16
+ c?: string;
17
+ /** shorthand for css:display */
18
+ d?: string;
19
+ /** shorthand for css:flex */
20
+ f?: string;
21
+ /** shorthand for css:flex-direction */
22
+ fd?: string;
23
+ /** shorthand for css:height */
24
+ h?: number | string;
25
+ /** shorthand for css:inset */
26
+ i?: number | string;
27
+ /** shorthand for css:justify-content */
28
+ jc?: string;
29
+ /** shorthand for css:margin */
30
+ m?: number | string;
31
+ /** shorthand for css:margin-left */
32
+ ml?: number | string;
33
+ /** shorthand for css:margin-right */
34
+ mr?: number | string;
35
+ /** shorthand for css:margin-top */
36
+ mt?: number | string;
37
+ /** shorthand for css:margin-bottom */
38
+ mb?: number | string;
39
+ /** shorthand for css:margin-top & margin-bottom */
40
+ my?: number | string;
41
+ /** shorthand for css:margin-left & margin-right */
42
+ mx?: number | string;
43
+ /** shorthand for css:max-width */
44
+ maxW?: number | string;
45
+ /** shorthand for css:min-width */
46
+ minW?: number | string;
47
+ /** shorthand for css:padding */
48
+ p?: number | string;
49
+ /** shorthand for css:padding-left */
50
+ pl?: number | string;
51
+ /** shorthand for css:padding-right */
52
+ pr?: number | string;
53
+ /** shorthand for css:padding-top */
54
+ pt?: number | string;
55
+ /** shorthand for css:padding-bottom */
56
+ pb?: number | string;
57
+ /** shorthand for css:padding-top & padding-bottom */
58
+ py?: number | string;
59
+ /** shorthand for css:padding-left & padding-right */
60
+ px?: number | string;
61
+ /** shorthand for css:position */
62
+ pos?: number | string;
63
+ /** shorthand for css:text-align */
64
+ ta?: string;
65
+ /** shorthand for css:width */
66
+ w?: number | string;
67
+ /** shorthand for css:z-index */
68
+ z?: number | string;
69
+ }
70
+ export declare const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string>;
71
+ export declare const shorthandProps: string[];
72
+ /**
73
+ * Assemble a string from a template string array and a list of placeholders.
74
+ *
75
+ * - If the first argument is a string, it is returned as is.
76
+ *
77
+ * i.e.
78
+ * myFoo(...props: TemplateStringProps) => {
79
+ * const inputStr = t2s(...props);
80
+ * }
81
+ * myFoo`hello ${name}` => 'hello world'
82
+ * myFoo(`hello ${name}`) => 'hello world'
83
+ */
84
+ export declare function t2s(...tsp: TemplateStringProps): string;
85
+ export type TemplateStringProps = [
86
+ strings: TemplateStringsArray | string,
87
+ ...placeHolders: string[]
88
+ ];
89
+ /**
90
+ * Injects css to the page
91
+ *
92
+ * - Batches adds for performance
93
+ *
94
+ * @param css - css to be injected
95
+ * @returns void
96
+ */
97
+ export declare function addCss(css: string): void;
98
+ export declare namespace addCss {
99
+ var que: Set<string>;
100
+ var count: number;
101
+ }
102
+ /**
103
+ * Injects css and creates unique class names
104
+ *
105
+ * - Skips if already added
106
+ *
107
+ * @param css - string or template string, to be injected
108
+ * @returns a unique class name
109
+ */
110
+ export declare function createClass(...p: TemplateStringProps): string;
111
+ export declare namespace createClass {
112
+ var count: number;
113
+ var history: Map<string, string>;
114
+ }
115
+ export {};
package/cjs/core.js ADDED
@@ -0,0 +1,214 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.createClass = exports.addCss = exports.t2s = exports.shorthandProps = exports.shorthandPropsMap = exports.classJoin = exports.breakPoints = void 0;
4
+ /** Breakpoints like chakra */
5
+ exports.breakPoints = ['30em', '48em', '62em', '80em', '96em'];
6
+ /** Joins class names and filters out blanks */
7
+ function classJoin(...classes) {
8
+ return classes.filter(c => c && typeof c === 'string').join(' ');
9
+ }
10
+ exports.classJoin = classJoin;
11
+ /** delete css comments **/
12
+ function deleteComments(css) {
13
+ return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm, '');
14
+ }
15
+ /**
16
+ * Expands array values into media queries
17
+ *
18
+ * Inspired by https://chakra-ui.com/docs/styled-system/responsive-styles
19
+ */
20
+ function expandArrayValues(css) {
21
+ if (!css.includes('['))
22
+ return css;
23
+ return css
24
+ .split('\n')
25
+ .map(l => {
26
+ // eslint-disable-next-line no-useless-escape
27
+ const [, prop, vals] = [...l.matchAll(/([A-Za-z\-]*):[ ]*\[([^\]]+)\]/g)]?.[0] ?? [];
28
+ if (vals) {
29
+ return vals
30
+ .split(',')
31
+ .map((val, i) => {
32
+ val = val.trim();
33
+ if (!val || val === 'null' || val === 'undefined')
34
+ return '';
35
+ if (i === 0) {
36
+ return `${prop}: ${val};`;
37
+ }
38
+ return `@media (min-width: ${exports.breakPoints[i - 1]}) { ${prop}: ${val}; }`;
39
+ })
40
+ .join('\n');
41
+ }
42
+ return l;
43
+ })
44
+ .join('\n');
45
+ }
46
+ exports.shorthandPropsMap = {
47
+ ai: 'align-items',
48
+ b: 'border',
49
+ br: 'border-radius',
50
+ bg: 'background',
51
+ c: 'color',
52
+ d: 'display',
53
+ f: 'flex',
54
+ fd: 'flex-direction',
55
+ i: 'inset',
56
+ h: 'height',
57
+ jc: 'justify-content',
58
+ m: 'margin',
59
+ ml: 'margin-left',
60
+ mr: 'margin-right',
61
+ mt: 'margin-top',
62
+ mb: 'margin-bottom',
63
+ maxW: 'max-width',
64
+ minW: 'min-width',
65
+ p: 'padding',
66
+ pl: 'padding-left',
67
+ pr: 'padding-right',
68
+ pt: 'padding-top',
69
+ pb: 'padding-bottom',
70
+ pos: 'position',
71
+ ta: 'text-align',
72
+ w: 'width',
73
+ z: 'z-index',
74
+ };
75
+ exports.shorthandProps = [...Object.keys(exports.shorthandPropsMap), 'mx', 'my', 'px', 'py'];
76
+ /** Expand short-hand css props to full */
77
+ function expandProps(css) {
78
+ css = '\n' + css; // inject a newline to make the regex easier
79
+ // Handle 'mx', 'my', 'px', 'py'
80
+ css = css
81
+ .replace(/([mp])x:([^;]*)/g, '$1l:$2;\n$1r:$2')
82
+ .replace(/([mp])y:([^;]*);/g, '$1t:$2;\n$1b:$2');
83
+ Object.entries(exports.shorthandPropsMap).forEach(([k, v]) => {
84
+ css = css.replace(new RegExp(`([ \n\t;])${k}:`, 'g'), `$1${v}:`);
85
+ });
86
+ return css.trim();
87
+ }
88
+ /** Find @keyframes, @media, @container queries in css **/
89
+ function findQueries(css) {
90
+ const queries = [];
91
+ for (const m of css.matchAll(/[@&]/gm)) {
92
+ let query = '';
93
+ let bodyStart = 0;
94
+ let openCount = 0;
95
+ for (let i = m.index; i < css.length; i++) {
96
+ if (css[i] === '{') {
97
+ if (openCount === 0) {
98
+ query = css.slice(m.index, i).trim();
99
+ bodyStart = i + 1;
100
+ }
101
+ openCount++;
102
+ }
103
+ else if (css[i] === '}') {
104
+ openCount--;
105
+ if (openCount === 0) {
106
+ queries.push({
107
+ start: m.index,
108
+ end: i + 1,
109
+ query,
110
+ outerBody: css.slice(m.index, i + 1),
111
+ innerBody: css.slice(bodyStart, i),
112
+ });
113
+ break;
114
+ }
115
+ }
116
+ }
117
+ if (openCount !== 0)
118
+ console.error(`${query} not closed: "${css}"`);
119
+ }
120
+ return queries;
121
+ }
122
+ /** Trims whitespace for every line */
123
+ function trim(css) {
124
+ return css
125
+ .split('\n')
126
+ .map(l => l.trim())
127
+ .filter(l => l)
128
+ .join('\n');
129
+ }
130
+ /**
131
+ * Assemble a string from a template string array and a list of placeholders.
132
+ *
133
+ * - If the first argument is a string, it is returned as is.
134
+ *
135
+ * i.e.
136
+ * myFoo(...props: TemplateStringProps) => {
137
+ * const inputStr = t2s(...props);
138
+ * }
139
+ * myFoo`hello ${name}` => 'hello world'
140
+ * myFoo(`hello ${name}`) => 'hello world'
141
+ */
142
+ function t2s(...tsp) {
143
+ const [s, ...p] = tsp;
144
+ return typeof s === 'string' ? s : s.map((s, i) => s + (p?.[i] ?? '')).join('');
145
+ }
146
+ exports.t2s = t2s;
147
+ /**
148
+ * Injects css to the page
149
+ *
150
+ * - Batches adds for performance
151
+ *
152
+ * @param css - css to be injected
153
+ * @returns void
154
+ */
155
+ function addCss(css) {
156
+ addCss.que.add(css);
157
+ setTimeout(() => {
158
+ const css = [...addCss.que].join('\n');
159
+ if (css) {
160
+ addCss.que.clear();
161
+ const s = document.createElement('style');
162
+ s.id = `u${addCss.count++}`;
163
+ s.innerHTML = css;
164
+ document.head.appendChild(s);
165
+ }
166
+ }, 0);
167
+ }
168
+ exports.addCss = addCss;
169
+ addCss.que = new Set();
170
+ addCss.count = 0;
171
+ /**
172
+ * Injects css and creates unique class names
173
+ *
174
+ * - Skips if already added
175
+ *
176
+ * @param css - string or template string, to be injected
177
+ * @returns a unique class name
178
+ */
179
+ function createClass(...p) {
180
+ let css = t2s(...p);
181
+ if (!css)
182
+ return '';
183
+ let className = createClass.history.get(css);
184
+ if (!className) {
185
+ className = 's' + createClass.count++;
186
+ createClass.history.set(css, className);
187
+ css = deleteComments(css);
188
+ css = expandProps(css);
189
+ css = expandArrayValues(css);
190
+ const qs = findQueries(css);
191
+ for (const q of qs.reverse()) {
192
+ css = css.slice(0, q.start) + css.slice(q.end);
193
+ }
194
+ css = `.${className}{\n${css}\n}\n`;
195
+ css += qs
196
+ .map(q => {
197
+ if (q.query.startsWith('&')) {
198
+ return `.${className}${q.query.slice(1)}{\n${q.innerBody}\n}`;
199
+ }
200
+ if (q.query.startsWith('@keyframes')) {
201
+ return q.outerBody;
202
+ }
203
+ return `${q.query}{\n.${className}{${q.innerBody}\n}\n}`;
204
+ })
205
+ .join('\n');
206
+ css = trim(css) + '\n\n';
207
+ addCss(css);
208
+ }
209
+ return className;
210
+ }
211
+ exports.createClass = createClass;
212
+ createClass.count = 0;
213
+ createClass.history = new Map();
214
+ //# sourceMappingURL=core.js.map
package/cjs/core.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"core.js","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"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"}
package/cjs/core.ts ADDED
@@ -0,0 +1,290 @@
1
+ /** Breakpoints like chakra */
2
+ export const breakPoints = ['30em', '48em', '62em', '80em', '96em']
3
+
4
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
5
+ type allowableAny = any
6
+
7
+ /** Joins class names and filters out blanks */
8
+ export function classJoin(...classes: allowableAny[]) {
9
+ return classes.filter(c => c && typeof c === 'string').join(' ')
10
+ }
11
+
12
+ /** delete css comments **/
13
+ function deleteComments(css: string) {
14
+ return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm, '')
15
+ }
16
+
17
+ /**
18
+ * Expands array values into media queries
19
+ *
20
+ * Inspired by https://chakra-ui.com/docs/styled-system/responsive-styles
21
+ */
22
+ function expandArrayValues(css: string) {
23
+ if (!css.includes('[')) return css
24
+ return css
25
+ .split('\n')
26
+ .map(l => {
27
+ // eslint-disable-next-line no-useless-escape
28
+ const [, prop, vals] = [...l.matchAll(/([A-Za-z\-]*):[ ]*\[([^\]]+)\]/g)]?.[0] ?? []
29
+ if (vals) {
30
+ return vals
31
+ .split(',')
32
+ .map((val, i) => {
33
+ val = val.trim()
34
+ if (!val || val === 'null' || val === 'undefined') return ''
35
+ if (i === 0) {
36
+ return `${prop}: ${val};`
37
+ }
38
+ return `@media (min-width: ${breakPoints[i - 1]}) { ${prop}: ${val}; }`
39
+ })
40
+ .join('\n')
41
+ }
42
+ return l
43
+ })
44
+ .join('\n')
45
+ }
46
+
47
+ export interface ShorthandProps {
48
+ /** shorthand for css:align-items */
49
+ ai?: string
50
+ /** shorthand for css:border */
51
+ b?: string | number
52
+ /** shorthand for css:border-radius */
53
+ br?: string | number
54
+ /** shorthand for css:background */
55
+ bg?: string
56
+ /** shorthand for css:color */
57
+ c?: string
58
+ /** shorthand for css:display */
59
+ d?: string
60
+ /** shorthand for css:flex */
61
+ f?: string
62
+ /** shorthand for css:flex-direction */
63
+ fd?: string
64
+ /** shorthand for css:height */
65
+ h?: number | string
66
+ /** shorthand for css:inset */
67
+ i?: number | string
68
+ /** shorthand for css:justify-content */
69
+ jc?: string
70
+ /** shorthand for css:margin */
71
+ m?: number | string
72
+ /** shorthand for css:margin-left */
73
+ ml?: number | string
74
+ /** shorthand for css:margin-right */
75
+ mr?: number | string
76
+ /** shorthand for css:margin-top */
77
+ mt?: number | string
78
+ /** shorthand for css:margin-bottom */
79
+ mb?: number | string
80
+ /** shorthand for css:margin-top & margin-bottom */
81
+ my?: number | string
82
+ /** shorthand for css:margin-left & margin-right */
83
+ mx?: number | string
84
+ /** shorthand for css:max-width */
85
+ maxW?: number | string
86
+ /** shorthand for css:min-width */
87
+ minW?: number | string
88
+ /** shorthand for css:padding */
89
+ p?: number | string
90
+ /** shorthand for css:padding-left */
91
+ pl?: number | string
92
+ /** shorthand for css:padding-right */
93
+ pr?: number | string
94
+ /** shorthand for css:padding-top */
95
+ pt?: number | string
96
+ /** shorthand for css:padding-bottom */
97
+ pb?: number | string
98
+ /** shorthand for css:padding-top & padding-bottom */
99
+ py?: number | string
100
+ /** shorthand for css:padding-left & padding-right */
101
+ px?: number | string
102
+ /** shorthand for css:position */
103
+ pos?: number | string
104
+ /** shorthand for css:text-align */
105
+ ta?: string
106
+ /** shorthand for css:width */
107
+ w?: number | string
108
+ /** shorthand for css:z-index */
109
+ z?: number | string
110
+ }
111
+ export const shorthandPropsMap: Record<
112
+ keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>,
113
+ string
114
+ > = {
115
+ ai: 'align-items',
116
+ b: 'border',
117
+ br: 'border-radius',
118
+ bg: 'background',
119
+ c: 'color',
120
+ d: 'display',
121
+ f: 'flex',
122
+ fd: 'flex-direction',
123
+ i: 'inset',
124
+ h: 'height',
125
+ jc: 'justify-content',
126
+ m: 'margin',
127
+ ml: 'margin-left',
128
+ mr: 'margin-right',
129
+ mt: 'margin-top',
130
+ mb: 'margin-bottom',
131
+ maxW: 'max-width',
132
+ minW: 'min-width',
133
+ p: 'padding',
134
+ pl: 'padding-left',
135
+ pr: 'padding-right',
136
+ pt: 'padding-top',
137
+ pb: 'padding-bottom',
138
+ pos: 'position',
139
+ ta: 'text-align',
140
+ w: 'width',
141
+ z: 'z-index',
142
+ }
143
+ export const shorthandProps = [...Object.keys(shorthandPropsMap), 'mx', 'my', 'px', 'py']
144
+
145
+ /** Expand short-hand css props to full */
146
+ function expandProps(css: string) {
147
+ css = '\n' + css // inject a newline to make the regex easier
148
+ // Handle 'mx', 'my', 'px', 'py'
149
+ css = css
150
+ .replace(/([mp])x:([^;]*)/g, '$1l:$2;\n$1r:$2')
151
+ .replace(/([mp])y:([^;]*);/g, '$1t:$2;\n$1b:$2')
152
+ Object.entries(shorthandPropsMap).forEach(([k, v]) => {
153
+ css = css.replace(new RegExp(`([ \n\t;])${k}:`, 'g'), `$1${v}:`)
154
+ })
155
+ return css.trim()
156
+ }
157
+
158
+ /** Find @keyframes, @media, @container queries in css **/
159
+ function findQueries(css: string) {
160
+ const queries = []
161
+ for (const m of css.matchAll(/[@&]/gm)) {
162
+ let query = ''
163
+ let bodyStart = 0
164
+ let openCount = 0
165
+ for (let i = m.index!; i < css.length; i++) {
166
+ if (css[i] === '{') {
167
+ if (openCount === 0) {
168
+ query = css.slice(m.index, i).trim()
169
+ bodyStart = i + 1
170
+ }
171
+ openCount++
172
+ } else if (css[i] === '}') {
173
+ openCount--
174
+ if (openCount === 0) {
175
+ queries.push({
176
+ start: m.index,
177
+ end: i + 1,
178
+ query,
179
+ outerBody: css.slice(m.index, i + 1),
180
+ innerBody: css.slice(bodyStart, i),
181
+ })
182
+ break
183
+ }
184
+ }
185
+ }
186
+ if (openCount !== 0) console.error(`${query} not closed: "${css}"`)
187
+ }
188
+ return queries
189
+ }
190
+
191
+ /** Trims whitespace for every line */
192
+ function trim(css: string) {
193
+ return css
194
+ .split('\n')
195
+ .map(l => l.trim())
196
+ .filter(l => l)
197
+ .join('\n')
198
+ }
199
+
200
+ /**
201
+ * Assemble a string from a template string array and a list of placeholders.
202
+ *
203
+ * - If the first argument is a string, it is returned as is.
204
+ *
205
+ * i.e.
206
+ * myFoo(...props: TemplateStringProps) => {
207
+ * const inputStr = t2s(...props);
208
+ * }
209
+ * myFoo`hello ${name}` => 'hello world'
210
+ * myFoo(`hello ${name}`) => 'hello world'
211
+ */
212
+ export function t2s(...tsp: TemplateStringProps) {
213
+ const [s, ...p] = tsp
214
+ return typeof s === 'string' ? s : s.map((s, i) => s + (p?.[i] ?? '')).join('')
215
+ }
216
+ export type TemplateStringProps = [
217
+ strings: TemplateStringsArray | string,
218
+ ...placeHolders: string[]
219
+ ]
220
+
221
+ /**
222
+ * Injects css to the page
223
+ *
224
+ * - Batches adds for performance
225
+ *
226
+ * @param css - css to be injected
227
+ * @returns void
228
+ */
229
+ export function addCss(css: string) {
230
+ addCss.que.add(css)
231
+ setTimeout(() => {
232
+ const css = [...addCss.que].join('\n')
233
+ if (css) {
234
+ addCss.que.clear()
235
+ const s = document.createElement('style')
236
+ s.id = `u${addCss.count++}`
237
+ s.innerHTML = css
238
+ document.head.appendChild(s)
239
+ }
240
+ }, 0)
241
+ }
242
+ addCss.que = new Set<string>()
243
+ addCss.count = 0
244
+
245
+ /**
246
+ * Injects css and creates unique class names
247
+ *
248
+ * - Skips if already added
249
+ *
250
+ * @param css - string or template string, to be injected
251
+ * @returns a unique class name
252
+ */
253
+ export function createClass(...p: TemplateStringProps) {
254
+ let css = t2s(...p)
255
+ if (!css) return ''
256
+ let className = createClass.history.get(css)
257
+ if (!className) {
258
+ className = 's' + createClass.count++
259
+ createClass.history.set(css, className)
260
+
261
+ css = deleteComments(css)
262
+ css = expandProps(css)
263
+ css = expandArrayValues(css)
264
+ const qs = findQueries(css)
265
+
266
+ for (const q of qs.reverse()) {
267
+ css = css.slice(0, q.start) + css.slice(q.end)
268
+ }
269
+
270
+ css = `.${className}{\n${css}\n}\n`
271
+ css += qs
272
+ .map(q => {
273
+ if (q.query.startsWith('&')) {
274
+ return `.${className}${q.query.slice(1)}{\n${q.innerBody}\n}`
275
+ }
276
+ if (q.query.startsWith('@keyframes')) {
277
+ return q.outerBody
278
+ }
279
+ return `${q.query}{\n.${className}{${q.innerBody}\n}\n}`
280
+ })
281
+ .join('\n')
282
+
283
+ css = trim(css) + '\n\n'
284
+
285
+ addCss(css)
286
+ }
287
+ return className
288
+ }
289
+ createClass.count = 0
290
+ createClass.history = new Map<string, string>()
package/cjs/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './core.js';
2
+ export { createClass as css } from './core.js';
package/cjs/index.js ADDED
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.css = void 0;
18
+ __exportStar(require("./core.js"), exports);
19
+ var core_js_1 = require("./core.js");
20
+ Object.defineProperty(exports, "css", { enumerable: true, get: function () { return core_js_1.createClass; } });
21
+ //# sourceMappingURL=index.js.map
package/cjs/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,4CAAyB;AACzB,qCAA4C;AAApC,8FAAA,WAAW,OAAO"}
package/cjs/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './core.js'
2
+ export {createClass as css} from './core.js'
package/esm/core.d.ts ADDED
@@ -0,0 +1,115 @@
1
+ /** Breakpoints like chakra */
2
+ export declare const breakPoints: string[];
3
+ type allowableAny = any;
4
+ /** Joins class names and filters out blanks */
5
+ export declare function classJoin(...classes: allowableAny[]): string;
6
+ export interface ShorthandProps {
7
+ /** shorthand for css:align-items */
8
+ ai?: string;
9
+ /** shorthand for css:border */
10
+ b?: string | number;
11
+ /** shorthand for css:border-radius */
12
+ br?: string | number;
13
+ /** shorthand for css:background */
14
+ bg?: string;
15
+ /** shorthand for css:color */
16
+ c?: string;
17
+ /** shorthand for css:display */
18
+ d?: string;
19
+ /** shorthand for css:flex */
20
+ f?: string;
21
+ /** shorthand for css:flex-direction */
22
+ fd?: string;
23
+ /** shorthand for css:height */
24
+ h?: number | string;
25
+ /** shorthand for css:inset */
26
+ i?: number | string;
27
+ /** shorthand for css:justify-content */
28
+ jc?: string;
29
+ /** shorthand for css:margin */
30
+ m?: number | string;
31
+ /** shorthand for css:margin-left */
32
+ ml?: number | string;
33
+ /** shorthand for css:margin-right */
34
+ mr?: number | string;
35
+ /** shorthand for css:margin-top */
36
+ mt?: number | string;
37
+ /** shorthand for css:margin-bottom */
38
+ mb?: number | string;
39
+ /** shorthand for css:margin-top & margin-bottom */
40
+ my?: number | string;
41
+ /** shorthand for css:margin-left & margin-right */
42
+ mx?: number | string;
43
+ /** shorthand for css:max-width */
44
+ maxW?: number | string;
45
+ /** shorthand for css:min-width */
46
+ minW?: number | string;
47
+ /** shorthand for css:padding */
48
+ p?: number | string;
49
+ /** shorthand for css:padding-left */
50
+ pl?: number | string;
51
+ /** shorthand for css:padding-right */
52
+ pr?: number | string;
53
+ /** shorthand for css:padding-top */
54
+ pt?: number | string;
55
+ /** shorthand for css:padding-bottom */
56
+ pb?: number | string;
57
+ /** shorthand for css:padding-top & padding-bottom */
58
+ py?: number | string;
59
+ /** shorthand for css:padding-left & padding-right */
60
+ px?: number | string;
61
+ /** shorthand for css:position */
62
+ pos?: number | string;
63
+ /** shorthand for css:text-align */
64
+ ta?: string;
65
+ /** shorthand for css:width */
66
+ w?: number | string;
67
+ /** shorthand for css:z-index */
68
+ z?: number | string;
69
+ }
70
+ export declare const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string>;
71
+ export declare const shorthandProps: string[];
72
+ /**
73
+ * Assemble a string from a template string array and a list of placeholders.
74
+ *
75
+ * - If the first argument is a string, it is returned as is.
76
+ *
77
+ * i.e.
78
+ * myFoo(...props: TemplateStringProps) => {
79
+ * const inputStr = t2s(...props);
80
+ * }
81
+ * myFoo`hello ${name}` => 'hello world'
82
+ * myFoo(`hello ${name}`) => 'hello world'
83
+ */
84
+ export declare function t2s(...tsp: TemplateStringProps): string;
85
+ export type TemplateStringProps = [
86
+ strings: TemplateStringsArray | string,
87
+ ...placeHolders: string[]
88
+ ];
89
+ /**
90
+ * Injects css to the page
91
+ *
92
+ * - Batches adds for performance
93
+ *
94
+ * @param css - css to be injected
95
+ * @returns void
96
+ */
97
+ export declare function addCss(css: string): void;
98
+ export declare namespace addCss {
99
+ var que: Set<string>;
100
+ var count: number;
101
+ }
102
+ /**
103
+ * Injects css and creates unique class names
104
+ *
105
+ * - Skips if already added
106
+ *
107
+ * @param css - string or template string, to be injected
108
+ * @returns a unique class name
109
+ */
110
+ export declare function createClass(...p: TemplateStringProps): string;
111
+ export declare namespace createClass {
112
+ var count: number;
113
+ var history: Map<string, string>;
114
+ }
115
+ export {};
package/esm/core.js ADDED
@@ -0,0 +1,207 @@
1
+ /** Breakpoints like chakra */
2
+ export const breakPoints = ['30em', '48em', '62em', '80em', '96em'];
3
+ /** Joins class names and filters out blanks */
4
+ export function classJoin(...classes) {
5
+ return classes.filter(c => c && typeof c === 'string').join(' ');
6
+ }
7
+ /** delete css comments **/
8
+ function deleteComments(css) {
9
+ return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm, '');
10
+ }
11
+ /**
12
+ * Expands array values into media queries
13
+ *
14
+ * Inspired by https://chakra-ui.com/docs/styled-system/responsive-styles
15
+ */
16
+ function expandArrayValues(css) {
17
+ if (!css.includes('['))
18
+ return css;
19
+ return css
20
+ .split('\n')
21
+ .map(l => {
22
+ // eslint-disable-next-line no-useless-escape
23
+ const [, prop, vals] = [...l.matchAll(/([A-Za-z\-]*):[ ]*\[([^\]]+)\]/g)]?.[0] ?? [];
24
+ if (vals) {
25
+ return vals
26
+ .split(',')
27
+ .map((val, i) => {
28
+ val = val.trim();
29
+ if (!val || val === 'null' || val === 'undefined')
30
+ return '';
31
+ if (i === 0) {
32
+ return `${prop}: ${val};`;
33
+ }
34
+ return `@media (min-width: ${breakPoints[i - 1]}) { ${prop}: ${val}; }`;
35
+ })
36
+ .join('\n');
37
+ }
38
+ return l;
39
+ })
40
+ .join('\n');
41
+ }
42
+ export const shorthandPropsMap = {
43
+ ai: 'align-items',
44
+ b: 'border',
45
+ br: 'border-radius',
46
+ bg: 'background',
47
+ c: 'color',
48
+ d: 'display',
49
+ f: 'flex',
50
+ fd: 'flex-direction',
51
+ i: 'inset',
52
+ h: 'height',
53
+ jc: 'justify-content',
54
+ m: 'margin',
55
+ ml: 'margin-left',
56
+ mr: 'margin-right',
57
+ mt: 'margin-top',
58
+ mb: 'margin-bottom',
59
+ maxW: 'max-width',
60
+ minW: 'min-width',
61
+ p: 'padding',
62
+ pl: 'padding-left',
63
+ pr: 'padding-right',
64
+ pt: 'padding-top',
65
+ pb: 'padding-bottom',
66
+ pos: 'position',
67
+ ta: 'text-align',
68
+ w: 'width',
69
+ z: 'z-index',
70
+ };
71
+ export const shorthandProps = [...Object.keys(shorthandPropsMap), 'mx', 'my', 'px', 'py'];
72
+ /** Expand short-hand css props to full */
73
+ function expandProps(css) {
74
+ css = '\n' + css; // inject a newline to make the regex easier
75
+ // Handle 'mx', 'my', 'px', 'py'
76
+ css = css
77
+ .replace(/([mp])x:([^;]*)/g, '$1l:$2;\n$1r:$2')
78
+ .replace(/([mp])y:([^;]*);/g, '$1t:$2;\n$1b:$2');
79
+ Object.entries(shorthandPropsMap).forEach(([k, v]) => {
80
+ css = css.replace(new RegExp(`([ \n\t;])${k}:`, 'g'), `$1${v}:`);
81
+ });
82
+ return css.trim();
83
+ }
84
+ /** Find @keyframes, @media, @container queries in css **/
85
+ function findQueries(css) {
86
+ const queries = [];
87
+ for (const m of css.matchAll(/[@&]/gm)) {
88
+ let query = '';
89
+ let bodyStart = 0;
90
+ let openCount = 0;
91
+ for (let i = m.index; i < css.length; i++) {
92
+ if (css[i] === '{') {
93
+ if (openCount === 0) {
94
+ query = css.slice(m.index, i).trim();
95
+ bodyStart = i + 1;
96
+ }
97
+ openCount++;
98
+ }
99
+ else if (css[i] === '}') {
100
+ openCount--;
101
+ if (openCount === 0) {
102
+ queries.push({
103
+ start: m.index,
104
+ end: i + 1,
105
+ query,
106
+ outerBody: css.slice(m.index, i + 1),
107
+ innerBody: css.slice(bodyStart, i),
108
+ });
109
+ break;
110
+ }
111
+ }
112
+ }
113
+ if (openCount !== 0)
114
+ console.error(`${query} not closed: "${css}"`);
115
+ }
116
+ return queries;
117
+ }
118
+ /** Trims whitespace for every line */
119
+ function trim(css) {
120
+ return css
121
+ .split('\n')
122
+ .map(l => l.trim())
123
+ .filter(l => l)
124
+ .join('\n');
125
+ }
126
+ /**
127
+ * Assemble a string from a template string array and a list of placeholders.
128
+ *
129
+ * - If the first argument is a string, it is returned as is.
130
+ *
131
+ * i.e.
132
+ * myFoo(...props: TemplateStringProps) => {
133
+ * const inputStr = t2s(...props);
134
+ * }
135
+ * myFoo`hello ${name}` => 'hello world'
136
+ * myFoo(`hello ${name}`) => 'hello world'
137
+ */
138
+ export function t2s(...tsp) {
139
+ const [s, ...p] = tsp;
140
+ return typeof s === 'string' ? s : s.map((s, i) => s + (p?.[i] ?? '')).join('');
141
+ }
142
+ /**
143
+ * Injects css to the page
144
+ *
145
+ * - Batches adds for performance
146
+ *
147
+ * @param css - css to be injected
148
+ * @returns void
149
+ */
150
+ export function addCss(css) {
151
+ addCss.que.add(css);
152
+ setTimeout(() => {
153
+ const css = [...addCss.que].join('\n');
154
+ if (css) {
155
+ addCss.que.clear();
156
+ const s = document.createElement('style');
157
+ s.id = `u${addCss.count++}`;
158
+ s.innerHTML = css;
159
+ document.head.appendChild(s);
160
+ }
161
+ }, 0);
162
+ }
163
+ addCss.que = new Set();
164
+ addCss.count = 0;
165
+ /**
166
+ * Injects css and creates unique class names
167
+ *
168
+ * - Skips if already added
169
+ *
170
+ * @param css - string or template string, to be injected
171
+ * @returns a unique class name
172
+ */
173
+ export function createClass(...p) {
174
+ let css = t2s(...p);
175
+ if (!css)
176
+ return '';
177
+ let className = createClass.history.get(css);
178
+ if (!className) {
179
+ className = 's' + createClass.count++;
180
+ createClass.history.set(css, className);
181
+ css = deleteComments(css);
182
+ css = expandProps(css);
183
+ css = expandArrayValues(css);
184
+ const qs = findQueries(css);
185
+ for (const q of qs.reverse()) {
186
+ css = css.slice(0, q.start) + css.slice(q.end);
187
+ }
188
+ css = `.${className}{\n${css}\n}\n`;
189
+ css += qs
190
+ .map(q => {
191
+ if (q.query.startsWith('&')) {
192
+ return `.${className}${q.query.slice(1)}{\n${q.innerBody}\n}`;
193
+ }
194
+ if (q.query.startsWith('@keyframes')) {
195
+ return q.outerBody;
196
+ }
197
+ return `${q.query}{\n.${className}{${q.innerBody}\n}\n}`;
198
+ })
199
+ .join('\n');
200
+ css = trim(css) + '\n\n';
201
+ addCss(css);
202
+ }
203
+ return className;
204
+ }
205
+ createClass.count = 0;
206
+ createClass.history = new Map();
207
+ //# sourceMappingURL=core.js.map
package/esm/core.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"core.js","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAKnE,+CAA+C;AAC/C,MAAM,UAAU,SAAS,CAAC,GAAG,OAAuB;IAClD,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAClE,CAAC;AAED,2BAA2B;AAC3B,SAAS,cAAc,CAAC,GAAW;IACjC,OAAO,GAAG,CAAC,OAAO,CAAC,+BAA+B,EAAE,EAAE,CAAC,CAAA;AACzD,CAAC;AAED;;;;GAIG;AACH,SAAS,iBAAiB,CAAC,GAAW;IACpC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC;QAAE,OAAO,GAAG,CAAA;IAClC,OAAO,GAAG;SACP,KAAK,CAAC,IAAI,CAAC;SACX,GAAG,CAAC,CAAC,CAAC,EAAE;QACP,6CAA6C;QAC7C,MAAM,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,iCAAiC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA;QACpF,IAAI,IAAI,EAAE;YACR,OAAO,IAAI;iBACR,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;gBACd,GAAG,GAAG,GAAG,CAAC,IAAI,EAAE,CAAA;gBAChB,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK,MAAM,IAAI,GAAG,KAAK,WAAW;oBAAE,OAAO,EAAE,CAAA;gBAC5D,IAAI,CAAC,KAAK,CAAC,EAAE;oBACX,OAAO,GAAG,IAAI,KAAK,GAAG,GAAG,CAAA;iBAC1B;gBACD,OAAO,sBAAsB,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,IAAI,KAAK,GAAG,KAAK,CAAA;YACzE,CAAC,CAAC;iBACD,IAAI,CAAC,IAAI,CAAC,CAAA;SACd;QACD,OAAO,CAAC,CAAA;IACV,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,CAAC;AAkED,MAAM,CAAC,MAAM,iBAAiB,GAG1B;IACF,EAAE,EAAE,aAAa;IACjB,CAAC,EAAE,QAAQ;IACX,EAAE,EAAE,eAAe;IACnB,EAAE,EAAE,YAAY;IAChB,CAAC,EAAE,OAAO;IACV,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,MAAM;IACT,EAAE,EAAE,gBAAgB;IACpB,CAAC,EAAE,OAAO;IACV,CAAC,EAAE,QAAQ;IACX,EAAE,EAAE,iBAAiB;IACrB,CAAC,EAAE,QAAQ;IACX,EAAE,EAAE,aAAa;IACjB,EAAE,EAAE,cAAc;IAClB,EAAE,EAAE,YAAY;IAChB,EAAE,EAAE,eAAe;IACnB,IAAI,EAAE,WAAW;IACjB,IAAI,EAAE,WAAW;IACjB,CAAC,EAAE,SAAS;IACZ,EAAE,EAAE,cAAc;IAClB,EAAE,EAAE,eAAe;IACnB,EAAE,EAAE,aAAa;IACjB,EAAE,EAAE,gBAAgB;IACpB,GAAG,EAAE,UAAU;IACf,EAAE,EAAE,YAAY;IAChB,CAAC,EAAE,OAAO;IACV,CAAC,EAAE,SAAS;CACb,CAAA;AACD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA;AAEzF,0CAA0C;AAC1C,SAAS,WAAW,CAAC,GAAW;IAC9B,GAAG,GAAG,IAAI,GAAG,GAAG,CAAA,CAAC,4CAA4C;IAC7D,gCAAgC;IAChC,GAAG,GAAG,GAAG;SACN,OAAO,CAAC,kBAAkB,EAAE,iBAAiB,CAAC;SAC9C,OAAO,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAA;IAClD,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE;QACnD,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;IAClE,CAAC,CAAC,CAAA;IACF,OAAO,GAAG,CAAC,IAAI,EAAE,CAAA;AACnB,CAAC;AAED,0DAA0D;AAC1D,SAAS,WAAW,CAAC,GAAW;IAC9B,MAAM,OAAO,GAAG,EAAE,CAAA;IAClB,KAAK,MAAM,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QACtC,IAAI,KAAK,GAAG,EAAE,CAAA;QACd,IAAI,SAAS,GAAG,CAAC,CAAA;QACjB,IAAI,SAAS,GAAG,CAAC,CAAA;QACjB,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC,KAAM,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC1C,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;gBAClB,IAAI,SAAS,KAAK,CAAC,EAAE;oBACnB,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA;oBACpC,SAAS,GAAG,CAAC,GAAG,CAAC,CAAA;iBAClB;gBACD,SAAS,EAAE,CAAA;aACZ;iBAAM,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;gBACzB,SAAS,EAAE,CAAA;gBACX,IAAI,SAAS,KAAK,CAAC,EAAE;oBACnB,OAAO,CAAC,IAAI,CAAC;wBACX,KAAK,EAAE,CAAC,CAAC,KAAK;wBACd,GAAG,EAAE,CAAC,GAAG,CAAC;wBACV,KAAK;wBACL,SAAS,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC;wBACpC,SAAS,EAAE,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;qBACnC,CAAC,CAAA;oBACF,MAAK;iBACN;aACF;SACF;QACD,IAAI,SAAS,KAAK,CAAC;YAAE,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,iBAAiB,GAAG,GAAG,CAAC,CAAA;KACpE;IACD,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,sCAAsC;AACtC,SAAS,IAAI,CAAC,GAAW;IACvB,OAAO,GAAG;SACP,KAAK,CAAC,IAAI,CAAC;SACX,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;SAClB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SACd,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,GAAG,CAAC,GAAG,GAAwB;IAC7C,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG,CAAA;IACrB,OAAO,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjF,CAAC;AAMD;;;;;;;GAOG;AACH,MAAM,UAAU,MAAM,CAAC,GAAW;IAChC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACnB,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,GAAG,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACtC,IAAI,GAAG,EAAE;YACP,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,CAAA;YAClB,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;YACzC,CAAC,CAAC,EAAE,GAAG,IAAI,MAAM,CAAC,KAAK,EAAE,EAAE,CAAA;YAC3B,CAAC,CAAC,SAAS,GAAG,GAAG,CAAA;YACjB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;SAC7B;IACH,CAAC,EAAE,CAAC,CAAC,CAAA;AACP,CAAC;AACD,MAAM,CAAC,GAAG,GAAG,IAAI,GAAG,EAAU,CAAA;AAC9B,MAAM,CAAC,KAAK,GAAG,CAAC,CAAA;AAEhB;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CAAC,GAAG,CAAsB;IACnD,IAAI,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;IACnB,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,CAAA;IACnB,IAAI,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IAC5C,IAAI,CAAC,SAAS,EAAE;QACd,SAAS,GAAG,GAAG,GAAG,WAAW,CAAC,KAAK,EAAE,CAAA;QACrC,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAA;QAEvC,GAAG,GAAG,cAAc,CAAC,GAAG,CAAC,CAAA;QACzB,GAAG,GAAG,WAAW,CAAC,GAAG,CAAC,CAAA;QACtB,GAAG,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAA;QAC5B,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,CAAC,CAAA;QAE3B,KAAK,MAAM,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,EAAE;YAC5B,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;SAC/C;QAED,GAAG,GAAG,IAAI,SAAS,MAAM,GAAG,OAAO,CAAA;QACnC,GAAG,IAAI,EAAE;aACN,GAAG,CAAC,CAAC,CAAC,EAAE;YACP,IAAI,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;gBAC3B,OAAO,IAAI,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,KAAK,CAAA;aAC9D;YACD,IAAI,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE;gBACpC,OAAO,CAAC,CAAC,SAAS,CAAA;aACnB;YACD,OAAO,GAAG,CAAC,CAAC,KAAK,OAAO,SAAS,IAAI,CAAC,CAAC,SAAS,QAAQ,CAAA;QAC1D,CAAC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC,CAAA;QAEb,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAA;QAExB,MAAM,CAAC,GAAG,CAAC,CAAA;KACZ;IACD,OAAO,SAAS,CAAA;AAClB,CAAC;AACD,WAAW,CAAC,KAAK,GAAG,CAAC,CAAA;AACrB,WAAW,CAAC,OAAO,GAAG,IAAI,GAAG,EAAkB,CAAA"}
package/esm/core.ts ADDED
@@ -0,0 +1,290 @@
1
+ /** Breakpoints like chakra */
2
+ export const breakPoints = ['30em', '48em', '62em', '80em', '96em']
3
+
4
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
5
+ type allowableAny = any
6
+
7
+ /** Joins class names and filters out blanks */
8
+ export function classJoin(...classes: allowableAny[]) {
9
+ return classes.filter(c => c && typeof c === 'string').join(' ')
10
+ }
11
+
12
+ /** delete css comments **/
13
+ function deleteComments(css: string) {
14
+ return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm, '')
15
+ }
16
+
17
+ /**
18
+ * Expands array values into media queries
19
+ *
20
+ * Inspired by https://chakra-ui.com/docs/styled-system/responsive-styles
21
+ */
22
+ function expandArrayValues(css: string) {
23
+ if (!css.includes('[')) return css
24
+ return css
25
+ .split('\n')
26
+ .map(l => {
27
+ // eslint-disable-next-line no-useless-escape
28
+ const [, prop, vals] = [...l.matchAll(/([A-Za-z\-]*):[ ]*\[([^\]]+)\]/g)]?.[0] ?? []
29
+ if (vals) {
30
+ return vals
31
+ .split(',')
32
+ .map((val, i) => {
33
+ val = val.trim()
34
+ if (!val || val === 'null' || val === 'undefined') return ''
35
+ if (i === 0) {
36
+ return `${prop}: ${val};`
37
+ }
38
+ return `@media (min-width: ${breakPoints[i - 1]}) { ${prop}: ${val}; }`
39
+ })
40
+ .join('\n')
41
+ }
42
+ return l
43
+ })
44
+ .join('\n')
45
+ }
46
+
47
+ export interface ShorthandProps {
48
+ /** shorthand for css:align-items */
49
+ ai?: string
50
+ /** shorthand for css:border */
51
+ b?: string | number
52
+ /** shorthand for css:border-radius */
53
+ br?: string | number
54
+ /** shorthand for css:background */
55
+ bg?: string
56
+ /** shorthand for css:color */
57
+ c?: string
58
+ /** shorthand for css:display */
59
+ d?: string
60
+ /** shorthand for css:flex */
61
+ f?: string
62
+ /** shorthand for css:flex-direction */
63
+ fd?: string
64
+ /** shorthand for css:height */
65
+ h?: number | string
66
+ /** shorthand for css:inset */
67
+ i?: number | string
68
+ /** shorthand for css:justify-content */
69
+ jc?: string
70
+ /** shorthand for css:margin */
71
+ m?: number | string
72
+ /** shorthand for css:margin-left */
73
+ ml?: number | string
74
+ /** shorthand for css:margin-right */
75
+ mr?: number | string
76
+ /** shorthand for css:margin-top */
77
+ mt?: number | string
78
+ /** shorthand for css:margin-bottom */
79
+ mb?: number | string
80
+ /** shorthand for css:margin-top & margin-bottom */
81
+ my?: number | string
82
+ /** shorthand for css:margin-left & margin-right */
83
+ mx?: number | string
84
+ /** shorthand for css:max-width */
85
+ maxW?: number | string
86
+ /** shorthand for css:min-width */
87
+ minW?: number | string
88
+ /** shorthand for css:padding */
89
+ p?: number | string
90
+ /** shorthand for css:padding-left */
91
+ pl?: number | string
92
+ /** shorthand for css:padding-right */
93
+ pr?: number | string
94
+ /** shorthand for css:padding-top */
95
+ pt?: number | string
96
+ /** shorthand for css:padding-bottom */
97
+ pb?: number | string
98
+ /** shorthand for css:padding-top & padding-bottom */
99
+ py?: number | string
100
+ /** shorthand for css:padding-left & padding-right */
101
+ px?: number | string
102
+ /** shorthand for css:position */
103
+ pos?: number | string
104
+ /** shorthand for css:text-align */
105
+ ta?: string
106
+ /** shorthand for css:width */
107
+ w?: number | string
108
+ /** shorthand for css:z-index */
109
+ z?: number | string
110
+ }
111
+ export const shorthandPropsMap: Record<
112
+ keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>,
113
+ string
114
+ > = {
115
+ ai: 'align-items',
116
+ b: 'border',
117
+ br: 'border-radius',
118
+ bg: 'background',
119
+ c: 'color',
120
+ d: 'display',
121
+ f: 'flex',
122
+ fd: 'flex-direction',
123
+ i: 'inset',
124
+ h: 'height',
125
+ jc: 'justify-content',
126
+ m: 'margin',
127
+ ml: 'margin-left',
128
+ mr: 'margin-right',
129
+ mt: 'margin-top',
130
+ mb: 'margin-bottom',
131
+ maxW: 'max-width',
132
+ minW: 'min-width',
133
+ p: 'padding',
134
+ pl: 'padding-left',
135
+ pr: 'padding-right',
136
+ pt: 'padding-top',
137
+ pb: 'padding-bottom',
138
+ pos: 'position',
139
+ ta: 'text-align',
140
+ w: 'width',
141
+ z: 'z-index',
142
+ }
143
+ export const shorthandProps = [...Object.keys(shorthandPropsMap), 'mx', 'my', 'px', 'py']
144
+
145
+ /** Expand short-hand css props to full */
146
+ function expandProps(css: string) {
147
+ css = '\n' + css // inject a newline to make the regex easier
148
+ // Handle 'mx', 'my', 'px', 'py'
149
+ css = css
150
+ .replace(/([mp])x:([^;]*)/g, '$1l:$2;\n$1r:$2')
151
+ .replace(/([mp])y:([^;]*);/g, '$1t:$2;\n$1b:$2')
152
+ Object.entries(shorthandPropsMap).forEach(([k, v]) => {
153
+ css = css.replace(new RegExp(`([ \n\t;])${k}:`, 'g'), `$1${v}:`)
154
+ })
155
+ return css.trim()
156
+ }
157
+
158
+ /** Find @keyframes, @media, @container queries in css **/
159
+ function findQueries(css: string) {
160
+ const queries = []
161
+ for (const m of css.matchAll(/[@&]/gm)) {
162
+ let query = ''
163
+ let bodyStart = 0
164
+ let openCount = 0
165
+ for (let i = m.index!; i < css.length; i++) {
166
+ if (css[i] === '{') {
167
+ if (openCount === 0) {
168
+ query = css.slice(m.index, i).trim()
169
+ bodyStart = i + 1
170
+ }
171
+ openCount++
172
+ } else if (css[i] === '}') {
173
+ openCount--
174
+ if (openCount === 0) {
175
+ queries.push({
176
+ start: m.index,
177
+ end: i + 1,
178
+ query,
179
+ outerBody: css.slice(m.index, i + 1),
180
+ innerBody: css.slice(bodyStart, i),
181
+ })
182
+ break
183
+ }
184
+ }
185
+ }
186
+ if (openCount !== 0) console.error(`${query} not closed: "${css}"`)
187
+ }
188
+ return queries
189
+ }
190
+
191
+ /** Trims whitespace for every line */
192
+ function trim(css: string) {
193
+ return css
194
+ .split('\n')
195
+ .map(l => l.trim())
196
+ .filter(l => l)
197
+ .join('\n')
198
+ }
199
+
200
+ /**
201
+ * Assemble a string from a template string array and a list of placeholders.
202
+ *
203
+ * - If the first argument is a string, it is returned as is.
204
+ *
205
+ * i.e.
206
+ * myFoo(...props: TemplateStringProps) => {
207
+ * const inputStr = t2s(...props);
208
+ * }
209
+ * myFoo`hello ${name}` => 'hello world'
210
+ * myFoo(`hello ${name}`) => 'hello world'
211
+ */
212
+ export function t2s(...tsp: TemplateStringProps) {
213
+ const [s, ...p] = tsp
214
+ return typeof s === 'string' ? s : s.map((s, i) => s + (p?.[i] ?? '')).join('')
215
+ }
216
+ export type TemplateStringProps = [
217
+ strings: TemplateStringsArray | string,
218
+ ...placeHolders: string[]
219
+ ]
220
+
221
+ /**
222
+ * Injects css to the page
223
+ *
224
+ * - Batches adds for performance
225
+ *
226
+ * @param css - css to be injected
227
+ * @returns void
228
+ */
229
+ export function addCss(css: string) {
230
+ addCss.que.add(css)
231
+ setTimeout(() => {
232
+ const css = [...addCss.que].join('\n')
233
+ if (css) {
234
+ addCss.que.clear()
235
+ const s = document.createElement('style')
236
+ s.id = `u${addCss.count++}`
237
+ s.innerHTML = css
238
+ document.head.appendChild(s)
239
+ }
240
+ }, 0)
241
+ }
242
+ addCss.que = new Set<string>()
243
+ addCss.count = 0
244
+
245
+ /**
246
+ * Injects css and creates unique class names
247
+ *
248
+ * - Skips if already added
249
+ *
250
+ * @param css - string or template string, to be injected
251
+ * @returns a unique class name
252
+ */
253
+ export function createClass(...p: TemplateStringProps) {
254
+ let css = t2s(...p)
255
+ if (!css) return ''
256
+ let className = createClass.history.get(css)
257
+ if (!className) {
258
+ className = 's' + createClass.count++
259
+ createClass.history.set(css, className)
260
+
261
+ css = deleteComments(css)
262
+ css = expandProps(css)
263
+ css = expandArrayValues(css)
264
+ const qs = findQueries(css)
265
+
266
+ for (const q of qs.reverse()) {
267
+ css = css.slice(0, q.start) + css.slice(q.end)
268
+ }
269
+
270
+ css = `.${className}{\n${css}\n}\n`
271
+ css += qs
272
+ .map(q => {
273
+ if (q.query.startsWith('&')) {
274
+ return `.${className}${q.query.slice(1)}{\n${q.innerBody}\n}`
275
+ }
276
+ if (q.query.startsWith('@keyframes')) {
277
+ return q.outerBody
278
+ }
279
+ return `${q.query}{\n.${className}{${q.innerBody}\n}\n}`
280
+ })
281
+ .join('\n')
282
+
283
+ css = trim(css) + '\n\n'
284
+
285
+ addCss(css)
286
+ }
287
+ return className
288
+ }
289
+ createClass.count = 0
290
+ createClass.history = new Map<string, string>()
package/esm/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './core.js';
2
+ export { createClass as css } from './core.js';
package/esm/index.js ADDED
@@ -0,0 +1,3 @@
1
+ export * from './core.js';
2
+ export { createClass as css } from './core.js';
3
+ //# sourceMappingURL=index.js.map
package/esm/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,OAAO,EAAC,WAAW,IAAI,GAAG,EAAC,MAAM,WAAW,CAAA"}
package/esm/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './core.js'
2
+ export {createClass as css} from './core.js'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@slimr/css",
3
- "version": "2.0.3",
3
+ "version": "2.0.5",
4
4
  "author": "Brian Dombrowski",
5
5
  "license": "ISC",
6
6
  "private": false,
package/slimr-css-2.0.3.tgz ADDED
Binary file