From 0e7c4165567fb35782fe0b5b7dd82fb36d6659d5 Mon Sep 17 00:00:00 2001
From: Justin Goping <jgoping@google.com>
Date: Mon, 28 Feb 2022 20:14:16 +0000
Subject: [PATCH] Remove dangerouslySetInnerHTML usage in style elements

---
 .../src/internal/styles/Base.tsx              | 140 ++--
 .../src/internal/styles/ComponentStyles.tsx   |  32 +-
 .../src/internal/styles/CssReset.tsx          | 712 +++++++++---------
 3 files changed, 439 insertions(+), 445 deletions(-)

diff --git a/packages/react-dev-overlay/src/internal/styles/Base.tsx b/packages/react-dev-overlay/src/internal/styles/Base.tsx
index fcbc1bc56a897..0cc24069348fa 100644
--- a/packages/react-dev-overlay/src/internal/styles/Base.tsx
+++ b/packages/react-dev-overlay/src/internal/styles/Base.tsx
@@ -3,84 +3,82 @@ import { noop as css } from '../helpers/noop-template'
 
 export function Base() {
   return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: css`
-          :host {
-            --size-gap-half: 4px;
-            --size-gap: 8px;
-            --size-gap-double: 16px;
-            --size-gap-quad: 32px;
+    <style>
+      {css`
+        :host {
+          --size-gap-half: 4px;
+          --size-gap: 8px;
+          --size-gap-double: 16px;
+          --size-gap-quad: 32px;
 
-            --size-font-small: 14px;
-            --size-font: 16px;
-            --size-font-big: 20px;
-            --size-font-bigger: 24px;
+          --size-font-small: 14px;
+          --size-font: 16px;
+          --size-font-big: 20px;
+          --size-font-bigger: 24px;
 
-            --color-accents-1: #808080;
-            --color-accents-2: #222222;
-            --color-accents-3: #404040;
+          --color-accents-1: #808080;
+          --color-accents-2: #222222;
+          --color-accents-3: #404040;
 
-            --font-stack-monospace: 'SFMono-Regular', Consolas,
-              'Liberation Mono', Menlo, Courier, monospace;
+          --font-stack-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono',
+            Menlo, Courier, monospace;
 
-            --color-ansi-selection: rgba(95, 126, 151, 0.48);
-            --color-ansi-bg: #111111;
-            --color-ansi-fg: #cccccc;
+          --color-ansi-selection: rgba(95, 126, 151, 0.48);
+          --color-ansi-bg: #111111;
+          --color-ansi-fg: #cccccc;
 
-            --color-ansi-white: #777777;
-            --color-ansi-black: #141414;
-            --color-ansi-blue: #00aaff;
-            --color-ansi-cyan: #88ddff;
-            --color-ansi-green: #98ec65;
-            --color-ansi-magenta: #aa88ff;
-            --color-ansi-red: #ff5555;
-            --color-ansi-yellow: #ffcc33;
-            --color-ansi-bright-white: #ffffff;
-            --color-ansi-bright-black: #777777;
-            --color-ansi-bright-blue: #33bbff;
-            --color-ansi-bright-cyan: #bbecff;
-            --color-ansi-bright-green: #b6f292;
-            --color-ansi-bright-magenta: #cebbff;
-            --color-ansi-bright-red: #ff8888;
-            --color-ansi-bright-yellow: #ffd966;
-          }
+          --color-ansi-white: #777777;
+          --color-ansi-black: #141414;
+          --color-ansi-blue: #00aaff;
+          --color-ansi-cyan: #88ddff;
+          --color-ansi-green: #98ec65;
+          --color-ansi-magenta: #aa88ff;
+          --color-ansi-red: #ff5555;
+          --color-ansi-yellow: #ffcc33;
+          --color-ansi-bright-white: #ffffff;
+          --color-ansi-bright-black: #777777;
+          --color-ansi-bright-blue: #33bbff;
+          --color-ansi-bright-cyan: #bbecff;
+          --color-ansi-bright-green: #b6f292;
+          --color-ansi-bright-magenta: #cebbff;
+          --color-ansi-bright-red: #ff8888;
+          --color-ansi-bright-yellow: #ffd966;
+        }
 
