Use PostCSS

[hyrious]

This PR replaces the CSS parser and printer from css to postcss since css wasn't updated for 4 years and GitHub is using many modern CSS features like @layer which css failed to parse.

PostCSS is actively maintained and is used in modern projects like Vite, so it should last for a long time.

Commit Details:

• At-rules (like @media) are dropped but with an exception that rules in @layer are treated as top-level rules. Because GitHub is refactoring some of its colors into layers, e.g.

  /* primer-[hash].css */
  @layer primer-css-base {
  a { color: var(--fgColor-accent, var(--color-accent-fg)) }
  }

  Obviously this treatment has a risk when GitHub is refactoring some low-priority styles into layers that appears later in the stylesheets (since we parse and process them in order). Not happend for now, though.

• Previously this package depended on got to fetch URLs. Now it uses the native global fetch() function, which was stabilized since Node.js 18.

• Output Diff

diff --git a/github-markdown.css b/dist/auto.css
index ebfca67..c8e69a8 100644
--- a/github-markdown.css
+++ b/dist/auto.css
@@ -2,48 +2,49 @@
   --base-size-4: 0.25rem;
   --base-size-8: 0.5rem;
   --base-size-16: 1rem;
+  --base-size-24: 1.5rem;
+  --base-size-40: 2.5rem;
   --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;
+  --fgColor-accent: Highlight;
 }
