mancha 0.17.3 → 0.17.4

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 (70) hide show
  1. package/.github/workflows/ci.yml +8 -8
  2. package/.prettierrc +2 -2
  3. package/.vscode/extensions.json +1 -1
  4. package/.vscode/launch.json +33 -43
  5. package/README.md +94 -94
  6. package/dist/browser.js.map +1 -1
  7. package/dist/cli.js.map +1 -1
  8. package/dist/css_gen_basic.js.map +1 -1
  9. package/dist/css_gen_utils.d.ts +786 -0
  10. package/dist/css_gen_utils.js +63 -23
  11. package/dist/css_gen_utils.js.map +1 -1
  12. package/dist/dome.js.map +1 -1
  13. package/dist/expressions/ast.d.ts +16 -16
  14. package/dist/expressions/ast.test.js +89 -64
  15. package/dist/expressions/ast.test.js.map +1 -1
  16. package/dist/expressions/ast_factory.d.ts +1 -1
  17. package/dist/expressions/ast_factory.js +17 -17
  18. package/dist/expressions/ast_factory.js.map +1 -1
  19. package/dist/expressions/ast_factory.test.js +42 -36
  20. package/dist/expressions/ast_factory.test.js.map +1 -1
  21. package/dist/expressions/constants.js +56 -56
  22. package/dist/expressions/constants.js.map +1 -1
  23. package/dist/expressions/constants.test.js +57 -57
  24. package/dist/expressions/constants.test.js.map +1 -1
  25. package/dist/expressions/eval.d.ts +17 -17
  26. package/dist/expressions/eval.js +58 -60
  27. package/dist/expressions/eval.js.map +1 -1
  28. package/dist/expressions/eval.test.js +11 -8
  29. package/dist/expressions/eval.test.js.map +1 -1
  30. package/dist/expressions/expressions.test.d.ts +6 -6
  31. package/dist/expressions/expressions.test.js +6 -6
  32. package/dist/expressions/index.d.ts +6 -6
  33. package/dist/expressions/index.js +6 -6
  34. package/dist/expressions/parser.d.ts +3 -3
  35. package/dist/expressions/parser.js +37 -42
  36. package/dist/expressions/parser.js.map +1 -1
  37. package/dist/expressions/parser.test.js +3 -6
  38. package/dist/expressions/parser.test.js.map +1 -1
  39. package/dist/expressions/tokenizer.js +22 -25
  40. package/dist/expressions/tokenizer.js.map +1 -1
  41. package/dist/expressions/tokenizer.test.js +40 -15
  42. package/dist/expressions/tokenizer.test.js.map +1 -1
  43. package/dist/index.js.map +1 -1
  44. package/dist/iterator.js.map +1 -1
  45. package/dist/mancha.js.map +1 -1
  46. package/dist/plugins.js +2 -2
  47. package/dist/plugins.js.map +1 -1
  48. package/dist/query.js.map +1 -1
  49. package/dist/renderer.js.map +1 -1
  50. package/dist/safe_browser.js.map +1 -1
  51. package/dist/store.js +1 -1
  52. package/dist/store.js.map +1 -1
  53. package/dist/test_utils.js.map +1 -1
  54. package/dist/trusted_attributes.js.map +1 -1
  55. package/dist/type_checker.js +11 -7
  56. package/dist/type_checker.js.map +1 -1
  57. package/dist/worker.js.map +1 -1
  58. package/docs/css.md +309 -0
  59. package/docs/quickstart.md +305 -296
  60. package/global.d.ts +2 -2
  61. package/gulpfile.ts +44 -0
  62. package/package.json +86 -84
  63. package/scripts/generate-css-docs.ts +263 -0
  64. package/tsconfig.json +42 -19
  65. package/tsec_exemptions.json +8 -3
  66. package/webpack.config.esmodule.ts +26 -0
  67. package/webpack.config.ts +21 -0
  68. package/gulpfile.js +0 -44
  69. package/webpack.config.esmodule.js +0 -23
  70. package/webpack.config.js +0 -18
