FOUC

[ehannes]

The current solution for setting stylesheet rules creates a lot of FOUC. They are written in a useEffect hook, like this:

  useEffect(() => {
    State.stylesheet.write()
  })

This is problematic, especially for components like oma-site which is not completely rendered before all things inside it is rendered. That means, we are basically writing the Oma stylesheet on DOMContentLoaded, which is terribly late in the rendering process! In oma-site, we set a lot of custom properties that we use on a lot of places. Until the component is rendered, these custom properties are undefined...

Our default breakpoints are working a lot better though, they are not run inside useEffect.

[ehannes]

We have two use cases here:

1. Load components separately via CDN. -> oma will build one stylesheet per component that we can use for this.
2. Build components locally with treeshaking -> when building the site locally, that build will extract styles and build one oma stylesheet for the components that we actually use on that particular site.

Alternatives:

• https://seek-oss.github.io/treat/
• https://astroturfcss.github.io/astroturf/introduction/
• https://www.thisdot.co/blog/introduction-to-vanilla-extract-for-css