feat: add detachExperienceStyles function [SPA-2049]

Purpose

to support SSR / SSG approach to rendering an experience, I am adding a utility function to detach experience styles. This should allow SSR/SSR to pre-set css on the response page, resolving the layout shift problem

This function supports:

basic/structure components
buildInStyles prop inheritance
designTokens
deep binding and Asset resolution (to be set as background-image)
pattern style extraction with support of all of the above for patterns

Approach

Read the comments in the code

Usage

import { ExperienceRoot, fetchBySlug, detachExperienceStyles } from '@contentful/experience-builder-sdk-react';

export const getServerSideProps = () => {
    const experience = fetchBySlug('...');

   let styles = '';

   if (experience) {
       styles = detachExperienceStyles(experience);
   }

   return {
       props: {
           styles,
           experienceJSON: JSON.stringify(expereince)
       }
   }
}

export const Page = ({ styles, experienceJSON }) => {
    const experience = createExperience(experienceJSON);

    return (
       <>
          <style>{styles}</style>
          <ExperienceRoot experience={experience} />
       </>
    );
}

TODO

unit test coverage

contentful / experience-builder

feat: add detachExperienceStyles function [SPA-2049] #579

Purpose

Approach

Usage

TODO