Different output in node vs in browser?

[ghost]

This may be more of a question than a bug report, but I can't find this in the docs. I'm precompiling my color manipulation so it doesn't bog runtime and I'm getting a different toString() output in node vs in browser.

new Color('#ffff33').to('hsl').toString()

Outputs strings color(hsl 60 100 60) in node and hsl(60 100% 60%) in browser. What's the intended way to get the CSS-accepted format in node?

[LeaVerou]

Looks like for some reason spaces/hsl.js is not imported in Node so it falls back to the default output. Could you provide more details about how you are importing Color.js? Are you importing files manually or using a bundle?

[ghost]

Thanks for the insane reply speed. I'm using it inside Vanilla Extract *.css.ts files (theme specifically) kind of like so (not actual implementation)

// theme.css.ts
import Color from 'colorjs.io'

export const styles = style({
   color: new Color('#ffff33').to('hsl').toString()
})

[LeaVerou]

Wait, if HSL was not included at all, it wouldn't know how to do the conversion either. The plot thickens… Are you using the same version in both cases?

[ghost]

Yes, 0.4.1

[ghost]

Could I help here any further? Maybe a reproduction vite stack?

[LeaVerou]

The less tooling that is needed to reproduce it, the better. E.g. can you reproduce it in plain Node? I have never used vanilla-extract or vite, so I'm not sure where to even start debugging this 😕

Oh, what happens if you call .toString({format: "hsl"})?

[ghost]

In 0.4.1 toString expects 0 arguments, but in 0.4.0 setting the format option did basically nothing, the resulting string was the same as without it.

[ghost]

Hmm, actually I can't reproduce it in pure node, the output is correct as hsl(60 100% 60%). Could be somehow related to Vanilla Extract which does some pre-compiling on the .css.ts files. I'll create some minimal environment where the problem is reproducible.

[ghost]

https://github.com/mystrdat/colorjs-vanilla-test

Barebones vite react-ts template just with vanilla-extract added. There are 2 logs, one in https://github.com/mystrdat/colorjs-vanilla-test/blob/master/src/App.css.ts which outputs color(hsl 60 100 60) in the terminal process (doesn't run in browser) a then one in https://github.com/mystrdat/colorjs-vanilla-test/blob/master/src/App.tsx which runs in browser and outputs hsl(60 100% 60%) correctly.

I'll see if I can reduce it further but given it works in node it does seem somehow related to https://vanilla-extract.style

[LeaVerou]

Thank you so much for tracking this down!

[ghost]

@LeaVerou This seems to have some insight https://github.com/vanilla-extract-css/vanilla-extract/issues/899#issuecomment-1302592402

[ghost]

So to summarize, it seems that the gist of the issue is this bug that's overwriting your processFormat function with the getPath function in esbuild, which was fixed in 0.12.17. Vite uses a recent version but Vanilla Extract is still on 0.11.*. Hopefully the authors will update soon. Case closed, thank you very much for your time Lea!