Bad substitution if using color keywords as map keys

If you use color keywords, such as white oder black, and use them to build classes dynamically, sass-loader substitutes them with color hashes. This only happens when using webpack with -p.

$testMap: (
    white: (color: white)
);

@each $key in map-keys($testMap) {
    .test-btn-#{$key} {
        $colors: map_get($testMap, $key);

        color: map-get($colors, color);
    }
}

actual result:

.test-btn-#fff{
    color:#fff
}

expected result:

.test-btn-white {
    color: white; // or #fff because of -p
}

Versions:

    ...
    "node-sass": "^4.5.1",
    "sass-loader": "^6.0.3",
    ...

Using single curly quote fixes it, thought.

$testMap: (
    'white': (color: white)
);

Not sure if this is an actual issue or intended as it is, because sass documentation says:

Both the keys and values in maps can be any SassScript object.

[xzyfer]

Hallo, I’m the maintainer of LibSass and Node Sass.

This is actually a Sass feature. When CSS colors are unquoted they’re treated as Color objects, not Strings as you might expect. This is why you can do things like color math on them.

A feature of Color objects is that when they’re output in compressed mode, Sass tries to output the shortest representation i.e. #fff is more “compressed” than white.

If you want CSS color names to act like strings you should quote them.

[alexander-akait]

@michael-ciniawsky I also think so, but the problem should be reported in any case