@slimr/css 2.1.74 → 2.1.78
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/cjs/addCss.js +1 -1
- package/cjs/addCss.js.map +1 -1
- package/cjs/addCss.ts +11 -11
- package/cjs/createClass.d.ts +1 -1
- package/cjs/createClass.js +30 -30
- package/cjs/createClass.js.map +1 -1
- package/cjs/createClass.ts +106 -106
- package/cjs/index.d.ts +4 -4
- package/cjs/index.js +1 -1
- package/cjs/index.js.map +1 -1
- package/cjs/index.ts +4 -4
- package/cjs/shorthandProps.d.ts +1 -1
- package/cjs/shorthandProps.js +31 -31
- package/cjs/shorthandProps.js.map +1 -1
- package/cjs/shorthandProps.ts +100 -100
- package/esm/addCss.js +2 -2
- package/esm/addCss.js.map +1 -1
- package/esm/addCss.ts +11 -11
- package/esm/createClass.d.ts +1 -1
- package/esm/createClass.js +33 -33
- package/esm/createClass.js.map +1 -1
- package/esm/createClass.ts +106 -106
- package/esm/index.d.ts +4 -4
- package/esm/index.js +4 -4
- package/esm/index.js.map +1 -1
- package/esm/index.ts +4 -4
- package/esm/shorthandProps.d.ts +1 -1
- package/esm/shorthandProps.js +31 -31
- package/esm/shorthandProps.js.map +1 -1
- package/esm/shorthandProps.ts +100 -100
- package/package.json +2 -2
- package/src/addCss.ts +11 -11
- package/src/createClass.ts +106 -106
- package/src/index.ts +4 -4
- package/src/shorthandProps.ts +100 -100
- package/tsconfig.json +5 -5
package/cjs/addCss.js
CHANGED
package/cjs/addCss.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"addCss.js","sourceRoot":"","sources":["../src/addCss.ts"],"names":[],"mappings":";;AAoBA,wBAWC;AA/BD,
|
|
1
|
+
{"version":3,"file":"addCss.js","sourceRoot":"","sources":["../src/addCss.ts"],"names":[],"mappings":";;AAoBA,wBAWC;AA/BD,sCAAyC;AAEzC;;;;;;;;;;;;;;;;;GAiBG;AACH,SAAgB,MAAM,CAAC,GAAW;IACjC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACnB,UAAU,CAAC,GAAG,EAAE;QACf,IAAI,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;YACrB,IAAA,kBAAW,EAAC;gBACX,EAAE,EAAE,IAAI,MAAM,CAAC,KAAK,EAAE,EAAE;gBACxB,SAAS,EAAE,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;aACrC,CAAC,CAAA;YACF,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,CAAA;QACnB,CAAC;IACF,CAAC,EAAE,CAAC,CAAC,CAAA;AACN,CAAC;AACD,MAAM,CAAC,GAAG,GAAG,IAAI,GAAG,EAAU,CAAA;AAC9B,MAAM,CAAC,KAAK,GAAG,CAAC,CAAA"}
|
package/cjs/addCss.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {appendStyle} from
|
|
1
|
+
import { appendStyle } from "@slimr/util"
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Injects css to the page head
|
|
@@ -19,16 +19,16 @@ import {appendStyle} from '@slimr/util'
|
|
|
19
19
|
* // ...and the queue will be executed next javascript tick
|
|
20
20
|
*/
|
|
21
21
|
export function addCss(css: string) {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
22
|
+
addCss.que.add(css)
|
|
23
|
+
setTimeout(() => {
|
|
24
|
+
if (addCss.que.size) {
|
|
25
|
+
appendStyle({
|
|
26
|
+
id: `u${addCss.count++}`,
|
|
27
|
+
innerHTML: [...addCss.que].join("\n"),
|
|
28
|
+
})
|
|
29
|
+
addCss.que.clear()
|
|
30
|
+
}
|
|
31
|
+
}, 0)
|
|
32
32
|
}
|
|
33
33
|
addCss.que = new Set<string>()
|
|
34
34
|
addCss.count = 0
|
package/cjs/createClass.d.ts
CHANGED
package/cjs/createClass.js
CHANGED
|
@@ -20,7 +20,7 @@ const shorthandProps_js_1 = require("./shorthandProps.js");
|
|
|
20
20
|
* ```
|
|
21
21
|
*/
|
|
22
22
|
function classJoin(...classes) {
|
|
23
|
-
return classes.filter(c => c && typeof c ===
|
|
23
|
+
return classes.filter((c) => c && typeof c === "string").join(" ");
|
|
24
24
|
}
|
|
25
25
|
/**
|
|
26
26
|
* Upserts and returns a unique css class for a given css string
|
|
@@ -46,10 +46,10 @@ function classJoin(...classes) {
|
|
|
46
46
|
function createClass(...p) {
|
|
47
47
|
let css = (0, util_1.t2s)(...p);
|
|
48
48
|
if (!css)
|
|
49
|
-
return
|
|
49
|
+
return "";
|
|
50
50
|
let className = createClass.history.get(css);
|
|
51
51
|
if (!className) {
|
|
52
|
-
className =
|
|
52
|
+
className = `s${createClass.count++}`;
|
|
53
53
|
createClass.history.set(css, className);
|
|
54
54
|
css = deleteComments(css);
|
|
55
55
|
css = (0, shorthandProps_js_1.expandShorthands)(css);
|
|
@@ -61,28 +61,28 @@ function createClass(...p) {
|
|
|
61
61
|
qs.reverse();
|
|
62
62
|
css = `.${className}{\n${css}\n}\n`;
|
|
63
63
|
css += qs
|
|
64
|
-
.map(q => {
|
|
65
|
-
if (q.query.startsWith(
|
|
64
|
+
.map((q) => {
|
|
65
|
+
if (q.query.startsWith("&")) {
|
|
66
66
|
return `.${className}${q.query.slice(1)}{\n${q.innerBody}\n}`;
|
|
67
67
|
}
|
|
68
|
-
if (q.query.startsWith(
|
|
68
|
+
if (q.query.startsWith("@keyframes")) {
|
|
69
69
|
return q.outerBody;
|
|
70
70
|
}
|
|
71
71
|
return `${q.query}{\n.${className}{${q.innerBody}\n}\n}`;
|
|
72
72
|
})
|
|
73
|
-
.join(
|
|
74
|
-
css = trimByLine(css)
|
|
73
|
+
.join("\n");
|
|
74
|
+
css = `${trimByLine(css)}\n\n`;
|
|
75
75
|
(0, addCss_js_1.addCss)(css);
|
|
76
76
|
}
|
|
77
77
|
return className;
|
|
78
78
|
}
|
|
79
79
|
/** Breakpoints like chakra */
|
|
80
|
-
createClass.breakPoints = [
|
|
80
|
+
createClass.breakPoints = ["30em", "48em", "62em", "80em", "96em"];
|
|
81
81
|
createClass.count = 0;
|
|
82
82
|
createClass.history = new Map();
|
|
83
83
|
/** delete css comments **/
|
|
84
84
|
function deleteComments(css) {
|
|
85
|
-
return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm,
|
|
85
|
+
return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm, "");
|
|
86
86
|
}
|
|
87
87
|
/**
|
|
88
88
|
* Expands array values into media queries
|
|
@@ -90,53 +90,53 @@ function deleteComments(css) {
|
|
|
90
90
|
* Inspired by https://chakra-ui.com/docs/styled-system/responsive-styles
|
|
91
91
|
*/
|
|
92
92
|
function expandArrayValues(css) {
|
|
93
|
-
if (!css.includes(
|
|
93
|
+
if (!css.includes("["))
|
|
94
94
|
return css;
|
|
95
95
|
return css
|
|
96
|
-
.split(
|
|
97
|
-
.map(l => {
|
|
96
|
+
.split("\n")
|
|
97
|
+
.map((l) => {
|
|
98
98
|
// eslint-disable-next-line no-useless-escape
|
|
99
|
-
const [, prop, valArrayStr] = [...l.matchAll(/([A-Za-z
|
|
99
|
+
const [, prop, valArrayStr] = [...l.matchAll(/([A-Za-z-]*):[ ]*\[([^\]]+)\]/g)]?.[0] ?? [];
|
|
100
100
|
if (valArrayStr) {
|
|
101
101
|
return (valArrayStr
|
|
102
102
|
// Replace commas inside css functions with a magic char (§) to prevent
|
|
103
103
|
// erroneous splitting
|
|
104
|
-
.replace(/\([^),]*,/g, m => m.replace(/,/g,
|
|
105
|
-
.replace(/\([^),]*,/g, m => m.replace(/,/g,
|
|
106
|
-
.replace(/\([^),]*,/g, m => m.replace(/,/g,
|
|
107
|
-
.split(
|
|
104
|
+
.replace(/\([^),]*,/g, (m) => m.replace(/,/g, "§"))
|
|
105
|
+
.replace(/\([^),]*,/g, (m) => m.replace(/,/g, "§"))
|
|
106
|
+
.replace(/\([^),]*,/g, (m) => m.replace(/,/g, "§"))
|
|
107
|
+
.split(",")
|
|
108
108
|
.map((val, i) => {
|
|
109
109
|
val = val.trim();
|
|
110
|
-
if (!val || val ===
|
|
111
|
-
return
|
|
112
|
-
val = val.replace(/§/g,
|
|
110
|
+
if (!val || val === "null" || val === "undefined")
|
|
111
|
+
return "";
|
|
112
|
+
val = val.replace(/§/g, ",");
|
|
113
113
|
if (i === 0) {
|
|
114
114
|
return `${prop}: ${val};`;
|
|
115
115
|
}
|
|
116
116
|
return `@media (min-width: ${createClass.breakPoints[i - 1]}) { ${prop}: ${val}; }`;
|
|
117
117
|
})
|
|
118
|
-
.join(
|
|
118
|
+
.join("\n"));
|
|
119
119
|
}
|
|
120
120
|
return l;
|
|
121
121
|
})
|
|
122
|
-
.join(
|
|
122
|
+
.join("\n");
|
|
123
123
|
}
|
|
124
124
|
/** Find @keyframes, @media, @container queries in css **/
|
|
125
125
|
function findQueries(css) {
|
|
126
126
|
const queries = [];
|
|
127
127
|
for (const m of css.matchAll(/[@&]/gm)) {
|
|
128
|
-
let query =
|
|
128
|
+
let query = "";
|
|
129
129
|
let bodyStart = 0;
|
|
130
130
|
let openCount = 0;
|
|
131
131
|
for (let i = m.index; i < css.length; i++) {
|
|
132
|
-
if (css[i] ===
|
|
132
|
+
if (css[i] === "{") {
|
|
133
133
|
if (openCount === 0) {
|
|
134
134
|
query = css.slice(m.index, i).trim();
|
|
135
135
|
bodyStart = i + 1;
|
|
136
136
|
}
|
|
137
137
|
openCount++;
|
|
138
138
|
}
|
|
139
|
-
else if (css[i] ===
|
|
139
|
+
else if (css[i] === "}") {
|
|
140
140
|
openCount--;
|
|
141
141
|
if (openCount === 0) {
|
|
142
142
|
queries.push({
|
|
@@ -158,9 +158,9 @@ function findQueries(css) {
|
|
|
158
158
|
/** Trims whitespace for every line */
|
|
159
159
|
function trimByLine(css) {
|
|
160
160
|
return css
|
|
161
|
-
.split(
|
|
162
|
-
.map(l => l.trim())
|
|
163
|
-
.filter(l => l)
|
|
164
|
-
.join(
|
|
161
|
+
.split("\n")
|
|
162
|
+
.map((l) => l.trim())
|
|
163
|
+
.filter((l) => l)
|
|
164
|
+
.join("\n");
|
|
165
165
|
}
|
|
166
166
|
//# sourceMappingURL=createClass.js.map
|
package/cjs/createClass.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createClass.js","sourceRoot":"","sources":["../src/createClass.ts"],"names":[],"mappings":";;AAmBA,8BAEC;AAuBD,kCAoCC;AAhFD,
|
|
1
|
+
{"version":3,"file":"createClass.js","sourceRoot":"","sources":["../src/createClass.ts"],"names":[],"mappings":"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"}
|
package/cjs/createClass.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {T2SProps, t2s} from
|
|
1
|
+
import { type T2SProps, t2s } from "@slimr/util"
|
|
2
2
|
|
|
3
|
-
import {addCss} from
|
|
4
|
-
import {expandShorthands} from
|
|
3
|
+
import { addCss } from "./addCss.js"
|
|
4
|
+
import { expandShorthands } from "./shorthandProps.js"
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* Joins class names and omits falsey props
|
|
@@ -18,7 +18,7 @@ import {expandShorthands} from './shorthandProps.js'
|
|
|
18
18
|
* ```
|
|
19
19
|
*/
|
|
20
20
|
export function classJoin(...classes: (string | 0 | null | undefined)[]) {
|
|
21
|
-
|
|
21
|
+
return classes.filter((c) => c && typeof c === "string").join(" ")
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
/**
|
|
@@ -43,50 +43,50 @@ export function classJoin(...classes: (string | 0 | null | undefined)[]) {
|
|
|
43
43
|
* ...and the queue will be executed next javascript tick
|
|
44
44
|
*/
|
|
45
45
|
export function createClass(...p: T2SProps) {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
46
|
+
let css = t2s(...p)
|
|
47
|
+
if (!css) return ""
|
|
48
|
+
let className = createClass.history.get(css)
|
|
49
|
+
if (!className) {
|
|
50
|
+
className = `s${createClass.count++}`
|
|
51
|
+
createClass.history.set(css, className)
|
|
52
52
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
53
|
+
css = deleteComments(css)
|
|
54
|
+
css = expandShorthands(css)
|
|
55
|
+
css = expandArrayValues(css)
|
|
56
|
+
const qs = findQueries(css)
|
|
57
57
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
58
|
+
for (const q of qs.reverse()) {
|
|
59
|
+
css = css.slice(0, q.start) + css.slice(q.end)
|
|
60
|
+
}
|
|
61
|
+
qs.reverse()
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
63
|
+
css = `.${className}{\n${css}\n}\n`
|
|
64
|
+
css += qs
|
|
65
|
+
.map((q) => {
|
|
66
|
+
if (q.query.startsWith("&")) {
|
|
67
|
+
return `.${className}${q.query.slice(1)}{\n${q.innerBody}\n}`
|
|
68
|
+
}
|
|
69
|
+
if (q.query.startsWith("@keyframes")) {
|
|
70
|
+
return q.outerBody
|
|
71
|
+
}
|
|
72
|
+
return `${q.query}{\n.${className}{${q.innerBody}\n}\n}`
|
|
73
|
+
})
|
|
74
|
+
.join("\n")
|
|
75
75
|
|
|
76
|
-
|
|
76
|
+
css = `${trimByLine(css)}\n\n`
|
|
77
77
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
78
|
+
addCss(css)
|
|
79
|
+
}
|
|
80
|
+
return className
|
|
81
81
|
}
|
|
82
82
|
/** Breakpoints like chakra */
|
|
83
|
-
createClass.breakPoints = [
|
|
83
|
+
createClass.breakPoints = ["30em", "48em", "62em", "80em", "96em"]
|
|
84
84
|
createClass.count = 0
|
|
85
85
|
createClass.history = new Map<string, string>()
|
|
86
86
|
|
|
87
87
|
/** delete css comments **/
|
|
88
88
|
function deleteComments(css: string) {
|
|
89
|
-
|
|
89
|
+
return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm, "")
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
/**
|
|
@@ -95,82 +95,82 @@ function deleteComments(css: string) {
|
|
|
95
95
|
* Inspired by https://chakra-ui.com/docs/styled-system/responsive-styles
|
|
96
96
|
*/
|
|
97
97
|
function expandArrayValues(css: string) {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
98
|
+
if (!css.includes("[")) return css
|
|
99
|
+
return css
|
|
100
|
+
.split("\n")
|
|
101
|
+
.map((l) => {
|
|
102
|
+
// eslint-disable-next-line no-useless-escape
|
|
103
|
+
const [, prop, valArrayStr] = [...l.matchAll(/([A-Za-z-]*):[ ]*\[([^\]]+)\]/g)]?.[0] ?? []
|
|
104
|
+
if (valArrayStr) {
|
|
105
|
+
return (
|
|
106
|
+
valArrayStr
|
|
107
|
+
// Replace commas inside css functions with a magic char (§) to prevent
|
|
108
|
+
// erroneous splitting
|
|
109
|
+
.replace(/\([^),]*,/g, (m) => m.replace(/,/g, "§"))
|
|
110
|
+
.replace(/\([^),]*,/g, (m) => m.replace(/,/g, "§"))
|
|
111
|
+
.replace(/\([^),]*,/g, (m) => m.replace(/,/g, "§"))
|
|
112
|
+
.split(",")
|
|
113
|
+
.map((val, i) => {
|
|
114
|
+
val = val.trim()
|
|
115
|
+
if (!val || val === "null" || val === "undefined") return ""
|
|
116
|
+
val = val.replace(/§/g, ",")
|
|
117
|
+
if (i === 0) {
|
|
118
|
+
return `${prop}: ${val};`
|
|
119
|
+
}
|
|
120
|
+
return `@media (min-width: ${createClass.breakPoints[i - 1]}) { ${prop}: ${val}; }`
|
|
121
|
+
})
|
|
122
|
+
.join("\n")
|
|
123
|
+
)
|
|
124
|
+
}
|
|
125
|
+
return l
|
|
126
|
+
})
|
|
127
|
+
.join("\n")
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
/** Find @keyframes, @media, @container queries in css **/
|
|
131
131
|
function findQueries(css: string) {
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
132
|
+
const queries: {
|
|
133
|
+
start: number
|
|
134
|
+
end: number
|
|
135
|
+
query: string
|
|
136
|
+
outerBody: string
|
|
137
|
+
innerBody: string
|
|
138
|
+
}[] = []
|
|
139
|
+
for (const m of css.matchAll(/[@&]/gm)) {
|
|
140
|
+
let query = ""
|
|
141
|
+
let bodyStart = 0
|
|
142
|
+
let openCount = 0
|
|
143
|
+
for (let i = m.index!; i < css.length; i++) {
|
|
144
|
+
if (css[i] === "{") {
|
|
145
|
+
if (openCount === 0) {
|
|
146
|
+
query = css.slice(m.index, i).trim()
|
|
147
|
+
bodyStart = i + 1
|
|
148
|
+
}
|
|
149
|
+
openCount++
|
|
150
|
+
} else if (css[i] === "}") {
|
|
151
|
+
openCount--
|
|
152
|
+
if (openCount === 0) {
|
|
153
|
+
queries.push({
|
|
154
|
+
start: m.index!,
|
|
155
|
+
end: i + 1,
|
|
156
|
+
query,
|
|
157
|
+
outerBody: css.slice(m.index, i + 1),
|
|
158
|
+
innerBody: css.slice(bodyStart, i),
|
|
159
|
+
})
|
|
160
|
+
break
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
if (openCount !== 0) console.error(`${query} not closed: "${css}"`)
|
|
165
|
+
}
|
|
166
|
+
return queries
|
|
167
167
|
}
|
|
168
168
|
|
|
169
169
|
/** Trims whitespace for every line */
|
|
170
170
|
function trimByLine(css: string) {
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
171
|
+
return css
|
|
172
|
+
.split("\n")
|
|
173
|
+
.map((l) => l.trim())
|
|
174
|
+
.filter((l) => l)
|
|
175
|
+
.join("\n")
|
|
176
176
|
}
|
package/cjs/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export
|
|
4
|
-
export
|
|
1
|
+
export * from "./addCss.js";
|
|
2
|
+
export * from "./createClass.js";
|
|
3
|
+
export { createClass as css } from "./createClass.js";
|
|
4
|
+
export * from "./shorthandProps.js";
|
package/cjs/index.js
CHANGED
|
@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
exports.css = void 0;
|
|
18
18
|
__exportStar(require("./addCss.js"), exports);
|
|
19
19
|
__exportStar(require("./createClass.js"), exports);
|
|
20
|
-
__exportStar(require("./shorthandProps.js"), exports);
|
|
21
20
|
var createClass_js_1 = require("./createClass.js");
|
|
22
21
|
Object.defineProperty(exports, "css", { enumerable: true, get: function () { return createClass_js_1.createClass; } });
|
|
22
|
+
__exportStar(require("./shorthandProps.js"), exports);
|
|
23
23
|
//# sourceMappingURL=index.js.map
|
package/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,8CAA2B;AAC3B,mDAAgC;AAChC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,8CAA2B;AAC3B,mDAAgC;AAChC,mDAAqD;AAA5C,qGAAA,WAAW,OAAO;AAC3B,sDAAmC"}
|
package/cjs/index.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export
|
|
4
|
-
export
|
|
1
|
+
export * from "./addCss.js"
|
|
2
|
+
export * from "./createClass.js"
|
|
3
|
+
export { createClass as css } from "./createClass.js"
|
|
4
|
+
export * from "./shorthandProps.js"
|
package/cjs/shorthandProps.d.ts
CHANGED
|
@@ -72,4 +72,4 @@ export declare function expandShorthands(css: string): string;
|
|
|
72
72
|
/**
|
|
73
73
|
* Map shorthand props to their full css prop
|
|
74
74
|
*/
|
|
75
|
-
export declare const shorthandPropsMap: Record<keyof Omit<ShorthandProps,
|
|
75
|
+
export declare const shorthandPropsMap: Record<keyof Omit<ShorthandProps, "mx" | "my" | "px" | "py">, string>;
|
package/cjs/shorthandProps.js
CHANGED
|
@@ -6,13 +6,13 @@ exports.expandShorthands = expandShorthands;
|
|
|
6
6
|
* Expand short-hand css props to full
|
|
7
7
|
*/
|
|
8
8
|
function expandShorthands(css) {
|
|
9
|
-
css =
|
|
9
|
+
css = `\n${css}`; // inject a newline to make the regex easier
|
|
10
10
|
// Handle 'mx', 'my', 'px', 'py'
|
|
11
11
|
css = css
|
|
12
|
-
.replace(/([mp])x:([^;]*)/g,
|
|
13
|
-
.replace(/([mp])y:([^;]*);/g,
|
|
12
|
+
.replace(/([mp])x:([^;]*)/g, "$1l:$2;\n$1r:$2")
|
|
13
|
+
.replace(/([mp])y:([^;]*);/g, "$1t:$2;\n$1b:$2");
|
|
14
14
|
Object.entries(exports.shorthandPropsMap).forEach(([k, v]) => {
|
|
15
|
-
css = css.replace(new RegExp(`([ \n\t;])${k}:`,
|
|
15
|
+
css = css.replace(new RegExp(`([ \n\t;])${k}:`, "g"), `$1${v}:`);
|
|
16
16
|
});
|
|
17
17
|
return css.trim();
|
|
18
18
|
}
|
|
@@ -20,32 +20,32 @@ function expandShorthands(css) {
|
|
|
20
20
|
* Map shorthand props to their full css prop
|
|
21
21
|
*/
|
|
22
22
|
exports.shorthandPropsMap = {
|
|
23
|
-
ai:
|
|
24
|
-
b:
|
|
25
|
-
br:
|
|
26
|
-
bg:
|
|
27
|
-
c:
|
|
28
|
-
d:
|
|
29
|
-
f:
|
|
30
|
-
fd:
|
|
31
|
-
i:
|
|
32
|
-
h:
|
|
33
|
-
jc:
|
|
34
|
-
m:
|
|
35
|
-
ml:
|
|
36
|
-
mr:
|
|
37
|
-
mt:
|
|
38
|
-
mb:
|
|
39
|
-
maxW:
|
|
40
|
-
minW:
|
|
41
|
-
p:
|
|
42
|
-
pl:
|
|
43
|
-
pr:
|
|
44
|
-
pt:
|
|
45
|
-
pb:
|
|
46
|
-
pos:
|
|
47
|
-
ta:
|
|
48
|
-
w:
|
|
49
|
-
z:
|
|
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
50
|
};
|
|
51
51
|
//# sourceMappingURL=shorthandProps.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shorthandProps.js","sourceRoot":"","sources":["../src/shorthandProps.ts"],"names":[],"mappings":";;;AAuEA,4CAUC;AAbD;;GAEG;AACH,SAAgB,gBAAgB,CAAC,GAAW;
|
|
1
|
+
{"version":3,"file":"shorthandProps.js","sourceRoot":"","sources":["../src/shorthandProps.ts"],"names":[],"mappings":";;;AAuEA,4CAUC;AAbD;;GAEG;AACH,SAAgB,gBAAgB,CAAC,GAAW;IAC3C,GAAG,GAAG,KAAK,GAAG,EAAE,CAAA,CAAC,4CAA4C;IAC7D,gCAAgC;IAChC,GAAG,GAAG,GAAG;SACP,OAAO,CAAC,kBAAkB,EAAE,iBAAiB,CAAC;SAC9C,OAAO,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAA;IACjD,MAAM,CAAC,OAAO,CAAC,yBAAiB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE;QACpD,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;IACjE,CAAC,CAAC,CAAA;IACF,OAAO,GAAG,CAAC,IAAI,EAAE,CAAA;AAClB,CAAC;AAED;;GAEG;AACU,QAAA,iBAAiB,GAG1B;IACH,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;CACZ,CAAA"}
|