mancha 0.17.5 → 0.17.6

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 (8) hide show
  1. package/dist/browser.js +1 -1
  2. package/dist/css_gen_utils.d.ts +105 -2
  3. package/dist/css_gen_utils.js +62 -10
  4. package/dist/css_gen_utils.js.map +1 -1
  5. package/dist/mancha.js +1 -1
  6. package/docs/css.md +66 -9
  7. package/package.json +1 -1
  8. package/scripts/generate-css-docs.ts +47 -1
package/docs/css.md CHANGED
@@ -125,18 +125,67 @@ Supported prefixes: `text-`, `bg-`, `border-`, `fill-`.
125
125
 
126
126
  | Utility | Description |
127
127
  | --- | --- |
128
- | `shadow` | `{"box-shadow":"0 0 1px 0 rgba(0, 0, 0, 0.05)"}` |
129
- | `shadow-sm` | `{"box-shadow":"0 1px 2px 0 rgba(0, 0, 0, 0.05)"}` |
130
- | `shadow-md` | `{"box-shadow":"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"}` |
131
- | `shadow-lg` | `{"box-shadow":"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"}` |
132
- | `shadow-xl` | `{"box-shadow":"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"}` |
133
- | `shadow-2xl` | `{"box-shadow":"0 25px 50px -12px rgba(0, 0, 0, 0.25)"}` |
134
- | `shadow-inner` | `{"box-shadow":"inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"}` |
135
- | `shadow-outline` | `{"box-shadow":"0 0 0 3px rgba(66, 153, 225, 0.5)"}` |
136
- | `shadow-none` | `{"box-shadow":"none"}` |
128
+ | `shadow-2xs` | `{"box-shadow":"0 1px rgb(0 0 0 / 0.05)"}` |
129
+ | `shadow-xs` | `{"box-shadow":"0 1px 2px 0 rgb(0 0 0 / 0.05)"}` |
130
+ | `shadow` | `{"box-shadow":"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"}` |
131
+ | `shadow-sm` | `{"box-shadow":"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"}` |
132
+ | `shadow-md` | `{"box-shadow":"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"}` |
133
+ | `shadow-lg` | `{"box-shadow":"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"}` |
134
+ | `shadow-xl` | `{"box-shadow":"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"}` |
135
+ | `shadow-2xl` | `{"box-shadow":"0 25px 50px -12px rgb(0 0 0 / 0.25)"}` |
136
+ | `shadow-inner` | `{"box-shadow":"inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"}` |
137
+ | `shadow-none` | `{"box-shadow":"0 0 #0000"}` |
138
+ | `ring` | `{"box-shadow":"0 0 0 3px rgb(59 130 246 / 0.5)"}` |
139
+ | `ring-0` | `{"box-shadow":"0 0 0 0px rgb(59 130 246 / 0.5)"}` |
140
+ | `ring-1` | `{"box-shadow":"0 0 0 1px rgb(59 130 246 / 0.5)"}` |
141
+ | `ring-2` | `{"box-shadow":"0 0 0 2px rgb(59 130 246 / 0.5)"}` |
142
+ | `ring-4` | `{"box-shadow":"0 0 0 4px rgb(59 130 246 / 0.5)"}` |
143
+ | `ring-8` | `{"box-shadow":"0 0 0 8px rgb(59 130 246 / 0.5)"}` |
144
+ | `ring-inset` | `{"--tw-ring-inset":"inset"}` |
137
145
  | `opacity-0` | Fully transparent |
138
146
  | `opacity-{1,2,5,10,20,25,30,40,50,60,70,75,80,90,95,98,99,100}` | Opacity values from 0-100 |
139
147
 
148
+ ### Outline
149
+
150
+ | Utility | Description |
151
+ | --- | --- |
152
+ | `outline` | `{"outline-style":"solid"}` |
153
+ | `outline-none` | `{"outline":"2px solid transparent","outline-offset":"2px"}` |
154
+ | `outline-dashed` | `{"outline-style":"dashed"}` |
155
+ | `outline-dotted` | `{"outline-style":"dotted"}` |
156
+ | `outline-double` | `{"outline-style":"double"}` |
157
+ | `outline-0` | `{"outline-width":"0px"}` |
158
+ | `outline-1` | `{"outline-width":"1px"}` |
159
+ | `outline-2` | `{"outline-width":"2px"}` |
160
+ | `outline-4` | `{"outline-width":"4px"}` |
161
+ | `outline-8` | `{"outline-width":"8px"}` |
162
+ | `outline-offset-0` | `{"outline-offset":"0px"}` |
163
+ | `outline-offset-1` | `{"outline-offset":"1px"}` |
164
+ | `outline-offset-2` | `{"outline-offset":"2px"}` |
165
+ | `outline-offset-4` | `{"outline-offset":"4px"}` |
166
+ | `outline-offset-8` | `{"outline-offset":"8px"}` |
167
+
168
+ ### Aspect Ratio
169
+
170
+ | Utility | Description |
171
+ | --- | --- |
172
+ | `aspect-auto` | `{"aspect-ratio":"auto"}` |
173
+ | `aspect-square` | `{"aspect-ratio":"1 / 1"}` |
174
+ | `aspect-video` | `{"aspect-ratio":"16 / 9"}` |
175
+
176
+ ### Backdrop Filters
177
+
178
+ | Utility | Description |
179
+ | --- | --- |
180
+ | `backdrop-blur-none` | `{"backdrop-filter":"blur(0)"}` |
181
+ | `backdrop-blur-sm` | `{"backdrop-filter":"blur(4px)"}` |
182
+ | `backdrop-blur` | `{"backdrop-filter":"blur(8px)"}` |
183
+ | `backdrop-blur-md` | `{"backdrop-filter":"blur(12px)"}` |
184
+ | `backdrop-blur-lg` | `{"backdrop-filter":"blur(16px)"}` |
185
+ | `backdrop-blur-xl` | `{"backdrop-filter":"blur(24px)"}` |
186
+ | `backdrop-blur-2xl` | `{"backdrop-filter":"blur(40px)"}` |
187
+ | `backdrop-blur-3xl` | `{"backdrop-filter":"blur(64px)"}` |
188
+
140
189
  ### Transitions & Animations
