feat: resolve css variables in experiences

[ryunsong-contentful]

Purpose

Add css variable support for Experiences for Design Tokens

Approach

Create an in memory resolved css variables values similar to design tokens. That way the ui can consume the values and store it in its immer store and thus make it accessible throughout the ui webapp

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
experience-builder-test-app	✅ Ready (Inspect)	Visit Preview	May 13, 2024 4:02pm

[chasepoirier]

LGTM 🥇

[primeinteger]

Does this work with SSR? 🤔

[Spring3]

I would also discourage from trying to affect the DOM from within a plain js function.

I think react would expect it to be done in the useEffect

[ryunsong-contentful]

It is compatible with SSR, @Spring3 can you explain what the difference in using the useEffect does? I'm only temporarily creating it to grab the css values and then deleting the element but am open to hearing your thoughts and follow up on your suggestion.

[primeinteger]

This could be refactored to use a loop to reduce some of the repetition. For example:

const cssProperties = [
  { variable: sizing, property: 'width' },
  { variable: color, property: 'background-color' },
  { variable: borderRadius, property: 'border-radius' },
  { variable: fontSize, property: 'font-size' },
  { variable: lineHeight, property: 'line-height' },
  { variable: letterSpacing, property: 'letter-spacing' },
  { variable: textColor, property: 'color' },
];

cssProperties.forEach(({ variable, property }) => {
  if (variable) {
    const rawResolvedValues = getAllCssVariableValues(element, variable, property);
    Object.assign(resolvedCssVariables, rawResolvedValues);
  }
});

[primeinteger]

This would also work here:

Suggested change

	spacing?: Record<string, string> | Record<string, number>;
	spacing?: Record<string, string | number>;

[primeinteger]

I'm still not sure if the document.createElement approach will work in SSR-land, but approving either way and we can look at that later if it comes up.