Preload fonts + real theme flicker fix + mixins for theme + deps updates + nvm update #8
Conversation
…ld, change theme scripts, preload fonts
| const postcssCalc = require('postcss-calc') | ||
| const postcssNesting = require('postcss-nesting') | ||
| const postcssNested = require('postcss-nested') | ||
| const postcssAdvancedVars = require('postcss-advanced-variables') |
There was a problem hiding this comment.
postcss-advanced-variables gives us mixins
| postcssVar({ preserve: true }), | ||
| postcssNested, | ||
| postcssAdvancedVars, | ||
| postcssVar({ preserve: preview }), |
There was a problem hiding this comment.
after upgrading postcss-custom-variables and npm this works properly now when preserve is false for the production bundle
There was a problem hiding this comment.
Big package-lock update since I used node 16.20.2 to install
| {{/with}} | ||
| {{!-- | ||
| <script>var uiRootPath = '{{{uiRootPath}}}'</script> --}} | ||
|
|
There was a problem hiding this comment.
Preloading the fonts avoids the initial flicker when loading a new page. The icons were especially bad, and this fixes it.
| <link rel="preload" href="{{uiRootPath}}/font/roboto-mono-latin-500-normal.woff2" as="font" type="font/woff2" | ||
| crossorigin> | ||
|
|
||
| <script> |
There was a problem hiding this comment.
This script being in the head of the html adds the theme to the html element before content is loaded, thus avoiding the flicker in all cases
| @@ -1 +1 @@ | |||
| 10 | |||
| 16.20.2 No newline at end of file | |||
There was a problem hiding this comment.
After upgrading some packages, running with node 16 seems to be stable. Probably best to run with a more recent version and match version the datastax-docs-site repo uses
Preloading fonts
Adding a head to tell the browser to preload our fonts. This fixes the FOUT issue
Real theme flicker fix
By adding the script which adds the
data-themeto the html tag to the head section, it runs before the content is rendered and avoids the flicker.Mixins for theme
Instead of repeating the theme variables for the prefers theme and html[data-theme] we can use a mixin to write it once
Deps updates
I found updating the postcss-custom-variables to work better, but required an npm upgrade. While doing so I upgraded the rest of the postcss deps
Nvm update
Since one of our upgraded deps required an npm upgrade I changed the nvm to match the datastax-docs-site repo