@slimr/css 2.1.11 → 2.1.12
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.
- package/README.md +28 -8
- package/cjs/createClass.d.ts +43 -0
- package/cjs/{src/createClass.js → createClass.js} +88 -132
- package/cjs/createClass.js.map +1 -0
- package/cjs/createClass.ts +92 -211
- package/{esm/src → cjs}/index.d.ts +1 -0
- package/cjs/{src/index.js → index.js} +1 -0
- package/cjs/index.js.map +1 -0
- package/cjs/index.ts +1 -0
- package/cjs/{src/createClass.d.ts → shorthandProps.d.ts} +7 -47
- package/cjs/shorthandProps.js +51 -0
- package/cjs/shorthandProps.js.map +1 -0
- package/cjs/shorthandProps.ts +118 -0
- package/esm/createClass.d.ts +43 -0
- package/esm/{src/createClass.js → createClass.js} +85 -128
- package/esm/createClass.js.map +1 -0
- package/esm/createClass.ts +92 -211
- package/{cjs/src → esm}/index.d.ts +1 -0
- package/esm/{src/index.js → index.js} +1 -0
- package/esm/index.js.map +1 -0
- package/esm/index.ts +1 -0
- package/esm/{src/createClass.d.ts → shorthandProps.d.ts} +7 -47
- package/esm/shorthandProps.js +47 -0
- package/esm/shorthandProps.js.map +1 -0
- package/esm/shorthandProps.ts +118 -0
- package/package.json +4 -1
- package/src/createClass.ts +92 -211
- package/src/index.ts +1 -0
- package/src/shorthandProps.ts +118 -0
- package/tsconfig.json +1 -1
- package/cjs/src/createClass.js.map +0 -1
- package/cjs/src/index.js.map +0 -1
- package/esm/src/createClass.js.map +0 -1
- package/esm/src/index.js.map +0 -1
|
@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
exports.css = void 0;
|
|
18
18
|
__exportStar(require("./createClass.js"), exports);
|
|
19
|
+
__exportStar(require("./shorthandProps.js"), exports);
|
|
19
20
|
var createClass_js_1 = require("./createClass.js");
|
|
20
21
|
Object.defineProperty(exports, "css", { enumerable: true, get: function () { return createClass_js_1.createClass; } });
|
|
21
22
|
//# 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,mDAAgC;AAChC,sDAAmC;AACnC,mDAAmD;AAA3C,qGAAA,WAAW,OAAO"}
|
package/cjs/index.ts
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
/**
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
/** Joins class names and filters out blanks */
|
|
5
|
-
export declare function classJoin(...classes: allowableAny[]): string;
|
|
1
|
+
/**
|
|
2
|
+
* All the shorthand props that can be used in the css prop
|
|
3
|
+
*/
|
|
6
4
|
export interface ShorthandProps {
|
|
7
5
|
/** shorthand for css:align-items */
|
|
8
6
|
ai?: string;
|
|
@@ -67,49 +65,11 @@ export interface ShorthandProps {
|
|
|
67
65
|
/** shorthand for css:z-index */
|
|
68
66
|
z?: number | string;
|
|
69
67
|
}
|
|
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
68
|
/**
|
|
90
|
-
*
|
|
91
|
-
*
|
|
92
|
-
* - Batches adds for performance
|
|
93
|
-
*
|
|
94
|
-
* @param css - css to be injected
|
|
95
|
-
* @returns void
|
|
69
|
+
* Expand short-hand css props to full
|
|
96
70
|
*/
|
|
97
|
-
export declare function
|
|
98
|
-
export declare namespace addCss {
|
|
99
|
-
var que: Set<string>;
|
|
100
|
-
var count: number;
|
|
101
|
-
}
|
|
71
|
+
export declare function expandShorthands(css: string): string;
|
|
102
72
|
/**
|
|
103
|
-
*
|
|
104
|
-
*
|
|
105
|
-
* - Skips if already added
|
|
106
|
-
*
|
|
107
|
-
* @param css - string or template string, to be injected
|
|
108
|
-
* @returns a unique class name
|
|
73
|
+
* Map shorthand props to their full css prop
|
|
109
74
|
*/
|
|
110
|
-
export declare
|
|
111
|
-
export declare namespace createClass {
|
|
112
|
-
var count: number;
|
|
113
|
-
var history: Map<string, string>;
|
|
114
|
-
}
|
|
115
|
-
export {};
|
|
75
|
+
export declare const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string>;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.shorthandPropsMap = exports.expandShorthands = void 0;
|
|
4
|
+
/**
|
|
5
|
+
* Expand short-hand css props to full
|
|
6
|
+
*/
|
|
7
|
+
function expandShorthands(css) {
|
|
8
|
+
css = '\n' + css; // inject a newline to make the regex easier
|
|
9
|
+
// Handle 'mx', 'my', 'px', 'py'
|
|
10
|
+
css = css
|
|
11
|
+
.replace(/([mp])x:([^;]*)/g, '$1l:$2;\n$1r:$2')
|
|
12
|
+
.replace(/([mp])y:([^;]*);/g, '$1t:$2;\n$1b:$2');
|
|
13
|
+
Object.entries(exports.shorthandPropsMap).forEach(([k, v]) => {
|
|
14
|
+
css = css.replace(new RegExp(`([ \n\t;])${k}:`, 'g'), `$1${v}:`);
|
|
15
|
+
});
|
|
16
|
+
return css.trim();
|
|
17
|
+
}
|
|
18
|
+
exports.expandShorthands = expandShorthands;
|
|
19
|
+
/**
|
|
20
|
+
* Map shorthand props to their full css prop
|
|
21
|
+
*/
|
|
22
|
+
exports.shorthandPropsMap = {
|
|
23
|
+
ai: 'align-items',
|
|
24
|
+
b: 'border',
|
|
25
|
+
br: 'border-radius',
|
|
26
|
+
bg: 'background',
|
|
27
|
+
c: 'color',
|
|
28
|
+
d: 'display',
|
|
29
|
+
f: 'flex',
|
|
30
|
+
fd: 'flex-direction',
|
|
31
|
+
i: 'inset',
|
|
32
|
+
h: 'height',
|
|
33
|
+
jc: 'justify-content',
|
|
34
|
+
m: 'margin',
|
|
35
|
+
ml: 'margin-left',
|
|
36
|
+
mr: 'margin-right',
|
|
37
|
+
mt: 'margin-top',
|
|
38
|
+
mb: 'margin-bottom',
|
|
39
|
+
maxW: 'max-width',
|
|
40
|
+
minW: 'min-width',
|
|
41
|
+
p: 'padding',
|
|
42
|
+
pl: 'padding-left',
|
|
43
|
+
pr: 'padding-right',
|
|
44
|
+
pt: 'padding-top',
|
|
45
|
+
pb: 'padding-bottom',
|
|
46
|
+
pos: 'position',
|
|
47
|
+
ta: 'text-align',
|
|
48
|
+
w: 'width',
|
|
49
|
+
z: 'z-index',
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=shorthandProps.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shorthandProps.js","sourceRoot":"","sources":["../src/shorthandProps.ts"],"names":[],"mappings":";;;AAoEA;;GAEG;AACH,SAAgB,gBAAgB,CAAC,GAAW;IAC1C,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,yBAAiB,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;AAVD,4CAUC;AAED;;GAEG;AACU,QAAA,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"}
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* All the shorthand props that can be used in the css prop
|
|
3
|
+
*/
|
|
4
|
+
export interface ShorthandProps {
|
|
5
|
+
/** shorthand for css:align-items */
|
|
6
|
+
ai?: string
|
|
7
|
+
/** shorthand for css:border */
|
|
8
|
+
b?: string | number
|
|
9
|
+
/** shorthand for css:border-radius */
|
|
10
|
+
br?: string | number
|
|
11
|
+
/** shorthand for css:background */
|
|
12
|
+
bg?: string
|
|
13
|
+
/** shorthand for css:color */
|
|
14
|
+
c?: string
|
|
15
|
+
/** shorthand for css:display */
|
|
16
|
+
d?: string
|
|
17
|
+
/** shorthand for css:flex */
|
|
18
|
+
f?: string
|
|
19
|
+
/** shorthand for css:flex-direction */
|
|
20
|
+
fd?: string
|
|
21
|
+
/** shorthand for css:height */
|
|
22
|
+
h?: number | string
|
|
23
|
+
/** shorthand for css:inset */
|
|
24
|
+
i?: number | string
|
|
25
|
+
/** shorthand for css:justify-content */
|
|
26
|
+
jc?: string
|
|
27
|
+
/** shorthand for css:margin */
|
|
28
|
+
m?: number | string
|
|
29
|
+
/** shorthand for css:margin-left */
|
|
30
|
+
ml?: number | string
|
|
31
|
+
/** shorthand for css:margin-right */
|
|
32
|
+
mr?: number | string
|
|
33
|
+
/** shorthand for css:margin-top */
|
|
34
|
+
mt?: number | string
|
|
35
|
+
/** shorthand for css:margin-bottom */
|
|
36
|
+
mb?: number | string
|
|
37
|
+
/** shorthand for css:margin-top & margin-bottom */
|
|
38
|
+
my?: number | string
|
|
39
|
+
/** shorthand for css:margin-left & margin-right */
|
|
40
|
+
mx?: number | string
|
|
41
|
+
/** shorthand for css:max-width */
|
|
42
|
+
maxW?: number | string
|
|
43
|
+
/** shorthand for css:min-width */
|
|
44
|
+
minW?: number | string
|
|
45
|
+
/** shorthand for css:padding */
|
|
46
|
+
p?: number | string
|
|
47
|
+
/** shorthand for css:padding-left */
|
|
48
|
+
pl?: number | string
|
|
49
|
+
/** shorthand for css:padding-right */
|
|
50
|
+
pr?: number | string
|
|
51
|
+
/** shorthand for css:padding-top */
|
|
52
|
+
pt?: number | string
|
|
53
|
+
/** shorthand for css:padding-bottom */
|
|
54
|
+
pb?: number | string
|
|
55
|
+
/** shorthand for css:padding-top & padding-bottom */
|
|
56
|
+
py?: number | string
|
|
57
|
+
/** shorthand for css:padding-left & padding-right */
|
|
58
|
+
px?: number | string
|
|
59
|
+
/** shorthand for css:position */
|
|
60
|
+
pos?: number | string
|
|
61
|
+
/** shorthand for css:text-align */
|
|
62
|
+
ta?: string
|
|
63
|
+
/** shorthand for css:width */
|
|
64
|
+
w?: number | string
|
|
65
|
+
/** shorthand for css:z-index */
|
|
66
|
+
z?: number | string
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Expand short-hand css props to full
|
|
71
|
+
*/
|
|
72
|
+
export function expandShorthands(css: string) {
|
|
73
|
+
css = '\n' + css // inject a newline to make the regex easier
|
|
74
|
+
// Handle 'mx', 'my', 'px', 'py'
|
|
75
|
+
css = css
|
|
76
|
+
.replace(/([mp])x:([^;]*)/g, '$1l:$2;\n$1r:$2')
|
|
77
|
+
.replace(/([mp])y:([^;]*);/g, '$1t:$2;\n$1b:$2')
|
|
78
|
+
Object.entries(shorthandPropsMap).forEach(([k, v]) => {
|
|
79
|
+
css = css.replace(new RegExp(`([ \n\t;])${k}:`, 'g'), `$1${v}:`)
|
|
80
|
+
})
|
|
81
|
+
return css.trim()
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* Map shorthand props to their full css prop
|
|
86
|
+
*/
|
|
87
|
+
export const shorthandPropsMap: Record<
|
|
88
|
+
keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>,
|
|
89
|
+
string
|
|
90
|
+
> = {
|
|
91
|
+
ai: 'align-items',
|
|
92
|
+
b: 'border',
|
|
93
|
+
br: 'border-radius',
|
|
94
|
+
bg: 'background',
|
|
95
|
+
c: 'color',
|
|
96
|
+
d: 'display',
|
|
97
|
+
f: 'flex',
|
|
98
|
+
fd: 'flex-direction',
|
|
99
|
+
i: 'inset',
|
|
100
|
+
h: 'height',
|
|
101
|
+
jc: 'justify-content',
|
|
102
|
+
m: 'margin',
|
|
103
|
+
ml: 'margin-left',
|
|
104
|
+
mr: 'margin-right',
|
|
105
|
+
mt: 'margin-top',
|
|
106
|
+
mb: 'margin-bottom',
|
|
107
|
+
maxW: 'max-width',
|
|
108
|
+
minW: 'min-width',
|
|
109
|
+
p: 'padding',
|
|
110
|
+
pl: 'padding-left',
|
|
111
|
+
pr: 'padding-right',
|
|
112
|
+
pt: 'padding-top',
|
|
113
|
+
pb: 'padding-bottom',
|
|
114
|
+
pos: 'position',
|
|
115
|
+
ta: 'text-align',
|
|
116
|
+
w: 'width',
|
|
117
|
+
z: 'z-index',
|
|
118
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { T2SProps } from '@slimr/util';
|
|
2
|
+
/**
|
|
3
|
+
* Injects css to the page head
|
|
4
|
+
*
|
|
5
|
+
* - Lazy: Will not be added until the component mounts, if called from within a component
|
|
6
|
+
* - Batches dom changes for better performance
|
|
7
|
+
* - Has local cache to recall prior adds, to reduce duplicates and dom changes
|
|
8
|
+
*
|
|
9
|
+
* @param css - css to be injected
|
|
10
|
+
* @returns void
|
|
11
|
+
*/
|
|
12
|
+
export declare function addCss(css: string): void;
|
|
13
|
+
export declare namespace addCss {
|
|
14
|
+
var que: Set<string>;
|
|
15
|
+
var count: number;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Joins class names and omits falsey props
|
|
19
|
+
*
|
|
20
|
+
* @param classes - class names to be joined
|
|
21
|
+
* @returns a string of joined class names
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```typescript
|
|
25
|
+
* classJoin('a', 'b', 'c') // 'a b c'
|
|
26
|
+
* classJoin('a', 0, 'b', null, 'c') // 'a b c'
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
export declare function classJoin(...classes: (string | 0 | null | undefined)[]): string;
|
|
30
|
+
/**
|
|
31
|
+
* Injects css and creates unique class names
|
|
32
|
+
*
|
|
33
|
+
* - Skips if already added
|
|
34
|
+
*
|
|
35
|
+
* @param cssString - string or template string, to be injected
|
|
36
|
+
* @returns a unique class name
|
|
37
|
+
*/
|
|
38
|
+
export declare function createClass(...p: T2SProps): string;
|
|
39
|
+
export declare namespace createClass {
|
|
40
|
+
var breakPoints: string[];
|
|
41
|
+
var count: number;
|
|
42
|
+
var history: Map<string, string>;
|
|
43
|
+
}
|
|
@@ -1,9 +1,89 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/**
|
|
1
|
+
import { t2s } from '@slimr/util';
|
|
2
|
+
import { expandShorthands } from './shorthandProps.js';
|
|
3
|
+
/**
|
|
4
|
+
* Injects css to the page head
|
|
5
|
+
*
|
|
6
|
+
* - Lazy: Will not be added until the component mounts, if called from within a component
|
|
7
|
+
* - Batches dom changes for better performance
|
|
8
|
+
* - Has local cache to recall prior adds, to reduce duplicates and dom changes
|
|
9
|
+
*
|
|
10
|
+
* @param css - css to be injected
|
|
11
|
+
* @returns void
|
|
12
|
+
*/
|
|
13
|
+
export function addCss(css) {
|
|
14
|
+
addCss.que.add(css);
|
|
15
|
+
setTimeout(() => {
|
|
16
|
+
const css = [...addCss.que].join('\n');
|
|
17
|
+
if (css) {
|
|
18
|
+
addCss.que.clear();
|
|
19
|
+
const s = document.createElement('style');
|
|
20
|
+
s.id = `u${addCss.count++}`;
|
|
21
|
+
s.innerHTML = css;
|
|
22
|
+
document.head.appendChild(s);
|
|
23
|
+
}
|
|
24
|
+
}, 0);
|
|
25
|
+
}
|
|
26
|
+
addCss.que = new Set();
|
|
27
|
+
addCss.count = 0;
|
|
28
|
+
/**
|
|
29
|
+
* Joins class names and omits falsey props
|
|
30
|
+
*
|
|
31
|
+
* @param classes - class names to be joined
|
|
32
|
+
* @returns a string of joined class names
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* ```typescript
|
|
36
|
+
* classJoin('a', 'b', 'c') // 'a b c'
|
|
37
|
+
* classJoin('a', 0, 'b', null, 'c') // 'a b c'
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
4
40
|
export function classJoin(...classes) {
|
|
5
41
|
return classes.filter(c => c && typeof c === 'string').join(' ');
|
|
6
42
|
}
|
|
43
|
+
/**
|
|
44
|
+
* Injects css and creates unique class names
|
|
45
|
+
*
|
|
46
|
+
* - Skips if already added
|
|
47
|
+
*
|
|
48
|
+
* @param cssString - string or template string, to be injected
|
|
49
|
+
* @returns a unique class name
|
|
50
|
+
*/
|
|
51
|
+
export function createClass(...p) {
|
|
52
|
+
let css = t2s(...p);
|
|
53
|
+
if (!css)
|
|
54
|
+
return '';
|
|
55
|
+
let className = createClass.history.get(css);
|
|
56
|
+
if (!className) {
|
|
57
|
+
className = 's' + createClass.count++;
|
|
58
|
+
createClass.history.set(css, className);
|
|
59
|
+
css = deleteComments(css);
|
|
60
|
+
css = expandShorthands(css);
|
|
61
|
+
css = expandArrayValues(css);
|
|
62
|
+
const qs = findQueries(css);
|
|
63
|
+
for (const q of qs.reverse()) {
|
|
64
|
+
css = css.slice(0, q.start) + css.slice(q.end);
|
|
65
|
+
}
|
|
66
|
+
css = `.${className}{\n${css}\n}\n`;
|
|
67
|
+
css += qs
|
|
68
|
+
.map(q => {
|
|
69
|
+
if (q.query.startsWith('&')) {
|
|
70
|
+
return `.${className}${q.query.slice(1)}{\n${q.innerBody}\n}`;
|
|
71
|
+
}
|
|
72
|
+
if (q.query.startsWith('@keyframes')) {
|
|
73
|
+
return q.outerBody;
|
|
74
|
+
}
|
|
75
|
+
return `${q.query}{\n.${className}{${q.innerBody}\n}\n}`;
|
|
76
|
+
})
|
|
77
|
+
.join('\n');
|
|
78
|
+
css = trimByLine(css) + '\n\n';
|
|
79
|
+
addCss(css);
|
|
80
|
+
}
|
|
81
|
+
return className;
|
|
82
|
+
}
|
|
83
|
+
/** Breakpoints like chakra */
|
|
84
|
+
createClass.breakPoints = ['30em', '48em', '62em', '80em', '96em'];
|
|
85
|
+
createClass.count = 0;
|
|
86
|
+
createClass.history = new Map();
|
|
7
87
|
/** delete css comments **/
|
|
8
88
|
function deleteComments(css) {
|
|
9
89
|
return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm, '');
|
|
@@ -31,7 +111,7 @@ function expandArrayValues(css) {
|
|
|
31
111
|
if (i === 0) {
|
|
32
112
|
return `${prop}: ${val};`;
|
|
33
113
|
}
|
|
34
|
-
return `@media (min-width: ${breakPoints[i - 1]}) { ${prop}: ${val}; }`;
|
|
114
|
+
return `@media (min-width: ${createClass.breakPoints[i - 1]}) { ${prop}: ${val}; }`;
|
|
35
115
|
})
|
|
36
116
|
.join('\n');
|
|
37
117
|
}
|
|
@@ -39,48 +119,6 @@ function expandArrayValues(css) {
|
|
|
39
119
|
})
|
|
40
120
|
.join('\n');
|
|
41
121
|
}
|
|
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
122
|
/** Find @keyframes, @media, @container queries in css **/
|
|
85
123
|
function findQueries(css) {
|
|
86
124
|
const queries = [];
|
|
@@ -116,92 +154,11 @@ function findQueries(css) {
|
|
|
116
154
|
return queries;
|
|
117
155
|
}
|
|
118
156
|
/** Trims whitespace for every line */
|
|
119
|
-
function
|
|
157
|
+
function trimByLine(css) {
|
|
120
158
|
return css
|
|
121
159
|
.split('\n')
|
|
122
160
|
.map(l => l.trim())
|
|
123
161
|
.filter(l => l)
|
|
124
162
|
.join('\n');
|
|
125
163
|
}
|
|
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
164
|
//# sourceMappingURL=createClass.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createClass.js","sourceRoot":"","sources":["../src/createClass.ts"],"names":[],"mappings":"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"}
|