{namespace neos=Neos\Neos\ViewHelpers}
{namespace fusion=Neos\Fusion\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}
{namespace city=Newland\CityTheme\ViewHelpers}
The Order in which we put these partials into the head is crucial!
`html:root` beats the `:root, :host` color definitions of the toubiz widget CSS.
The widget itself reads `--tb-w-color-*`, which the SSR output sets with an ID selector
to precompiled defaults, therefore the site colors are forwarded with `!important`.
{colors -> city:cssVariables.renderTag(prefix: 'color', scope: 'html:root')}
{colors -> city:cssVariables.renderTag(prefix: 'tb-w-color', scope: '.toubiz-widget-rendering-ssr', important: true)}
{headingFontSizeBase -> city:cssVariables.renderTag(prefix: 'heading-font-size-base')}
{headingLetterSpacing -> city:cssVariables.renderTag(prefix: 'heading-letter-spacing')}
{textFontSizeBase -> city:cssVariables.renderTag(prefix: 'text-font-size-base')}
Using rel="preload" we can load this stylesheet very early in supporting browsers.
Using media="print" and exchanging the value to screen on load, we wait until the stylesheet has been downloaded and apply styles only then.
As this solution requires JavaScript, we fall back to a noscript block with native stylesheet loading.
{customHTMLHead -> f:format.raw()}
{customHTML -> f:format.raw()}