Sanity: Getting error after upgrading sanity content studio to latest version

[scottandrews98]

Just upgraded sanity to the lates release last night and since then I seem to have this error in sanity studio. I've got no plugins installed or anything it's just the basic sanity studio. I've tried deleting the node modules folder and trying again to reinstall but no luck.

The error message I get is

Uncaught error

unknown color: var(--brand-primary)

[kmelve]

Thanks for reporting! Just to have some context, which node version and OS are you on?

[bjoerge]

Any chance you could provide us your studio's package.json, package-lock.json and/or yarn.lock?

[scottandrews98]

Hi Guys, thanks for your reply. my os version is Mac OS 10.14.6 and my node js version is v10.14.2. The relevant files are attached.

Cheers

Files.zip

[bjoerge]

Hi again, @scottandrews98! I wasn't able to reproduce this with your package.json / lockfiles, but I suspect it has something to do with mixing yarn and npm. Could you try to remove both yarn.lock and node_modules, and then run yarn install again?

If that still fails, feel free to join our Slack community at http://slack.sanity.io and DM me a complete zip of your project and I'll help debug further.

[readeral]

I've just experienced this with a new project installed today.

Admittedly it's not a completely clean project - I have installed a few plugins and copy-pasted a schema and associated files from a (working) project. But it seems that a Sanity file isn't able to see the css variables from brand-colors.css

[readeral]

FWIW I had my sanity install in a folder called 'Data' within a new Create React App project. I re-initialised my sanity project in it's own root folder and didn't have any subsequent problems.

[bjoerge]

I did some more digging here (thanks for the zip file @scottandrews98!)

It seems to be caused by an issue with css variables not being resolved to actual color values:

The exported value from here https://github.com/sanity-io/sanity/blob/2c019457dedcf517053b2073f5382c920f10747e/packages/%40sanity/components/src/presence/colorHasher.css#L4
... gets imported and passed to palx here: https://github.com/sanity-io/sanity/blob/2c019457dedcf517053b2073f5382c920f10747e/packages/%40sanity/components/src/presence/colorHasher.js#L5-L7

But in your studio the value of brandPrimary becomes var(--brand-primary) and not the "resolved" css color value, which again causes palx to throw an error since var(--brand-primary) can't be parsed as a color.

[bjoerge]

Did some more digging. Turns out it's the the browserslist configuration in the toplevel package.json generated by create-react-app:

    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]

This particular config makes babel/webpack not transpile the css variable syntax during development, so instead of getting the actual (resolved) css color value we get the css variable value instead (var(--brand-primary)). This behavior makes sense, so this is a bug we need to fix in our end.

In the meantime you should be able to work around it by removing the browserslist.development entry in your root level package.json.

[readeral]

Nice work @bjoerge.

[bjoerge]

We shipped a fix in v0.142.2 that will prevent this from happening in the future. Thanks again for helping us debug this issue @scottandrews98 🙏

[scottandrews98]

Thanks so much for looking at this :) Glad I could help as I love using sanity as the backend for my portfolio.