Using quoted color strings as paramters with map-get returns null

Stack Overflow: https://stackoverflow.com/questions/66018856/sass-string-to-non-string

I have a scenario where I am using a JSON file in order to dynamically create SASS variables. The plugin (Gulp-json-css) can retain the map and array properties, but does not add quotations onto the map keys:

$palettes : (color-1: #FF0000, white: #ffffff, grey: (lite: #aaaaaa, base: #999999, dark: #666666), black: #000000);

I am running into an issue where map-get() is not able to find the appropriate value if a quoted string is used for the parameter rather than using a unquoted “non-string”.

map-get($palettes, white) => #ffffff

map-get($palettes, "white") => null

Conclusion : white != "white"

Sure, you might also think that my conclusion obviously makes sense because white is a color.

BUT

The same issue occurs whenever I use the term grey as well, which is NOT a color. gray with an “a” is the spelling browsers use for their color code.

map-get($palettes, grey) => (lite: #aaaaaa, base: #999999, dark: #666666)

map-get($palettes, "grey") => null

HOWEVER

What really blows my mind is that color-1 is working exactly as how I would expect the other two scenarios to work:

map-get($palettes, color-1) => #FF0000

map-get($palettes, "color-1") => #FF0000

Is this a bug with the Sass code base?

OR

Is there anyway to convert a string into a “non-string”? I need a way to turn “white” into white in order to appropriately retrieve the correct value using the map-get() function.

---

After doing a little more debugging, I have concluded that there is a bug when a color is used as a “non-string” or “unquoted” map key.

map-get($palettes, "color") => This will always produce null 

[mirisuzanne]

Keys are allowed to be any data type – but you have to match the type when you set the key, and when you call it. If you use a color for the map key, you cant use a string to call it. The same is true in reverse. You’ll find that both grey & gray are valid color keywords (one since CSS1, the other since CSS3). When you add quotes to a color keyword, it becomes a string. But color-1 is a string with or without quotes - so there is no change in type.

$palettes: (
  gray: color,
  grey: another color,
  'gray': string,
  'grey': another string,
);

map-get($palettes, gray) => color
map-get($palettes, grey) => another color
map-get($palettes, "gray") => string
map-get($palettes, "grey") => another string

[mdurchholz]

I ended up writing a function that can loop through a map and add quotes to it’s keys. I have gotten everything working that I was caught up over.

@function quoteMapKeys( $map )
{
    $newMap : ();

    @each $key,$value in $map
    {
        @if type-of($value) == 'map'
        {
            $value : quoteMapKeys( $value );
        }

        $newMap : map-merge($newMap, (quote($key):$value));
    }

    @return $newMap;
}