-
 @media (prefers-color-scheme: dark) {
-  .markdown-body,
-  [data-theme="dark"] {
-    /*dark*/
+  .markdown-body, [data-theme="dark"] {
+    /* dark */
     color-scheme: dark;
     --focus-outlineColor: #1f6feb;
-    --fgColor-default: #e6edf3;
-    --fgColor-muted: #8d96a0;
+    --fgColor-default: #f0f6fc;
+    --fgColor-muted: #9198a1;
     --fgColor-accent: #4493f8;
     --fgColor-success: #3fb950;
     --fgColor-attention: #d29922;
     --fgColor-danger: #f85149;
     --fgColor-done: #ab7df8;
     --bgColor-default: #0d1117;
-    --bgColor-muted: #161b22;
-    --bgColor-neutral-muted: #6e768166;
+    --bgColor-muted: #151b23;
+    --bgColor-neutral-muted: #656c7633;
     --bgColor-attention-muted: #bb800926;
-    --borderColor-default: #30363d;
-    --borderColor-muted: #30363db3;
-    --borderColor-neutral-muted: #6e768166;
+    --borderColor-default: #3d444d;
+    --borderColor-muted: #3d444db3;
+    --borderColor-neutral-muted: #3d444db3;
     --borderColor-accent-emphasis: #1f6feb;
     --borderColor-success-emphasis: #238636;
     --borderColor-attention-emphasis: #9e6a03;
     --borderColor-danger-emphasis: #da3633;
     --borderColor-done-emphasis: #8957e5;
-    --color-prettylights-syntax-comment: #8b949e;
+    --color-prettylights-syntax-comment: #9198a1;
     --color-prettylights-syntax-constant: #79c0ff;
     --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
     --color-prettylights-syntax-entity: #d2a8ff;
-    --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
+    --color-prettylights-syntax-storage-modifier-import: #f0f6fc;
     --color-prettylights-syntax-entity-tag: #7ee787;
     --color-prettylights-syntax-keyword: #ff7b72;
     --color-prettylights-syntax-string: #a5d6ff;
     --color-prettylights-syntax-variable: #ffa657;
     --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
-    --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
+    --color-prettylights-syntax-brackethighlighter-angle: #9198a1;
     --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
     --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
     --color-prettylights-syntax-carriage-return-text: #f0f6fc;
@@ -51,29 +52,27 @@
     --color-prettylights-syntax-string-regexp: #7ee787;
     --color-prettylights-syntax-markup-list: #f2cc60;
     --color-prettylights-syntax-markup-heading: #1f6feb;
-    --color-prettylights-syntax-markup-italic: #c9d1d9;
-    --color-prettylights-syntax-markup-bold: #c9d1d9;
+    --color-prettylights-syntax-markup-italic: #f0f6fc;
+    --color-prettylights-syntax-markup-bold: #f0f6fc;
     --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
     --color-prettylights-syntax-markup-deleted-bg: #67060c;
     --color-prettylights-syntax-markup-inserted-text: #aff5b4;
     --color-prettylights-syntax-markup-inserted-bg: #033a16;
     --color-prettylights-syntax-markup-changed-text: #ffdfb6;
     --color-prettylights-syntax-markup-changed-bg: #5a1e02;
-    --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
+    --color-prettylights-syntax-markup-ignored-text: #f0f6fc;
     --color-prettylights-syntax-markup-ignored-bg: #1158c7;
     --color-prettylights-syntax-meta-diff-range: #d2a8ff;
-    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
   }
 }
-
 @media (prefers-color-scheme: light) {
-  .markdown-body,
-  [data-theme="light"] {
-    /*light*/
+  .markdown-body, [data-theme="light"] {
+    /* light */
     color-scheme: light;
     --focus-outlineColor: #0969da;
     --fgColor-default: #1f2328;
-    --fgColor-muted: #636c76;
+    --fgColor-muted: #59636e;
     --fgColor-accent: #0969da;
     --fgColor-success: #1a7f37;
     --fgColor-attention: #9a6700;
@@ -81,27 +80,27 @@
     --fgColor-done: #8250df;
     --bgColor-default: #ffffff;
     --bgColor-muted: #f6f8fa;
-    --bgColor-neutral-muted: #afb8c133;
+    --bgColor-neutral-muted: #818b981f;
     --bgColor-attention-muted: #fff8c5;
-    --borderColor-default: #d0d7de;
-    --borderColor-muted: #d0d7deb3;
-    --borderColor-neutral-muted: #afb8c133;
+    --borderColor-default: #d1d9e0;
+    --borderColor-muted: #d1d9e0b3;
+    --borderColor-neutral-muted: #d1d9e0b3;
     --borderColor-accent-emphasis: #0969da;
     --borderColor-success-emphasis: #1a7f37;
-    --borderColor-attention-emphasis: #bf8700;
+    --borderColor-attention-emphasis: #9a6700;
     --borderColor-danger-emphasis: #cf222e;
     --borderColor-done-emphasis: #8250df;
-    --color-prettylights-syntax-comment: #57606a;
+    --color-prettylights-syntax-comment: #59636e;
     --color-prettylights-syntax-constant: #0550ae;
     --color-prettylights-syntax-constant-other-reference-link: #0a3069;
     --color-prettylights-syntax-entity: #6639ba;
-    --color-prettylights-syntax-storage-modifier-import: #24292f;
+    --color-prettylights-syntax-storage-modifier-import: #1f2328;
     --color-prettylights-syntax-entity-tag: #0550ae;
     --color-prettylights-syntax-keyword: #cf222e;
     --color-prettylights-syntax-string: #0a3069;
     --color-prettylights-syntax-variable: #953800;
     --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
-    --color-prettylights-syntax-brackethighlighter-angle: #57606a;
+    --color-prettylights-syntax-brackethighlighter-angle: #59636e;
     --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
     --color-prettylights-syntax-invalid-illegal-bg: #82071e;
     --color-prettylights-syntax-carriage-return-text: #f6f8fa;
@@ -109,18 +108,18 @@
     --color-prettylights-syntax-string-regexp: #116329;
     --color-prettylights-syntax-markup-list: #3b2300;
     --color-prettylights-syntax-markup-heading: #0550ae;
-    --color-prettylights-syntax-markup-italic: #24292f;
-    --color-prettylights-syntax-markup-bold: #24292f;
+    --color-prettylights-syntax-markup-italic: #1f2328;
+    --color-prettylights-syntax-markup-bold: #1f2328;
     --color-prettylights-syntax-markup-deleted-text: #82071e;
     --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
     --color-prettylights-syntax-markup-inserted-text: #116329;
     --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
     --color-prettylights-syntax-markup-changed-text: #953800;
     --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
-    --color-prettylights-syntax-markup-ignored-text: #eaeef2;
+    --color-prettylights-syntax-markup-ignored-text: #d1d9e0;
     --color-prettylights-syntax-markup-ignored-bg: #0550ae;
     --color-prettylights-syntax-meta-diff-range: #8250df;
-    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
   }
 }

@@ -134,7 +133,7 @@
   font-size: 16px;
   line-height: 1.5;
   word-wrap: break-word;
-  scroll-behavior: auto;
+  scroll-behavior: auto !important;
 }

 .markdown-body .octicon {
@@ -242,7 +241,7 @@
 }

 .markdown-body figure {
-  margin: 1em 40px;
+  margin: 1em var(--base-size-40);
 }

 .markdown-body hr {
@@ -252,7 +251,7 @@
   border-bottom: 1px solid var(--borderColor-muted);
   height: .25em;
   padding: 0;
-  margin: 24px 0;
+  margin: var(--base-size-24) 0;
   background-color: var(--borderColor-default);
   border: 0;
 }
@@ -339,10 +338,6 @@
   cursor: pointer;
 }

