docusaurus icon indicating copy to clipboard operation
docusaurus copied to clipboard

Published 20 hours ago • verified publisher icon facebook

Fix FOUC of Prism Theme

Open narinluangrath opened this issue 2 years ago • 3 comments

Still a draft PR while I wait for this PR to get merged and I validate that it actually fixes the FOUC.

Pre-flight checklist

  • [x] I have read the Contributing Guidelines on pull requests.
  • [ ] If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
  • [ ] If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

Once this PR for prism-react-renderer is merged, we can solve the FOUC issue described in @lex111's PR here.

Test Plan

Test links

Deploy preview: // TODO

Related issues/PRs

  • https://github.com/FormidableLabs/prism-react-renderer/pull/160
  • https://github.com/facebook/docusaurus/pull/7373

How to reproduce FOUC

  1. Build and serve docusaurus website
cd docusaurus
yarn install
yarn website:build:en
yarn serve:website

  1. Navigate to http://localhost:3000/docs/sidebar/autogenerated

  2. Toggle to dark mode

  3. Add breakpoint to top level <html> add-breakpoint

  4. Refresh the page (with the chrome inspector open) and observe FOUC fouc

How to reproduce FOCU fix

  1. Build this PR for prism-react-renderer and link it
cd prism-react-renderer
git fetch && git checkout improv/expose-css-vars-for-ssr
yarn install
yarn build
yarn link
  1. Go back to docusaurus, checkout my PR and link to local copy of prism-react-renderer 
cd docusaurus
# Checkout my fork
git remote set-url origin [email protected]:narinluangrath/docusaurus.git
git checkout narinluangrath/prism-styles-fouc
yarn link prism-react-renderer
yarn install
  1. Rebuild website and serve
yarn website:build:en
yarn serve:website

  1. Repeat steps 2-4 in the previous section

  2. Refresh the page (with the chrome inspector open) and observe that styling is correct no-fouc

  3. Cleanup (unlink, reset origin)

git remote set-url origin [email protected]:facebook/docusaurus.git
yarn unlink prism-react-renderer

narinluangrath avatar Aug 01 '22 06:08 narinluangrath

Build is failing because the code in this PR uses functionality from prism-react-renderer that doesn't exist yet (namely, the generateScriptForSSR named export). I should be able to get it running locally by yarn linking to the code in this PR, but I get the following error message.

image

~~Would appreciate some help here.~~ Solved it by nuking node_modules.

narinluangrath avatar Aug 01 '22 06:08 narinluangrath

@lex111 would appreciate your feedback/insight

narinluangrath avatar Aug 01 '22 19:08 narinluangrath

Great, looking forward to fix this prism FOUC issue ;)

To make the review easier, what about publishing your prism changes on npm so that we can just use your temporary published package on this PR, this would help the review.

Otherwise, I like the idea of using CSS variables. Wanted to do something similar myself, but in a more consistent way (ie get 100% rid of the inline styles, and always use CSS variables for all renders)

slorber avatar Aug 10 '22 11:08 slorber