141
190
 
142
191
  | Utility | Description |
@@ -291,6 +340,14 @@ Supported prefixes: `text-`, `bg-`, `border-`, `fill-`.
291
340
  | `space-y-{0-512}` | Vertical spacing between children (rem) |
292
341
  | `space-x-{0-512}px` | Horizontal spacing between children (px) |
293
342
  | `space-y-{0-512}px` | Vertical spacing between children (px) |
343
+ | `divide-x` | Add 1px vertical border between horizontal children |
344
+ | `divide-y` | Add 1px horizontal border between vertical children |
345
+ | `divide-x-{0,2,4,8}` | Vertical border width between horizontal children |
346
+ | `divide-y-{0,2,4,8}` | Horizontal border width between vertical children |
347
+ | `divide-solid` | Solid border style for dividers |
348
+ | `divide-dashed` | Dashed border style for dividers |
349
+ | `divide-dotted` | Dotted border style for dividers |
350
+ | `divide-none` | Remove divider borders |
294
351
 
295
352
  ### Position & Inset
296
353
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mancha",
3
- "version": "0.17.5",
3
+ "version": "0.17.6",
4
4
  "description": "Javscript HTML rendering engine",
5
5
  "main": "dist/index.js",
6
6
  "type": "module",
package/scripts/generate-css-docs.ts CHANGED
@@ -115,7 +115,7 @@ function generateMarkdown() {
115
115
  md += "### Shadows & Effects\n\n";
116
116
  md += "| Utility | Description |\n";
117
117
  md += "| --- | --- |\n";
118
- const effectProps = ["shadow", "mix-blend-"];
118
+ const effectProps = ["shadow", "ring", "mix-blend-"];
119
119
  for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
120
120
  if (effectProps.some((p) => klass.startsWith(p))) {
121
121
  md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
@@ -126,6 +126,39 @@ function generateMarkdown() {
126
126
  md += `| \`opacity-{${PERCENTS.join(",")}}\` | Opacity values from 0-100 |\n`;
127
127
  md += "\n";
128
128
 
129
+ md += "### Outline\n\n";
130
+ md += "| Utility | Description |\n";
131
+ md += "| --- | --- |\n";
132
+ const outlineProps = ["outline"];
133
+ for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
134
+ if (outlineProps.some((p) => klass.startsWith(p))) {
135
+ md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
136
+ }
137
+ }
138
+ md += "\n";
139
+
140
+ md += "### Aspect Ratio\n\n";
141
+ md += "| Utility | Description |\n";
142
+ md += "| --- | --- |\n";
143
+ const aspectProps = ["aspect-"];
144
+ for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
145
+ if (aspectProps.some((p) => klass.startsWith(p))) {
146
+ md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
147
+ }
148
+ }
149
+ md += "\n";
150
+
151
+ md += "### Backdrop Filters\n\n";
152
+ md += "| Utility | Description |\n";
153
+ md += "| --- | --- |\n";
154
+ const backdropProps = ["backdrop-"];
155
+ for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
156
+ if (backdropProps.some((p) => klass.startsWith(p))) {
157
+ md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
158
+ }
159
+ }
160
+ md += "\n";
161
+
129
162
  md += "### Transitions & Animations\n\n";
130
163
  md += "| Utility | Description |\n";
131
164
  md += "| --- | --- |\n";
@@ -208,6 +241,15 @@ function generateMarkdown() {
208
241
  md += "| `space-y-{0-512}` | Vertical spacing between children (rem) |\n";
209
242
  md += "| `space-x-{0-512}px` | Horizontal spacing between children (px) |\n";
210
243
  md += "| `space-y-{0-512}px` | Vertical spacing between children (px) |\n";
244
+ // Document divide utilities
245
+ md += "| `divide-x` | Add 1px vertical border between horizontal children |\n";
246
+ md += "| `divide-y` | Add 1px horizontal border between vertical children |\n";
247
+ md += "| `divide-x-{0,2,4,8}` | Vertical border width between horizontal children |\n";
248
+ md += "| `divide-y-{0,2,4,8}` | Horizontal border width between vertical children |\n";
249
+ md += "| `divide-solid` | Solid border style for dividers |\n";
250
+ md += "| `divide-dashed` | Dashed border style for dividers |\n";
251
+ md += "| `divide-dotted` | Dotted border style for dividers |\n";
252
+ md += "| `divide-none` | Remove divider borders |\n";
211
253
  md += "\n";
212
254
 
213
255
  md += "### Position & Inset\n\n";
@@ -335,6 +377,9 @@ function generateMarkdown() {
335
377
  ...alignProps,
336
378
  ...a11yProps,
337
379
  ...viewportProps,
380
+ ...outlineProps,
381
+ ...aspectProps,
382
+ ...backdropProps,
338
383
  "w-",
339
384
  "h-",
340
385
  "min-w-",
@@ -354,6 +399,7 @@ function generateMarkdown() {
354
399
  "duration-",
355
400
  "gap-",
356
401
  "space-",
402
+ "divide-",
357
403
  ];
358
404
  for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
359
405
  if (!allHandledPrefixes.some((p) => klass.startsWith(p) || klass === p)) {