Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Expose CSS Variables for SSR to avoid FOUC #160

Open
wants to merge 19 commits into
base: master
Choose a base branch
from
Open

Expose CSS Variables for SSR to avoid FOUC #160

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
a450431
chore(Highlight.js): fix
nluangrath-godaddy Jul 22, 2022
f4d294a
improv(utils): add themeWithCssVariables function
nluangrath-godaddy Jul 23, 2022
75c8cdf
improv(themeToDict.js): add optional third arg for root styles
nluangrath-godaddy Jul 26, 2022
c659b2c
test(Highlight.test.js): add additional data attribute for raw style …
nluangrath-godaddy Jul 26, 2022
81b606f
fix(themeToDict.js): got messed up by prettier
nluangrath-godaddy Jul 26, 2022
fe5f390
refactor(Highlight.js): use css variables as placeholders
nluangrath-godaddy Jul 26, 2022
98b52fb
improv: add id field to PrismTheme type
nluangrath-godaddy Jul 26, 2022
aff1614
feat: add SSR / FOUC support
nluangrath-godaddy Jul 26, 2022
520a8eb
fix(generateScriptForSSR.js): cant use nullish collesing or whatever
nluangrath-godaddy Jul 27, 2022
595ab5e
chore(index.d.ts): update type declaration file
nluangrath-godaddy Aug 1, 2022
ef2f8e7
chore: make PrismTheme.id required, variable renaming
nluangrath-godaddy Aug 1, 2022
49da00a
fix(generateScriptForSSR.js): must quote strings in strinigified js
nluangrath-godaddy Aug 1, 2022
82040cc
fix(generateScriptForSSR): root isnt a global variable u dummy
nluangrath-godaddy Aug 1, 2022
30b2d1e
fix(generateScriptForSSR.js): illegal return u dummy
nluangrath-godaddy Aug 1, 2022
9d7954a
docs(README.md): add Next.js example
nluangrath-godaddy Aug 2, 2022
efc23ca
chore(README.md): use string interpolation
nluangrath-godaddy Aug 2, 2022
dcd4681
docs(README.md): clarify SSR docs
narinluangrath Aug 3, 2022
bcff206
improv(generateScriptForSSR.js): wrap script with try/catch
narinluangrath Aug 3, 2022
ad4aae6
docs(README.md): add comment about CSP
narinluangrath Aug 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 8 additions & 4 deletions src/components/Highlight.js
View file
Open in desktop
Expand Up @@ -3,6 +3,7 @@
import React, { Component, type Node } from "react";
import normalizeTokens from "../utils/normalizeTokens";
import themeToDict, { type ThemeDict } from "../utils/themeToDict";
import themeWithCssVariables from "../utils/themeWithCssVariables";

import type {
Language,
Expand Down Expand Up @@ -43,10 +44,13 @@ class Highlight extends Component<Props, *> {

this.prevTheme = props.theme;
this.prevLanguage = props.language;

const themeDict = props.theme
? themeToDict(props.theme, props.language)
: undefined;
let themeDict;
if (props.theme) {
// Replace CSS Values with CSS Variable placeholders
// This is necessary for SSR support
const { theme, variables } = themeWithCssVariables(props.theme);
themeDict = themeToDict(theme, props.language, variables);
}
return (this.themeDict = themeDict);
};

Expand Down