From e043dc2ac3c55a469b87422105973fa0fd8dab70 Mon Sep 17 00:00:00 2001
From: Paul Mineev <paul@mineev.me>
Date: Sat, 25 Nov 2023 03:03:39 -0500
Subject: [PATCH] fix: break long words in code tag, combine all styles in one
 file, move styles to correct place

---
 .../app/components/comment-form/index.ts      |   2 -
 .../app/components/comment/raw-content.css    | 243 ++++++++++++++++++
 .../remark42/app/components/comment/styles.ts |   2 +-
 .../_theme/_dark/raw-content_theme_dark.css   |  24 --
 .../_theme/_light/raw-content_theme_light.css |  24 --
 .../components/raw-content/code-highlight.css | 106 --------
 .../app/components/raw-content/index.ts       |   5 -
 .../components/raw-content/raw-content.css    | 129 ----------
 8 files changed, 244 insertions(+), 291 deletions(-)
 create mode 100644 frontend/apps/remark42/app/components/comment/raw-content.css
 delete mode 100644 frontend/apps/remark42/app/components/raw-content/_theme/_dark/raw-content_theme_dark.css
 delete mode 100644 frontend/apps/remark42/app/components/raw-content/_theme/_light/raw-content_theme_light.css
 delete mode 100644 frontend/apps/remark42/app/components/raw-content/code-highlight.css
 delete mode 100644 frontend/apps/remark42/app/components/raw-content/index.ts
 delete mode 100644 frontend/apps/remark42/app/components/raw-content/raw-content.css

diff --git a/frontend/apps/remark42/app/components/comment-form/index.ts b/frontend/apps/remark42/app/components/comment-form/index.ts
index 4791e61d..b4b2906a 100644
--- a/frontend/apps/remark42/app/components/comment-form/index.ts
+++ b/frontend/apps/remark42/app/components/comment-form/index.ts
@@ -1,5 +1,3 @@
-import 'components/raw-content';
-
 import './comment-form.css';
 
 import './__actions/comment-form__actions.css';
