1mpacto-sass 0.0.5 → 0.0.7

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 (4) hide show
  1. package/_config.scss +16 -2
  2. package/_engine.scss +154 -7
  3. package/package.json +1 -1
  4. package/readme.md +351 -386
package/_config.scss CHANGED
@@ -84,7 +84,7 @@ $width-map: map.merge($spacing-map, ('screen': 100vw,
84
84
  'dvw': 100dvw,
85
85
  'min': min-content,
86
86
  'max': max-content,
87
- 'fit': fit-content,
87
+ 'fit': (-moz-fit-content, fit-content),
88
88
  ));
89
89
 
90
90
  $height-map: map.merge($spacing-map, ('screen': 100vh,
@@ -93,7 +93,12 @@ $height-map: map.merge($spacing-map, ('screen': 100vh,
93
93
  'dvh': 100dvh,
94
94
  'min': min-content,
95
95
  'max': max-content,
96
- 'fit': fit-content,
96
+ 'fit': (-moz-fit-content, fit-content),
97
+ ));
98
+
99
+ $size-map: map.merge($spacing-map, ('min': min-content,
100
+ 'max': max-content,
101
+ 'fit': (-moz-fit-content, fit-content),
97
102
  ));
98
103
 
99
104
  // ==========================================
@@ -227,6 +232,11 @@ $static-utilities-map: ( // POSITION
227
232
  'inline-flex': (property: display, value: inline-flex),
228
233
  'grid': (property: display, value: grid),
229
234
  'hidden': (property: display, value: none),
235
+ 'table': (property: display, value: table),
236
+ 'table-row': (property: display, value: table-row),
237
+ 'table-cell': (property: display, value: table-cell),
238
+ 'contents': (property: display, value: contents),
239
+ 'inline-grid': (property: display, value: inline-grid),
230
240
 
231
241
  // FLEX
232
242
  'flex-row': (property: flex-direction, value: row),
@@ -507,6 +517,7 @@ $static-utilities-map: ( // POSITION
507
517
  $colors: $color-map,
508
518
  $width: $width-map,
509
519
  $height: $height-map,
520
+ $size: $size-map,
510
521
  $typography: $typography-map,
511
522
  $font-family: $font-family-map,
512
523
  $font-weight: $font-weight-map,
@@ -662,6 +673,7 @@ $static-utilities-map: ( // POSITION
662
673
  // SIZING // passed
663
674
  'w': (property: width, map: $width),
664
675
  'h': (property: height, map: $height),
676
+ 'size': (property: (width, height), map: $size),
665
677
  'min-w': (property: min-width, map: $width),
666
678
  'max-w': (property: max-width, map: $width),
667
679
  'min-h': (property: min-height, map: $height),
@@ -689,6 +701,8 @@ $static-utilities-map: ( // POSITION
689
701
  'border-l': (type: 'complex', property-width: border-left-width, property-color: border-left-color, maps: (color: $colors, width: $border-width)),
690
702
 
691
703
  'rounded': (property: border-radius, map: $border-radius),
704
+ 'rounded-s': (property: (border-start-start-radius, border-end-start-radius), map: $border-radius),
705
+ 'rounded-e': (property: (border-start-end-radius, border-end-end-radius), map: $border-radius),
692
706
  'rounded-l': (property: (border-top-left-radius, border-bottom-left-radius), map: $border-radius),
693
707
  'rounded-r': (property: (border-top-right-radius, border-bottom-right-radius), map: $border-radius),
694
708
  'rounded-t': (property: (border-top-left-radius, border-top-right-radius), map: $border-radius),
package/_engine.scss CHANGED
@@ -27,12 +27,33 @@ $browser-prefixes: (
27
27
  'hyphens': ('-webkit-'),
28
28
  'print-color-adjust': ('-webkit-'),
29
29
  'text-size-adjust': ('-webkit-', '-moz-'),
30
+ 'column-gap': ('-moz-'),
30
31
  );
31
32
 
32
33
  // ==========================================
33
34
  // HELPER FUNCTIONS
34
35
  // ==========================================
35
36
 
37
+ @function str-replace($string, $search, $replace: '') {
38
+ $index: string.index($string, $search);
39
+
40
+ @if $index {
41
+ @return string.slice($string, 1, $index - 1)+$replace+str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
42
+ }
43
+
44
+ @return $string;
45
+ }
46
+
47
+ @function resolve-arbitrary-value($key) {
48
+ @if string.length($key)>2 and string.slice($key, 1, 1)=='['and string.slice($key, -1)==']' {
49
+ $val: string.slice($key, 2, -2);
50
+ // Replace underscores with spaces for calc()
51
+ @return str-replace($val, '_', ' ');
52
+ }
53
+
54
+ @return null;
55
+ }
56
+
36
57
  @function escape-classname($name) {
37
58
  $escaped: "";
38
59
  $str: $name + "";
@@ -209,8 +230,8 @@ $browser-prefixes: (
209
230
  $base: string.slice($base, 2);
210
231
  }
211
232
 
212
- // 3. Construct: [!] + [Prefix] + [-] + [Base]
213
- @return $imp+$prefix+$neg+$base;
233
+ // 3. Construct: [!] + [-] + [Prefix] + [Base]
234
+ @return $imp+$neg+$prefix+$base;
214
235
  }
215
236
 
216
237
  @mixin output-with-prefix($prop, $val, $suffix) {
@@ -218,11 +239,27 @@ $browser-prefixes: (
218
239
 
219
240
  @if $prefixes {
220
241
  @each $prefix in $prefixes {
221
- #{$prefix}#{$prop}: #{$val}#{$suffix};
242
+ @if meta.type-of($val)=='list'and ($prop=='width'or $prop=='height'or $prop=='min-width'or $prop=='max-width'or $prop=='min-height'or $prop=='max-height') {
243
+ @each $v in $val {
244
+ #{$prefix}#{$prop}: #{$v}#{$suffix};
245
+ }
246
+ }
247
+
248
+ @else {
249
+ #{$prefix}#{$prop}: #{$val}#{$suffix};
250
+ }
251
+ }
252
+ }
253
+
254
+ @if meta.type-of($val)=='list'and ($prop=='width'or $prop=='height'or $prop=='min-width'or $prop=='max-width'or $prop=='min-height'or $prop=='max-height') {
255
+ @each $v in $val {
256
+ #{$prop}: #{$v}#{$suffix};
222
257
  }
223
258
  }
224
259
 
225
- #{$prop}: #{$val}#{$suffix};
260
+ @else {
261
+ #{$prop}: #{$val}#{$suffix};
262
+ }
226
263
  }
227
264
 
228
265
  @mixin generate-properties($properties, $value, $important: false) {
@@ -233,7 +270,14 @@ $browser-prefixes: (
233
270
  }
234
271
 
235
272
  @if meta.type-of($properties)=='list' {
236
- @if meta.type-of($value)=='list'and list.length($properties)==list.length($value) {
273
+ $is-tuple: meta.type-of($value)=='list'and list.length($properties)==list.length($value);
274
+
275
+ // Exception for size (width, height) to prevent splitting the value list
276
+ @if $is-tuple and list.length($properties)==2 and list.nth($properties, 1)=='width'and list.nth($properties, 2)=='height' {
277
+ $is-tuple: false;
278
+ }
279
+
280
+ @if $is-tuple {
237
281
  @for $i from 1 through list.length($properties) {
238
282
  @include output-with-prefix(list.nth($properties, $i), list.nth($value, $i), $suffix);
239
283
  }
@@ -299,8 +343,8 @@ $browser-prefixes: (
299
343
  $value: map.get(map.get($config, map), $value-key);
300
344
 
301
345
  // Try Arbitrary value [10px]
302
- @if not $value and string.slice($value-key, 1, 1)=='['and string.slice($value-key, -1)==']' {
303
- $value: string.slice($value-key, 2, -2);
346
+ @if not $value {
347
+ $value: resolve-arbitrary-value($value-key);
304
348
  }
305
349
 
306
350
  @if $value {
@@ -355,6 +399,26 @@ $browser-prefixes: (
355
399
  $found: true;
356
400
  }
357
401
 
402
+ // Arbitrary Value for Text
403
+ @if not $found {
404
+ $arb: resolve-arbitrary-value($value-key);
405
+
406
+ @if $arb {
407
+ $first-char: string.slice($arb, 1, 1);
408
+ $is-color: $first-char=='#'or string.slice($arb, 1, 3)=='rgb'or string.slice($arb, 1, 3)=='hsl';
409
+
410
+ @if $is-color {
411
+ color: #{$arb}#{if($important, ' !important', '')};
412
+ $found: true;
413
+ }
414
+
415
+ @else {
416
+ font-size: #{$arb}#{if($important, ' !important', '')};
417
+ $found: true;
418
+ }
419
+ }
420
+ }
421
+
358
422
  }
359
423
 
360
424
  // FONT SPECIFIC HANDLER
@@ -372,6 +436,27 @@ $browser-prefixes: (
372
436
  font-family: #{$family}#{if($important, ' !important', '')};
373
437
  $found: true;
374
438
  }
439
+
440
+ // Arbitrary Value for Font
441
+ @if not $found {
442
+ $arb: resolve-arbitrary-value($value-key);
443
+
444
+ @if $arb {
445
+ $first-char: string.slice($arb, 1, 1);
446
+ $numbers: "0123456789";
447
+ $is-number: string.index($numbers, $first-char);
448
+
449
+ @if $is-number {
450
+ font-weight: #{$arb}#{if($important, ' !important', '')};
451
+ $found: true;
452
+ }
453
+
454
+ @else {
455
+ font-family: #{$arb}#{if($important, ' !important', '')};
456
+ $found: true;
457
+ }
458
+ }
459
+ }
375
460
  }
376
461
 
377
462
  // TRANSITION SPECIFIC HANDLER
@@ -439,6 +524,26 @@ $browser-prefixes: (
439
524
  #{$prop-color}: #{$color}#{if($important, ' !important', '')};
440
525
  $found: true;
441
526
  }
527
+
528
+ // Arbitrary Value for Border
529
+ @if not $found {
530
+ $arb: resolve-arbitrary-value($value-key);
531
+
532
+ @if $arb {
533
+ $first-char: string.slice($arb, 1, 1);
534
+ $is-color: $first-char=='#'or string.slice($arb, 1, 3)=='rgb'or string.slice($arb, 1, 3)=='hsl';
535
+
536
+ @if $is-color {
537
+ #{$prop-color}: #{$arb}#{if($important, ' !important', '')};
538
+ $found: true;
539
+ }
540
+
541
+ @else {
542
+ #{$prop-width}: #{$arb}#{if($important, ' !important', '')};
543
+ $found: true;
544
+ }
545
+ }
546
+ }
442
547
  }
443
548
 
444
549
  // BORDER SPACING SPECIFIC HANDLER
@@ -495,6 +600,28 @@ $browser-prefixes: (
495
600
  --#{$var-prefix}-ring-inset: inset#{if($important, ' !important', '')};
496
601
  $found: true;
497
602
  }
603
+
604
+ // Arbitrary Value for Ring
605
+ @if not $found {
606
+ $arb: resolve-arbitrary-value($value-key);
607
+
608
+ @if $arb {
609
+ $first-char: string.slice($arb, 1, 1);
610
+ $is-color: $first-char=='#'or string.slice($arb, 1, 3)=='rgb'or string.slice($arb, 1, 3)=='hsl';
611
+
612
+ @if $is-color {
613
+ --#{$var-prefix}-ring-color: #{$arb}#{if($important, ' !important', '')};
614
+ $found: true;
615
+ }
616
+
617
+ @else {
618
+ --#{$var-prefix}-ring-offset-shadow: var(--#{$var-prefix}-ring-inset, ) 0 0 0 var(--#{$var-prefix}-ring-offset-width, 0px) var(--#{$var-prefix}-ring-offset-color, #fff)#{if($important, ' !important', '')};
619
+ --#{$var-prefix}-ring-shadow: var(--#{$var-prefix}-ring-inset, ) 0 0 0 calc(#{$arb} + var(--#{$var-prefix}-ring-offset-width, 0px)) var(--#{$var-prefix}-ring-color, #3b82f6)#{if($important, ' !important', '')};
620
+ box-shadow: var(--#{$var-prefix}-ring-offset-shadow), var(--#{$var-prefix}-ring-shadow), var(--#{$var-prefix}-shadow, 0 0 #0000)#{if($important, ' !important', '')};
621
+ $found: true;
622
+ }
623
+ }
624
+ }
498
625
  }
499
626
 
500
627
  // OUTLINE SPECIFIC HANDLER
@@ -512,6 +639,26 @@ $browser-prefixes: (
512
639
  outline-color: #{$color}#{if($important, ' !important', '')};
513
640
  $found: true;
514
641
  }
642
+
643
+ // Arbitrary Value for Outline
644
+ @if not $found {
645
+ $arb: resolve-arbitrary-value($value-key);
646
+
647
+ @if $arb {
648
+ $first-char: string.slice($arb, 1, 1);
649
+ $is-color: $first-char=='#'or string.slice($arb, 1, 3)=='rgb'or string.slice($arb, 1, 3)=='hsl';
650
+
651
+ @if $is-color {
652
+ outline-color: #{$arb}#{if($important, ' !important', '')};
653
+ $found: true;
654
+ }
655
+
656
+ @else {
657
+ outline-width: #{$arb}#{if($important, ' !important', '')};
658
+ $found: true;
659
+ }
660
+ }
661
+ }
515
662
  }
516
663
 
517
664
  // DIVIDE-X SPECIFIC HANDLER
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "1mpacto-sass",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
4
4
  "description": "sass generator for css utility first",
5
5
  "type": "module",
6
6
  "exports": {