@massimo-cassandro/minimo 1.16.0 → 1.16.2

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 (37) hide show
  1. package/README.md +12 -3
  2. package/design-tokens/_src/typography.minimo.tokens.mjs +1 -1
  3. package/dev-tools/README.md +11 -7
  4. package/dev-tools/starter-kit/TODO.md +135 -0
  5. package/dev-tools/{webpack-setup/merge-jsonc.cjs → starter-kit/src/merge-jsonc.mjs} +40 -15
  6. package/dev-tools/{webpack-setup → starter-kit}/starter-install.sh +22 -3
  7. package/dev-tools/starter-kit/templates/_root_htaccess +68 -0
  8. package/dev-tools/starter-kit/templates/_root_robots.txt +5 -0
  9. package/dev-tools/starter-kit/templates/entry-tpl.critical.css +18 -0
  10. package/dev-tools/starter-kit/templates/entry-tpl.css +24 -0
  11. package/dev-tools/starter-kit/templates/tokens-config.mjs +33 -0
  12. package/dev-tools/{webpack-setup → starter-kit}/webpack-modules/css-rules.mjs +6 -1
  13. package/dev-tools/{webpack-setup → starter-kit}/webpack-modules/postcss.config.mjs +14 -34
  14. package/dev-tools/starter-kit/webpack-modules/purgecss-variables-safelist.mjs +92 -0
  15. package/dev-tools/{webpack-setup → starter-kit}/webpack.config.mjs +169 -59
  16. package/package.json +4 -2
  17. package/src/css/dimensions.css +3 -0
  18. package/src/css/margin-padding-bootstrap-media.css +1844 -0
  19. package/src/css/margin-padding-bootstrap.css +464 -0
  20. package/src/css/margin-padding-media.css +1843 -0
  21. package/src/css/margin-padding.css +405 -45
  22. package/src/custom-media.css +12 -0
  23. package/src/minimo.css +5 -0
  24. /package/dev-tools/{webpack-setup → starter-kit}/templates/__project__.code-workspace +0 -0
  25. /package/dev-tools/{webpack-setup → starter-kit}/templates/_browserslistrc +0 -0
  26. /package/dev-tools/{webpack-setup → starter-kit}/templates/_editorconfig +0 -0
  27. /package/dev-tools/{webpack-setup → starter-kit}/templates/_gitignore +0 -0
  28. /package/dev-tools/{webpack-setup → starter-kit}/templates/_prettierrc +0 -0
  29. /package/dev-tools/{webpack-setup → starter-kit}/templates/eslint.config.mjs +0 -0
  30. /package/dev-tools/{webpack-setup → starter-kit}/templates/jsconfig.json +0 -0
  31. /package/dev-tools/{webpack-setup → starter-kit}/templates/package-tpl.json +0 -0
  32. /package/dev-tools/{webpack-setup → starter-kit}/templates/stylelint.config.mjs +0 -0
  33. /package/dev-tools/{webpack-setup → starter-kit}/webpack-modules/get-jsConfig-aliases.mjs +0 -0
  34. /package/dev-tools/{webpack-setup → starter-kit}/webpack-modules/mini-svg-data-uri-loader.cjs +0 -0
  35. /package/dev-tools/{webpack-setup → starter-kit}/webpack-modules/svg-rules.mjs +0 -0
  36. /package/dev-tools/{webpack-setup → starter-kit}/webpack-modules/svgo.config.mjs +0 -0
  37. /package/dev-tools/{webpack-setup → starter-kit}/webpack-template.ejs +0 -0
package/src/css/margin-padding.css CHANGED
@@ -1,102 +1,462 @@
1
- /* stylelint-disable declaration-no-important */
1
+ /* stylelint-disable declaration-no-important, selector-class-pattern */
2
2
 
