Color names in JSON keys are interpreted as color objects by SASS

[BigglesZX]

First off, thanks for a really useful loader!

I came across an issue this morning where if I use CSS color names as my JSON keys, e.g.

{
  "colors": {
    "fg": {
      "default": "#2c2c2c",
      "pink": "#ffabab"
    }
}

...and then use map-deep-get (source) to extract the values, like this:

.button {
    background: map-deep-get($colors, 'fg', 'pink');
}

...that despite my quoting the keys in the latter fragment, I found that CSS color names (e.g. pink) don't work (returning nothing), while custom names (e.g. default) do. What I think is happening is that when sass-vars-loader converts my JSON, the color names in my JSON file become unquoted and are then interpreted as colour objects by SASS. So when I use map-deep-get to look up the colour, it returns nothing (because my string lookup doesn't match the color object) and so that property doesn't get written into my CSS.

I found I could fix the issue by double-quoting the names in m JSON, e.g.

{
  "colors": {
    "fg": {
      "'default'": "#2c2c2c",
      "'pink'": "#ffabab"
    }
}

Is it possible to force sass-vars-loader to quote all keys when it creates maps from JSON? Either way, I thought I had better report this in case anyone else has the same issue.

[BigglesZX]

Just realised my double-quoting workaround only gets me out of trouble in SASS-land. I'm using the JSON file as a source for design tokens that are shared between the SASS and JavaScript parts of my project – but double-quoting breaks lookups from JavaScript. So I could do with an official solution if one is possible; improved handling of values as they are read out of JSON and into SASS so that colour names aren't interpreted.

[dsc8x]

Hey @BigglesZX 👋

Sorry for the late reply! Sadly I currently don't have the time to maintain or improve this project. However, feel free to fork or submit a PR 🙂

[BigglesZX]

@epegzz No worries, I’m no longer using the library (using :exports in CSS Modules now) but hopefully this’ll be helpful to someone else in the future.

[BigglesZX]

Closing this as I no longer use this loader; I ended up eventually switching to loading CSS Modules :exports directly using css-loader in webpack. Documentation is tricky to locate but the snippets in this issue might help.