-.markdown-body details:not([open])>*:not(summary) {
-  display: none;
-}
-
 .markdown-body a:focus,
 .markdown-body [role=button]:focus,
 .markdown-body input[type=radio]:focus,
@@ -379,7 +374,7 @@

 .markdown-body kbd {
   display: inline-block;
-  padding: 3px 5px;
+  padding: var(--base-size-4);
   font: 11px var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
   line-height: 10px;
   color: var(--fgColor-default);
@@ -397,8 +392,8 @@
 .markdown-body h4,
 .markdown-body h5,
 .markdown-body h6 {
-  margin-top: 24px;
-  margin-bottom: 16px;
+  margin-top: var(--base-size-24);
+  margin-bottom: var(--base-size-16);
   font-weight: var(--base-text-weight-semibold, 600);
   line-height: 1.25;
 }
@@ -529,7 +524,7 @@

 .markdown-body .anchor {
   float: left;
-  padding-right: 4px;
+  padding-right: var(--base-size-4);
   margin-left: -20px;
   line-height: 1;
 }
@@ -547,7 +542,7 @@
 .markdown-body pre,
 .markdown-body details {
   margin-top: 0;
-  margin-bottom: 16px;
+  margin-bottom: var(--base-size-16);
 }

 .markdown-body blockquote>:first-child {
@@ -666,7 +661,7 @@
 }

 .markdown-body li>p {
-  margin-top: 16px;
+  margin-top: var(--base-size-16);
 }

 .markdown-body li+li {
@@ -679,15 +674,15 @@

 .markdown-body dl dt {
   padding: 0;
-  margin-top: 16px;
+  margin-top: var(--base-size-16);
   font-size: 1em;
   font-style: italic;
   font-weight: var(--base-text-weight-semibold, 600);
 }

 .markdown-body dl dd {
-  padding: 0 16px;
-  margin-bottom: 16px;
+  padding: 0 var(--base-size-16);
+  margin-bottom: var(--base-size-16);
 }

 .markdown-body table th {
@@ -856,7 +851,7 @@
 }

 .markdown-body .highlight {
-  margin-bottom: 16px;
+  margin-bottom: var(--base-size-16);
 }

 .markdown-body .highlight pre {
@@ -866,7 +861,7 @@

 .markdown-body .highlight pre,
 .markdown-body pre {
-  padding: 16px;
+  padding: var(--base-size-16);
   overflow: auto;
   font-size: 85%;
   line-height: 1.45;
@@ -899,7 +894,7 @@
 }

 .markdown-body .csv-data .blob-num {
-  padding: 10px 8px 9px;
+  padding: 10px var(--base-size-8) 9px;
   text-align: right;
   background: var(--bgColor-default);
   border: 0;
@@ -930,13 +925,13 @@
 }

 .markdown-body .footnotes ol {
-  padding-left: 16px;
+  padding-left: var(--base-size-16);
 }

 .markdown-body .footnotes ol ul {
   display: inline-block;
-  padding-left: 16px;
-  margin-top: 16px;
+  padding-left: var(--base-size-16);
+  margin-top: var(--base-size-16);
 }

 .markdown-body .footnotes li {
@@ -945,10 +940,10 @@

 .markdown-body .footnotes li:target::before {
   position: absolute;
-  top: -8px;
-  right: -8px;
-  bottom: -8px;
-  left: -24px;
+  top: calc(var(--base-size-8)*-1);
+  right: calc(var(--base-size-8)*-1);
+  bottom: calc(var(--base-size-8)*-1);
+  left: calc(var(--base-size-24)*-1);
   pointer-events: none;
   content: "";
   border: 2px solid var(--borderColor-accent-emphasis);
@@ -1138,12 +1133,12 @@
   vertical-align: middle;
 }

-.markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox {
+.markdown-body ul:dir(rtl) .task-list-item-checkbox {
   margin: 0 -1.6em .25em .2em;
 }

-.markdown-body .contains-task-list {
-  position: relative;
+.markdown-body ol:dir(rtl) .task-list-item-checkbox {
+  margin: 0 -1.6em .25em .2em;
 }

 .markdown-body .contains-task-list:hover .task-list-item-convert-container,

[sindresorhus]

Thanks for doing this 👍