3
- /* TODO produzione utilities in automatico o con funzione css */
4
- /* TODO produrre anche un versione con il naming bootstrap per facilitare eventuali migrazioni */
3
+ /* AUTO-GENERATED FILE — do not edit by hand.
4
+ Generated by `node scripts/build-margin-padding-css.mjs`.
5
+ Edit the `sizes` / `classes` / `media` maps there instead.
5
6
 
6
- .mbs-xxs {
7
- margin-block-start: var(--size-xxs) !important;
7
+ Responsive variants live in `margin-padding-media.css`. */
8
+
9
+ .m-0 {
10
+ margin: 0 !important;
11
+ }
12
+ .m-auto {
13
+ margin: auto !important;
14
+ }
15
+ .m-3xl {
16
+ margin: var(--size-3xl) !important;
17
+ }
18
+ .m-2xl {
19
+ margin: var(--size-2xl) !important;
20
+ }
21
+ .m {
22
+ margin: var(--size-base) !important;
23
+ }
24
+ .m-lg {
25
+ margin: var(--size-lg) !important;
26
+ }
27
+ .m-md {
28
+ margin: var(--size-md) !important;
29
+ }
30
+ .m-sm {
31
+ margin: var(--size-sm) !important;
32
+ }
33
+ .m-xl {
34
+ margin: var(--size-xl) !important;
35
+ }
36
+ .m-xs {
37
+ margin: var(--size-xs) !important;
38
+ }
39
+ .m-xxs {
40
+ margin: var(--size-xxs) !important;
41
+ }
42
+
43
+ .mb-0 {
44
+ margin-block: 0 !important;
45
+ }
46
+ .mb-auto {
47
+ margin-block: auto !important;
48
+ }
49
+ .mb-3xl {
50
+ margin-block: var(--size-3xl) !important;
51
+ }
52
+ .mb-2xl {
53
+ margin-block: var(--size-2xl) !important;
54
+ }
55
+ .mb {
56
+ margin-block: var(--size-base) !important;
8
57
  }
58
+ .mb-lg {
59
+ margin-block: var(--size-lg) !important;
60
+ }
61
+ .mb-md {
62
+ margin-block: var(--size-md) !important;
63
+ }
64
+ .mb-sm {
65
+ margin-block: var(--size-sm) !important;
66
+ }
67
+ .mb-xl {
68
+ margin-block: var(--size-xl) !important;
69
+ }
70
+ .mb-xs {
71
+ margin-block: var(--size-xs) !important;
72
+ }
73
+ .mb-xxs {
74
+ margin-block: var(--size-xxs) !important;
75
+ }
76
+
9
77
  .mbs-0 {
10
78
  margin-block-start: 0 !important;
11
79
  }
80
+ .mbs-auto {
81
+ margin-block-start: auto !important;
82
+ }
83
+ .mbs-3xl {
84
+ margin-block-start: var(--size-3xl) !important;
85
+ }
86
+ .mbs-2xl {
87
+ margin-block-start: var(--size-2xl) !important;
88
+ }
12
89
  .mbs {
13
90
  margin-block-start: var(--size-base) !important;
14
91
  }
15
92
  .mbs-lg {
16
93
  margin-block-start: var(--size-lg) !important;
17
94
  }
95
+ .mbs-md {
96
+ margin-block-start: var(--size-md) !important;
97
+ }
98
+ .mbs-sm {
99
+ margin-block-start: var(--size-sm) !important;
100
+ }
18
101
  .mbs-xl {
19
102
  margin-block-start: var(--size-xl) !important;
20
103
  }
