The Order in which we put these partials into the head is crucial!
{colors -> city:cssVariables.renderTag(prefix: 'color')}
{headingFontSizeBase -> city:cssVariables.renderTag(prefix: 'heading-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.
{content.heroContent -> f:format.raw()}
{content.heroContent -> f:format.raw()}
{parts.breadcrumbNavigation -> f:format.raw()}
{content.main -> f:format.raw()}