From a450431a9b95a40af12e8b0dc0ad222955035a87 Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Fri, 22 Jul 2022 16:06:29 -0700
Subject: [PATCH 01/19] chore(Highlight.js): fix

---
 src/components/Highlight.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Highlight.js b/src/components/Highlight.js
index c14892f..a63c04d 100755
--- a/src/components/Highlight.js
+++ b/src/components/Highlight.js
@@ -16,6 +16,7 @@ import type {
   PrismLib,
   PrismTheme,
   PrismToken,
+  StyleObj,
 } from "../types";
 
 type Props = {
@@ -79,7 +80,7 @@ class Highlight extends Component<Props, *> {
     return output;
   };
 
-  getStyleForToken = ({ types, empty }: Token) => {
+  getStyleForToken = ({ types, empty }: Token): StyleObj | void => {
     const typesSize = types.length;
     const themeDict = this.getThemeDict(this.props);
 
@@ -92,7 +93,6 @@ class Highlight extends Component<Props, *> {
     }
 
     const baseStyle = empty ? { display: "inline-block" } : {};
-    // $FlowFixMe
     const typeStyles = types.map((type) => themeDict[type]);
     return Object.assign(baseStyle, ...typeStyles);
   };

From f4d294a50e90a56c56af8faeb9b49f9c7fb60666 Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Fri, 22 Jul 2022 17:33:44 -0700
Subject: [PATCH 02/19] improv(utils): add themeWithCssVariables function

---
 .../__tests__/themeWithCssVariables.test.js   | 46 ++++++++++++++
 src/utils/themeWithCssVariables.js            | 63 +++++++++++++++++++
 2 files changed, 109 insertions(+)
 create mode 100644 src/utils/__tests__/themeWithCssVariables.test.js
 create mode 100644 src/utils/themeWithCssVariables.js

diff --git a/src/utils/__tests__/themeWithCssVariables.test.js b/src/utils/__tests__/themeWithCssVariables.test.js
new file mode 100644
index 0000000..844a274
--- /dev/null
+++ b/src/utils/__tests__/themeWithCssVariables.test.js
@@ -0,0 +1,46 @@
+import themeWithCssVariables from "../themeWithCssVariables";
+
+describe("themeWithCssVariables", () => {
+  it("creates a visually equivalent theme with one type per style entry", () => {
+    const input = {
+      plain: { color: "red" },
+      styles: [
+        {
+          types: ["type1", "type2"],
+          style: { color: "green" },
+        },
+        {
+          types: ["type1"],
+          style: { fontWeight: "bold" },
+          languages: "javascript",
+        },
+      ],
+    };
+
+    const { theme, variables } = themeWithCssVariables(input);
+    expect(theme).toEqual({
+      plain: { color: "var(--plain-color)" },
+      styles: [
+        {
+          types: ["type1"],
+          style: { color: "var(--type1-color)" },
+        },
+        {
+          types: ["type2"],
+          style: { color: "var(--type2-color)" },
+        },
+        {
+          types: ["type1"],
+          style: { fontWeight: "var(--type1-fontWeight)" },
+          languages: "javascript",
+        },
+      ],
+    });
+    expect(variables).toEqual({
+      "--plain-color": "red",
+      "--type1-color": "green",
+      "--type2-color": "green",
+      "--type1-fontWeight": "bold",
+    });
+  });
+});
diff --git a/src/utils/themeWithCssVariables.js b/src/utils/themeWithCssVariables.js
new file mode 100644
index 0000000..9479c1b
--- /dev/null
+++ b/src/utils/themeWithCssVariables.js
@@ -0,0 +1,63 @@
+import { PrismTheme, StyleObj } from "../types";
+
+/**
+ * Returns a new PrismTheme `t` that is visually equivalent
+ * to `theme` but `t.styles[i].types` always has length 1
+ */
+const flattenThemeTypes = (theme: PrismTheme): PrismTheme => {
+  const { plain, styles } = theme;
+
+  return {
+    plain: { ...plain },
+    styles: styles.reduce((acc, x) => {
+      const { types, style, ...rest } = x;
+      const flatStyle = types.map((type) => ({
+        types: [type],
+        style: { ...style },
+        ...rest,
+      }));
+      acc.push(...flatStyle);
+      return acc;
+    }, []),
+  };
+};
+
+/**
+ * Returns a PrismTheme that is visually equivalent to `theme`
+ * but with CSS Variables instead of fixed values (e.g.
+ * `var(--plain-color)` instead of `"#F8F8F2"`).
+ *
+ * Also returns a mapping from CSS Variable to value (i.e. an
+ * object with key `--plain-color` and value `"#F8F8F2"`)
+ */
+const themeWithCssVariables = (
+  theme: PrismTheme
+): { theme: PrismTheme, variables: StyleObj } => {
+  const flatTheme = flattenThemeTypes(theme);
+  const variables: StyleObj = {};
+
+  const { plain, styles } = flatTheme;
+
+  Object.entries(plain).forEach(([key, value]) => {
+    const varName = `--plain-${key}`;
+    variables[varName] = value;
+    // Will not modify `theme` because `flattenThemeTypes`
+    // deep clones the original `theme` object
+    plain[key] = `var(${varName})`;
+  });
+
+  // `types` should have length 1
+  styles.forEach(({ style, types }) => {
+    Object.entries(style).forEach(([key, value]) => {
+      const varName = `--${types[0]}-${key}`;
+      variables[varName] = value;
+      // Will not modify `theme` because `flattenThemeTypes`
+      // deep clones the original `theme` object
+      style[key] = `var(${varName})`;
+    });
+  });
+
+  return { theme: flatTheme, variables };
+};
+
+export default themeWithCssVariables;

From 75c8cdf57eb77aef41b1958f07d62363642a1003 Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Mon, 25 Jul 2022 22:24:28 -0700
Subject: [PATCH 03/19] improv(themeToDict.js): add optional third arg for root
 styles

---
 src/utils/__tests__/themeToDict.test.js | 15 +++++++++++++++
 src/utils/themeToDict.js                | 14 +++++++++-----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/utils/__tests__/themeToDict.test.js b/src/utils/__tests__/themeToDict.test.js
index 405473f..e0ffd00 100755
--- a/src/utils/__tests__/themeToDict.test.js
+++ b/src/utils/__tests__/themeToDict.test.js
@@ -72,4 +72,19 @@ describe("themeToDict", () => {
 
     expect(themeToDict(input, "ocaml").test).toEqual(undefined);
   });
+
+  it("passes along third argument to root styles", () => {
+    const input = {
+      plain: {
+        backgroundColor: "green",
+      },
+      styles: [],
+    };
+    const styleObj = { color: "red" };
+
+    expect(themeToDict(input, "js", styleObj).root).toEqual({
+      backgroundColor: "green",
+      ...styleObj,
+    });
+  });
 });
diff --git a/src/utils/themeToDict.js b/src/utils/themeToDict.js
index 07d463c..88daf91 100755
--- a/src/utils/themeToDict.js
+++ b/src/utils/themeToDict.js
@@ -8,7 +8,11 @@ export type ThemeDict = {
   [type: string]: StyleObj,
 };
 
