Fix race condition related to theme CSS (fixes #154) #156
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
It looks like theme handling was added to
index.js
for themes to function properly in dev mode (index.html
), but unfortunately this code is also redundantly run in prod, where theme CSS is already handled serverside (index.ejs
). In prod, this resulted in the theme CSS being injected twice: once in synchronous CSS in the pagehead
, and again asynchronously in clientside code.This caused cross-browser styling inconsistencies in components that ultimately rely on
window.getComputedStyle
(particularly GrommetBox
, which depends on the core library'shasDarkBackground
in utils/DOM), which assumes that all CSS has already loaded and has been applied to the page. Which in this case isn't guaranteed, since CSS is being loaded async in the second instance.For instance, Chrome reported elements with a background color of
rgb(255,255,255)
whereas IE reported elements with a background color oftransparent
. This code originally changed thehref
of the theme CSSlink
tag, and different browsers handled this in different ways. IE immediately resets the first CSS that gets applied (and thusgetComputedStyle
reported all background colors astransparent
), whereas other browsers still retained the styles until the new stylesheet loaded. This ultimately lead to inconsistent styling as reported in #154.This fix moves the clientside theme injection into the dev-only code (
index.html
) and injects it synchronously in the documenthead
(yeah, ewdocument.write
, but that's what we want it to do in this case).