package/docs/css.md ADDED
@@ -0,0 +1,309 @@
1
+ # CSS Documentation
2
+
3
+ Mancha provides a set of CSS utilities and basic styles to help you build your application.
4
+
5
+ ## Basic CSS
6
+
7
+ The basic CSS rules provide a clean, readable default style for standard HTML elements. You can inject them using `injectBasicCss()` or by adding `css="basic"` to your script tag.
8
+
9
+ ### Reset & Defaults
10
+
11
+ - **Max Width**: 70ch (centered)
12
+ - **Padding**: 2em 1em
13
+ - **Line Height**: 1.75
14
+ - **Font Family**: sans-serif
15
+ - **H1-H6 Margin**: 1em 0 0.5em
16
+ - **P, UL, OL Margin Bottom**: 1em
17
+
18
+ ## Utility CSS
19
+
20
+ The utility CSS rules are inspired by Tailwind CSS. You can inject them using `injectUtilsCss()` or by adding `css="utils"` to your script tag.
21
+
22
+ ### Media Breakpoints
23
+
24
+ | Prefix | Min Width |
25
+ | ------ | --------- |
26
+ | `sm:` | `640px` |
27
+ | `md:` | `768px` |
28
+ | `lg:` | `1024px` |
29
+ | `xl:` | `1280px` |
30
+
31
+ ### Pseudo States
32
+
33
+ The following pseudo states are supported for all utilities:
34
+
35
+ - `hover:`
36
+ - `focus:`
37
+ - `disabled:`
38
+ - `active:`
39
+
40
+ ### Spacing (Margin & Padding)
41
+
42
+ Spacing utilities use a 0.25rem (4px) unit by default.
43
+
44
+ | Prefix | Property | Values |
45
+ | ------ | -------------------- | ------------------------------------------------- |
46
+ | `m-` | `margin` | `0`, `0.25rem` - `128rem` (and negative versions) |
47
+ | `mx-` | `margin-left/right` | Same as above |
48
+ | `my-` | `margin-top/bottom` | Same as above |
49
+ | `mt-` | `margin-top` | Same as above |
50
+ | `mb-` | `margin-bottom` | Same as above |
51
+ | `ml-` | `margin-left` | Same as above |
52
+ | `mr-` | `margin-right` | Same as above |
53
+ | `p-` | `padding` | `0`, `0.25rem` - `128rem` (and negative versions) |
54
+ | `px-` | `padding-left/right` | Same as above |
55
+ | `py-` | `padding-top/bottom` | Same as above |
56
+ | `pt-` | `padding-top` | Same as above |
57
+ | `pb-` | `padding-bottom` | Same as above |
58
+ | `pl-` | `padding-left` | Same as above |
59
+ | `pr-` | `padding-right` | Same as above |
60
+
61
+ ### Sizing (Width & Height)
62
+
63
+ | Prefix | Property | Values |
64
+ | --------------------------- | ------------------ | ----------------------------------------------------------------------------------- |
65
+ | `w-` | `width` | `0`, `full` (100%), `screen` (100vw/vh), `auto`, `px`, `0.25rem` - `128rem` |
66
+ | `w-dvw/dvh/svw/svh/lvw/lvh` | `width` | Viewport-relative units |
67
+ | `w-fit/min/max` | `width` | `fit-content`, `min-content`, `max-content` |
68
+ | `h-` | `height` | `0`, `full` (100%), `screen` (100vw/vh), `auto`, `px`, `0.25rem` - `128rem` |
69
+ | `h-dvw/dvh/svw/svh/lvw/lvh` | `height` | Viewport-relative units |
70
+ | `h-fit/min/max` | `height` | `fit-content`, `min-content`, `max-content` |
71
+ | `min-w-` | `min-width` | Same as sizing |
72
+ | `min-h-` | `min-height` | Same as sizing |
73
+ | `max-w-` | `max-width` | Same as sizing |
74
+ | `max-h-` | `max-height` | Same as sizing |
75
+ | `size-` | `width` & `height` | `auto`, `px`, `full`, `dvw`, `dvh`, `svw`, `svh`, `lvw`, `lvh`, `min`, `max`, `fit` |
76
+
77
+ ### Colors
78
+
79
+ Supported prefixes: `text-`, `bg-`, `border-`, `fill-`.
80
+
81
+ | Color | Shades |
82
+ | ------------------------------- | ------------------------------------------------------------------- |
83
+ | `white`, `black`, `transparent` | N/A |
84
+ | `red` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
85
+ | `pink` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
86
+ | `purple` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
87
+ | `deep-purple` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
88
+ | `indigo` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
89
+ | `blue` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
90
+ | `light-blue` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
91
+ | `cyan` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
92
+ | `teal` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
93
+ | `green` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
94
+ | `light-green` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
95
+ | `lime` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
96
+ | `yellow` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
97
+ | `amber` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
98
+ | `orange` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
99
+ | `deep-orange` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
100
+ | `brown` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
101
+ | `gray` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
102
+ | `blue-gray` | `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
103
+
104
+ ### Borders & Corners
105
+
106
+ | Utility | Description |
107
+ | ----------------- | -------------------------------- |
108
+ | `border` | `{"border":"1px solid"}` |
109
+ | `border-none` | `{"border":"none"}` |
110
+ | `border-solid` | `{"border-style":"solid"}` |
111
+ | `border-dashed` | `{"border-style":"dashed"}` |
112
+ | `border-dotted` | `{"border-style":"dotted"}` |
113
+ | `border-collapse` | `{"border-collapse":"collapse"}` |
114
+ | `rounded-none` | `{"border-radius":"0"}` |
115
+ | `rounded` | `{"border-radius":".25rem"}` |
116
+ | `rounded-sm` | `{"border-radius":".125rem"}` |
117
+ | `rounded-md` | `{"border-radius":".375rem"}` |
118
+ | `rounded-lg` | `{"border-radius":".5rem"}` |
119
+ | `rounded-xl` | `{"border-radius":".75rem"}` |
120
+ | `rounded-full` | `{"border-radius":"9999px"}` |
121
+
122
+ ### Shadows & Effects
123
+
124
+ | Utility | Description |
125
+ | ---------------- | -------------------------------------------------------------------------------------------- |
126
+ | `shadow` | `{"box-shadow":"0 0 1px 0 rgba(0, 0, 0, 0.05)"}` |
127
+ | `shadow-sm` | `{"box-shadow":"0 1px 2px 0 rgba(0, 0, 0, 0.05)"}` |
128
+ | `shadow-md` | `{"box-shadow":"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"}` |
129
+ | `shadow-lg` | `{"box-shadow":"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"}` |
130
+ | `shadow-xl` | `{"box-shadow":"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"}` |
131
+ | `shadow-2xl` | `{"box-shadow":"0 25px 50px -12px rgba(0, 0, 0, 0.25)"}` |
132
+ | `shadow-inner` | `{"box-shadow":"inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"}` |
133
+ | `shadow-outline` | `{"box-shadow":"0 0 0 3px rgba(66, 153, 225, 0.5)"}` |
134
+ | `shadow-none` | `{"box-shadow":"none"}` |
135
+
136
+ ### Transitions & Animations
137
+
138
+ | Utility | Description |
139
+ | ----------------- | ---------------------------------------------------------------- |
140
+ | `transition-none` | `{"transition":"none"}` |
141
+ | `transition` | `{"transition":"all 150ms ease-in-out"}` |
142
+ | `animate-none` | `{"animation":"none"}` |
143
+ | `animate-spin` | `{"animation":"spin 1s linear infinite"}` |
144
+ | `animate-ping` | `{"animation":"ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"}` |
145
+ | `animate-pulse` | `{"animation":"pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"}` |
146
+
147
+ ### Interactivity
148
+
149
+ | Utility | Description |
150
+ | --------------------- | --------------------------- |
151
+ | `cursor-pointer` | `{"cursor":"pointer"}` |
152
+ | `cursor-wait` | `{"cursor":"wait"}` |
153
+ | `cursor-not-allowed` | `{"cursor":"not-allowed"}` |
154
+ | `select-none` | `{"user-select":"none"}` |
155
+ | `select-all` | `{"user-select":"all"}` |
156
+ | `pointer-events-auto` | `{"pointer-events":"auto"}` |
157
+ | `pointer-events-none` | `{"pointer-events":"none"}` |
158
+ | `resize` | `{"resize":"both"}` |
159
+ | `resize-x` | `{"resize":"horizontal"}` |
160
+ | `resize-y` | `{"resize":"vertical"}` |
161
+ | `resize-none` | `{"resize":"none"}` |
162
+
163
+ ### Typography
164
+
165
+ | Utility | Description |
166
+ | ------------------------- | ------------------------------------------------------------------------- |
167
+ | `font-mono` | `{"font-family":"monospace"}` |
168
+ | `font-sans` | `{"font-family":"sans-serif"}` |
169
+ | `font-serif` | `{"font-family":"serif"}` |
170
+ | `font-cursive` | `{"font-family":"cursive"}` |
171
+ | `text-xs` | `{"font-size":".75rem","line-height":"calc(1 / 0.75)"}` |
172
+ | `text-sm` | `{"font-size":".875rem","line-height":"calc(1.25 / 0.875)"}` |
173
+ | `text-base` | `{"font-size":"1rem","line-height":"calc(1.5 / 1)"}` |
174
+ | `text-lg` | `{"font-size":"1.125rem","line-height":"calc(1.75 / 1.125)"}` |
175
+ | `text-xl` | `{"font-size":"1.25rem","line-height":"calc(1.75 / 1.25)"}` |
176
+ | `text-2xl` | `{"font-size":"1.5rem","line-height":"calc(2 / 1.5)"}` |
177
+ | `text-3xl` | `{"font-size":"1.875rem","line-height":"calc(2.25 / 1.875)"}` |
178
+ | `text-4xl` | `{"font-size":"2.25rem","line-height":"calc(2.5 / 2.25)"}` |
179
+ | `text-5xl` | `{"font-size":"3rem","line-height":"1"}` |
180
+ | `text-6xl` | `{"font-size":"3.75rem","line-height":"1"}` |
181
+ | `text-7xl` | `{"font-size":"4.5rem","line-height":"1"}` |
182
+ | `font-thin` | `{"font-weight":100}` |
183
+ | `font-extralight` | `{"font-weight":200}` |
184
+ | `font-light` | `{"font-weight":300}` |
185
+ | `font-normal` | `{"font-weight":400}` |
186
+ | `font-medium` | `{"font-weight":500}` |
187
+ | `font-semibold` | `{"font-weight":600}` |
188
+ | `font-bold` | `{"font-weight":700}` |
189
+ | `font-extrabold` | `{"font-weight":800}` |
190
+ | `font-black` | `{"font-weight":900}` |
191
+ | `italic` | `{"font-style":"italic"}` |
192
+ | `not-italic` | `{"font-style":"normal"}` |
193
+ | `tracking-tighter` | `{"letter-spacing":"-0.05em"}` |
194
+ | `tracking-tight` | `{"letter-spacing":"-0.025em"}` |
195
+ | `tracking-normal` | `{"letter-spacing":"0"}` |
196
+ | `tracking-wide` | `{"letter-spacing":"0.025em"}` |
197
+ | `tracking-wider` | `{"letter-spacing":"0.05em"}` |
198
+ | `tracking-widest` | `{"letter-spacing":"0.1em"}` |
199
+ | `leading-none` | `{"line-height":"1"}` |
200
+ | `leading-tight` | `{"line-height":"1.25"}` |
201
+ | `leading-snug` | `{"line-height":"1.375"}` |
202
+ | `leading-normal` | `{"line-height":"1.5"}` |
203
+ | `leading-relaxed` | `{"line-height":"1.625"}` |
204
+ | `leading-loose` | `{"line-height":"2"}` |
205
+ | `text-left` | `{"text-align":"left"}` |
206
+ | `text-right` | `{"text-align":"right"}` |
207
+ | `text-center` | `{"text-align":"center"}` |
208
+ | `text-justify` | `{"text-align":"justify"}` |
209
+ | `underline` | `{"text-decoration":"underline"}` |
210
+ | `decoration-none` | `{"text-decoration":"none"}` |
211
+ | `line-through` | `{"text-decoration":"line-through"}` |
212
+ | `uppercase` | `{"text-transform":"uppercase"}` |
213
+ | `lowercase` | `{"text-transform":"lowercase"}` |
214
+ | `capitalize` | `{"text-transform":"capitalize"}` |
215
+ | `truncate` | `{"white-space":"nowrap","overflow":"hidden","text-overflow":"ellipsis"}` |
216
+ | `text-elipsis` | `{"text-overflow":"ellipsis"}` |
217
+ | `text-clip` | `{"text-overflow":"clip"}` |
218
+ | `text-wrap` | `{"text-wrap":"wrap"}` |
219
+ | `text-nowrap` | `{"text-wrap":"nowrap"}` |
220
+ | `text-balance` | `{"text-wrap":"balance"}` |
221
+ | `text-pretty` | `{"text-wrap":"pretty"}` |
222
+ | `whitespace-normal` | `{"white-space":"normal"}` |
223
+ | `whitespace-nowrap` | `{"white-space":"nowrap"}` |
224
+ | `whitespace-pre` | `{"white-space":"pre"}` |
225
+ | `whitespace-pre-line` | `{"white-space":"pre-line"}` |
226
+ | `whitespace-pre-wrap` | `{"white-space":"pre-wrap"}` |
227
+ | `whitespace-break-spaces` | `{"white-space":"break-spaces"}` |
228
+
229
+ ### Flexbox & Layout
230
+
231
+ | Utility | Description |
232
+ | ------------------- | ------------------------------------- |
233
+ | `flex` | `{"display":"flex"}` |
234
+ | `flex-1` | `{"flex":"1 1 0%"}` |
235
+ | `flex-inline` | `{"display":"inline-flex"}` |
236
+ | `flex-row` | `{"flex-direction":"row"}` |
237
+ | `flex-col` | `{"flex-direction":"column"}` |
238
+ | `flex-row-reverse` | `{"flex-direction":"row-reverse"}` |
239
+ | `flex-col-reverse` | `{"flex-direction":"column-reverse"}` |
240
+ | `flex-wrap` | `{"flex-wrap":"wrap"}` |
241
+ | `flex-wrap-reverse` | `{"flex-wrap":"wrap-reverse"}` |
242
+ | `flex-nowrap` | `{"flex-wrap":"nowrap"}` |
243
+ | `justify-start` | `{"justify-content":"flex-start"}` |
244
+ | `justify-end` | `{"justify-content":"flex-end"}` |
245
+ | `justify-center` | `{"justify-content":"center"}` |
246
+ | `justify-between` | `{"justify-content":"space-between"}` |
247
+ | `justify-around` | `{"justify-content":"space-around"}` |
248
+ | `justify-evenly` | `{"justify-content":"space-evenly"}` |
249
+ | `justify-stretch` | `{"justify-content":"stretch"}` |
250
+ | `items-start` | `{"align-items":"flex-start"}` |
251
+ | `items-end` | `{"align-items":"flex-end"}` |
252
+ | `items-center` | `{"align-items":"center"}` |
253
+ | `items-stretch` | `{"align-items":"stretch"}` |
254
+ | `flex-grow` | `{"flex-grow":1}` |
255
+ | `flex-shrink` | `{"flex-shrink":1}` |
256
+ | `flex-none` | `{"flex":"none"}` |
257
+ | `flex-auto` | `{"flex":"1 1 auto"}` |
258
+ | `flex-initial` | `{"flex":"0 1 auto"}` |
259
+ | `grow` | `{"flex-grow":"1"}` |
260
+ | `grow-0` | `{"flex-grow":"0"}` |
261
+ | `shrink` | `{"flex-shrink":"1"}` |
262
+ | `shrink-0` | `{"flex-shrink":"0"}` |
263
+ | `self-auto` | `{"align-self":"auto"}` |
264
+ | `self-start` | `{"align-self":"flex-start"}` |
265
+ | `self-end` | `{"align-self":"flex-end"}` |
266
+ | `self-center` | `{"align-self":"center"}` |
267
+ | `self-stretch` | `{"align-self":"stretch"}` |
268
+ | `self-baseline` | `{"align-self":"baseline"}` |
269
+ | `content-normal` | `{"align-content":"normal"}` |
270
+ | `content-start` | `{"align-content":"flex-start"}` |
271
+ | `content-end` | `{"align-content":"flex-end"}` |
272
+ | `content-center` | `{"align-content":"center"}` |
273
+ | `content-between` | `{"align-content":"space-between"}` |
274
+ | `content-around` | `{"align-content":"space-around"}` |
275
+ | `content-evenly` | `{"align-content":"space-evenly"}` |
276
+ | `content-stretch` | `{"align-content":"stretch"}` |
277
+ | `items-baseline` | `{"align-items":"baseline"}` |
278
+
279
+ ### Position & Inset
280
+
281
+ | Utility | Description |
282
+ | ---------------- | -------------------------------- |
283
+ | `relative` | `{"position":"relative"}` |
284
+ | `fixed` | `{"position":"fixed"}` |
285
+ | `absolute` | `{"position":"absolute"}` |
286
+ | `sticky` | `{"position":"sticky"}` |
287
+ | `object-contain` | `{"object-fit":"contain"}` |
288
+ | `object-cover` | `{"object-fit":"cover"}` |
289
+ | `object-fill` | `{"object-fit":"fill"}` |
290
+ | `object-none` | `{"object-fit":"none"}` |
291
+ | `z-auto` | `{"z-index":"auto"}` |
292
+ | `inset-0` | `{"inset":"0"}` |
293
+ | `inset-auto` | `{"inset":"auto"}` |
294
+ | `inset-x-0` | `{"left":"0","right":"0"}` |
295
+ | `inset-y-0` | `{"top":"0","bottom":"0"}` |
296
+ | `inset-x-auto` | `{"left":"auto","right":"auto"}` |
297
+ | `inset-y-auto` | `{"top":"auto","bottom":"auto"}` |
298
+
299
+ ### Other Utilities
300
+
301
+ | Utility | Description |
302
+ | -------------- | ------------------------------ |
303
+ | `no-underline` | `{"text-decoration":"none"}` |
304
+ | `box-border` | `{"box-sizing":"border-box"}` |
305
+ | `box-content` | `{"box-sizing":"content-box"}` |
306
+
307
+ ---
308
+
309
+ _Generated automatically from `src/css_gen_utils.ts`_