feat: allow nonce on server style tag

dash-ui · Nov 7, 2021 · 92e527a · 92e527a
1 parent 32fcc31
commit 92e527a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/server/src/__snapshots__/index.test.tsx.snap b/server/src/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Style> add a nonce to the <style> tag 1`] = `"<style nonce=\\"abc\\" data-dash=\\"1abu38z\\" data-cache=\\"ui\\">.ui-1abu38z{display:block;}</style>"`;
+
 exports[`<Style> creates <style> tag based on html string 1`] = `"<style data-dash=\\"1abu38z\\" data-cache=\\"ui\\">.ui-1abu38z{display:block;}</style>"`;
 
 exports[`<Style> creates <style> tag with cache key 1`] = `"<style data-dash=\\"1abu38z\\" data-cache=\\"abc\\">.abc-1abu38z{display:block;}</style>"`;

diff --git a/server/src/index.test.tsx b/server/src/index.test.tsx
@@ -58,4 +58,16 @@ describe("<Style>", () => {
 
     expect(result).toMatchSnapshot();
   });
+
+  it("add a nonce to the <style> tag", () => {
+    const style = styles.variants({
+      default: "display: block;",
+    });
+    const Component = () => <div className={style()} />;
+    const result = renderToStaticMarkup(
+      <Style html={renderToStaticMarkup(<Component />)} nonce="abc" />
+    );
+
+    expect(result).toMatchSnapshot();
+  });
 });
diff --git a/server/src/index.tsx b/server/src/index.tsx
@@ -11,18 +11,23 @@ import * as React from "react";
  * @param html - The HTML generated by `renderToStaticMarkup()` or `renderToString()`
  * @param styles - An instance of `styles()`. Defaults to the default styles instance
  *   in `@dash-ui/styles`.
+ * @param options
+ * @param options.nonce
  */
 export function toComponent(
   html: string,
-  styles: Styles<any, any> = defaultStyles
+  styles: Styles<any, any> = defaultStyles,
+  options: {
+    nonce?: string;
+  } = {}
 ): React.ReactElement {
   const { dash } = styles;
   const { names, css } = createStylesFromString(html, styles);
 
   return (
     <style
       key={dash.key}
-      nonce={dash.sheet.nonce ? dash.sheet.nonce : void 0}
+      nonce={options.nonce ?? (dash.sheet.nonce ? dash.sheet.nonce : void 0)}
       data-dash={names.join(" ")}
       data-cache={dash.key}
       dangerouslySetInnerHTML={{ __html: css }}
@@ -36,6 +41,7 @@ export function toComponent(
  * @param root0
  * @param root0.html
  * @param root0.styles
+ * @param root0.nonce
  * @example
  * // _document.js
  * import React from 'react'
@@ -57,8 +63,8 @@ export function toComponent(
  *   }
  * }
  */
-export function Style({ html, styles }: StyleProps) {
-  return toComponent(html, styles);
+export function Style({ html, styles, nonce }: StyleProps) {
+  return toComponent(html, styles, { nonce });
 }
 
 export interface StyleProps {
@@ -70,6 +76,10 @@ export interface StyleProps {
    * An instance of `styles()`. Defaults to the default styles instance in `@dash-ui/styles`.
    */
   styles?: Styles<any, any>;
+  /**
+   * A nonce for the `<style>` tag.
+   */
+  nonce?: Styles<any, any>["dash"]["sheet"]["nonce"];
 }
 
 /**