emily-css 1.0.25 → 1.0.27
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/CHANGELOG.md +265 -224
- package/package.json +59 -59
- package/src/generators.js +174 -46
- package/src/index.js +576 -74
- package/src/init.js +13 -2
- package/templates/showcase.html +2 -2
package/src/generators.js
CHANGED
|
@@ -14,14 +14,38 @@ function displayUtilities() {
|
|
|
14
14
|
.block { display: block; }
|
|
15
15
|
.inline { display: inline; }
|
|
16
16
|
.inline-block { display: inline-block; }
|
|
17
|
+
.flow-root { display: flow-root; }
|
|
17
18
|
.flex { display: flex; }
|
|
18
19
|
.inline-flex { display: inline-flex; }
|
|
19
20
|
.grid { display: grid; }
|
|
20
21
|
.inline-grid { display: inline-grid; }
|
|
21
|
-
.hidden { display: none; }
|
|
22
22
|
.contents { display: contents; }
|
|
23
|
+
.list-item { display: list-item; }
|
|
24
|
+
.hidden { display: none; }
|
|
25
|
+
.table { display: table; }
|
|
26
|
+
.inline-table { display: inline-table; }
|
|
27
|
+
.table-caption { display: table-caption; }
|
|
28
|
+
.table-cell { display: table-cell; }
|
|
29
|
+
.table-column { display: table-column; }
|
|
30
|
+
.table-column-group { display: table-column-group; }
|
|
31
|
+
.table-footer-group { display: table-footer-group; }
|
|
32
|
+
.table-header-group { display: table-header-group; }
|
|
33
|
+
.table-row-group { display: table-row-group; }
|
|
34
|
+
.table-row { display: table-row; }
|
|
23
35
|
.visible { visibility: visible; }
|
|
24
36
|
.invisible { visibility: hidden; }
|
|
37
|
+
.collapse { visibility: collapse; }
|
|
38
|
+
.float-start { float: inline-start; }
|
|
39
|
+
.float-end { float: inline-end; }
|
|
40
|
+
.float-right { float: right; }
|
|
41
|
+
.float-left { float: left; }
|
|
42
|
+
.float-none { float: none; }
|
|
43
|
+
.clear-start { clear: inline-start; }
|
|
44
|
+
.clear-end { clear: inline-end; }
|
|
45
|
+
.clear-left { clear: left; }
|
|
46
|
+
.clear-right { clear: right; }
|
|
47
|
+
.clear-both { clear: both; }
|
|
48
|
+
.clear-none { clear: none; }
|
|
25
49
|
|
|
26
50
|
`;
|
|
27
51
|
}
|
|
@@ -30,50 +54,100 @@ function displayUtilities() {
|
|
|
30
54
|
function sizingUtilities(spacing) {
|
|
31
55
|
let css = `/* Sizing */\n`;
|
|
32
56
|
|
|
33
|
-
// Width
|
|
34
57
|
Object.entries(spacing).forEach(([key, value]) => {
|
|
35
58
|
const escaped = escapeClassName(key);
|
|
36
59
|
css += `.w-${escaped} { width: ${value}; }\n`;
|
|
60
|
+
css += `.h-${escaped} { height: ${value}; }\n`;
|
|
61
|
+
css += `.size-${escaped} { width: ${value}; height: ${value}; }\n`;
|
|
62
|
+
css += `.min-w-${escaped} { min-width: ${value}; }\n`;
|
|
63
|
+
css += `.min-h-${escaped} { min-height: ${value}; }\n`;
|
|
64
|
+
css += `.max-w-${escaped} { max-width: ${value}; }\n`;
|
|
65
|
+
css += `.max-h-${escaped} { max-height: ${value}; }\n`;
|
|
37
66
|
});
|
|
38
67
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
68
|
+
const fractions = {
|
|
69
|
+
'1\\/2': '50%', '1\\/3': '33.333333%', '2\\/3': '66.666667%',
|
|
70
|
+
'1\\/4': '25%', '2\\/4': '50%', '3\\/4': '75%',
|
|
71
|
+
'1\\/5': '20%', '2\\/5': '40%', '3\\/5': '60%', '4\\/5': '80%',
|
|
72
|
+
'1\\/6': '16.666667%', '2\\/6': '33.333333%', '3\\/6': '50%', '4\\/6': '66.666667%', '5\\/6': '83.333333%',
|
|
73
|
+
'1\\/12': '8.333333%', '2\\/12': '16.666667%', '3\\/12': '25%', '4\\/12': '33.333333%', '5\\/12': '41.666667%', '6\\/12': '50%', '7\\/12': '58.333333%', '8\\/12': '66.666667%', '9\\/12': '75%', '10\\/12': '83.333333%', '11\\/12': '91.666667%'
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
Object.entries(fractions).forEach(([name, value]) => {
|
|
77
|
+
css += `.w-${name} { width: ${value}; }\n`;
|
|
78
|
+
css += `.h-${name} { height: ${value}; }\n`;
|
|
79
|
+
css += `.size-${name} { width: ${value}; height: ${value}; }\n`;
|
|
43
80
|
});
|
|
44
81
|
|
|
45
|
-
|
|
82
|
+
css += `.w-auto { width: auto; }\n`;
|
|
83
|
+
css += `.h-auto { height: auto; }\n`;
|
|
84
|
+
css += `.size-auto { width: auto; height: auto; }\n`;
|
|
46
85
|
css += `.w-full { width: 100%; }\n`;
|
|
47
86
|
css += `.h-full { height: 100%; }\n`;
|
|
87
|
+
css += `.size-full { width: 100%; height: 100%; }\n`;
|
|
48
88
|
css += `.w-screen { width: 100vw; }\n`;
|
|
49
89
|
css += `.h-screen { height: 100vh; }\n`;
|
|
90
|
+
css += `.w-svw { width: 100svw; }\n`;
|
|
91
|
+
css += `.h-svh { height: 100svh; }\n`;
|
|
92
|
+
css += `.w-lvw { width: 100lvw; }\n`;
|
|
93
|
+
css += `.h-lvh { height: 100lvh; }\n`;
|
|
94
|
+
css += `.w-dvw { width: 100dvw; }\n`;
|
|
95
|
+
css += `.h-dvh { height: 100dvh; }\n`;
|
|
96
|
+
css += `.w-min { width: min-content; }\n`;
|
|
97
|
+
css += `.w-max { width: max-content; }\n`;
|
|
98
|
+
css += `.w-fit { width: fit-content; }\n`;
|
|
99
|
+
css += `.h-min { height: min-content; }\n`;
|
|
100
|
+
css += `.h-max { height: max-content; }\n`;
|
|
101
|
+
css += `.h-fit { height: fit-content; }\n`;
|
|
50
102
|
|
|
51
|
-
// Min/Max
|
|
52
103
|
css += `.min-w-0 { min-width: 0; }\n`;
|
|
104
|
+
css += `.min-w-full { min-width: 100%; }\n`;
|
|
105
|
+
css += `.min-w-min { min-width: min-content; }\n`;
|
|
106
|
+
css += `.min-w-max { min-width: max-content; }\n`;
|
|
107
|
+
css += `.min-w-fit { min-width: fit-content; }\n`;
|
|
53
108
|
css += `.min-h-0 { min-height: 0; }\n`;
|
|
109
|
+
css += `.min-h-full { min-height: 100%; }\n`;
|
|
54
110
|
css += `.min-h-screen { min-height: 100vh; }\n`;
|
|
111
|
+
css += `.min-h-svh { min-height: 100svh; }\n`;
|
|
112
|
+
css += `.min-h-lvh { min-height: 100lvh; }\n`;
|
|
113
|
+
css += `.min-h-dvh { min-height: 100dvh; }\n`;
|
|
114
|
+
css += `.min-h-min { min-height: min-content; }\n`;
|
|
115
|
+
css += `.min-h-max { min-height: max-content; }\n`;
|
|
116
|
+
css += `.min-h-fit { min-height: fit-content; }\n`;
|
|
117
|
+
|
|
118
|
+
css += `.max-w-0 { max-width: 0; }\n`;
|
|
119
|
+
css += `.max-w-none { max-width: none; }\n`;
|
|
55
120
|
css += `.max-w-full { max-width: 100%; }\n`;
|
|
121
|
+
css += `.max-w-min { max-width: min-content; }\n`;
|
|
122
|
+
css += `.max-w-max { max-width: max-content; }\n`;
|
|
123
|
+
css += `.max-w-fit { max-width: fit-content; }\n`;
|
|
124
|
+
css += `.max-h-0 { max-height: 0; }\n`;
|
|
56
125
|
css += `.max-h-full { max-height: 100%; }\n`;
|
|
57
|
-
css += `.max-
|
|
58
|
-
css += `.max-
|
|
59
|
-
css += `.max-
|
|
60
|
-
css += `.max-
|
|
61
|
-
css += `.max-
|
|
62
|
-
css += `.max-
|
|
63
|
-
css += `.max-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
126
|
+
css += `.max-h-screen { max-height: 100vh; }\n`;
|
|
127
|
+
css += `.max-h-svh { max-height: 100svh; }\n`;
|
|
128
|
+
css += `.max-h-lvh { max-height: 100lvh; }\n`;
|
|
129
|
+
css += `.max-h-dvh { max-height: 100dvh; }\n`;
|
|
130
|
+
css += `.max-h-min { max-height: min-content; }\n`;
|
|
131
|
+
css += `.max-h-max { max-height: max-content; }\n`;
|
|
132
|
+
css += `.max-h-fit { max-height: fit-content; }\n`;
|
|
133
|
+
|
|
134
|
+
const maxWidths = {
|
|
135
|
+
xs: '20rem', sm: '24rem', md: '28rem', lg: '32rem', xl: '36rem',
|
|
136
|
+
'2xl': '42rem', '3xl': '48rem', '4xl': '56rem', '5xl': '64rem',
|
|
137
|
+
'6xl': '72rem', '7xl': '80rem', prose: '65ch', screen: '100vw',
|
|
138
|
+
'screen-sm': '640px', 'screen-md': '768px', 'screen-lg': '1024px',
|
|
139
|
+
'screen-xl': '1280px', 'screen-2xl': '1536px'
|
|
140
|
+
};
|
|
141
|
+
Object.entries(maxWidths).forEach(([name, value]) => {
|
|
142
|
+
css += `.max-w-${name} { max-width: ${value}; }\n`;
|
|
143
|
+
});
|
|
144
|
+
|
|
71
145
|
css += `.aspect-auto { aspect-ratio: auto; }\n`;
|
|
72
146
|
css += `.aspect-square { aspect-ratio: 1; }\n`;
|
|
73
147
|
css += `.aspect-video { aspect-ratio: 16 / 9; }\n`;
|
|
74
|
-
css += `.aspect-3
|
|
75
|
-
css += `.aspect-4
|
|
76
|
-
css += `.aspect-16
|
|
148
|
+
css += `.aspect-3\\/2 { aspect-ratio: 3 / 2; }\n`;
|
|
149
|
+
css += `.aspect-4\\/3 { aspect-ratio: 4 / 3; }\n`;
|
|
150
|
+
css += `.aspect-16\\/9 { aspect-ratio: 16 / 9; }\n`;
|
|
77
151
|
|
|
78
152
|
css += `\n`;
|
|
79
153
|
return css;
|
|
@@ -89,7 +163,6 @@ function positioningUtilities(spacing) {
|
|
|
89
163
|
css += `.fixed { position: fixed; }\n`;
|
|
90
164
|
css += `.sticky { position: sticky; }\n`;
|
|
91
165
|
|
|
92
|
-
// Inset values
|
|
93
166
|
Object.entries(spacing).forEach(([key, value]) => {
|
|
94
167
|
const escaped = escapeClassName(key);
|
|
95
168
|
css += `.top-${escaped} { top: ${value}; }\n`;
|
|
@@ -97,27 +170,31 @@ function positioningUtilities(spacing) {
|
|
|
97
170
|
css += `.bottom-${escaped} { bottom: ${value}; }\n`;
|
|
98
171
|
css += `.left-${escaped} { left: ${value}; }\n`;
|
|
99
172
|
css += `.inset-${escaped} { inset: ${value}; }\n`;
|
|
173
|
+
css += `.inset-x-${escaped} { left: ${value}; right: ${value}; }\n`;
|
|
174
|
+
css += `.inset-y-${escaped} { top: ${value}; bottom: ${value}; }\n`;
|
|
175
|
+
if (value !== '0' && value !== '0px') {
|
|
176
|
+
css += `.-top-${escaped} { top: -${value}; }\n`;
|
|
177
|
+
css += `.-right-${escaped} { right: -${value}; }\n`;
|
|
178
|
+
css += `.-bottom-${escaped} { bottom: -${value}; }\n`;
|
|
179
|
+
css += `.-left-${escaped} { left: -${value}; }\n`;
|
|
180
|
+
css += `.-inset-${escaped} { inset: -${value}; }\n`;
|
|
181
|
+
css += `.-inset-x-${escaped} { left: -${value}; right: -${value}; }\n`;
|
|
182
|
+
css += `.-inset-y-${escaped} { top: -${value}; bottom: -${value}; }\n`;
|
|
183
|
+
}
|
|
100
184
|
});
|
|
101
185
|
|
|
102
186
|
css += `.inset-auto { inset: auto; }\n`;
|
|
187
|
+
css += `.inset-x-auto { left: auto; right: auto; }\n`;
|
|
188
|
+
css += `.inset-y-auto { top: auto; bottom: auto; }\n`;
|
|
189
|
+
css += `.top-auto { top: auto; }\n`;
|
|
190
|
+
css += `.right-auto { right: auto; }\n`;
|
|
191
|
+
css += `.bottom-auto { bottom: auto; }\n`;
|
|
192
|
+
css += `.left-auto { left: auto; }\n`;
|
|
103
193
|
|
|
104
|
-
// Z-index (semantic)
|
|
105
194
|
const zIndices = {
|
|
106
|
-
'auto': 'auto',
|
|
107
|
-
'
|
|
108
|
-
'10': '10',
|
|
109
|
-
'20': '20',
|
|
110
|
-
'30': '30',
|
|
111
|
-
'40': '40',
|
|
112
|
-
'50': '50',
|
|
113
|
-
'dropdown': '1000',
|
|
114
|
-
'sticky': '1020',
|
|
115
|
-
'fixed': '1030',
|
|
116
|
-
'modal': '1040',
|
|
117
|
-
'popover': '1060',
|
|
118
|
-
'tooltip': '1070'
|
|
195
|
+
'auto': 'auto', '0': '0', '10': '10', '20': '20', '30': '30', '40': '40', '50': '50',
|
|
196
|
+
'dropdown': '1000', 'sticky': '1020', 'fixed': '1030', 'modal': '1040', 'popover': '1060', 'tooltip': '1070'
|
|
119
197
|
};
|
|
120
|
-
|
|
121
198
|
Object.entries(zIndices).forEach(([name, value]) => {
|
|
122
199
|
css += `.z-${name} { z-index: ${value}; }\n`;
|
|
123
200
|
});
|
|
@@ -131,13 +208,23 @@ function overflowUtilities() {
|
|
|
131
208
|
return `/* Overflow & Clipping */
|
|
132
209
|
.overflow-auto { overflow: auto; }
|
|
133
210
|
.overflow-hidden { overflow: hidden; }
|
|
211
|
+
.overflow-clip { overflow: clip; }
|
|
134
212
|
.overflow-visible { overflow: visible; }
|
|
135
213
|
.overflow-scroll { overflow: scroll; }
|
|
136
214
|
.overflow-x-auto { overflow-x: auto; }
|
|
137
215
|
.overflow-x-hidden { overflow-x: hidden; }
|
|
216
|
+
.overflow-x-clip { overflow-x: clip; }
|
|
217
|
+
.overflow-x-visible { overflow-x: visible; }
|
|
218
|
+
.overflow-x-scroll { overflow-x: scroll; }
|
|
138
219
|
.overflow-y-auto { overflow-y: auto; }
|
|
139
220
|
.overflow-y-hidden { overflow-y: hidden; }
|
|
221
|
+
.overflow-y-clip { overflow-y: clip; }
|
|
222
|
+
.overflow-y-visible { overflow-y: visible; }
|
|
223
|
+
.overflow-y-scroll { overflow-y: scroll; }
|
|
140
224
|
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
225
|
+
.text-ellipsis { text-overflow: ellipsis; }
|
|
226
|
+
.text-clip { text-overflow: clip; }
|
|
227
|
+
.line-clamp-none { overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: unset; }
|
|
141
228
|
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
|
|
142
229
|
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
143
230
|
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
|
@@ -248,9 +335,12 @@ function shadowUtilities() {
|
|
|
248
335
|
return `/* Shadows */
|
|
249
336
|
.shadow-none { box-shadow: none; }
|
|
250
337
|
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
|
|
251
|
-
.shadow { box-shadow: 0
|
|
252
|
-
.shadow-md { box-shadow: 0
|
|
253
|
-
.shadow-lg { box-shadow: 0
|
|
338
|
+
.shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); }
|
|
339
|
+
.shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); }
|
|
340
|
+
.shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); }
|
|
341
|
+
.shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04); }
|
|
342
|
+
.shadow-2xl { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); }
|
|
343
|
+
.shadow-inner { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); }
|
|
254
344
|
|
|
255
345
|
`;
|
|
256
346
|
}
|
|
@@ -445,10 +535,38 @@ function cursorUtilities() {
|
|
|
445
535
|
.cursor-default { cursor: default; }
|
|
446
536
|
.cursor-pointer { cursor: pointer; }
|
|
447
537
|
.cursor-wait { cursor: wait; }
|
|
448
|
-
.cursor-not-allowed { cursor: not-allowed; }
|
|
449
|
-
.cursor-move { cursor: move; }
|
|
450
538
|
.cursor-text { cursor: text; }
|
|
539
|
+
.cursor-move { cursor: move; }
|
|
451
540
|
.cursor-help { cursor: help; }
|
|
541
|
+
.cursor-not-allowed { cursor: not-allowed; }
|
|
542
|
+
.cursor-none { cursor: none; }
|
|
543
|
+
.cursor-context-menu { cursor: context-menu; }
|
|
544
|
+
.cursor-progress { cursor: progress; }
|
|
545
|
+
.cursor-cell { cursor: cell; }
|
|
546
|
+
.cursor-crosshair { cursor: crosshair; }
|
|
547
|
+
.cursor-vertical-text { cursor: vertical-text; }
|
|
548
|
+
.cursor-alias { cursor: alias; }
|
|
549
|
+
.cursor-copy { cursor: copy; }
|
|
550
|
+
.cursor-no-drop { cursor: no-drop; }
|
|
551
|
+
.cursor-grab { cursor: grab; }
|
|
552
|
+
.cursor-grabbing { cursor: grabbing; }
|
|
553
|
+
.cursor-all-scroll { cursor: all-scroll; }
|
|
554
|
+
.cursor-col-resize { cursor: col-resize; }
|
|
555
|
+
.cursor-row-resize { cursor: row-resize; }
|
|
556
|
+
.cursor-n-resize { cursor: n-resize; }
|
|
557
|
+
.cursor-e-resize { cursor: e-resize; }
|
|
558
|
+
.cursor-s-resize { cursor: s-resize; }
|
|
559
|
+
.cursor-w-resize { cursor: w-resize; }
|
|
560
|
+
.cursor-ne-resize { cursor: ne-resize; }
|
|
561
|
+
.cursor-nw-resize { cursor: nw-resize; }
|
|
562
|
+
.cursor-se-resize { cursor: se-resize; }
|
|
563
|
+
.cursor-sw-resize { cursor: sw-resize; }
|
|
564
|
+
.cursor-ew-resize { cursor: ew-resize; }
|
|
565
|
+
.cursor-ns-resize { cursor: ns-resize; }
|
|
566
|
+
.cursor-nesw-resize { cursor: nesw-resize; }
|
|
567
|
+
.cursor-nwse-resize { cursor: nwse-resize; }
|
|
568
|
+
.cursor-zoom-in { cursor: zoom-in; }
|
|
569
|
+
.cursor-zoom-out { cursor: zoom-out; }
|
|
452
570
|
.pointer-events-auto { pointer-events: auto; }
|
|
453
571
|
.pointer-events-none { pointer-events: none; }
|
|
454
572
|
.select-none { user-select: none; }
|
|
@@ -459,6 +577,16 @@ function cursorUtilities() {
|
|
|
459
577
|
.resize { resize: both; }
|
|
460
578
|
.resize-x { resize: horizontal; }
|
|
461
579
|
.resize-y { resize: vertical; }
|
|
580
|
+
.touch-auto { touch-action: auto; }
|
|
581
|
+
.touch-none { touch-action: none; }
|
|
582
|
+
.touch-pan-x { touch-action: pan-x; }
|
|
583
|
+
.touch-pan-left { touch-action: pan-left; }
|
|
584
|
+
.touch-pan-right { touch-action: pan-right; }
|
|
585
|
+
.touch-pan-y { touch-action: pan-y; }
|
|
586
|
+
.touch-pan-up { touch-action: pan-up; }
|
|
587
|
+
.touch-pan-down { touch-action: pan-down; }
|
|
588
|
+
.touch-pinch-zoom { touch-action: pinch-zoom; }
|
|
589
|
+
.touch-manipulation { touch-action: manipulation; }
|
|
462
590
|
.isolate { isolation: isolate; }
|
|
463
591
|
.isolation-auto { isolation: auto; }
|
|
464
592
|
.will-change-auto { will-change: auto; }
|