Define shared theme variables once

[rhysd]

These variables are defined in both light mode and dark mode. So they can be defined unconditionally.

--fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
--base-text-weight-semibold: 600;
--base-text-weight-medium: 500;
--base-text-weight-normal: 400;
--base-size-16: 1rem;
--base-size-8: 0.5rem;
--base-size-4: 0.25rem;

This PR defines these variables once instead of defining them in respective modes so that we can reduce the size of output.

Here is the diff of the output before/after applying this PR:

--- test.css    2024-06-15 09:53:59.169379660 +0900
+++ test2.css   2024-06-15 10:08:38.183798342 +0900
@@ -1,15 +1,18 @@
+.markdown-body {
+  --base-size-4: 0.25rem;
+  --base-size-8: 0.5rem;
+  --base-size-16: 1rem;
+  --base-text-weight-normal: 400;
+  --base-text-weight-medium: 500;
+  --base-text-weight-semibold: 600;
+  --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+}
+
 @media (prefers-color-scheme: dark) {
   .markdown-body,
   [data-theme="dark"] {
     /*dark*/
     color-scheme: dark;
-    --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
-    --base-text-weight-semibold: 600;
-    --base-text-weight-medium: 500;
-    --base-text-weight-normal: 400;
-    --base-size-16: 1rem;
-    --base-size-8: 0.5rem;
-    --base-size-4: 0.25rem;
     --focus-outlineColor: #1f6feb;
     --fgColor-default: #e6edf3;
     --fgColor-muted: #8d96a0;
@@ -68,13 +71,6 @@
   [data-theme="light"] {
     /*light*/
     color-scheme: light;
-    --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
-    --base-text-weight-semibold: 600;
-    --base-text-weight-medium: 500;
-    --base-text-weight-normal: 400;
-    --base-size-16: 1rem;
-    --base-size-8: 0.5rem;
-    --base-size-4: 0.25rem;
     --focus-outlineColor: #0969da;
     --fgColor-default: #1f2328;
     --fgColor-muted: #636c76;

[hyrious]

Would you have a test on one-theme-only styles? Because applyStyles() need to read all variables (including the shared ones) to replace them. You can follow these steps:

node test.js
wget https://cdn.jsdelivr.net/npm/github-markdown-css/github-markdown-dark.css
git diff --no-index github-markdown-dark.css dist/dark.css

[rhysd]

Here is the diff from the git diff command:

diff --git a/github-markdown-dark.css b/dist/dark.css
index d1a68e7..d2f0735 100644
--- a/github-markdown-dark.css
+++ b/dist/dark.css
@@ -1,3 +1,13 @@
+.markdown-body {
+  --base-size-4: 0.25rem;
+  --base-size-8: 0.5rem;
+  --base-size-16: 1rem;
+  --base-text-weight-normal: 400;
+  --base-text-weight-medium: 500;
+  --base-text-weight-semibold: 600;
+  --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+}
+
 /*dark*/

 .markdown-body {
@@ -63,7 +73,7 @@

 .markdown-body b,
 .markdown-body strong {
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
 }

 .markdown-body dfn {
@@ -72,7 +82,7 @@

 .markdown-body h1 {
   margin: .67em 0;
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
   padding-bottom: .3em;
   font-size: 2em;
   border-bottom: 1px solid #30363db3;
@@ -257,7 +267,7 @@
 .markdown-body kbd {
   display: inline-block;
   padding: 3px 5px;
-  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  font: 11px var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
   line-height: 10px;
   color: #e6edf3;
   vertical-align: middle;
@@ -276,34 +286,34 @@
 .markdown-body h6 {
   margin-top: 24px;
   margin-bottom: 16px;
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
   line-height: 1.25;
 }

 .markdown-body h2 {
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
   padding-bottom: .3em;
   font-size: 1.5em;
   border-bottom: 1px solid #30363db3;
 }

 .markdown-body h3 {
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
   font-size: 1.25em;
 }

 .markdown-body h4 {
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
   font-size: 1em;
 }

 .markdown-body h5 {
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
   font-size: .875em;
 }

 .markdown-body h6 {
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
   font-size: .85em;
   color: #8d96a0;
 }
@@ -346,14 +356,14 @@
 .markdown-body tt,
 .markdown-body code,
 .markdown-body samp {
-  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
   font-size: 12px;
 }

 .markdown-body pre {
   margin-top: 0;
   margin-bottom: 0;
-  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
   font-size: 12px;
   word-wrap: normal;
 }
@@ -373,7 +383,7 @@
 }

 .markdown-body .mr-2 {
-  margin-right: 0.5rem !important;
+  margin-right: var(--base-size-8, 8px) !important;
 }

 .markdown-body::before {
@@ -559,7 +569,7 @@
   margin-top: 16px;
   font-size: 1em;
   font-style: italic;
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
 }

 .markdown-body dl dd {
@@ -568,7 +578,7 @@
 }

 .markdown-body table th {
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
 }

 .markdown-body table th,
@@ -787,7 +797,7 @@
 }

 .markdown-body .csv-data th {
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
   background: #161b22;
   border-top: 0;
 }
@@ -980,7 +990,7 @@
   font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
   font-size: 1em;
   font-style: normal !important;
-  font-weight: 400;
+  font-weight: var(--base-text-weight-normal, 400);
   line-height: 1;
   vertical-align: -0.075em;
 }
@@ -995,7 +1005,7 @@
 }

 .markdown-body .task-list-item label {
-  font-weight: 400;
+  font-weight: var(--base-text-weight-normal, 400);
 }

 .markdown-body .task-list-item.enabled label {
@@ -1003,7 +1013,7 @@
 }

 .markdown-body .task-list-item+.task-list-item {
-  margin-top: 0.25rem;
+  margin-top: var(--base-size-4);
 }

 .markdown-body .task-list-item .handle {
@@ -1037,8 +1047,8 @@
 }

 .markdown-body .markdown-alert {
-  padding: 0.5rem 1rem;
-  margin-bottom: 1rem;
+  padding: var(--base-size-8) var(--base-size-16);
+  margin-bottom: var(--base-size-16);
   color: inherit;
   border-left: .25em solid #30363d;
 }
@@ -1053,7 +1063,7 @@

 .markdown-body .markdown-alert .markdown-alert-title {
   display: flex;
-  font-weight: 500;
+  font-weight: var(--base-text-weight-medium, 500);
   align-items: center;
   line-height: 1;
 }
@@ -1100,4 +1110,4 @@

 .markdown-body>*:first-child>.heading-element:first-child {
   margin-top: 0 !important;
-}
+}
\ No newline at end of file

[rhysd]

I see. The shared variables are not applied on generating the style sheet. I didn't consider it.

[rhysd]

e89dfb2 fixed the issue by applying the shared variables to single-theme styles. Now the diff is what I intended:

diff --git a/github-markdown-dark.css b/dist/dark.css
index d1a68e7..41c8f72 100644
--- a/github-markdown-dark.css
+++ b/dist/dark.css
@@ -1,3 +1,13 @@
+.markdown-body {
+  --base-size-4: 0.25rem;
+  --base-size-8: 0.5rem;
+  --base-size-16: 1rem;
+  --base-text-weight-normal: 400;
+  --base-text-weight-medium: 500;
+  --base-text-weight-semibold: 600;
+  --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+}
+
 /*dark*/

 .markdown-body {
@@ -1100,4 +1110,4 @@

 .markdown-body>*:first-child>.heading-element:first-child {
   margin-top: 0 !important;
-}
+}
\ No newline at end of file