-const themeToDict = (theme: PrismTheme, language: Language): ThemeDict => {
+const themeToDict = (
+  theme: PrismTheme,
+  language: Language,
+  rootStyles?: StyleObj
+): ThemeDict => {
   const { plain } = theme;
 
   // $FlowFixMe
@@ -22,16 +26,16 @@ const themeToDict = (theme: PrismTheme, language: Language): ThemeDict => {
 
     themeEntry.types.forEach((type) => {
       // $FlowFixMe
-      const accStyle: StyleObj = { ...acc[type], ...style };
-
-      acc[type] = accStyle;
+      acc[type] = { ...acc[type], ...style };
     });
 
     return acc;
   }, base);
 
   // $FlowFixMe
-  themeDict.root = (plain: StyleObj);
+  themeDict.root = ((rootStyles
+    ? { ...rootStyles, ...plain }
+    : plain): StyleObj);
   // $FlowFixMe
   themeDict.plain = ({ ...plain, backgroundColor: null }: StyleObj);
 

From c659b2c267948a3de9704e967d85d0ce3f9e7513 Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Mon, 25 Jul 2022 22:39:08 -0700
Subject: [PATCH 04/19] test(Highlight.test.js): add additional data attribute
 for raw style object

---
 src/components/__tests__/Highlight.test.js    | 84 ++++++++++++-------
 .../__snapshots__/Highlight.test.js.snap      | 46 ++++++++++
 2 files changed, 102 insertions(+), 28 deletions(-)

diff --git a/src/components/__tests__/Highlight.test.js b/src/components/__tests__/Highlight.test.js
index 060b85a..2af380d 100755
--- a/src/components/__tests__/Highlight.test.js
+++ b/src/components/__tests__/Highlight.test.js
@@ -13,6 +13,38 @@ const exampleCode = `
 return () => <App />;
 `.trim();
 
+// The `data-style` properties are added because `react-test-renderer`
+// will parse your style object into a string. However, CSS Variable
+// references (e.g. color: var(--custom-color)) will be erased and
+// hexadecimal colors (e.g. #000000) will be converted to rgb
+// (e.g. rgb(0, 0, 0)). We don't want that.
+const TestComponent = ({
+  className,
+  style,
+  tokens,
+  getLineProps,
+  getTokenProps,
+}) => (
+  <pre className={className} style={style} data-style={JSON.stringify(style)}>
+    {tokens.map((line, i) => {
+      const lineProps = getLineProps({ line, key: i });
+      return (
+        <div {...lineProps} data-style={JSON.stringify(lineProps.style)}>
+          {line.map((token, key) => {
+            const tokenProps = getTokenProps({ token, key });
+            return (
+              <span
+                {...tokenProps}
+                data-style={JSON.stringify(tokenProps.style)}
+              />
+            );
+          })}
+        </div>
+      );
+    })}
+  </pre>
+);
+
 describe("<Highlight />", () => {
   afterEach(cleanup);
 
@@ -21,15 +53,13 @@ describe("<Highlight />", () => {
       const { container } = render(
         <Highlight {...defaultProps} code={exampleCode} language="jsx">
           {({ className, style, tokens, getLineProps, getTokenProps }) => (
-            <pre className={className} style={style}>
-              {tokens.map((line, i) => (
-                <div {...getLineProps({ line, key: i })}>
-                  {line.map((token, key) => (
-                    <span {...getTokenProps({ token, key })} />
-                  ))}
-                </div>
-              ))}
-            </pre>
+            <TestComponent
+              className={className}
+              style={style}
+              tokens={tokens}
+              getLineProps={getLineProps}
+              getTokenProps={getTokenProps}
+            />
           )}
         </Highlight>
       );
@@ -45,15 +75,13 @@ describe("<Highlight />", () => {
           language="abcdefghijklmnop"
         >
           {({ className, style, tokens, getLineProps, getTokenProps }) => (
-            <pre className={className} style={style}>
-              {tokens.map((line, i) => (
-                <div {...getLineProps({ line, key: i })}>
-                  {line.map((token, key) => (
-                    <span {...getTokenProps({ token, key })} />
-                  ))}
-                </div>
-              ))}
-            </pre>
+            <TestComponent
+              className={className}
+              style={style}
+              tokens={tokens}
+              getLineProps={getLineProps}
+              getTokenProps={getTokenProps}
+            />
           )}
         </Highlight>
       );
@@ -70,20 +98,20 @@ describe("<Highlight />", () => {
           language="jsx"
         >
           {({ className, style, tokens, getLineProps, getTokenProps }) => (
-            <pre className={className} style={style}>
-              {tokens.map((line, i) => (
-                <div {...getLineProps({ line, key: i })}>
-                  {line.map((token, key) => (
-                    <span {...getTokenProps({ token, key })} />
-                  ))}
-                </div>
-              ))}
-            </pre>
+            <TestComponent
+              className={className}
+              style={style}
+              tokens={tokens}
+              getLineProps={getLineProps}
+              getTokenProps={getTokenProps}
+            />
           )}
         </Highlight>
       );
 
-      expect(container.innerHTML.includes("style")).toBeFalsy();
+      expect(container.querySelector("pre[style]")).toBeFalsy(); // Root
+      expect(container.querySelector("div[style]")).toBeFalsy(); // Lines
+      expect(container.querySelector("span[style]")).toBeFalsy(); // Tokens
     });
   });
 
diff --git a/src/components/__tests__/__snapshots__/Highlight.test.js.snap b/src/components/__tests__/__snapshots__/Highlight.test.js.snap
index fa0b8ca..8e985fa 100644
--- a/src/components/__tests__/__snapshots__/Highlight.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Highlight.test.js.snap
@@ -4,20 +4,24 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
 <div>
   <pre
     class="prism-code language-jsx"
+    data-style="{\\"backgroundColor\\":\\"#2a2734\\",\\"color\\":\\"#9a86fd\\"}"
     style="background-color: rgb(42, 39, 52); color: rgb(154, 134, 253);"
   >
     <div
       class="token-line"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
       style="color: rgb(154, 134, 253);"
     >
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         (
       </span>
       <span
         class="token keyword"
+        data-style="{\\"color\\":\\"#ffcc99\\"}"
         style="color: rgb(255, 204, 153);"
       >
         function
@@ -29,18 +33,21 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token function"
+        data-style="{\\"color\\":\\"#9a86fd\\"}"
         style="color: rgb(154, 134, 253);"
       >
         someDemo
       </span>
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         (
       </span>
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         )
@@ -52,6 +59,7 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         {
@@ -62,6 +70,7 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
     </div>
     <div
       class="token-line"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
       style="color: rgb(154, 134, 253);"
     >
       <span
@@ -71,6 +80,7 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token keyword"
+        data-style="{\\"color\\":\\"#ffcc99\\"}"
         style="color: rgb(255, 204, 153);"
       >
         var
@@ -82,6 +92,7 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token operator"
+        data-style="{\\"color\\":\\"#e09142\\"}"
         style="color: rgb(224, 145, 66);"
       >
         =
@@ -93,12 +104,14 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token string"
+        data-style="{\\"color\\":\\"#ffcc99\\"}"
         style="color: rgb(255, 204, 153);"
       >
         "Hello World!"
       </span>
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         ;
@@ -109,6 +122,7 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
     </div>
     <div
       class="token-line"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
       style="color: rgb(154, 134, 253);"
     >
       <span
@@ -118,23 +132,27 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token console class-name"
+        data-style="{}"
       >
         console
       </span>
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         .
       </span>
       <span
         class="token method function property-access"
+        data-style="{\\"color\\":\\"#9a86fd\\"}"
         style="color: rgb(154, 134, 253);"
       >
         log
       </span>
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         (
@@ -146,12 +164,14 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         )
       </span>
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         ;
@@ -162,6 +182,7 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
     </div>
     <div
       class="token-line"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
       style="color: rgb(154, 134, 253);"
     >
       <span
@@ -169,30 +190,35 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       />
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         }
       </span>
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         )
       </span>
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         (
       </span>
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         )
       </span>
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         ;
@@ -203,10 +229,12 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
     </div>
     <div
       class="token-line"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
       style="color: rgb(154, 134, 253);"
     >
       <span
         class="token plain"
+        data-style="{\\"display\\":\\"inline-block\\"}"
         style="display: inline-block;"
       >
         
@@ -215,6 +243,7 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
     </div>
     <div
       class="token-line"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
       style="color: rgb(154, 134, 253);"
     >
       <span
@@ -222,6 +251,7 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       />
       <span
         class="token keyword control-flow"
+        data-style="{\\"color\\":\\"#ffcc99\\"}"
         style="color: rgb(255, 204, 153);"
       >
         return
@@ -233,12 +263,14 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         (
       </span>
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         )
@@ -250,6 +282,7 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token arrow operator"
+        data-style="{\\"color\\":\\"#e09142\\"}"
         style="color: rgb(224, 145, 66);"
       >
         =&gt;
@@ -261,30 +294,35 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token tag punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         &lt;
       </span>
       <span
         class="token tag class-name"
+        data-style="{\\"color\\":\\"#e09142\\"}"
         style="color: rgb(224, 145, 66);"
       >
         App
       </span>
       <span
         class="token tag"
+        data-style="{\\"color\\":\\"#e09142\\"}"
         style="color: rgb(224, 145, 66);"
       >
          
       </span>
       <span
         class="token tag punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         /&gt;
       </span>
       <span
         class="token punctuation"
+        data-style="{\\"color\\":\\"#6c6783\\"}"
         style="color: rgb(108, 103, 131);"
       >
         ;
@@ -298,10 +336,12 @@ exports[`<Highlight /> snapshots renders unsupported languages correctly 1`] = `
 <div>
   <pre
     class="prism-code language-abcdefghijklmnop"
+    data-style="{\\"backgroundColor\\":\\"#2a2734\\",\\"color\\":\\"#9a86fd\\"}"
     style="background-color: rgb(42, 39, 52); color: rgb(154, 134, 253);"
   >
     <div
       class="token-line"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
       style="color: rgb(154, 134, 253);"
     >
       <span
@@ -312,6 +352,7 @@ exports[`<Highlight /> snapshots renders unsupported languages correctly 1`] = `
     </div>
     <div
       class="token-line"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
       style="color: rgb(154, 134, 253);"
     >
       <span
@@ -322,6 +363,7 @@ exports[`<Highlight /> snapshots renders unsupported languages correctly 1`] = `
     </div>
     <div
       class="token-line"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
       style="color: rgb(154, 134, 253);"
     >
       <span
@@ -332,6 +374,7 @@ exports[`<Highlight /> snapshots renders unsupported languages correctly 1`] = `
     </div>
     <div
       class="token-line"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
       style="color: rgb(154, 134, 253);"
     >
       <span
@@ -342,10 +385,12 @@ exports[`<Highlight /> snapshots renders unsupported languages correctly 1`] = `
     </div>
     <div
       class="token-line"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
       style="color: rgb(154, 134, 253);"
     >
       <span
         class="token plain"
+        data-style="{\\"display\\":\\"inline-block\\"}"
         style="display: inline-block;"
       >
         
@@ -354,6 +399,7 @@ exports[`<Highlight /> snapshots renders unsupported languages correctly 1`] = `
     </div>
     <div
       class="token-line"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
       style="color: rgb(154, 134, 253);"
     >
       <span

From 81b606f38c0fec1269a3d0bcf17477437acd17ad Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Tue, 26 Jul 2022 10:18:56 -0700
Subject: [PATCH 05/19] fix(themeToDict.js):  got messed up by prettier

---
 src/utils/themeToDict.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/utils/themeToDict.js b/src/utils/themeToDict.js
index 88daf91..7d78890 100755
--- a/src/utils/themeToDict.js
+++ b/src/utils/themeToDict.js
@@ -34,8 +34,10 @@ const themeToDict = (
 
   // $FlowFixMe
   themeDict.root = ((rootStyles
-    ? { ...rootStyles, ...plain }
-    : plain): StyleObj);
+    ? // $FlowFixMe
+      { ...rootStyles, ...plain }
+    : // $FlowFixMe
+      plain): StyleObj);
   // $FlowFixMe
   themeDict.plain = ({ ...plain, backgroundColor: null }: StyleObj);
 

From fe5f39012106ccbc4aa53ad10567a9f4fa9a8e7b Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Tue, 26 Jul 2022 10:26:31 -0700
Subject: [PATCH 06/19] refactor(Highlight.js): use css variables as
 placeholders

---
 src/components/Highlight.js                   |  12 +-
 .../__snapshots__/Highlight.test.js.snap      | 131 ++++++------------
 2 files changed, 53 insertions(+), 90 deletions(-)

diff --git a/src/components/Highlight.js b/src/components/Highlight.js
index a63c04d..5bf5bab 100755
--- a/src/components/Highlight.js
+++ b/src/components/Highlight.js
@@ -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,
@@ -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);
   };
 
diff --git a/src/components/__tests__/__snapshots__/Highlight.test.js.snap b/src/components/__tests__/__snapshots__/Highlight.test.js.snap
index 8e985fa..9f246b5 100644
--- a/src/components/__tests__/__snapshots__/Highlight.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Highlight.test.js.snap
@@ -4,25 +4,22 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
 <div>
   <pre
     class="prism-code language-jsx"
-    data-style="{\\"backgroundColor\\":\\"#2a2734\\",\\"color\\":\\"#9a86fd\\"}"
-    style="background-color: rgb(42, 39, 52); color: rgb(154, 134, 253);"
+    data-style="{\\"--plain-backgroundColor\\":\\"#2a2734\\",\\"--plain-color\\":\\"#9a86fd\\",\\"--comment-color\\":\\"#6c6783\\",\\"--prolog-color\\":\\"#6c6783\\",\\"--doctype-color\\":\\"#6c6783\\",\\"--cdata-color\\":\\"#6c6783\\",\\"--punctuation-color\\":\\"#6c6783\\",\\"--namespace-opacity\\":0.7,\\"--tag-color\\":\\"#e09142\\",\\"--operator-color\\":\\"#e09142\\",\\"--number-color\\":\\"#e09142\\",\\"--property-color\\":\\"#9a86fd\\",\\"--function-color\\":\\"#9a86fd\\",\\"--tag-id-color\\":\\"#eeebff\\",\\"--selector-color\\":\\"#eeebff\\",\\"--atrule-id-color\\":\\"#eeebff\\",\\"--attr-name-color\\":\\"#c4b9fe\\",\\"--boolean-color\\":\\"#ffcc99\\",\\"--string-color\\":\\"#ffcc99\\",\\"--entity-color\\":\\"#ffcc99\\",\\"--url-color\\":\\"#ffcc99\\",\\"--attr-value-color\\":\\"#ffcc99\\",\\"--keyword-color\\":\\"#ffcc99\\",\\"--control-color\\":\\"#ffcc99\\",\\"--directive-color\\":\\"#ffcc99\\",\\"--unit-color\\":\\"#ffcc99\\",\\"--statement-color\\":\\"#ffcc99\\",\\"--regex-color\\":\\"#ffcc99\\",\\"--atrule-color\\":\\"#ffcc99\\",\\"--placeholder-color\\":\\"#ffcc99\\",\\"--variable-color\\":\\"#ffcc99\\",\\"--deleted-textDecorationLine\\":\\"line-through\\",\\"--inserted-textDecorationLine\\":\\"underline\\",\\"--italic-fontStyle\\":\\"italic\\",\\"--important-fontWeight\\":\\"bold\\",\\"--bold-fontWeight\\":\\"bold\\",\\"--important-color\\":\\"#c4b9fe\\",\\"backgroundColor\\":\\"var(--plain-backgroundColor)\\",\\"color\\":\\"var(--plain-color)\\"}"
+    style="--plain-backgroundColor: #2a2734; --plain-color: #9a86fd; --comment-color: #6c6783; --prolog-color: #6c6783; --doctype-color: #6c6783; --cdata-color: #6c6783; --punctuation-color: #6c6783; --namespace-opacity: 0.7; --tag-color: #e09142; --operator-color: #e09142; --number-color: #e09142; --property-color: #9a86fd; --function-color: #9a86fd; --tag-id-color: #eeebff; --selector-color: #eeebff; --atrule-id-color: #eeebff; --attr-name-color: #c4b9fe; --boolean-color: #ffcc99; --string-color: #ffcc99; --entity-color: #ffcc99; --url-color: #ffcc99; --attr-value-color: #ffcc99; --keyword-color: #ffcc99; --control-color: #ffcc99; --directive-color: #ffcc99; --unit-color: #ffcc99; --statement-color: #ffcc99; --regex-color: #ffcc99; --atrule-color: #ffcc99; --placeholder-color: #ffcc99; --variable-color: #ffcc99; --deleted-textDecorationLine: line-through; --inserted-textDecorationLine: underline; --italic-fontStyle: italic; --important-fontWeight: bold; --bold-fontWeight: bold; --important-color: #c4b9fe;"
   >
     <div
       class="token-line"
