Dynamic generation of classNames

[tomahl]

Can someone help me figure out why the code below is not generating any valid css classes? I get the following error message [plugin:ecsstatic] Unable to resolve expression in template literal.

// USER_COLORS <-- array e.g. ['red', 'green', 'blue'];

const avatar_color = USER_COLORS.reduce(
	(obj, item) => ({
		...obj,
		[item]: css`
			--avatar-color: var(${vars.color[item]});
		`,
	}),
	{} as Record<UserColors, string>
);

Grateful for help :)

[mayank99]

This is because ecsstatic doesn't run your entire code - it simply finds interpolated expressions and tries to resolve them using the variables available at the top level. Think of it like a slightly more powerful version of eval().

This means any variable referenced inside ${} must be defined at the top-level. In this case, item comes from the function param, so it can't be evaluated.

To fix this problem, ecsstatic would need to run your entire file (perhaps in a node VM) and then collect the style rules after all expressions are resolved. This is a slow, complicated and problematic process. I was actually looking into this a while ago and one of the problems I ran into is that the Node VM module doesn't have stable support for ESM, which is kind of a dealbreaker.

If you really need to achieve this, maybe you could use scss (it is quite powerful and has loops and stuff). And of course vanilla-extract is always an option.

I should probably also document this limitation somewhere.

[mayank99]

I should also add as a general note that in most cases you don't need to run such complicated logic. Unless you have hundreds of colors, you could just define them manually:

const avatars = {
  red: css`--avatar-color: red;`,
  green: css`--avatar-color: green;`,
  blue: css`--avatar-color: blue;`,
};

Or avoid defining utility classes, and instead pass CSS variables in the style attribute. (This is probably what I would do.)

const Avatar = ({ color }: { color: 'red' | 'green' | 'blue' }) => {
  return <div className={avatarStyles} style={{ '--avatar-color': color }} />;
};