diff --git a/frontend/apps/remark42/app/components/comment/raw-content.css b/frontend/apps/remark42/app/components/comment/raw-content.css
new file mode 100644
index 00000000..904358d5
--- /dev/null
+++ b/frontend/apps/remark42/app/components/comment/raw-content.css
@@ -0,0 +1,243 @@
+.raw-content {
+  word-wrap: break-word;
+
+  & > *:first-child {
+    margin-top: 0;
+  }
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
+
+  & a {
+    color: var(--color9);
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  & img {
+    max-width: 100%;
+    max-height: 300px;
+  }
+
+  & blockquote {
+    padding: 12px 8px 12px 16px;
+    border-left: 2px solid;
+    border-left-color: var(--color45);
+  }
+
+  & p,
+  & blockquote {
+    margin: 0.5rem 0;
+  }
+
+  & table {
+    display: block;
+    overflow: auto;
+    border-spacing: 0;
+    border-collapse: collapse;
+
+    & th {
+      text-align: left;
+      font-weight: 600;
+    }
+
+    & th,
+    & td {
+      padding: 6px 13px;
+      border: 1px solid var(--color16);
+    }
+
+    & tr {
+      border-top: 1px solid var(--color43);
+      background-color: var(--color6);
+
+      &:nth-child(2n) {
+        background-color: var(--color21);
+      }
+    }
+  }
+
+  & sup,
+  & sub {
+    & sup,
+    & sub {
+      vertical-align: middle; /* to prevent some visual cheats */
+    }
+  }
+
+  & hr {
+    border-width: 0 0 1px 0;
+    border-color: var(--color21);
+  }
+
+  & code {
+    background-color: var(--chroma-bg);
+    border-radius: 3px;
+    color: var(--chroma-base);
+    line-height: 1.45;
+    margin: 0;
+    overflow: visible;
+    padding: 0.05em 0.3em;
+    font-size: 85%;
+  }
+
+  & pre {
+    padding: 0.75em 1em;
+    overflow-x: auto;
+    overflow-y: hidden;
+    tab-size: 2;
+    font-size: 85%;
+    line-height: 1.45;
+    border-radius: 3px;
+    background-color: var(--chroma-bg);
+  }
+
+  /* Syntax Highlight Colors */
+  & pre > code {
+    font-size: 100%;
+    padding: 0;
+    color: var(--chroma-base);
+    background-color: transparent;
+
+    /* Comments */
+    & .c1,
+    & .cm,
+    & .c,
+    & .ch,
+    & .cp,
+    & .cpf,
+    & .cs {
+      color: var(--chroma-c);
+    }
+
+    & .ge {
+      font-style: italic;
+    }
+
+    & .gr,
+    & .gs {
+      font-weight: 700;
+    }
+
+    & .kd {
+      color: var(--chroma-07);
+    }
+
+    & .kn,
+    & .k,
+    & .kc,
+    & .kp,
+    & .kr,
+    & .kt,
+    & .ow {
+      color: var(--chroma-01);
+    }
+
+    & .nb,
+    & .nc {
+      color: var(--chroma-02);
+    }
+
+    & .bp,
+    & .n,
+    & .na,
+    & .fm,
+    & .nd,
+    & .ne,
+    & .nf,
+    & .ni,
+    & .nl,
+    & .nn,
+    & .no,
+    & .nt,
+    & .nv,
+    & .nx,
+    & .py,
+    & .vc,
+    & .vg,
+    & .vi,
+    & .vm {
+      color: var(--chroma-03);
+    }
+
+    & .dl,
+    & .il,
+    & .l,
+    & .ld,
+    & .m,
+    & .mb,
+    & .mf,
+    & .mh,
+    & .mi,
+    & .mo,
+    & .s,
+    & .s1,
+    & .s2,
+    & .sa,
+    & .sb,
+    & .sc,
+    & .sd,
+    & .se,
+    & .sh,
+    & .si,
+    & .sr,
+    & .ss,
+    & .sx {
+      color: var(--chroma-04);
+    }
+
+    & .g,
+    & .gd,
+    & .ge,
+    & .gh,
+    & .gi,
+    & .gl,
+    & .go,
+    & .gp,
+    & .gr,
+    & .gs,
+    & .gt,
+    & .gu {
+      color: var(--chroma-06);
+    }
+  }
+}
+
+.dark .raw-content {
+  /* Syntax Highlight Colors */
+  --chroma-bg: rgba(255, 255, 255, 0.05);
+  --chroma-base: #a0b2b2;
+  --chroma-c: #586e75;
+  --chroma-01: #9ef203;
+  --chroma-03: rgb(80, 180, 252);
+  --chroma-05: #a7ec07;
+  --chroma-06: #ed403d;
+  --chroma-07: #a1e6fb;
+
+  & blockquote {
+    border-left-color: var(--color44);
+  }
+
+  & table {
+    & th,
+    & td {
+      border: 1px solid var(--color24);
+    }
+
+    & tr {
+      background-color: var(--color8);
+
+      &:nth-child(2n) {
+        background-color: var(--color23);
+      }
+    }
+  }
+
+  & hr {
+    border-color: var(--color22);
+  }
+}
diff --git a/frontend/apps/remark42/app/components/comment/styles.ts b/frontend/apps/remark42/app/components/comment/styles.ts
index 62aa314d..df4eba63 100644
--- a/frontend/apps/remark42/app/components/comment/styles.ts
+++ b/frontend/apps/remark42/app/components/comment/styles.ts
@@ -1,4 +1,4 @@
-import 'components/raw-content';
+import './raw-content.css';
 
 import './comment.css';
 import './__body/comment__body.css';
diff --git a/frontend/apps/remark42/app/components/raw-content/_theme/_dark/raw-content_theme_dark.css b/frontend/apps/remark42/app/components/raw-content/_theme/_dark/raw-content_theme_dark.css
deleted file mode 100644
index 330cb61b..00000000
--- a/frontend/apps/remark42/app/components/raw-content/_theme/_dark/raw-content_theme_dark.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.raw-content_theme_dark {
-  & blockquote {
-    border-left-color: var(--color44);
-  }
-
-  & table {
-    & th,
-    & td {
-      border: 1px solid var(--color24);
-    }
-
-    & tr {
-      background-color: var(--color8);
-
-      &:nth-child(2n) {
-        background-color: var(--color23);
-      }
-    }
-  }
-
-  & hr {
-    border-color: var(--color22);
-  }
-}
diff --git a/frontend/apps/remark42/app/components/raw-content/_theme/_light/raw-content_theme_light.css b/frontend/apps/remark42/app/components/raw-content/_theme/_light/raw-content_theme_light.css
deleted file mode 100644
index 6a2ed845..00000000
--- a/frontend/apps/remark42/app/components/raw-content/_theme/_light/raw-content_theme_light.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.raw-content_theme_light {
-  & blockquote {
-    border-left-color: var(--color45);
-  }
-
-  & table {
-    & th,
-    & td {
-      border: 1px solid var(--color16);
-    }
-
-    & tr {
-      background-color: var(--color6);
-
-      &:nth-child(2n) {
-        background-color: var(--color21);
-      }
-    }
-  }
-
-  & hr {
-    border-color: var(--color21);
-  }
-}
diff --git a/frontend/apps/remark42/app/components/raw-content/code-highlight.css b/frontend/apps/remark42/app/components/raw-content/code-highlight.css
deleted file mode 100644
index 72163827..00000000
--- a/frontend/apps/remark42/app/components/raw-content/code-highlight.css
+++ /dev/null
@@ -1,106 +0,0 @@
-pre {
-  color: var(--chroma-base);
-  background-color: var(--chroma-bg);
-
-  /* Comments */
-  & .c1,
-  & .cm,
-  & .c,
-  & .ch,
-  & .cp,
-  & .cpf,
-  & .cs {
-    color: var(--chroma-c);
-  }
-
-  & .ge {
-    font-style: italic;
-  }
-
-  & .gr,
-  & .gs {
-    font-weight: 700;
-  }
-
-  & .kd {
-    color: var(--chroma-07);
-  }
-
-  & .kn,
-  & .k,
-  & .kc,
-  & .kp,
-  & .kr,
-  & .kt,
-  & .ow {
-    color: var(--chroma-01);
-  }
-
-  & .nb,
-  & .nc {
-    color: var(--chroma-02);
-  }
-
-  & .bp,
-  & .n,
-  & .na,
-  & .fm,
-  & .nd,
-  & .ne,
-  & .nf,
-  & .ni,
-  & .nl,
-  & .nn,
-  & .no,
-  & .nt,
-  & .nv,
-  & .nx,
-  & .py,
-  & .vc,
-  & .vg,
-  & .vi,
-  & .vm {
-    color: var(--chroma-03);
-  }
-
-  & .dl,
-  & .il,
-  & .l,
-  & .ld,
-  & .m,
-  & .mb,
-  & .mf,
-  & .mh,
-  & .mi,
-  & .mo,
-  & .s,
-  & .s1,
-  & .s2,
-  & .sa,
-  & .sb,
-  & .sc,
-  & .sd,
-  & .se,
-  & .sh,
-  & .si,
-  & .sr,
-  & .ss,
-  & .sx {
-    color: var(--chroma-04);
-  }
-
-  & .g,
-  & .gd,
-  & .ge,
-  & .gh,
-  & .gi,
-  & .gl,
-  & .go,
-  & .gp,
-  & .gr,
-  & .gs,
-  & .gt,
-  & .gu {
-    color: var(--chroma-06);
-  }
-}
diff --git a/frontend/apps/remark42/app/components/raw-content/index.ts b/frontend/apps/remark42/app/components/raw-content/index.ts
deleted file mode 100644
index fd337e70..00000000
--- a/frontend/apps/remark42/app/components/raw-content/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import './raw-content.css';
-import './code-highlight.css';
-
-import './_theme/_dark/raw-content_theme_dark.css';
-import './_theme/_light/raw-content_theme_light.css';
diff --git a/frontend/apps/remark42/app/components/raw-content/raw-content.css b/frontend/apps/remark42/app/components/raw-content/raw-content.css
deleted file mode 100644
index a8158566..00000000
--- a/frontend/apps/remark42/app/components/raw-content/raw-content.css
+++ /dev/null
@@ -1,129 +0,0 @@
-.raw-content {
-  & .root_theme_dark {
-    --chroma-bg: rgba(255, 255, 255, 0.1);
-    --chroma-base: #93a1a1;
-    --chroma-c: #586e75;
-    --chroma-01: #8ad200;
-    --chroma-03: #3af;
-    --chroma-05: #8eca03;
-    --chroma-06: #dc322f;
-    --chroma-07: #95d5e8;
-  }
-
-  word-break: break-word;
-
-  & p,
-  & blockquote {
-    margin: 0.5rem 0;
-
-    &:first-child {
-      margin-top: 0;
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  & a {
-    color: var(--color9);
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  & img {
-    max-width: 100%;
-    max-height: 300px;
-  }
-
-  & h1,
-  & h2,
-  & h3,
-  & h4,
-  & h5,
-  & h6 {
-    &:first-child {
-      margin-top: 0;
-    }
-  }
-  /* stylelint-disable-next-line no-descending-specificity */
-  & blockquote {
-    padding: 12px 8px 12px 16px;
-    border-left: 2px solid;
-  }
-
-  & table {
-    display: block;
-    overflow: auto;
-    border-spacing: 0;
-    border-collapse: collapse;
-
-    & th {
-      text-align: left;
-      font-weight: 600;
-    }
-
-    & th,
-    & td {
-      padding: 6px 13px;
-    }
-
-    & tr {
-      border-top: 1px solid var(--color43);
-    }
-  }
-
-  & code {
-    background-color: var(--chroma-bg);
-    border-radius: 3px;
-    color: var(--chroma-base);
-    display: inline-block;
-    font-size: 85%;
-    line-height: 1.45;
-    margin: 0;
-    overflow: visible;
-    padding: 0 0.4em;
-    white-space: pre;
-    word-break: normal;
-    word-wrap: normal;
-  }
-
-  & pre {
-    padding: 12px 16px 12px 18px;
-    overflow-x: auto;
-    overflow-y: hidden;
-    tab-size: 2;
-    word-wrap: normal;
-    font-size: 85%;
-    line-height: 1.45;
-    border-radius: 3px;
-
-    &:first-child {
-      margin-top: 0;
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    & > code {
-      background-color: transparent;
-      padding: 0;
-    }
-  }
-
-  & sup,
-  & sub {
-    & sup,
-    & sub {
-      vertical-align: middle; /* to prevent some visual cheats */
-    }
-  }
-
-  & hr {
-    border-width: 0 0 1px 0;
-  }
-}