refactor: mitigate FOUC when applying Prism theme #7373
+48
−45
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
lex111
added
the
pr: polish
✅ [V2]
To edit notification comments on pull requests, go to your Netlify site settings. |
⚡️ Lighthouse report for the deploy preview of this PR
|
|
Size Change: +157 B (0%) Total Size: 813 kB
ℹ️ View Unchanged
|
|
this is actually really good news, and I'm glad that you guys are taking steps to address this, |
|
@armano2 I think your approach is what we should do ultimately (i.e. what I'm talking about in my comment above). Here we are simply extracting the background color, but all token colors will be lost on SSR. |
facebook-github-bot
pushed a commit
to facebook/yoga
that referenced
this pull request
Dec 19, 2023
Summary: Pull Request resolved: #1519 See facebook/docusaurus#9629 We use prism to render the code for the inline editor. Prism renders colors to style directly, and the color chosen is dependent on a setting that may not be available at SSR time. This adds an SSR-specific representation of the code, missing some of the nuances in token colorization (similar to facebook/docusaurus#7373). This adds a little bit of jank compared to perfect SSR, but fixes cases where the mode is incorrect, and is a lot less jank then the more generic solution used by theme-live-codeblock of keeping the rendering of the opposite color until rehydration. Preview: https://yoga-website-next-git-fork-nickgerleman-exp-2f8171-fbopensource.vercel.app/ Reviewed By: yungsters Differential Revision: D52163722 fbshipit-source-id: 312dc52134f0084d40f78147190151700ee10ff7
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Pre-flight checklist
Motivation
This is an attempt to eliminate the flickering background of code blocks when dark mode is on, as well as the duplication of the Prism-related CSS vars. As you can see below, this does not completely fix FOUC, but the result is better than earlier.
Before
After
Test Plan
Preview
Related issues/PRs