-      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
-      style="color: rgb(154, 134, 253);"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"var(--plain-color)\\"}"
     >
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         (
       </span>
       <span
         class="token keyword"
-        data-style="{\\"color\\":\\"#ffcc99\\"}"
-        style="color: rgb(255, 204, 153);"
+        data-style="{\\"color\\":\\"var(--keyword-color)\\"}"
       >
         function
       </span>
@@ -33,22 +30,19 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token function"
-        data-style="{\\"color\\":\\"#9a86fd\\"}"
-        style="color: rgb(154, 134, 253);"
+        data-style="{\\"color\\":\\"var(--function-color)\\"}"
       >
         someDemo
       </span>
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         (
       </span>
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         )
       </span>
@@ -59,8 +53,7 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         {
       </span>
@@ -70,8 +63,7 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
     </div>
     <div
       class="token-line"
-      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
-      style="color: rgb(154, 134, 253);"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"var(--plain-color)\\"}"
     >
       <span
         class="token plain"
@@ -80,8 +72,7 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token keyword"
-        data-style="{\\"color\\":\\"#ffcc99\\"}"
-        style="color: rgb(255, 204, 153);"
+        data-style="{\\"color\\":\\"var(--keyword-color)\\"}"
       >
         var
       </span>
@@ -92,8 +83,7 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token operator"
-        data-style="{\\"color\\":\\"#e09142\\"}"
-        style="color: rgb(224, 145, 66);"
+        data-style="{\\"color\\":\\"var(--operator-color)\\"}"
       >
         =
       </span>
@@ -104,15 +94,13 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token string"
-        data-style="{\\"color\\":\\"#ffcc99\\"}"
-        style="color: rgb(255, 204, 153);"
+        data-style="{\\"color\\":\\"var(--string-color)\\"}"
       >
         "Hello World!"
       </span>
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         ;
       </span>
@@ -122,8 +110,7 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
     </div>
     <div
       class="token-line"
-      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
-      style="color: rgb(154, 134, 253);"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"var(--plain-color)\\"}"
     >
       <span
         class="token plain"
@@ -138,22 +125,19 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         .
       </span>
       <span
         class="token method function property-access"
-        data-style="{\\"color\\":\\"#9a86fd\\"}"
-        style="color: rgb(154, 134, 253);"
+        data-style="{\\"color\\":\\"var(--function-color)\\"}"
       >
         log
       </span>
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         (
       </span>
@@ -164,15 +148,13 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         )
       </span>
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         ;
       </span>
@@ -182,44 +164,38 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
     </div>
     <div
       class="token-line"
-      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
-      style="color: rgb(154, 134, 253);"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"var(--plain-color)\\"}"
     >
       <span
         class="token plain"
       />
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         }
       </span>
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         )
       </span>
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         (
       </span>
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         )
       </span>
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         ;
       </span>
@@ -229,8 +205,7 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
     </div>
     <div
       class="token-line"
-      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
-      style="color: rgb(154, 134, 253);"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"var(--plain-color)\\"}"
     >
       <span
         class="token plain"
@@ -243,16 +218,14 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
     </div>
     <div
       class="token-line"
-      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
-      style="color: rgb(154, 134, 253);"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"var(--plain-color)\\"}"
     >
       <span
         class="token plain"
       />
       <span
         class="token keyword control-flow"
-        data-style="{\\"color\\":\\"#ffcc99\\"}"
-        style="color: rgb(255, 204, 153);"
+        data-style="{\\"color\\":\\"var(--keyword-color)\\"}"
       >
         return
       </span>
@@ -263,15 +236,13 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         (
       </span>
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         )
       </span>
@@ -282,8 +253,7 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token arrow operator"
-        data-style="{\\"color\\":\\"#e09142\\"}"
-        style="color: rgb(224, 145, 66);"
+        data-style="{\\"color\\":\\"var(--operator-color)\\"}"
       >
         =&gt;
       </span>
@@ -294,36 +264,31 @@ exports[`<Highlight /> snapshots renders correctly 1`] = `
       </span>
       <span
         class="token tag punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         &lt;
       </span>
       <span
         class="token tag class-name"
-        data-style="{\\"color\\":\\"#e09142\\"}"
-        style="color: rgb(224, 145, 66);"
+        data-style="{\\"color\\":\\"var(--tag-color)\\"}"
       >
         App
       </span>
       <span
         class="token tag"
-        data-style="{\\"color\\":\\"#e09142\\"}"
-        style="color: rgb(224, 145, 66);"
+        data-style="{\\"color\\":\\"var(--tag-color)\\"}"
       >
          
       </span>
       <span
         class="token tag punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         /&gt;
       </span>
       <span
         class="token punctuation"
-        data-style="{\\"color\\":\\"#6c6783\\"}"
-        style="color: rgb(108, 103, 131);"
+        data-style="{\\"color\\":\\"var(--punctuation-color)\\"}"
       >
         ;
       </span>
@@ -336,13 +301,12 @@ exports[`<Highlight /> snapshots renders unsupported languages correctly 1`] = `
 <div>
   <pre
     class="prism-code language-abcdefghijklmnop"
-    data-style="{\\"backgroundColor\\":\\"#2a2734\\",\\"color\\":\\"#9a86fd\\"}"
-    style="background-color: rgb(42, 39, 52); color: rgb(154, 134, 253);"
+    data-style="{\\"--plain-backgroundColor\\":\\"#2a2734\\",\\"--plain-color\\":\\"#9a86fd\\",\\"--comment-color\\":\\"#6c6783\\",\\"--prolog-color\\":\\"#6c6783\\",\\"--doctype-color\\":\\"#6c6783\\",\\"--cdata-color\\":\\"#6c6783\\",\\"--punctuation-color\\":\\"#6c6783\\",\\"--namespace-opacity\\":0.7,\\"--tag-color\\":\\"#e09142\\",\\"--operator-color\\":\\"#e09142\\",\\"--number-color\\":\\"#e09142\\",\\"--property-color\\":\\"#9a86fd\\",\\"--function-color\\":\\"#9a86fd\\",\\"--tag-id-color\\":\\"#eeebff\\",\\"--selector-color\\":\\"#eeebff\\",\\"--atrule-id-color\\":\\"#eeebff\\",\\"--attr-name-color\\":\\"#c4b9fe\\",\\"--boolean-color\\":\\"#ffcc99\\",\\"--string-color\\":\\"#ffcc99\\",\\"--entity-color\\":\\"#ffcc99\\",\\"--url-color\\":\\"#ffcc99\\",\\"--attr-value-color\\":\\"#ffcc99\\",\\"--keyword-color\\":\\"#ffcc99\\",\\"--control-color\\":\\"#ffcc99\\",\\"--directive-color\\":\\"#ffcc99\\",\\"--unit-color\\":\\"#ffcc99\\",\\"--statement-color\\":\\"#ffcc99\\",\\"--regex-color\\":\\"#ffcc99\\",\\"--atrule-color\\":\\"#ffcc99\\",\\"--placeholder-color\\":\\"#ffcc99\\",\\"--variable-color\\":\\"#ffcc99\\",\\"--deleted-textDecorationLine\\":\\"line-through\\",\\"--inserted-textDecorationLine\\":\\"underline\\",\\"--italic-fontStyle\\":\\"italic\\",\\"--important-fontWeight\\":\\"bold\\",\\"--bold-fontWeight\\":\\"bold\\",\\"--important-color\\":\\"#c4b9fe\\",\\"backgroundColor\\":\\"var(--plain-backgroundColor)\\",\\"color\\":\\"var(--plain-color)\\"}"
+    style="--plain-backgroundColor: #2a2734; --plain-color: #9a86fd; --comment-color: #6c6783; --prolog-color: #6c6783; --doctype-color: #6c6783; --cdata-color: #6c6783; --punctuation-color: #6c6783; --namespace-opacity: 0.7; --tag-color: #e09142; --operator-color: #e09142; --number-color: #e09142; --property-color: #9a86fd; --function-color: #9a86fd; --tag-id-color: #eeebff; --selector-color: #eeebff; --atrule-id-color: #eeebff; --attr-name-color: #c4b9fe; --boolean-color: #ffcc99; --string-color: #ffcc99; --entity-color: #ffcc99; --url-color: #ffcc99; --attr-value-color: #ffcc99; --keyword-color: #ffcc99; --control-color: #ffcc99; --directive-color: #ffcc99; --unit-color: #ffcc99; --statement-color: #ffcc99; --regex-color: #ffcc99; --atrule-color: #ffcc99; --placeholder-color: #ffcc99; --variable-color: #ffcc99; --deleted-textDecorationLine: line-through; --inserted-textDecorationLine: underline; --italic-fontStyle: italic; --important-fontWeight: bold; --bold-fontWeight: bold; --important-color: #c4b9fe;"
   >
     <div
       class="token-line"
-      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
-      style="color: rgb(154, 134, 253);"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"var(--plain-color)\\"}"
     >
       <span
         class="token plain"
@@ -352,8 +316,7 @@ exports[`<Highlight /> snapshots renders unsupported languages correctly 1`] = `
     </div>
     <div
       class="token-line"
-      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
-      style="color: rgb(154, 134, 253);"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"var(--plain-color)\\"}"
     >
       <span
         class="token plain"
@@ -363,8 +326,7 @@ exports[`<Highlight /> snapshots renders unsupported languages correctly 1`] = `
     </div>
     <div
       class="token-line"
-      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
-      style="color: rgb(154, 134, 253);"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"var(--plain-color)\\"}"
     >
       <span
         class="token plain"
@@ -374,8 +336,7 @@ exports[`<Highlight /> snapshots renders unsupported languages correctly 1`] = `
     </div>
     <div
       class="token-line"
-      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
-      style="color: rgb(154, 134, 253);"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"var(--plain-color)\\"}"
     >
       <span
         class="token plain"
@@ -385,8 +346,7 @@ exports[`<Highlight /> snapshots renders unsupported languages correctly 1`] = `
     </div>
     <div
       class="token-line"
-      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
-      style="color: rgb(154, 134, 253);"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"var(--plain-color)\\"}"
     >
       <span
         class="token plain"