-          .mono {
-            font-family: var(--font-stack-monospace);
-          }
+        .mono {
+          font-family: var(--font-stack-monospace);
+        }
 
-          h1,
-          h2,
-          h3,
-          h4,
-          h5,
-          h6 {
-            margin-bottom: var(--size-gap);
-            font-weight: 500;
-            line-height: 1.5;
-          }
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          margin-bottom: var(--size-gap);
+          font-weight: 500;
+          line-height: 1.5;
+        }
 
-          h1 {
-            font-size: 40px;
-          }
-          h2 {
-            font-size: 32px;
-          }
-          h3 {
-            font-size: 28px;
-          }
-          h4 {
-            font-size: 24px;
-          }
-          h5 {
-            font-size: 20px;
-          }
-          h6 {
-            font-size: 16px;
-          }
-        `,
-      }}
-    />
+        h1 {
+          font-size: 40px;
+        }
+        h2 {
+          font-size: 32px;
+        }
+        h3 {
+          font-size: 28px;
+        }
+        h4 {
+          font-size: 24px;
+        }
+        h5 {
+          font-size: 20px;
+        }
+        h6 {
+          font-size: 16px;
+        }
+      `}
+    </style>
   )
 }
diff --git a/packages/react-dev-overlay/src/internal/styles/ComponentStyles.tsx b/packages/react-dev-overlay/src/internal/styles/ComponentStyles.tsx
index 96455d55b4a20..9aa2244da7fae 100644
--- a/packages/react-dev-overlay/src/internal/styles/ComponentStyles.tsx
+++ b/packages/react-dev-overlay/src/internal/styles/ComponentStyles.tsx
@@ -14,22 +14,20 @@ import { noop as css } from '../helpers/noop-template'
 
 export function ComponentStyles() {
   return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: css`
-          ${overlay}
-          ${toast}
-          ${dialog}
-          ${leftRightDialogHeader}
-          ${codeFrame}
-          ${terminal}
-
-          ${buildErrorStyles}
-          ${containerErrorStyles}
-          ${containerRuntimeErrorStyles}
-          ${fullRefreshWarningStyles}
-        `,
-      }}
-    />
+    <style>
+      {css`
+        ${overlay}
+        ${toast}
+        ${dialog}
+        ${leftRightDialogHeader}
+        ${codeFrame}
+        ${terminal}
+        
+        ${buildErrorStyles}
+        ${containerErrorStyles}
+        ${containerRuntimeErrorStyles}
+        ${fullRefreshWarningStyles}
+      `}
+    </style>
   )
 }