21
- .mbs-auto {
22
- margin-block-start: auto !important;
104
+ .mbs-xs {
105
+ margin-block-start: var(--size-xs) !important;
106
+ }
107
+ .mbs-xxs {
108
+ margin-block-start: var(--size-xxs) !important;
23
109
  }
24
- /* @media (--media-large-viewport-up) {
25
-
26
- .mt-dsk-lg {
27
- margin-block-start: var(--size-lg);
28
- }
29
- } */
30
110
 
31
111
  .mbe-0 {
32
112
  margin-block-end: 0 !important;
33
113
  }
114
+ .mbe-auto {
115
+ margin-block-end: auto !important;
116
+ }
117
+ .mbe-3xl {
118
+ margin-block-end: var(--size-3xl) !important;
119
+ }
120
+ .mbe-2xl {
121
+ margin-block-end: var(--size-2xl) !important;
122
+ }
34
123
  .mbe {
35
124
  margin-block-end: var(--size-base) !important;
36
125
  }
37
- .mbe-xs {
38
- margin-block-end: var(--size-xs) !important;
39
- }
40
126
  .mbe-lg {
41
127
  margin-block-end: var(--size-lg) !important;
42
128
  }
129
+ .mbe-md {
130
+ margin-block-end: var(--size-md) !important;
131
+ }
132
+ .mbe-sm {
133
+ margin-block-end: var(--size-sm) !important;
134
+ }
43
135
  .mbe-xl {
44
136
  margin-block-end: var(--size-xl) !important;
45
137
  }
46
- /* @media (--media-large-viewport-up) {
47
-
48
- .mb-dsk-lg {
49
- margin-block-end: var(--size-lg);
50
- }
51
- } */
138
+ .mbe-xs {
139
+ margin-block-end: var(--size-xs) !important;
140
+ }
141
+ .mbe-xxs {
142
+ margin-block-end: var(--size-xxs) !important;
143
+ }
52
144
 
53
- /* .grid-full-row {
54
- grid-column: 1 / -1;
55
- } */
145
+ .mi-0 {
146
+ margin-inline: 0 !important;
147
+ }
148
+ .mi-auto {
149
+ margin-inline: auto !important;
150
+ }
151
+ .mi-3xl {
152
+ margin-inline: var(--size-3xl) !important;
153
+ }
154
+ .mi-2xl {
155
+ margin-inline: var(--size-2xl) !important;
156
+ }
157
+ .mi {
158
+ margin-inline: var(--size-base) !important;
159
+ }
160
+ .mi-lg {
161
+ margin-inline: var(--size-lg) !important;
162
+ }
163
+ .mi-md {
164
+ margin-inline: var(--size-md) !important;
165
+ }
166
+ .mi-sm {
167
+ margin-inline: var(--size-sm) !important;
168
+ }
169
+ .mi-xl {
170
+ margin-inline: var(--size-xl) !important;
171
+ }
172
+ .mi-xs {
173
+ margin-inline: var(--size-xs) !important;
174
+ }
175
+ .mi-xxs {
176
+ margin-inline: var(--size-xxs) !important;
177
+ }
56
178
 
57
- .mis {
58
- margin-inline-start: var(--size-base) !important;
179
+ .mis-0 {
180
+ margin-inline-start: 0 !important;
59
181
  }
60
182
  .mis-auto {
61
183
  margin-inline-start: auto !important;
62
184
  }
185
+ .mis-3xl {
186
+ margin-inline-start: var(--size-3xl) !important;
187
+ }
188
+ .mis-2xl {
189
+ margin-inline-start: var(--size-2xl) !important;
190
+ }
191
+ .mis {
192
+ margin-inline-start: var(--size-base) !important;
193
+ }
194
+ .mis-lg {
195
+ margin-inline-start: var(--size-lg) !important;
196
+ }
197
+ .mis-md {
198
+ margin-inline-start: var(--size-md) !important;
199
+ }
200
+ .mis-sm {
201
+ margin-inline-start: var(--size-sm) !important;
202
+ }
203
+ .mis-xl {
204
+ margin-inline-start: var(--size-xl) !important;
205
+ }
206
+ .mis-xs {
207
+ margin-inline-start: var(--size-xs) !important;
208
+ }
209
+ .mis-xxs {
210
+ margin-inline-start: var(--size-xxs) !important;
211
+ }
63
212
 
64
- .mie {
65
- margin-inline-end: var(--size-base) !important;
213
+ .mie-0 {
214
+ margin-inline-end: 0 !important;
66
215
  }
67
216
  .mie-auto {
68
217
  margin-inline-end: auto !important;
69
218
  }
219
+ .mie-3xl {
220
+ margin-inline-end: var(--size-3xl) !important;
221
+ }
222
+ .mie-2xl {
223
+ margin-inline-end: var(--size-2xl) !important;
224
+ }
225
+ .mie {
226
+ margin-inline-end: var(--size-base) !important;
227
+ }
228
+ .mie-lg {
229
+ margin-inline-end: var(--size-lg) !important;
230
+ }
231
+ .mie-md {
232
+ margin-inline-end: var(--size-md) !important;
233
+ }
234
+ .mie-sm {
235
+ margin-inline-end: var(--size-sm) !important;
236
+ }
237
+ .mie-xl {
238
+ margin-inline-end: var(--size-xl) !important;
239
+ }
70
240
  .mie-xs {
71
241
  margin-inline-end: var(--size-xs) !important;
72
242
  }
243
+ .mie-xxs {
244
+ margin-inline-end: var(--size-xxs) !important;
245
+ }
73
246
 
74
- .mi {
75
- margin-inline: var(--size-base) !important;
247
+ .p-0 {
248
+ padding: 0 !important;
76
249
  }
77
- .mi-0 {
78
- margin-inline: 0 !important;
250
+ .p-3xl {
251
+ padding: var(--size-3xl) !important;
252
+ }
253
+ .p-2xl {
254
+ padding: var(--size-2xl) !important;
255
+ }
256
+ .p {
257
+ padding: var(--size-base) !important;
258
+ }
259
+ .p-lg {
260
+ padding: var(--size-lg) !important;
261
+ }
262
+ .p-md {
263
+ padding: var(--size-md) !important;
264
+ }
265
+ .p-sm {
266
+ padding: var(--size-sm) !important;
267
+ }
268
+ .p-xl {
269
+ padding: var(--size-xl) !important;
270
+ }
271
+ .p-xs {
272
+ padding: var(--size-xs) !important;
273
+ }
274
+ .p-xxs {
275
+ padding: var(--size-xxs) !important;
79
276
  }
80
277
 
81
- .mb {
82
- margin-block: var(--size-base) !important;
278
+ .pb-0 {
279
+ padding-block: 0 !important;
83
280
  }
84
- .mb-0 {
85
- margin-block: 0 !important;
281
+ .pb-3xl {
282
+ padding-block: var(--size-3xl) !important;
283
+ }
284
+ .pb-2xl {
285
+ padding-block: var(--size-2xl) !important;
286
+ }
287
+ .pb {
288
+ padding-block: var(--size-base) !important;
289
+ }
290
+ .pb-lg {
291
+ padding-block: var(--size-lg) !important;
292
+ }
293
+ .pb-md {
294
+ padding-block: var(--size-md) !important;
295
+ }
296
+ .pb-sm {
297
+ padding-block: var(--size-sm) !important;
298
+ }
299
+ .pb-xl {
300
+ padding-block: var(--size-xl) !important;
301
+ }
302
+ .pb-xs {
303
+ padding-block: var(--size-xs) !important;
304
+ }
305
+ .pb-xxs {
306
+ padding-block: var(--size-xxs) !important;
86
307
  }
87
308
 
88
- .mi-lg {
89
- margin-inline: var(--size-lg) !important;
309
+ .pbs-0 {
310
+ padding-block-start: 0 !important;
311
+ }
312
+ .pbs-3xl {
313
+ padding-block-start: var(--size-3xl) !important;
314
+ }
315
+ .pbs-2xl {
316
+ padding-block-start: var(--size-2xl) !important;
317
+ }
318
+ .pbs {
319
+ padding-block-start: var(--size-base) !important;
320
+ }
321
+ .pbs-lg {
322
+ padding-block-start: var(--size-lg) !important;
323
+ }
324
+ .pbs-md {
325
+ padding-block-start: var(--size-md) !important;
326
+ }
327
+ .pbs-sm {
328
+ padding-block-start: var(--size-sm) !important;
329
+ }
330
+ .pbs-xl {
331
+ padding-block-start: var(--size-xl) !important;
332
+ }
333
+ .pbs-xs {
334
+ padding-block-start: var(--size-xs) !important;
335
+ }
336
+ .pbs-xxs {
337
+ padding-block-start: var(--size-xxs) !important;
90
338
  }
91
339
 
92
- .mb-lg {
93
- margin-block: var(--size-lg) !important;
340
+ .pbe-0 {
341
+ padding-block-end: 0 !important;
342
+ }
343
+ .pbe-3xl {
344
+ padding-block-end: var(--size-3xl) !important;
345
+ }
346
+ .pbe-2xl {
347
+ padding-block-end: var(--size-2xl) !important;
348
+ }
349
+ .pbe {
350
+ padding-block-end: var(--size-base) !important;
351
+ }
352
+ .pbe-lg {
353
+ padding-block-end: var(--size-lg) !important;
354
+ }
355
+ .pbe-md {
356
+ padding-block-end: var(--size-md) !important;
357
+ }
358
+ .pbe-sm {
359
+ padding-block-end: var(--size-sm) !important;
360
+ }
361
+ .pbe-xl {
362
+ padding-block-end: var(--size-xl) !important;
363
+ }
364
+ .pbe-xs {
365
+ padding-block-end: var(--size-xs) !important;
366
+ }
367
+ .pbe-xxs {
368
+ padding-block-end: var(--size-xxs) !important;
94
369
  }
95
370
 
96
- .mi-xl {
97
- margin-inline: var(--size-xl) !important;
371
+ .pi-0 {
372
+ padding-inline: 0 !important;
98
373
  }
99
- .mb-xl {
100
- margin-block: var(--size-xl) !important;
374
+ .pi-3xl {
375
+ padding-inline: var(--size-3xl) !important;
376
+ }
377
+ .pi-2xl {
378
+ padding-inline: var(--size-2xl) !important;
379
+ }
380
+ .pi {
381
+ padding-inline: var(--size-base) !important;
382
+ }
383
+ .pi-lg {
384
+ padding-inline: var(--size-lg) !important;
385
+ }
386
+ .pi-md {
387
+ padding-inline: var(--size-md) !important;
388
+ }
389
+ .pi-sm {
390
+ padding-inline: var(--size-sm) !important;
391
+ }
392
+ .pi-xl {
393
+ padding-inline: var(--size-xl) !important;
394
+ }
395
+ .pi-xs {
396
+ padding-inline: var(--size-xs) !important;
397
+ }
398
+ .pi-xxs {
399
+ padding-inline: var(--size-xxs) !important;
400
+ }
401
+
402
+ .pis-0 {
403
+ padding-inline-start: 0 !important;
404
+ }
405
+ .pis-3xl {
406
+ padding-inline-start: var(--size-3xl) !important;
407
+ }
408
+ .pis-2xl {
409
+ padding-inline-start: var(--size-2xl) !important;
410
+ }
411
+ .pis {
412
+ padding-inline-start: var(--size-base) !important;
413
+ }
414
+ .pis-lg {
415
+ padding-inline-start: var(--size-lg) !important;
416
+ }
417
+ .pis-md {
418
+ padding-inline-start: var(--size-md) !important;
419
+ }
420
+ .pis-sm {
421
+ padding-inline-start: var(--size-sm) !important;
422
+ }
423
+ .pis-xl {
424
+ padding-inline-start: var(--size-xl) !important;
425
+ }
426
+ .pis-xs {
427
+ padding-inline-start: var(--size-xs) !important;
428
+ }
429
+ .pis-xxs {
430
+ padding-inline-start: var(--size-xxs) !important;
101
431
  }
102
432
 
433
+ .pie-0 {
434
+ padding-inline-end: 0 !important;
435
+ }
436
+ .pie-3xl {
437
+ padding-inline-end: var(--size-3xl) !important;
438
+ }
439
+ .pie-2xl {
440
+ padding-inline-end: var(--size-2xl) !important;
441
+ }
442
+ .pie {
443
+ padding-inline-end: var(--size-base) !important;
444
+ }
445
+ .pie-lg {
446
+ padding-inline-end: var(--size-lg) !important;
447
+ }
448
+ .pie-md {
449
+ padding-inline-end: var(--size-md) !important;
450
+ }
451
+ .pie-sm {
452
+ padding-inline-end: var(--size-sm) !important;
453
+ }
454
+ .pie-xl {
455
+ padding-inline-end: var(--size-xl) !important;
456
+ }
457
+ .pie-xs {
458
+ padding-inline-end: var(--size-xs) !important;
459
+ }
460
+ .pie-xxs {
461
+ padding-inline-end: var(--size-xxs) !important;
462
+ }
package/src/custom-media.css CHANGED
@@ -1,3 +1,15 @@
1
+ /* TODO valutare rinomina dei breakpoint in nomi semantici (es. dsk/lap/tab/mob,
2
+ vedi scripts/build-margin-padding-css.mjs) per coerenza con la scala `sizes`,
3
+ che usa la stessa nomenclatura xs/sm/md/lg/xl e genera ambiguità nelle
4
+ utility responsive. Non banale: i tier attuali (xxlarge/xlarge/large/medium/
5
+ small, con varianti -only/-down) sono numerosi e in parte sovrapposti (es.
6
+ "large" = "small desktop") e non si riducono in modo pulito a poche
7
+ categorie semantiche; inoltre il nome è usato in molti file (grid.css,
8
+ display.css, visibility.css, text.css, sf-macro.css, json-table, oltre ai
9
+ file margin-padding-*-media.css) ed è parte di un template pensato per
10
+ essere personalizzato dall'utente: rinominarlo qui non aggiorna le copie
11
+ già in uso nei progetti che lo hanno importato. */
12
+
1
13
  /*
2
14
  90rem : 1440px xxlarge (large desktop)
3
15
  80rem : 1280px xlarge (desktop)
package/src/minimo.css CHANGED
@@ -37,6 +37,11 @@
37
37
  @import '@minimo/css/dimensions.css';
38
38
  @import '@minimo/css/display.css';
39
39
  @import '@minimo/css/margin-padding.css';
40
+ /* @import '@minimo/css/margin-padding-media.css'; responsive verion */
41
+ /* alternative boostrap naming
42
+ @import '@minimo/css/margin-padding-bootstrap.css';
43
+ @import '@minimo/css/margin-padding-bootsrap-media.css';
44
+ */
40
45
  @import '@minimo/css/overflow.css';
41
46
  @import '@minimo/css/position.css';
42
47
  @import '@minimo/css/visibility.css';