@@ -399,8 +359,7 @@ exports[`<Highlight /> snapshots renders unsupported languages correctly 1`] = `
     </div>
     <div
       class="token-line"
-      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"#9a86fd\\"}"
-      style="color: rgb(154, 134, 253);"
+      data-style="{\\"backgroundColor\\":null,\\"color\\":\\"var(--plain-color)\\"}"
     >
       <span
         class="token plain"

From 98b52fb8be548985af541e05f7285e3dda4b1516 Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Tue, 26 Jul 2022 15:17:33 -0700
Subject: [PATCH 07/19] improv: add id field to PrismTheme type

---
 src/themes/dracula.js              | 1 +
 src/themes/duotoneDark.js          | 1 +
 src/themes/duotoneLight.js         | 1 +
 src/themes/github.js               | 1 +
 src/themes/nightOwl.js             | 1 +
 src/themes/nightOwlLight.js        | 1 +
 src/themes/oceanicNext.js          | 1 +
 src/themes/okaidia.js              | 1 +
 src/themes/palenight.js            | 1 +
 src/themes/shadesOfPurple.js       | 1 +
 src/themes/synthwave84.js          | 1 +
 src/themes/ultramin.js             | 1 +
 src/themes/vsDark.js               | 1 +
 src/themes/vsLight.js              | 1 +
 src/types.js                       | 1 +
 src/utils/themeWithCssVariables.js | 3 ++-
 tools/themeFromVsCode/README.md    | 1 +
 tools/themeFromVsCode/src/index.js | 1 +
 18 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/themes/dracula.js b/src/themes/dracula.js
index 0e75bab..32f6dec 100755
--- a/src/themes/dracula.js
+++ b/src/themes/dracula.js
@@ -5,6 +5,7 @@
 import type { PrismTheme } from "../types";
 
 var theme: PrismTheme = {
+  id: "dracula",
   plain: {
     color: "#F8F8F2",
     backgroundColor: "#282A36",
diff --git a/src/themes/duotoneDark.js b/src/themes/duotoneDark.js
index 7c2e441..46e10dc 100755
--- a/src/themes/duotoneDark.js
+++ b/src/themes/duotoneDark.js
@@ -7,6 +7,7 @@
 import type { PrismTheme } from "../types";
 
 var theme: PrismTheme = {
+  id: "duotoneDark",
   plain: {
     backgroundColor: "#2a2734",
     color: "#9a86fd",
diff --git a/src/themes/duotoneLight.js b/src/themes/duotoneLight.js
index a9ea232..3486da1 100755
--- a/src/themes/duotoneLight.js
+++ b/src/themes/duotoneLight.js
@@ -7,6 +7,7 @@
 import type { PrismTheme } from "../types";
 
 var theme: PrismTheme = {
+  id: "duotoneLight",
   plain: {
     backgroundColor: "#faf8f5",
     color: "#728fcb",
diff --git a/src/themes/github.js b/src/themes/github.js
index fff27f2..cba7916 100644
--- a/src/themes/github.js
+++ b/src/themes/github.js
@@ -4,6 +4,7 @@
 import type { PrismTheme } from "../types";
 
 var theme: PrismTheme = {
+  id: "github",
   plain: {
     color: "#393A34",
     backgroundColor: "#f6f8fa",
diff --git a/src/themes/nightOwl.js b/src/themes/nightOwl.js
index 2aa84e1..bd7c104 100755
--- a/src/themes/nightOwl.js
+++ b/src/themes/nightOwl.js
@@ -5,6 +5,7 @@
 import type { PrismTheme } from "../types";
 
 var theme: PrismTheme = {
+  id: "nightOwl",
   plain: {
     color: "#d6deeb",
     backgroundColor: "#011627",
diff --git a/src/themes/nightOwlLight.js b/src/themes/nightOwlLight.js
index f6bc4de..22d98d4 100644
--- a/src/themes/nightOwlLight.js
+++ b/src/themes/nightOwlLight.js
@@ -5,6 +5,7 @@
 import type { PrismTheme } from "../types";
 
 var theme: PrismTheme = {
+  id: "nightOwlLight",
   plain: {
     color: "#403f53",
     backgroundColor: "#FBFBFB",
diff --git a/src/themes/oceanicNext.js b/src/themes/oceanicNext.js
index 025fe72..2efb78f 100755
--- a/src/themes/oceanicNext.js
+++ b/src/themes/oceanicNext.js
@@ -23,6 +23,7 @@ var colors = {
 };
 
 var theme: PrismTheme = {
+  id: "oceanicNext",
   plain: {
     backgroundColor: "#282c34",
     color: "#ffffff",
diff --git a/src/themes/okaidia.js b/src/themes/okaidia.js
index e9cf183..d935e36 100644
--- a/src/themes/okaidia.js
+++ b/src/themes/okaidia.js
@@ -7,6 +7,7 @@
 import type { PrismTheme } from "../types";
 
 var theme: PrismTheme = {
+  id: "okaidia",
   plain: {
     color: "#f8f8f2",
     backgroundColor: "#272822",
diff --git a/src/themes/palenight.js b/src/themes/palenight.js
index caa8323..97d7c2d 100644
--- a/src/themes/palenight.js
+++ b/src/themes/palenight.js
@@ -4,6 +4,7 @@
 import type { PrismTheme } from "../types";
 
 var theme: PrismTheme = {
+  id: "palenight",
   plain: {
     color: "#bfc7d5",
     backgroundColor: "#292d3e",
diff --git a/src/themes/shadesOfPurple.js b/src/themes/shadesOfPurple.js
index 0fde229..f8c5813 100644
--- a/src/themes/shadesOfPurple.js
+++ b/src/themes/shadesOfPurple.js
@@ -7,6 +7,7 @@
 import type { PrismTheme } from "../types";
 
 var theme: PrismTheme = {
+  id: "shadesOfPurple",
   plain: {
     color: "#9EFEFF",
     backgroundColor: "#2D2A55",
diff --git a/src/themes/synthwave84.js b/src/themes/synthwave84.js
index b583b11..a234a36 100644
--- a/src/themes/synthwave84.js
+++ b/src/themes/synthwave84.js
@@ -8,6 +8,7 @@
 import type { PrismTheme } from "../types";
 
 var theme: PrismTheme = {
+  id: "synthwave84",
   plain: {
     background: "#2a2139",
     backgroundColor: "linear-gradient(to bottom, #2a2139 75%, #34294f)",
diff --git a/src/themes/ultramin.js b/src/themes/ultramin.js
index 5d124f5..f6b48a6 100755
--- a/src/themes/ultramin.js
+++ b/src/themes/ultramin.js
@@ -5,6 +5,7 @@
 import type { PrismTheme } from "../types";
 
 var theme: PrismTheme = {
+  id: "ultramin",
   plain: {
     color: "#282a2e",
     backgroundColor: "#ffffff",
diff --git a/src/themes/vsDark.js b/src/themes/vsDark.js
index 7cd61bb..6e14f6e 100644
--- a/src/themes/vsDark.js
+++ b/src/themes/vsDark.js
@@ -4,6 +4,7 @@
 import type { PrismTheme } from "../types";
 
 var theme: PrismTheme = {
+  id: "vsDark",
   plain: {
     color: "#9CDCFE",
     backgroundColor: "#1E1E1E",
diff --git a/src/themes/vsLight.js b/src/themes/vsLight.js
index 0f2a799..c13b832 100644
--- a/src/themes/vsLight.js
+++ b/src/themes/vsLight.js
@@ -4,6 +4,7 @@
 import type { PrismTheme } from "../types";
 
 var theme: PrismTheme = {
+  id: "vsLight",
   plain: {
     color: "#000000",
     backgroundColor: "#ffffff",
diff --git a/src/types.js b/src/types.js
index f1a4d13..a438fe0 100755
--- a/src/types.js
+++ b/src/types.js
@@ -113,6 +113,7 @@ export type PrismThemeEntry = {
 };
 
 export type PrismTheme = {
+  id?: string,
   plain: PrismThemeEntry,
   styles: Array<{
     types: string[],
diff --git a/src/utils/themeWithCssVariables.js b/src/utils/themeWithCssVariables.js
index 9479c1b..49091ea 100644
--- a/src/utils/themeWithCssVariables.js
+++ b/src/utils/themeWithCssVariables.js
@@ -5,9 +5,10 @@ import { PrismTheme, StyleObj } from "../types";
  * to `theme` but `t.styles[i].types` always has length 1
  */
 const flattenThemeTypes = (theme: PrismTheme): PrismTheme => {
-  const { plain, styles } = theme;
+  const { plain, styles, id } = theme;
 
   return {
+    id,
     plain: { ...plain },
     styles: styles.reduce((acc, x) => {
       const { types, style, ...rest } = x;
diff --git a/tools/themeFromVsCode/README.md b/tools/themeFromVsCode/README.md
index e7ce730..38804bc 100644
--- a/tools/themeFromVsCode/README.md
+++ b/tools/themeFromVsCode/README.md
@@ -3,3 +3,4 @@
 1. Open this directory and run `npm install`
 2. Save your VSCode theme in a file called `theme.json` in this directory (`ctrl`/`cmd` + `shift` + `p` -> `Developer: Generate Color Theme From Current Settings`)
 3. Run `npm start` and your theme will be created in a file called `outputTheme.js` (inside root same as the `README.md` file)
+4. (SSR only) Edit the `id` attribute of the generated theme.
\ No newline at end of file
diff --git a/tools/themeFromVsCode/src/index.js b/tools/themeFromVsCode/src/index.js
index 8e83470..0e47fae 100755
--- a/tools/themeFromVsCode/src/index.js
+++ b/tools/themeFromVsCode/src/index.js
@@ -10,6 +10,7 @@ const theme = JSON5.parse(themeString);
 const prismTheme = collectAllSettings(theme.tokenColors);
 
 const json = {
+  id: '@TODO',
   plain: {
     color: theme.colors['editor.foreground'],
     backgroundColor: theme.colors['editor.background'],

From aff1614ab7461ceaa9d8991153ff7a9fc9e99a2a Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Tue, 26 Jul 2022 15:49:00 -0700
Subject: [PATCH 08/19] feat: add SSR / FOUC support

---
 README.md                                     |  27 +++++
 src/components/Highlight.js                   |  16 ++-
 src/index.js                                  |   3 +-
 .../__tests__/generateScriptForSSR.test.js    | 100 ++++++++++++++++++
 src/utils/generateScriptForSSR.js             |  33 ++++++
 5 files changed, 177 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/__tests__/generateScriptForSSR.test.js
 create mode 100644 src/utils/generateScriptForSSR.js

diff --git a/README.md b/README.md
index e463524..1284717 100755
--- a/README.md
+++ b/README.md
@@ -391,6 +391,33 @@ property limits styles to highlighted languages.
 When converting a Prism CSS theme it's mostly just necessary to use classes as
 `types` and convert the declarations to object-style-syntax and put them on `style`.
 
+### SSR Support / Avoiding FOUC
+
+If your React app supports "light mode / dark mode" you need to do additional work to avoid a flash of unstyled content (FOUC). Generate the following script tag and inject it into your HTML so it runs _before_ your content loads.
+
+```js
+import { generateScriptForSSR } from 'prism-react-renderer'
+import duotoneDark from 'prism-react-renderer/themes/duotoneDark';
+import duotoneLight from 'prism-react-renderer/themes/duotoneLight';
+
+// Gatsby
+export const onRenderBody = ({ setPreBodyComponents }) => {
+  // A stringified function returning the `id` of the
+  // theme you wish to render on the initial page load
+  const getThemeIdFuncStr = `
+    () => window.localStorage.get('color-mode') || 'duotoneLight'
+  `.trim()
+
+  const codeToRunOnClient = generateScriptForSSR(
+    [duotoneDark, duotonLight], // Include whatever themes `getThemeIdFuncStr` might return
+    getThemeIdFuncStr
+  )
+  setPreBodyComponents(<script dangerouslySetInnerHTML={{ __html: codeToRunOnClient }} />);
+};
+
+// @TODO Add Next.js example
+```
+
 ## FAQ
 
 <details>
diff --git a/src/components/Highlight.js b/src/components/Highlight.js
index 5bf5bab..e1cf958 100755
--- a/src/components/Highlight.js
+++ b/src/components/Highlight.js
@@ -32,6 +32,13 @@ class Highlight extends Component<Props, *> {
   prevTheme: PrismTheme | void;
   prevLanguage: Language | void;
   themeDict: ThemeDict | void;
+  state = {
+    isFirstRender: true,
+  };
+
+  componentDidMount() {
+    this.setState({ isFirstRender: false });
+  }
 
   getThemeDict = (props: Props): ThemeDict | void => {
     if (
@@ -166,7 +173,14 @@ class Highlight extends Component<Props, *> {
     return children({
       tokens,
       className: `prism-code language-${language}`,
-      style: themeDict !== undefined ? themeDict.root : {},
+      // Omit loading CSS variable declarations during the first render.
+      // That way, the consumer can override the CSS variable declarations
+      // via `generateScriptTagForSSR` for the very first render. After that
+      // client side CSS variables will be used.
+      style:
+        themeDict !== undefined && !this.state.isFirstRender
+          ? themeDict.root
+          : {},
       getLineProps: this.getLineProps,
       getTokenProps: this.getTokenProps,
     });
diff --git a/src/index.js b/src/index.js
index 799271f..02f9b17 100755
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,8 @@
 import Prism from "./vendor/prism";
 import defaultProps from "./defaultProps";
 import Highlight from "./components/Highlight";
+import generateScriptForSSR from "./utils/generateScriptForSSR";
 
-export { Prism, defaultProps };
+export { Prism, defaultProps, generateScriptForSSR };
 
 export default Highlight;
diff --git a/src/utils/__tests__/generateScriptForSSR.test.js b/src/utils/__tests__/generateScriptForSSR.test.js
new file mode 100644
index 0000000..1821d54
--- /dev/null
+++ b/src/utils/__tests__/generateScriptForSSR.test.js
@@ -0,0 +1,100 @@
+import generateScriptForSSR from "../generateScriptForSSR";
+import duotoneDark from "../../themes/duotoneDark";
+import duotoneLight from "../../themes/duotoneLight";
+
+describe("generateScriptForSSR", () => {
+  it("generates code to set CSS variables on the document root", () => {
+    const themes = [duotoneDark, duotoneLight];
+    const scriptStr = generateScriptForSSR(
+      themes,
+      "() => window.PRISM_REACT_RENDERER_INITIAL_THEME_ID"
+    );
+    expect(scriptStr).toMatchInlineSnapshot(`
+      "const themeId = (() => window.PRISM_REACT_RENDERER_INITIAL_THEME_ID)();
+
+      if (!themeId) {
+        return;
+      }
+
+      if (themeId === 'duotoneDark') {
+        root.style.setProperty(--plain-backgroundColor, #2a2734);
+        root.style.setProperty(--plain-color, #9a86fd);
+        root.style.setProperty(--comment-color, #6c6783);
+        root.style.setProperty(--prolog-color, #6c6783);
+        root.style.setProperty(--doctype-color, #6c6783);
+        root.style.setProperty(--cdata-color, #6c6783);
+        root.style.setProperty(--punctuation-color, #6c6783);
+        root.style.setProperty(--namespace-opacity, 0.7);
+        root.style.setProperty(--tag-color, #e09142);
+        root.style.setProperty(--operator-color, #e09142);
+        root.style.setProperty(--number-color, #e09142);
+        root.style.setProperty(--property-color, #9a86fd);
+        root.style.setProperty(--function-color, #9a86fd);
+        root.style.setProperty(--tag-id-color, #eeebff);
+        root.style.setProperty(--selector-color, #eeebff);
+        root.style.setProperty(--atrule-id-color, #eeebff);
+        root.style.setProperty(--attr-name-color, #c4b9fe);
+        root.style.setProperty(--boolean-color, #ffcc99);
+        root.style.setProperty(--string-color, #ffcc99);
+        root.style.setProperty(--entity-color, #ffcc99);
+        root.style.setProperty(--url-color, #ffcc99);
+        root.style.setProperty(--attr-value-color, #ffcc99);
+        root.style.setProperty(--keyword-color, #ffcc99);
+        root.style.setProperty(--control-color, #ffcc99);
+        root.style.setProperty(--directive-color, #ffcc99);
+        root.style.setProperty(--unit-color, #ffcc99);
+        root.style.setProperty(--statement-color, #ffcc99);
+        root.style.setProperty(--regex-color, #ffcc99);
+        root.style.setProperty(--atrule-color, #ffcc99);
+        root.style.setProperty(--placeholder-color, #ffcc99);
+        root.style.setProperty(--variable-color, #ffcc99);
+        root.style.setProperty(--deleted-textDecorationLine, line-through);
+        root.style.setProperty(--inserted-textDecorationLine, underline);
+        root.style.setProperty(--italic-fontStyle, italic);
+        root.style.setProperty(--important-fontWeight, bold);
+        root.style.setProperty(--bold-fontWeight, bold);
+        root.style.setProperty(--important-color, #c4b9fe);
+      }
+
+      if (themeId === 'duotoneLight') {
+        root.style.setProperty(--plain-backgroundColor, #faf8f5);
+        root.style.setProperty(--plain-color, #728fcb);
+        root.style.setProperty(--comment-color, #b6ad9a);
+        root.style.setProperty(--prolog-color, #b6ad9a);
+        root.style.setProperty(--doctype-color, #b6ad9a);
+        root.style.setProperty(--cdata-color, #b6ad9a);
+        root.style.setProperty(--punctuation-color, #b6ad9a);
+        root.style.setProperty(--namespace-opacity, 0.7);
+        root.style.setProperty(--tag-color, #063289);
+        root.style.setProperty(--operator-color, #063289);
+        root.style.setProperty(--number-color, #063289);
+        root.style.setProperty(--property-color, #b29762);
+        root.style.setProperty(--function-color, #b29762);
+        root.style.setProperty(--tag-id-color, #2d2006);
+        root.style.setProperty(--selector-color, #2d2006);
+        root.style.setProperty(--atrule-id-color, #2d2006);
+        root.style.setProperty(--attr-name-color, #896724);
+        root.style.setProperty(--boolean-color, #728fcb);
+        root.style.setProperty(--string-color, #728fcb);
+        root.style.setProperty(--entity-color, #728fcb);
+        root.style.setProperty(--url-color, #728fcb);
+        root.style.setProperty(--attr-value-color, #728fcb);
+        root.style.setProperty(--keyword-color, #728fcb);
+        root.style.setProperty(--control-color, #728fcb);
+        root.style.setProperty(--directive-color, #728fcb);
+        root.style.setProperty(--unit-color, #728fcb);
+        root.style.setProperty(--statement-color, #728fcb);
+        root.style.setProperty(--regex-color, #728fcb);
+        root.style.setProperty(--atrule-color, #728fcb);
+        root.style.setProperty(--placeholder-color, #93abdc);
+        root.style.setProperty(--variable-color, #93abdc);
+        root.style.setProperty(--deleted-textDecorationLine, line-through);
+        root.style.setProperty(--inserted-textDecorationLine, underline);
+        root.style.setProperty(--italic-fontStyle, italic);
+        root.style.setProperty(--important-fontWeight, bold);
+        root.style.setProperty(--bold-fontWeight, bold);
+        root.style.setProperty(--important-color, #896724);
+      }"
+    `);
+  });
+});
diff --git a/src/utils/generateScriptForSSR.js b/src/utils/generateScriptForSSR.js
new file mode 100644
index 0000000..a18eb33
--- /dev/null
+++ b/src/utils/generateScriptForSSR.js
@@ -0,0 +1,33 @@
+// @flow
+
+import themeWithCssVariables from "./themeWithCssVariables";
+import type { PrismTheme } from "../types";
+
+const generateScriptForSSR = (
+  themes: PrismTheme[],
+  getThemeId: string
+): string =>
+  `
+const themeId = (${getThemeId})();
+
+if (!themeId) {
+  return;
+}
+
+${themes
+  .map(
+    (theme) =>
+      `if (themeId === '${theme.id || ""}') {
+  ${Object.entries(themeWithCssVariables(theme).variables)
+    .map(
+      ([key, value]) =>
+        // $FlowFixMe
+        `root.style.setProperty(${key}, ${value ?? ""});`
+    )
+    .join("\n" + " ".repeat(2))}
+}`
+  )
+  .join("\n\n")}
+`.trim();
+
+export default generateScriptForSSR;

From 520a8eb2d540bc6e2f86c63c18c9ed02af77aa0a Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Tue, 26 Jul 2022 21:25:03 -0700
Subject: [PATCH 09/19] fix(generateScriptForSSR.js): cant use nullish
 collesing or whatever

---
 src/utils/generateScriptForSSR.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/generateScriptForSSR.js b/src/utils/generateScriptForSSR.js
index a18eb33..a6c2933 100644
--- a/src/utils/generateScriptForSSR.js
+++ b/src/utils/generateScriptForSSR.js
@@ -22,7 +22,7 @@ ${themes
     .map(
       ([key, value]) =>
         // $FlowFixMe
-        `root.style.setProperty(${key}, ${value ?? ""});`
+        `root.style.setProperty(${key}, ${value || ""});`
     )
     .join("\n" + " ".repeat(2))}
 }`

From 595ab5e8fe7eb876158d69604914251c86badd87 Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Mon, 1 Aug 2022 09:27:58 -0700
Subject: [PATCH 10/19] chore(index.d.ts): update type declaration file

---
 index.d.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/index.d.ts b/index.d.ts
index 6b701f0..c07b77e 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -81,6 +81,7 @@ declare module "prism-react-renderer" {
   };
 
   type PrismTheme = {
+    id?: string;
     plain: PrismThemeEntry;
     styles: Array<{
       types: string[];
@@ -173,6 +174,8 @@ declare module "prism-react-renderer" {
 
   export const Prism: PrismLib;
 
+  export const generateScriptForSSR: (themes: PrismTheme[], getThemeIdFuncStr: string) => string;
+
   export { Language, DefaultProps, PrismTheme };
 }
 

From ef2f8e7c9529ccedbd08fab6d2c94ecbf10dfec7 Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Mon, 1 Aug 2022 10:03:17 -0700
Subject: [PATCH 11/19] chore: make PrismTheme.id required, variable renaming

---
 README.md                         | 2 +-
 index.d.ts                        | 2 +-
 src/types.js                      | 2 +-
 src/utils/generateScriptForSSR.js | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 1284717..d04f30e 100755
--- a/README.md
+++ b/README.md
@@ -409,7 +409,7 @@ export const onRenderBody = ({ setPreBodyComponents }) => {
   `.trim()
 
   const codeToRunOnClient = generateScriptForSSR(
-    [duotoneDark, duotonLight], // Include whatever themes `getThemeIdFuncStr` might return
+    [duotoneDark, duotoneLight], // Include whatever themes `getThemeIdFuncStr` might return
     getThemeIdFuncStr
   )
   setPreBodyComponents(<script dangerouslySetInnerHTML={{ __html: codeToRunOnClient }} />);
diff --git a/index.d.ts b/index.d.ts
index c07b77e..a50a6d6 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -81,7 +81,7 @@ declare module "prism-react-renderer" {
   };
 
   type PrismTheme = {
-    id?: string;
+    id: string;
     plain: PrismThemeEntry;
     styles: Array<{
       types: string[];
diff --git a/src/types.js b/src/types.js
index a438fe0..6f310e9 100755
--- a/src/types.js
+++ b/src/types.js
@@ -113,7 +113,7 @@ export type PrismThemeEntry = {
 };
 
 export type PrismTheme = {
-  id?: string,
+  id: string,
   plain: PrismThemeEntry,
   styles: Array<{
     types: string[],
diff --git a/src/utils/generateScriptForSSR.js b/src/utils/generateScriptForSSR.js
index a6c2933..63eb7c1 100644
--- a/src/utils/generateScriptForSSR.js
+++ b/src/utils/generateScriptForSSR.js
@@ -5,10 +5,10 @@ import type { PrismTheme } from "../types";
 
 const generateScriptForSSR = (
   themes: PrismTheme[],
-  getThemeId: string
+  getThemeIdFuncStr: string
 ): string =>
   `
-const themeId = (${getThemeId})();
+const themeId = (${getThemeIdFuncStr})();
 
 if (!themeId) {
   return;

From 49da00a26cc92a3655faa377e18164413a9eda40 Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Mon, 1 Aug 2022 10:11:48 -0700
Subject: [PATCH 12/19] fix(generateScriptForSSR.js): must quote strings in
 strinigified js

---
 .../__tests__/generateScriptForSSR.test.js    | 148 +++++++++---------
 src/utils/generateScriptForSSR.js             |   2 +-
 2 files changed, 75 insertions(+), 75 deletions(-)

diff --git a/src/utils/__tests__/generateScriptForSSR.test.js b/src/utils/__tests__/generateScriptForSSR.test.js
index 1821d54..f88d112 100644
--- a/src/utils/__tests__/generateScriptForSSR.test.js
+++ b/src/utils/__tests__/generateScriptForSSR.test.js
@@ -17,83 +17,83 @@ describe("generateScriptForSSR", () => {
       }
 
       if (themeId === 'duotoneDark') {
-        root.style.setProperty(--plain-backgroundColor, #2a2734);
-        root.style.setProperty(--plain-color, #9a86fd);
-        root.style.setProperty(--comment-color, #6c6783);
-        root.style.setProperty(--prolog-color, #6c6783);
-        root.style.setProperty(--doctype-color, #6c6783);
-        root.style.setProperty(--cdata-color, #6c6783);
-        root.style.setProperty(--punctuation-color, #6c6783);
-        root.style.setProperty(--namespace-opacity, 0.7);
-        root.style.setProperty(--tag-color, #e09142);
-        root.style.setProperty(--operator-color, #e09142);
-        root.style.setProperty(--number-color, #e09142);
-        root.style.setProperty(--property-color, #9a86fd);
-        root.style.setProperty(--function-color, #9a86fd);
-        root.style.setProperty(--tag-id-color, #eeebff);
-        root.style.setProperty(--selector-color, #eeebff);
-        root.style.setProperty(--atrule-id-color, #eeebff);
-        root.style.setProperty(--attr-name-color, #c4b9fe);
-        root.style.setProperty(--boolean-color, #ffcc99);
-        root.style.setProperty(--string-color, #ffcc99);
-        root.style.setProperty(--entity-color, #ffcc99);
-        root.style.setProperty(--url-color, #ffcc99);
-        root.style.setProperty(--attr-value-color, #ffcc99);
-        root.style.setProperty(--keyword-color, #ffcc99);
-        root.style.setProperty(--control-color, #ffcc99);
-        root.style.setProperty(--directive-color, #ffcc99);
-        root.style.setProperty(--unit-color, #ffcc99);
-        root.style.setProperty(--statement-color, #ffcc99);
-        root.style.setProperty(--regex-color, #ffcc99);
-        root.style.setProperty(--atrule-color, #ffcc99);
-        root.style.setProperty(--placeholder-color, #ffcc99);
-        root.style.setProperty(--variable-color, #ffcc99);
-        root.style.setProperty(--deleted-textDecorationLine, line-through);
-        root.style.setProperty(--inserted-textDecorationLine, underline);
-        root.style.setProperty(--italic-fontStyle, italic);
-        root.style.setProperty(--important-fontWeight, bold);
-        root.style.setProperty(--bold-fontWeight, bold);
-        root.style.setProperty(--important-color, #c4b9fe);
+        root.style.setProperty('--plain-backgroundColor', '#2a2734');
+        root.style.setProperty('--plain-color', '#9a86fd');
+        root.style.setProperty('--comment-color', '#6c6783');
+        root.style.setProperty('--prolog-color', '#6c6783');
+        root.style.setProperty('--doctype-color', '#6c6783');
+        root.style.setProperty('--cdata-color', '#6c6783');
+        root.style.setProperty('--punctuation-color', '#6c6783');
+        root.style.setProperty('--namespace-opacity', '0.7');
+        root.style.setProperty('--tag-color', '#e09142');
+        root.style.setProperty('--operator-color', '#e09142');
+        root.style.setProperty('--number-color', '#e09142');
+        root.style.setProperty('--property-color', '#9a86fd');
+        root.style.setProperty('--function-color', '#9a86fd');
+        root.style.setProperty('--tag-id-color', '#eeebff');
+        root.style.setProperty('--selector-color', '#eeebff');
+        root.style.setProperty('--atrule-id-color', '#eeebff');
+        root.style.setProperty('--attr-name-color', '#c4b9fe');
+        root.style.setProperty('--boolean-color', '#ffcc99');
+        root.style.setProperty('--string-color', '#ffcc99');
+        root.style.setProperty('--entity-color', '#ffcc99');
+        root.style.setProperty('--url-color', '#ffcc99');
+        root.style.setProperty('--attr-value-color', '#ffcc99');
+        root.style.setProperty('--keyword-color', '#ffcc99');
+        root.style.setProperty('--control-color', '#ffcc99');
+        root.style.setProperty('--directive-color', '#ffcc99');
+        root.style.setProperty('--unit-color', '#ffcc99');
+        root.style.setProperty('--statement-color', '#ffcc99');
+        root.style.setProperty('--regex-color', '#ffcc99');
+        root.style.setProperty('--atrule-color', '#ffcc99');
+        root.style.setProperty('--placeholder-color', '#ffcc99');
+        root.style.setProperty('--variable-color', '#ffcc99');
+        root.style.setProperty('--deleted-textDecorationLine', 'line-through');
+        root.style.setProperty('--inserted-textDecorationLine', 'underline');
+        root.style.setProperty('--italic-fontStyle', 'italic');
+        root.style.setProperty('--important-fontWeight', 'bold');
+        root.style.setProperty('--bold-fontWeight', 'bold');
+        root.style.setProperty('--important-color', '#c4b9fe');
       }
 
       if (themeId === 'duotoneLight') {
-        root.style.setProperty(--plain-backgroundColor, #faf8f5);
-        root.style.setProperty(--plain-color, #728fcb);
-        root.style.setProperty(--comment-color, #b6ad9a);
-        root.style.setProperty(--prolog-color, #b6ad9a);
-        root.style.setProperty(--doctype-color, #b6ad9a);
-        root.style.setProperty(--cdata-color, #b6ad9a);
-        root.style.setProperty(--punctuation-color, #b6ad9a);
-        root.style.setProperty(--namespace-opacity, 0.7);
-        root.style.setProperty(--tag-color, #063289);
-        root.style.setProperty(--operator-color, #063289);
-        root.style.setProperty(--number-color, #063289);
-        root.style.setProperty(--property-color, #b29762);
-        root.style.setProperty(--function-color, #b29762);
-        root.style.setProperty(--tag-id-color, #2d2006);
-        root.style.setProperty(--selector-color, #2d2006);
-        root.style.setProperty(--atrule-id-color, #2d2006);
-        root.style.setProperty(--attr-name-color, #896724);
-        root.style.setProperty(--boolean-color, #728fcb);
-        root.style.setProperty(--string-color, #728fcb);
-        root.style.setProperty(--entity-color, #728fcb);
-        root.style.setProperty(--url-color, #728fcb);
-        root.style.setProperty(--attr-value-color, #728fcb);
-        root.style.setProperty(--keyword-color, #728fcb);
-        root.style.setProperty(--control-color, #728fcb);
-        root.style.setProperty(--directive-color, #728fcb);
-        root.style.setProperty(--unit-color, #728fcb);
-        root.style.setProperty(--statement-color, #728fcb);
-        root.style.setProperty(--regex-color, #728fcb);
-        root.style.setProperty(--atrule-color, #728fcb);
-        root.style.setProperty(--placeholder-color, #93abdc);
-        root.style.setProperty(--variable-color, #93abdc);
-        root.style.setProperty(--deleted-textDecorationLine, line-through);
-        root.style.setProperty(--inserted-textDecorationLine, underline);
-        root.style.setProperty(--italic-fontStyle, italic);
-        root.style.setProperty(--important-fontWeight, bold);
-        root.style.setProperty(--bold-fontWeight, bold);
-        root.style.setProperty(--important-color, #896724);
+        root.style.setProperty('--plain-backgroundColor', '#faf8f5');
+        root.style.setProperty('--plain-color', '#728fcb');
+        root.style.setProperty('--comment-color', '#b6ad9a');
+        root.style.setProperty('--prolog-color', '#b6ad9a');
+        root.style.setProperty('--doctype-color', '#b6ad9a');
+        root.style.setProperty('--cdata-color', '#b6ad9a');
+        root.style.setProperty('--punctuation-color', '#b6ad9a');
+        root.style.setProperty('--namespace-opacity', '0.7');
+        root.style.setProperty('--tag-color', '#063289');
+        root.style.setProperty('--operator-color', '#063289');
+        root.style.setProperty('--number-color', '#063289');
+        root.style.setProperty('--property-color', '#b29762');
+        root.style.setProperty('--function-color', '#b29762');
+        root.style.setProperty('--tag-id-color', '#2d2006');
+        root.style.setProperty('--selector-color', '#2d2006');
+        root.style.setProperty('--atrule-id-color', '#2d2006');
+        root.style.setProperty('--attr-name-color', '#896724');
+        root.style.setProperty('--boolean-color', '#728fcb');
+        root.style.setProperty('--string-color', '#728fcb');
+        root.style.setProperty('--entity-color', '#728fcb');
+        root.style.setProperty('--url-color', '#728fcb');
+        root.style.setProperty('--attr-value-color', '#728fcb');
+        root.style.setProperty('--keyword-color', '#728fcb');
+        root.style.setProperty('--control-color', '#728fcb');
+        root.style.setProperty('--directive-color', '#728fcb');
+        root.style.setProperty('--unit-color', '#728fcb');
+        root.style.setProperty('--statement-color', '#728fcb');
+        root.style.setProperty('--regex-color', '#728fcb');
+        root.style.setProperty('--atrule-color', '#728fcb');
+        root.style.setProperty('--placeholder-color', '#93abdc');
+        root.style.setProperty('--variable-color', '#93abdc');
+        root.style.setProperty('--deleted-textDecorationLine', 'line-through');
+        root.style.setProperty('--inserted-textDecorationLine', 'underline');
+        root.style.setProperty('--italic-fontStyle', 'italic');
+        root.style.setProperty('--important-fontWeight', 'bold');
+        root.style.setProperty('--bold-fontWeight', 'bold');
+        root.style.setProperty('--important-color', '#896724');
       }"
     `);
   });
diff --git a/src/utils/generateScriptForSSR.js b/src/utils/generateScriptForSSR.js
index 63eb7c1..cbbf55d 100644
--- a/src/utils/generateScriptForSSR.js
+++ b/src/utils/generateScriptForSSR.js
@@ -22,7 +22,7 @@ ${themes
     .map(
       ([key, value]) =>
         // $FlowFixMe
-        `root.style.setProperty(${key}, ${value || ""});`
+        `root.style.setProperty('${key}', '${value || ""}');`
     )
     .join("\n" + " ".repeat(2))}
 }`

From 82040cc4f7368e7422961f7ebb746d11bd4f1592 Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Mon, 1 Aug 2022 10:24:45 -0700
Subject: [PATCH 13/19] fix(generateScriptForSSR): root isnt a global variable
 u dummy

---
 src/utils/__tests__/generateScriptForSSR.test.js | 2 ++
 src/utils/generateScriptForSSR.js                | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/utils/__tests__/generateScriptForSSR.test.js b/src/utils/__tests__/generateScriptForSSR.test.js
index f88d112..b6b52c7 100644
--- a/src/utils/__tests__/generateScriptForSSR.test.js
+++ b/src/utils/__tests__/generateScriptForSSR.test.js
@@ -16,6 +16,8 @@ describe("generateScriptForSSR", () => {
         return;
       }
 
+      const root = document.documentElement;
+
       if (themeId === 'duotoneDark') {
         root.style.setProperty('--plain-backgroundColor', '#2a2734');
         root.style.setProperty('--plain-color', '#9a86fd');
diff --git a/src/utils/generateScriptForSSR.js b/src/utils/generateScriptForSSR.js
index cbbf55d..fa18b88 100644
--- a/src/utils/generateScriptForSSR.js
+++ b/src/utils/generateScriptForSSR.js
@@ -14,6 +14,8 @@ if (!themeId) {
   return;
 }
 
+const root = document.documentElement;
+
 ${themes
   .map(
     (theme) =>

From 30b2d1ead639a72368513af9161fccb551d1bcba Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Mon, 1 Aug 2022 10:43:57 -0700
Subject: [PATCH 14/19] fix(generateScriptForSSR.js): illegal return u dummy

---
 src/utils/__tests__/generateScriptForSSR.test.js | 4 ----
 src/utils/generateScriptForSSR.js                | 4 ----
 2 files changed, 8 deletions(-)

diff --git a/src/utils/__tests__/generateScriptForSSR.test.js b/src/utils/__tests__/generateScriptForSSR.test.js
index b6b52c7..cab2ca6 100644
--- a/src/utils/__tests__/generateScriptForSSR.test.js
+++ b/src/utils/__tests__/generateScriptForSSR.test.js
@@ -12,10 +12,6 @@ describe("generateScriptForSSR", () => {
     expect(scriptStr).toMatchInlineSnapshot(`
       "const themeId = (() => window.PRISM_REACT_RENDERER_INITIAL_THEME_ID)();
 
-      if (!themeId) {
-        return;
-      }
-
       const root = document.documentElement;
 
       if (themeId === 'duotoneDark') {
diff --git a/src/utils/generateScriptForSSR.js b/src/utils/generateScriptForSSR.js
index fa18b88..942c966 100644
--- a/src/utils/generateScriptForSSR.js
+++ b/src/utils/generateScriptForSSR.js
@@ -10,10 +10,6 @@ const generateScriptForSSR = (
   `
 const themeId = (${getThemeIdFuncStr})();
 
-if (!themeId) {
-  return;
-}
-
 const root = document.documentElement;
 
 ${themes

From 9d7954ad828310c695e7ee2ecfadc72b5acc214b Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Tue, 2 Aug 2022 10:06:53 -0700
Subject: [PATCH 15/19] docs(README.md): add Next.js example

---
 README.md | 46 ++++++++++++++++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index d04f30e..6e11193 100755
--- a/README.md
+++ b/README.md
@@ -400,22 +400,44 @@ import { generateScriptForSSR } from 'prism-react-renderer'
 import duotoneDark from 'prism-react-renderer/themes/duotoneDark';
 import duotoneLight from 'prism-react-renderer/themes/duotoneLight';
 
+// A stringified function returning the `id` of the
+// theme you wish to render on the initial page load
+const getThemeIdFuncStr = `
+  () => (
+    window.localStorage.get('color-mode') === 'dark'
+    ? 'duotoneDark'  // The 'id' field of the duotoneDark theme
+    : 'duotoneLight' // The 'id' field of the duotoneLight theme
+  );
+`.trim()
+
+const codeToRunOnClient = generateScriptForSSR(
+  // Include whatever themes `getThemeIdFuncStr` might return
+  [duotoneDark, duotoneLight],
+  getThemeIdFuncStr
+);
+
 // Gatsby
 export const onRenderBody = ({ setPreBodyComponents }) => {
-  // A stringified function returning the `id` of the
-  // theme you wish to render on the initial page load
-  const getThemeIdFuncStr = `
-    () => window.localStorage.get('color-mode') || 'duotoneLight'
-  `.trim()
-
-  const codeToRunOnClient = generateScriptForSSR(
-    [duotoneDark, duotoneLight], // Include whatever themes `getThemeIdFuncStr` might return
-    getThemeIdFuncStr
-  )
-  setPreBodyComponents(<script dangerouslySetInnerHTML={{ __html: codeToRunOnClient }} />);
+  setPreBodyComponents(
+    <script dangerouslySetInnerHTML={{ __html: codeToRunOnClient }} />
+  );
 };
 
-// @TODO Add Next.js example
+// Next.js (pages/_document.js)
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <script dangerouslySetInnerHTML={{ __html: codeToRunOnClient }} />
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
 ```
 
 ## FAQ

From efc23ca2ab06615f23434806535d03f3e3484689 Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Tue, 2 Aug 2022 10:10:35 -0700
Subject: [PATCH 16/19] chore(README.md): use string interpolation

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6e11193..028f18e 100755
--- a/README.md
+++ b/README.md
@@ -405,8 +405,8 @@ import duotoneLight from 'prism-react-renderer/themes/duotoneLight';
 const getThemeIdFuncStr = `
   () => (
     window.localStorage.get('color-mode') === 'dark'
-    ? 'duotoneDark'  // The 'id' field of the duotoneDark theme
-    : 'duotoneLight' // The 'id' field of the duotoneLight theme
+    ? '${duotoneDark.id}'
+    : '${duotoneLight.id}'
   );
 `.trim()
 

From dcd4681790a277884f03b5c614a7197b0b311eb5 Mon Sep 17 00:00:00 2001
From: Narin Luangrath <narin.luangrath@gmail.com>
Date: Wed, 3 Aug 2022 12:32:00 -0700
Subject: [PATCH 17/19] docs(README.md): clarify SSR docs

---
 README.md | 54 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 028f18e..1856bec 100755
--- a/README.md
+++ b/README.md
@@ -393,18 +393,62 @@ When converting a Prism CSS theme it's mostly just necessary to use classes as
 
 ### SSR Support / Avoiding FOUC
 
-If your React app supports "light mode / dark mode" you need to do additional work to avoid a flash of unstyled content (FOUC). Generate the following script tag and inject it into your HTML so it runs _before_ your content loads.
+If your React app supports "light mode / dark mode" you need to do additional work to avoid a flash of unstyled content (FOUC).
+Suppose you have the following application code:
+
+```jsx
+import { useState, useEffect } from 'react';
+import Highlight from 'prism-react-renderer'
+import duotoneDark from 'prism-react-renderer/themes/duotoneDark';
+import duotoneLight from 'prism-react-renderer/themes/duotoneLight';
+
+const useTheme = () => {
+ const [theme, _setTheme] = useState(duotoneLight);
+
+ useEffect(() => {
+   const colorMode = window.localStorage.getItem('color-mode');
+   _setTheme(colorMode === 'dark' ? duotoneDark : duotoneLight);
+ }, []);
+
+ const setTheme = (themeId) => {
+   if (themeId === duotoneLight.id) {
+     window.localStorage.setItem('color-mode', 'light');
+     _setTheme(duotoneLight);
+   }
+   if (themeId === duotoneDark.id) {
+     window.localStorage.setItem('color-mode', 'dark');
+     _setTheme(duotoneDark);
+   }
+ }
+
+ return { theme, setTheme }
+}
+
+const MyComponent = () => {
+ const { setTheme, theme } = useTheme();
+
+ return (
+  <>
+    <Highlight theme={theme}>
+      // omitted for brevity
+    </Highlight>
+    <button onClick={() => setTheme(duotoneLight.id)}>Light Mode!</button>
+    <button onClick={() => setTheme(duotoneDark.id)}>Dark Mode!</button>
+  </>
+ )
+}
+```
+
+You should generate the following script tag and inject it into your HTML so it runs _before_ your content loads. Note: **Do NOT copy/paste the following code.** Use it as a starting point and modify it to match your application's method of persisting theme state.
 
 ```js
-import { generateScriptForSSR } from 'prism-react-renderer'
+import Highlight, { generateScriptForSSR } from 'prism-react-renderer'
 import duotoneDark from 'prism-react-renderer/themes/duotoneDark';
 import duotoneLight from 'prism-react-renderer/themes/duotoneLight';
 
-// A stringified function returning the `id` of the
-// theme you wish to render on the initial page load
 const getThemeIdFuncStr = `
   () => (
-    window.localStorage.get('color-mode') === 'dark'
+    window.localStorage.getItem('color-mode') === 'dark'
     ? '${duotoneDark.id}'
     : '${duotoneLight.id}'
   );

From bcff20613887a285cce5afb4a80a172dfc0d3560 Mon Sep 17 00:00:00 2001
From: Narin Luangrath <narin.luangrath@gmail.com>
Date: Wed, 3 Aug 2022 12:44:51 -0700
Subject: [PATCH 18/19] improv(generateScriptForSSR.js): wrap script with
 try/catch

---
 .../__tests__/generateScriptForSSR.test.js    | 167 +++++++++---------
 src/utils/generateScriptForSSR.js             |  37 ++--
 2 files changed, 107 insertions(+), 97 deletions(-)

diff --git a/src/utils/__tests__/generateScriptForSSR.test.js b/src/utils/__tests__/generateScriptForSSR.test.js
index cab2ca6..650a738 100644
--- a/src/utils/__tests__/generateScriptForSSR.test.js
+++ b/src/utils/__tests__/generateScriptForSSR.test.js
@@ -10,88 +10,93 @@ describe("generateScriptForSSR", () => {
       "() => window.PRISM_REACT_RENDERER_INITIAL_THEME_ID"
     );
     expect(scriptStr).toMatchInlineSnapshot(`
-      "const themeId = (() => window.PRISM_REACT_RENDERER_INITIAL_THEME_ID)();
+      "try {
+        const themeId = (() => window.PRISM_REACT_RENDERER_INITIAL_THEME_ID)();
+        
+        const root = document.documentElement;
+        
+        if (themeId === 'duotoneDark') {
+          root.style.setProperty('--plain-backgroundColor', '#2a2734');
+          root.style.setProperty('--plain-color', '#9a86fd');
+          root.style.setProperty('--comment-color', '#6c6783');
+          root.style.setProperty('--prolog-color', '#6c6783');
+          root.style.setProperty('--doctype-color', '#6c6783');
+          root.style.setProperty('--cdata-color', '#6c6783');
+          root.style.setProperty('--punctuation-color', '#6c6783');
+          root.style.setProperty('--namespace-opacity', '0.7');
+          root.style.setProperty('--tag-color', '#e09142');
+          root.style.setProperty('--operator-color', '#e09142');
+          root.style.setProperty('--number-color', '#e09142');
+          root.style.setProperty('--property-color', '#9a86fd');
+          root.style.setProperty('--function-color', '#9a86fd');
+          root.style.setProperty('--tag-id-color', '#eeebff');
+          root.style.setProperty('--selector-color', '#eeebff');
+          root.style.setProperty('--atrule-id-color', '#eeebff');
+          root.style.setProperty('--attr-name-color', '#c4b9fe');
+          root.style.setProperty('--boolean-color', '#ffcc99');
+          root.style.setProperty('--string-color', '#ffcc99');
+          root.style.setProperty('--entity-color', '#ffcc99');
+          root.style.setProperty('--url-color', '#ffcc99');
+          root.style.setProperty('--attr-value-color', '#ffcc99');
+          root.style.setProperty('--keyword-color', '#ffcc99');
+          root.style.setProperty('--control-color', '#ffcc99');
+          root.style.setProperty('--directive-color', '#ffcc99');
+          root.style.setProperty('--unit-color', '#ffcc99');
+          root.style.setProperty('--statement-color', '#ffcc99');
+          root.style.setProperty('--regex-color', '#ffcc99');
+          root.style.setProperty('--atrule-color', '#ffcc99');
+          root.style.setProperty('--placeholder-color', '#ffcc99');
+          root.style.setProperty('--variable-color', '#ffcc99');
+          root.style.setProperty('--deleted-textDecorationLine', 'line-through');
+          root.style.setProperty('--inserted-textDecorationLine', 'underline');
+          root.style.setProperty('--italic-fontStyle', 'italic');
+          root.style.setProperty('--important-fontWeight', 'bold');
+          root.style.setProperty('--bold-fontWeight', 'bold');
+          root.style.setProperty('--important-color', '#c4b9fe');
+        }
 
-      const root = document.documentElement;
-
-      if (themeId === 'duotoneDark') {
-        root.style.setProperty('--plain-backgroundColor', '#2a2734');
-        root.style.setProperty('--plain-color', '#9a86fd');
-        root.style.setProperty('--comment-color', '#6c6783');
-        root.style.setProperty('--prolog-color', '#6c6783');
-        root.style.setProperty('--doctype-color', '#6c6783');
-        root.style.setProperty('--cdata-color', '#6c6783');
-        root.style.setProperty('--punctuation-color', '#6c6783');
-        root.style.setProperty('--namespace-opacity', '0.7');
-        root.style.setProperty('--tag-color', '#e09142');
-        root.style.setProperty('--operator-color', '#e09142');
-        root.style.setProperty('--number-color', '#e09142');
-        root.style.setProperty('--property-color', '#9a86fd');
-        root.style.setProperty('--function-color', '#9a86fd');
-        root.style.setProperty('--tag-id-color', '#eeebff');
-        root.style.setProperty('--selector-color', '#eeebff');
-        root.style.setProperty('--atrule-id-color', '#eeebff');
-        root.style.setProperty('--attr-name-color', '#c4b9fe');
-        root.style.setProperty('--boolean-color', '#ffcc99');
-        root.style.setProperty('--string-color', '#ffcc99');
-        root.style.setProperty('--entity-color', '#ffcc99');
-        root.style.setProperty('--url-color', '#ffcc99');
-        root.style.setProperty('--attr-value-color', '#ffcc99');
-        root.style.setProperty('--keyword-color', '#ffcc99');
-        root.style.setProperty('--control-color', '#ffcc99');
-        root.style.setProperty('--directive-color', '#ffcc99');
-        root.style.setProperty('--unit-color', '#ffcc99');
-        root.style.setProperty('--statement-color', '#ffcc99');
-        root.style.setProperty('--regex-color', '#ffcc99');
-        root.style.setProperty('--atrule-color', '#ffcc99');
-        root.style.setProperty('--placeholder-color', '#ffcc99');
-        root.style.setProperty('--variable-color', '#ffcc99');
-        root.style.setProperty('--deleted-textDecorationLine', 'line-through');
-        root.style.setProperty('--inserted-textDecorationLine', 'underline');
-        root.style.setProperty('--italic-fontStyle', 'italic');
-        root.style.setProperty('--important-fontWeight', 'bold');
-        root.style.setProperty('--bold-fontWeight', 'bold');
-        root.style.setProperty('--important-color', '#c4b9fe');
-      }
-
-      if (themeId === 'duotoneLight') {
-        root.style.setProperty('--plain-backgroundColor', '#faf8f5');
-        root.style.setProperty('--plain-color', '#728fcb');
-        root.style.setProperty('--comment-color', '#b6ad9a');
-        root.style.setProperty('--prolog-color', '#b6ad9a');
-        root.style.setProperty('--doctype-color', '#b6ad9a');
-        root.style.setProperty('--cdata-color', '#b6ad9a');
-        root.style.setProperty('--punctuation-color', '#b6ad9a');
-        root.style.setProperty('--namespace-opacity', '0.7');
-        root.style.setProperty('--tag-color', '#063289');
-        root.style.setProperty('--operator-color', '#063289');
-        root.style.setProperty('--number-color', '#063289');
-        root.style.setProperty('--property-color', '#b29762');
-        root.style.setProperty('--function-color', '#b29762');
-        root.style.setProperty('--tag-id-color', '#2d2006');
-        root.style.setProperty('--selector-color', '#2d2006');
-        root.style.setProperty('--atrule-id-color', '#2d2006');
-        root.style.setProperty('--attr-name-color', '#896724');
-        root.style.setProperty('--boolean-color', '#728fcb');
-        root.style.setProperty('--string-color', '#728fcb');
-        root.style.setProperty('--entity-color', '#728fcb');
-        root.style.setProperty('--url-color', '#728fcb');
-        root.style.setProperty('--attr-value-color', '#728fcb');
-        root.style.setProperty('--keyword-color', '#728fcb');
-        root.style.setProperty('--control-color', '#728fcb');
-        root.style.setProperty('--directive-color', '#728fcb');
-        root.style.setProperty('--unit-color', '#728fcb');
-        root.style.setProperty('--statement-color', '#728fcb');
-        root.style.setProperty('--regex-color', '#728fcb');
-        root.style.setProperty('--atrule-color', '#728fcb');
-        root.style.setProperty('--placeholder-color', '#93abdc');
-        root.style.setProperty('--variable-color', '#93abdc');
-        root.style.setProperty('--deleted-textDecorationLine', 'line-through');
-        root.style.setProperty('--inserted-textDecorationLine', 'underline');
-        root.style.setProperty('--italic-fontStyle', 'italic');
-        root.style.setProperty('--important-fontWeight', 'bold');
-        root.style.setProperty('--bold-fontWeight', 'bold');
-        root.style.setProperty('--important-color', '#896724');
+        if (themeId === 'duotoneLight') {
+          root.style.setProperty('--plain-backgroundColor', '#faf8f5');
+          root.style.setProperty('--plain-color', '#728fcb');
+          root.style.setProperty('--comment-color', '#b6ad9a');
+          root.style.setProperty('--prolog-color', '#b6ad9a');
+          root.style.setProperty('--doctype-color', '#b6ad9a');
+          root.style.setProperty('--cdata-color', '#b6ad9a');
+          root.style.setProperty('--punctuation-color', '#b6ad9a');
+          root.style.setProperty('--namespace-opacity', '0.7');
+          root.style.setProperty('--tag-color', '#063289');
+          root.style.setProperty('--operator-color', '#063289');
+          root.style.setProperty('--number-color', '#063289');
+          root.style.setProperty('--property-color', '#b29762');
+          root.style.setProperty('--function-color', '#b29762');
+          root.style.setProperty('--tag-id-color', '#2d2006');
+          root.style.setProperty('--selector-color', '#2d2006');
+          root.style.setProperty('--atrule-id-color', '#2d2006');
+          root.style.setProperty('--attr-name-color', '#896724');
+          root.style.setProperty('--boolean-color', '#728fcb');
+          root.style.setProperty('--string-color', '#728fcb');
+          root.style.setProperty('--entity-color', '#728fcb');
+          root.style.setProperty('--url-color', '#728fcb');
+          root.style.setProperty('--attr-value-color', '#728fcb');
+          root.style.setProperty('--keyword-color', '#728fcb');
+          root.style.setProperty('--control-color', '#728fcb');
+          root.style.setProperty('--directive-color', '#728fcb');
+          root.style.setProperty('--unit-color', '#728fcb');
+          root.style.setProperty('--statement-color', '#728fcb');
+          root.style.setProperty('--regex-color', '#728fcb');
+          root.style.setProperty('--atrule-color', '#728fcb');
+          root.style.setProperty('--placeholder-color', '#93abdc');
+          root.style.setProperty('--variable-color', '#93abdc');
+          root.style.setProperty('--deleted-textDecorationLine', 'line-through');
+          root.style.setProperty('--inserted-textDecorationLine', 'underline');
+          root.style.setProperty('--italic-fontStyle', 'italic');
+          root.style.setProperty('--important-fontWeight', 'bold');
+          root.style.setProperty('--bold-fontWeight', 'bold');
+          root.style.setProperty('--important-color', '#896724');
+        }
+      } catch (e) {
+        console.error('Failed to set prism-react-renderer CSS variables');
+        console.error(e);
       }"
     `);
   });
diff --git a/src/utils/generateScriptForSSR.js b/src/utils/generateScriptForSSR.js
index 942c966..485d8e1 100644
--- a/src/utils/generateScriptForSSR.js
+++ b/src/utils/generateScriptForSSR.js
@@ -8,24 +8,29 @@ const generateScriptForSSR = (
   getThemeIdFuncStr: string
 ): string =>
   `
-const themeId = (${getThemeIdFuncStr})();
-
-const root = document.documentElement;
-
-${themes
-  .map(
-    (theme) =>
-      `if (themeId === '${theme.id || ""}') {
-  ${Object.entries(themeWithCssVariables(theme).variables)
+try {
+  const themeId = (${getThemeIdFuncStr})();
+  
+  const root = document.documentElement;
+  
+  ${themes
     .map(
-      ([key, value]) =>
-        // $FlowFixMe
-        `root.style.setProperty('${key}', '${value || ""}');`
+      (theme) =>
+        `if (themeId === '${theme.id || ""}') {
+    ${Object.entries(themeWithCssVariables(theme).variables)
+      .map(
+        ([key, value]) =>
+          // $FlowFixMe
+          `root.style.setProperty('${key}', '${value || ""}');`
+      )
+      .join("\n" + " ".repeat(4))}
+  }`
     )
-    .join("\n" + " ".repeat(2))}
-}`
-  )
-  .join("\n\n")}
+    .join("\n\n" + " ".repeat(2))}
+} catch (e) {
+  console.error('Failed to set prism-react-renderer CSS variables');
+  console.error(e);
+}
 `.trim();
 
 export default generateScriptForSSR;

From ad4aae63a3a08887c3ac537b87e5d39b026d92f8 Mon Sep 17 00:00:00 2001
From: Narin Luangrath <narin.luangrath@gmail.com>
Date: Wed, 3 Aug 2022 12:49:26 -0700
Subject: [PATCH 19/19] docs(README.md): add comment about CSP

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 1856bec..84b1770 100755
--- a/README.md
+++ b/README.md
@@ -484,6 +484,8 @@ export default function Document() {
 }
 ```
 
+Note: You may need to tweak your application's [Content-Security-Policy (CSP) header](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) for inline scripts to work properly.
+
 ## FAQ
 
 <details>