diff --git a/packages/react-dev-overlay/src/internal/styles/CssReset.tsx b/packages/react-dev-overlay/src/internal/styles/CssReset.tsx
index e38026824ec9d..b2065abd9d964 100644
--- a/packages/react-dev-overlay/src/internal/styles/CssReset.tsx
+++ b/packages/react-dev-overlay/src/internal/styles/CssReset.tsx
@@ -3,362 +3,360 @@ import { noop as css } from '../helpers/noop-template'
 
 export function CssReset() {
   return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: css`
-          :host {
-            all: initial;
-
-            /* the direction property is not reset by 'all' */
-            direction: ltr;
-          }
-
-          /*!
-           * Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)
-           * Copyright 2011-2019 The Bootstrap Authors
-           * Copyright 2011-2019 Twitter, Inc.
-           * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
-           * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
-           */
-          *,
-          *::before,
-          *::after {
-            box-sizing: border-box;
-          }
-
-          :host {
-            font-family: sans-serif;
-            line-height: 1.15;
-            -webkit-text-size-adjust: 100%;
-            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-          }
-
-          article,
-          aside,
-          figcaption,
-          figure,
-          footer,
-          header,
-          hgroup,
-          main,
-          nav,
-          section {
-            display: block;
-          }
-
-          :host {
-            margin: 0;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-              'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-              'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-              'Noto Color Emoji';
-            font-size: 16px;
-            font-weight: 400;
-            line-height: 1.5;
-            color: #212529;
-            text-align: left;
-            background-color: #fff;
-          }
-
-          [tabindex='-1']:focus:not(:focus-visible) {
-            outline: 0 !important;
-          }
-
-          hr {
-            box-sizing: content-box;
-            height: 0;
-            overflow: visible;
-          }
-
-          h1,
-          h2,
-          h3,
-          h4,
-          h5,
-          h6 {
-            margin-top: 0;
-            margin-bottom: 8px;
-          }
-
-          p {
-            margin-top: 0;
-            margin-bottom: 16px;
-          }
-
-          abbr[title],
-          abbr[data-original-title] {
-            text-decoration: underline;
-            -webkit-text-decoration: underline dotted;
-            text-decoration: underline dotted;
-            cursor: help;
-            border-bottom: 0;
-            -webkit-text-decoration-skip-ink: none;
-            text-decoration-skip-ink: none;
-          }
-
-          address {
-            margin-bottom: 16px;
-            font-style: normal;
-            line-height: inherit;
-          }
-
-          ol,
-          ul,
-          dl {
-            margin-top: 0;
-            margin-bottom: 16px;
-          }
-
-          ol ol,
-          ul ul,
-          ol ul,
-          ul ol {
-            margin-bottom: 0;
-          }
-
-          dt {
-            font-weight: 700;
-          }
-
-          dd {
-            margin-bottom: 8px;
-            margin-left: 0;
-          }
-
-          blockquote {
-            margin: 0 0 16px;
-          }
-
-          b,
-          strong {
-            font-weight: bolder;
-          }
-
-          small {
-            font-size: 80%;
-          }
-
-          sub,
-          sup {
-            position: relative;
-            font-size: 75%;
-            line-height: 0;
-            vertical-align: baseline;
-          }
-
-          sub {
-            bottom: -0.25em;
-          }
-
-          sup {
-            top: -0.5em;
-          }
-
-          a {
-            color: #007bff;
-            text-decoration: none;
-            background-color: transparent;
-          }
-
-          a:hover {
-            color: #0056b3;
-            text-decoration: underline;
-          }
-
-          a:not([href]) {
-            color: inherit;
-            text-decoration: none;
-          }
-
-          a:not([href]):hover {
-            color: inherit;
-            text-decoration: none;
-          }
-
-          pre,
-          code,
-          kbd,
-          samp {
-            font-family: SFMono-Regular, Menlo, Monaco, Consolas,
-              'Liberation Mono', 'Courier New', monospace;
-            font-size: 1em;
-          }
-
-          pre {
-            margin-top: 0;
-            margin-bottom: 16px;
-            overflow: auto;
-          }
-
-          figure {
-            margin: 0 0 16px;
-          }
-
-          img {
-            vertical-align: middle;
-            border-style: none;
-          }
-
-          svg {
-            overflow: hidden;
-            vertical-align: middle;
-          }
-
-          table {
-            border-collapse: collapse;
-          }
-
-          caption {
-            padding-top: 12px;
-            padding-bottom: 12px;
-            color: #6c757d;
-            text-align: left;
-            caption-side: bottom;
-          }
-
-          th {
-            text-align: inherit;
-          }
-
-          label {
-            display: inline-block;
-            margin-bottom: 8px;
-          }
-
-          button {
-            border-radius: 0;
-          }
-
-          button:focus {
-            outline: 1px dotted;
-            outline: 5px auto -webkit-focus-ring-color;
-          }
-
-          input,
-          button,
-          select,
-          optgroup,
-          textarea {
-            margin: 0;
-            font-family: inherit;
-            font-size: inherit;
-            line-height: inherit;
-          }
-
-          button,
-          input {
-            overflow: visible;
-          }
-
-          button,
-          select {
-            text-transform: none;
-          }
-
-          select {
-            word-wrap: normal;
-          }
-
-          button,
-          [type='button'],
-          [type='reset'],
-          [type='submit'] {
-            -webkit-appearance: button;
-          }
-
-          button:not(:disabled),
-          [type='button']:not(:disabled),
-          [type='reset']:not(:disabled),
-          [type='submit']:not(:disabled) {
-            cursor: pointer;
-          }
-
-          button::-moz-focus-inner,
-          [type='button']::-moz-focus-inner,
-          [type='reset']::-moz-focus-inner,
-          [type='submit']::-moz-focus-inner {
-            padding: 0;
-            border-style: none;
-          }
-
-          input[type='radio'],
-          input[type='checkbox'] {
-            box-sizing: border-box;
-            padding: 0;
-          }
-
-          input[type='date'],
-          input[type='time'],
-          input[type='datetime-local'],
-          input[type='month'] {
-            -webkit-appearance: listbox;
-          }
-
-          textarea {
-            overflow: auto;
-            resize: vertical;
-          }
-
-          fieldset {
-            min-width: 0;
-            padding: 0;
-            margin: 0;
-            border: 0;
-          }
-
-          legend {
-            display: block;
-            width: 100%;
-            max-width: 100%;
-            padding: 0;
-            margin-bottom: 8px;
-            font-size: 24px;
-            line-height: inherit;
-            color: inherit;
-            white-space: normal;
-          }
-
-          progress {
-            vertical-align: baseline;
-          }
-
-          [type='number']::-webkit-inner-spin-button,
-          [type='number']::-webkit-outer-spin-button {
-            height: auto;
-          }
-
-          [type='search'] {
-            outline-offset: -2px;
-            -webkit-appearance: none;
-          }
-
-          [type='search']::-webkit-search-decoration {
-            -webkit-appearance: none;
-          }
-
-          ::-webkit-file-upload-button {
-            font: inherit;
-            -webkit-appearance: button;
-          }
-
-          output {
-            display: inline-block;
-          }
-
-          summary {
-            display: list-item;
-            cursor: pointer;
-          }
-
-          template {
-            display: none;
-          }
-
-          [hidden] {
-            display: none !important;
-          }
-        `,
-      }}
-    />
+    <style>
+      {css`
+        :host {
+          all: initial;
+
+          /* the direction property is not reset by 'all' */
+          direction: ltr;
+        }
+
+        /*!
+         * Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)
+         * Copyright 2011-2019 The Bootstrap Authors
+         * Copyright 2011-2019 Twitter, Inc.
+         * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+         * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+         */
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        :host {
+          font-family: sans-serif;
+          line-height: 1.15;
+          -webkit-text-size-adjust: 100%;
+          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+        }
+
+        article,
+        aside,
+        figcaption,
+        figure,
+        footer,
+        header,
+        hgroup,
+        main,
+        nav,
+        section {
+          display: block;
+        }
+
+        :host {
+          margin: 0;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+            'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+            'Noto Color Emoji';
+          font-size: 16px;
+          font-weight: 400;
+          line-height: 1.5;
+          color: #212529;
+          text-align: left;
+          background-color: #fff;
+        }
+
+        [tabindex='-1']:focus:not(:focus-visible) {
+          outline: 0 !important;
+        }
+
+        hr {
+          box-sizing: content-box;
+          height: 0;
+          overflow: visible;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          margin-top: 0;
+          margin-bottom: 8px;
+        }
+
+        p {
+          margin-top: 0;
+          margin-bottom: 16px;
+        }
+
+        abbr[title],
+        abbr[data-original-title] {
+          text-decoration: underline;
+          -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+          cursor: help;
+          border-bottom: 0;
+          -webkit-text-decoration-skip-ink: none;
+          text-decoration-skip-ink: none;
+        }
+
+        address {
+          margin-bottom: 16px;
+          font-style: normal;
+          line-height: inherit;
+        }
+
+        ol,
+        ul,
+        dl {
+          margin-top: 0;
+          margin-bottom: 16px;
+        }
+
+        ol ol,
+        ul ul,
+        ol ul,
+        ul ol {
+          margin-bottom: 0;
+        }
+
+        dt {
+          font-weight: 700;
+        }
+
+        dd {
+          margin-bottom: 8px;
+          margin-left: 0;
+        }
+
+        blockquote {
+          margin: 0 0 16px;
+        }
+
+        b,
+        strong {
+          font-weight: bolder;
+        }
+
+        small {
+          font-size: 80%;
+        }
+
+        sub,
+        sup {
+          position: relative;
+          font-size: 75%;
+          line-height: 0;
+          vertical-align: baseline;
+        }
+
+        sub {
+          bottom: -0.25em;
+        }
+
+        sup {
+          top: -0.5em;
+        }
+
+        a {
+          color: #007bff;
+          text-decoration: none;
+          background-color: transparent;
+        }
+
+        a:hover {
+          color: #0056b3;
+          text-decoration: underline;
+        }
+
+        a:not([href]) {
+          color: inherit;
+          text-decoration: none;
+        }
+
+        a:not([href]):hover {
+          color: inherit;
+          text-decoration: none;
+        }
+
+        pre,
+        code,
+        kbd,
+        samp {
+          font-family: SFMono-Regular, Menlo, Monaco, Consolas,
+            'Liberation Mono', 'Courier New', monospace;
+          font-size: 1em;
+        }
+
+        pre {
+          margin-top: 0;
+          margin-bottom: 16px;
+          overflow: auto;
+        }
+
+        figure {
+          margin: 0 0 16px;
+        }
+
+        img {
+          vertical-align: middle;
+          border-style: none;
+        }
+
+        svg {
+          overflow: hidden;
+          vertical-align: middle;
+        }
+
+        table {
+          border-collapse: collapse;
+        }
+
+        caption {
+          padding-top: 12px;
+          padding-bottom: 12px;
+          color: #6c757d;
+          text-align: left;
+          caption-side: bottom;
+        }
+
+        th {
+          text-align: inherit;
+        }
+
+        label {
+          display: inline-block;
+          margin-bottom: 8px;
+        }
+
+        button {
+          border-radius: 0;
+        }
+
+        button:focus {
+          outline: 1px dotted;
+          outline: 5px auto -webkit-focus-ring-color;
+        }
+
+        input,
+        button,
+        select,
+        optgroup,
+        textarea {
+          margin: 0;
+          font-family: inherit;
+          font-size: inherit;
+          line-height: inherit;
+        }
+
+        button,
+        input {
+          overflow: visible;
+        }
+
+        button,
+        select {
+          text-transform: none;
+        }
+
+        select {
+          word-wrap: normal;
+        }
+
+        button,
+        [type='button'],
+        [type='reset'],
+        [type='submit'] {
+          -webkit-appearance: button;
+        }
+
+        button:not(:disabled),
+        [type='button']:not(:disabled),
+        [type='reset']:not(:disabled),
+        [type='submit']:not(:disabled) {
+          cursor: pointer;
+        }
+
+        button::-moz-focus-inner,
+        [type='button']::-moz-focus-inner,
+        [type='reset']::-moz-focus-inner,
+        [type='submit']::-moz-focus-inner {
+          padding: 0;
+          border-style: none;
+        }
+
+        input[type='radio'],
+        input[type='checkbox'] {
+          box-sizing: border-box;
+          padding: 0;
+        }
+
+        input[type='date'],
+        input[type='time'],
+        input[type='datetime-local'],
+        input[type='month'] {
+          -webkit-appearance: listbox;
+        }
+
+        textarea {
+          overflow: auto;
+          resize: vertical;
+        }
+
+        fieldset {
+          min-width: 0;
+          padding: 0;
+          margin: 0;
+          border: 0;
+        }
+
+        legend {
+          display: block;
+          width: 100%;
+          max-width: 100%;
+          padding: 0;
+          margin-bottom: 8px;
+          font-size: 24px;
+          line-height: inherit;
+          color: inherit;
+          white-space: normal;
+        }
+
+        progress {
+          vertical-align: baseline;
+        }
+
+        [type='number']::-webkit-inner-spin-button,
+        [type='number']::-webkit-outer-spin-button {
+          height: auto;
+        }
+
+        [type='search'] {
+          outline-offset: -2px;
+          -webkit-appearance: none;
+        }
+
+        [type='search']::-webkit-search-decoration {
+          -webkit-appearance: none;
+        }
+
+        ::-webkit-file-upload-button {
+          font: inherit;
+          -webkit-appearance: button;
+        }
+
+        output {
+          display: inline-block;
+        }
+
+        summary {
+          display: list-item;
+          cursor: pointer;
+        }
+
+        template {
+          display: none;
+        }
+
+        [hidden] {
+          display: none !important;
+        }
+      `}
+    </style>
   )
 }