funky object lookup behaviour in custom function

[sunwukung]

I'm having a really kooky problem with this simple getcolor style function

const colorMap = {
  white: "rgb(255, 255, 255)",
  red: "rgb(255, 0, 0)",
  green: "rgb(0, 255, 0)",
  blue: "rgb(0, 0, 255)",
  base: "rgb(0, 0, 0)",
};

module.exports = function getcolor(id, opacity = 1) {
  const hue = colorMap[id] || colorMap.base;
  return hue
};

now I try and call this in my css like this:

.element {
    background-color: getcolor("red");
}

but the color is always black.
I put some logging into my webpack build, and while the id is logging out correctly (i.e. "red") - the lookup on the colorMap always returns undefined, and so it always falls back to colorMap.base

here's my webpack configuration

  module: {
    rules: [
      { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              importLoaders: true,
              localIdentName: "[path]-[name]-[local]___[hash:base64:5]"
            }
          },
          {
            loader: "postcss-loader",
            options: {
              plugins() {
                return [
                  require("postcss-functions")({ functions: myCssFunctions })
                ];
              }
            }
          }
        ]
      },
    ]
  }
};

and here's the content of myCssFunctions:

const getcolor = require("./postcss-functions/get-color.js");
module.exports = { getcolor };

are there any obvious errors you can see?

[sunwukung]

duh - it's because I'm wrapping the id in strings in my css...

[andyjansson]

duh - it's because I'm wrapping the id in strings in my css...

Well, there you go then 😄