sass-loader: 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.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 10
Comments: 19 (14 by maintainers)

Most upvoted comments

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.

xzyfer on Jun 29, 2017

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

alexander-akait on Jun 12, 2017

Sry for the late response, I’ve set up a small repo which shows the issue. https://github.com/maffelbaffel/sass-substitution

Note: I tried using raw-loader and css-loader, both with the same result:

     use: [
                {
                    loader: "raw-loader"
                }, {
                // {
                //     loader: "css-loader"
                // }, {
                    loader: "sass-loader"
                }
            ]

Results in bin/styles.bundle.js:

...
t.exports = ".test-btn-#fff{color:white}\n"
...

Again, this only happens with webpack -p.

maffelbaffel on May 20, 2017