1

I'm trying to write a function to dynamically apply some transformations to a previously defined map of colours for an angular material theme. The problem is that the result that comes out of the function is wrong, somehow.

I've printed the result via the debug log and it looks exactly like the original map, but fails a comparison by keys, and causes errors if I try to feed it to angular material functions.

Here is a simplified demonstration of the issue - you can see that

  • $eenie and $meenie are equivalent
  • the results of the function ($miney and $mo) are also equivalent
  • all 4 look identical through debug

What I need to accomplish inside the function is for $eenie to be equivalent to $miney after having gone through map_merge

I suspect that maybe because the key looks a number, it is having some kind of datatype crisis, but I don't know enough about SASS to figure out if that's the case or how to get around it. I've tried using quotes, but that does not seem to be an acceptable input for angular material functions, so I need it to match $eenie exactly.

@function merge-things($base-palette){
  $result: ();
  @each $hue, $color in $base-palette {
      $result: map_merge($result, (#{$hue}: $color));
  }
  @return $result;
}

$eenie: (
  50: green,
  contrast: (
    50: white,
  ),
);
$meenie: (
  50: green,
  contrast: (
    50: white,
  ),
);

$miney: merge-things($eenie);
$mo: merge-things($miney);



@debug $eenie;    // DEBUG: (50: green, contrast: (50: white))
@debug $meenie;   // DEBUG: (50: green, contrast: (50: white))
@debug $miney;    // DEBUG: (50: green, contrast: (50: white))
@debug $mo;       // DEBUG: (50: green, contrast: (50: white))
@debug 'eenie-meenie #{map-keys($eenie) == map-keys($meenie)}';   // DEBUG: eenie-meenie true
@debug 'eenie-miney #{map-keys($eenie) == map-keys($miney)}';     // DEBUG: eenie-miney false
@debug 'miney-mo #{map-keys($miney) == map-keys($mo)}';           // DEBUG: miney-mo true
Tantelope
  • 597
  • 1
  • 8
  • 24
  • Isn't `@debug $mo` supposed to be `(50: green, contrast: (50: white))` since it switches the colors of `$miney`? Or can you clarify what the transformation is meant to do on the map? – Oluwafemi Sule Jun 05 '20 at 06:50
  • @OluwafemiSule in this example the transformation doesn't do anything. I messed up pasting the debug messages, they should all say green, contrast white – Tantelope Jun 05 '20 at 15:48

1 Answers1

0

The merge-things function changes the type of keys when interpolation is performed with the key in the map that is a number.

@use "sass:map";

$result: map-merge($result, (#{$hue}: $color));

The following exercise shows that interpolating a number type converts it to string type.

@use "sass:meta";

$k: 1;

@debug meta.type-of(#{$k}); // string

@debug meta.type-of($k); // number

Leave the keys as-is when you build up the new map.

-      $result: map-merge($result, (#{$hue}: $color));
+      $result: map-merge($result, ($hue: $color));
Oluwafemi Sule
  • 36,144
  • 1
  • 56
  • 81