SSR and Compile Time about color2k

[ricokahler]

First: a quick update from what I posted in polished. Last night I switched the implementation from canvas to getComputedStyle because the performance is much better.

---

Being unfamiliar with the intricacies of how canvas interacts with the DOM, any limitations with this approach when using SSR rendering?

I have a solve for this. If you look at the code, there is a hidden require in there that should only be run in non-browser environments.

color2k/packages/parse-to-rgba/src/index.ts

Lines 27 to 36 in a48bf58

	// for node-environments, we'll use @color2k/node
	if (typeof document === 'undefined') {
	/*START.TESTS_ONLY*/
	if (process.env.NODE_ENV === 'test') {
	// @ts-ignore
	return global.__parseToRgbaNode(color);
	}
	/*END.TESTS_ONLY*/
	return require('@color2k/node')(color);
	}

When that branch runs, it will parse the color using the optional node compatibility package @color2k/node @color2k/compat (which is a blatant copy-paste of polished 🙌) instead of going down the path of using the browser to parse colors.

In polished, folks tend to either use our babel-plugin or others that preval functions where possible to remove the runtime impact and reduce bundle size. Given the canvas approach, I imagine there would need to be a custom plugin to render the canvas and do the work to precompile?

Given this approach, I think this will work fine in all node environments? I only tried this lib out in Gatsby and it worked flawlessly there but I still think I have more work to do regarding testing this thing.

Now that you remind me though, I forgot to test out the new getComputedStyle implementation in jsdom. I just added those tests and was greeted with this 😅:

In summary, I think the shim + hidden require works pretty well but there's a decent amount of effort in testing this in non-node environments but at least playwright is a big help.

[ricokahler]

…and JSDOM is now supported!

[ricokahler]

I know this was posted as a question but I'd like to turn this issue into an actionable todo list in order to ensure this lib works in all non-browser environments (probably just testing locally). I don't expect any issues but it would be good to know before stamping the 1.0 on it.

---

To summarize (and to be referenced later in the README), in the browser, color2k will use getComputedStyle. In non-browser/SSR setups, an inline require will pull the compat package from node_modules. Because the require is inline, this compat package will not be included in the browser's bundle.

Here's a list environments/setups I've tested and what is left to test:

• safari/webkit (via playwright) ✅
• chrome/edge (via playwright) ✅
• firefox (via playwright) ✅
• old edge
• IE 11
• codesandbox ✅
• create-react-app ✅
• gatsby ✅ — requires @color2k/compat for SSR
• node ✅ — requires @color2k/compat
• jest + jsdom ✅ — requires @color2k/compat
• next.js — will probably require @color2k/compat for SSR
• react-native — will probably require @color2k/compat
• preval — will probably require @color2k/compat
• vue/vue-cli
• angular/angular-cli
• svelte/svelte-cli
• deno

---

A final note on DX: The experience I'm going for is that color2k "just works" after an install. If it doesn't, then just install @colork2/compat. The intricacies of browser vs non-browser should be handled by the lib.