Map keys inconsistent when using css color names

[crgeary]

I've been having an issue for a while where some of the keys in maps are imported into Sass as their respective colour names, rather than a literal string. This is causing issues when trying to access them later with map-get() as you have to know if it was a colour name, or a string to do that.

Suppose that I had the following JSON:

{
    "colors": {
        "primary": "#043876",
        "red": "#B43E36"
    }
}

It would setup a map like this:

$colors: ('primary': #043876, red: #B43E36);

Where primary is a string, but red is not. This adds all sorts of confusion due to the inconsistency in how the keys of the map are setup. Is it possible to force all keys to be strings? This might be a rather drastic breaking change, so perhaps it could exist behind an option?

Thanks 👍

[crgeary]

Actually, this might be my mistake. Just tested the latest version in isolation and it works as expected. This might be an issue from an old version, or an issue I introduced somewhere.

Sorry. Will close.

[reeseovine]

Hey, I think I'm also experiencing this issue, but I'm using the latest version (4.3.0). Were you able to fix it in your own implementation, and if so what version did you use?

[crgeary]

Actually, I think you're right.

I just tried this again on my codebase and I still have the original issue. My current solution is to re-create the variable in SASS and force keys to be of a particular type. Although it would be a lot nicer not to have to do this of course.

I'm also using Dart Sass instead of Node Sass, as the latter is deprecated. However they should be fairly interchangeable.

@import "./config.json";

$colors: convert-map-keys-to-strings($colors);

@use 'sass:map';

@function convert-map-keys-to-strings($map) {
    $return: ();
    @each $k, $v in $map {
        $return: map.set($return, "#{$k}", $v);
    }
    @return $return;
}

[reeseovine]

Your solution works for me! Another thing that I had to make sure of was that I was using double quotes instead of single when calling map-get. Those in conjunction do the trick.

But of course it would be nice for this to be fixed in the importer (if possible).

[reeseovine]

Another thing that I had to make sure of was that I was using double quotes instead of single

Rather, they have to match what's used in map-set in your function.

[crgeary]

I made a helper function for colors as well, which I think solves the issue of needing to use the correct quote types. Although I haven't tested that as I use prettier to force double quotes.

@function get-color($color) {
    @return map-get($colors, "#{$color}");
}

[reeseovine]

I have a similar helper so I just added the quotes. Not sure exactly what it does but it works!