docs: compile stylesheet via rsass

docs/manual.nix

@@ -1,6 +1,8 @@
 {
   lib,
   stdenvNoCC,
+  fetchzip,
+  runCommandLocal,
   # build inputs
   nixos-render-docs,
   documentation-highlighter,
@@ -11,6 +13,25 @@
   optionsJSON,
 } @ args: let
   manual-release = args.release or "unstable";
+
+  scss-reset = fetchzip {
+    url = "https://github.com/Frontend-Layers/scss-reset/archive/refs/tags/1.4.2.zip";
+    hash = "sha256-cif5Sx8Ca5vxdw/mNAgpulLH15TwmzyJFNM7JURpoaE=";
+  };
+
+  compileStylesheet = runCommandLocal "compile-nvf-stylesheet" {} ''
+    mkdir -p $out
+
+    tmpfile=$(mktemp -d)
+    trap "rm -r $tmpfile" EXIT
+
+    ln -s "${scss-reset}/build" "$tmpfile/scss-reset"
+
+    ${dart-sass}/bin/sass --load-path "$tmpfile" \
+      ${./static/style.scss} "$out/style.css"
+
+    echo "Generated styles"
+  '';
 in
   stdenvNoCC.mkDerivation {
     name = "nvf-manual";
@@ -21,7 +42,6 @@ in
 
     strictDependencies = true;
     nativeBuildInputs = [nixos-render-docs];
-    buildInputs = [dart-sass];
 
     postPatch = ''
       ln -s ${optionsJSON}/share/doc/nixos/options.json ./config-options.json
@@ -40,7 +60,7 @@ in
         ${documentation-highlighter}/loader.js
 
       # Copy anchor scripts to the script directory in document root.
-      cp -vt $dest/script \
+      cp -vt "$dest"/script \
         ${./static/script}/anchor-min.js \
         ${./static/script}/anchor-use.js
 
@@ -53,8 +73,9 @@ in
       substituteInPlace ./hacking/additional-plugins.md \
         --subst-var-by NVF_REPO "https://github.com/notashelf/nvf/blob/${manual-release}"
 
-      # Compile and copy stylesheet to the project root.
+      # Move compiled stylesheet
-      sass ${./static/style.css} "$dest/style.css"
+      cp -vt $dest \
+        ${compileStylesheet}/style.css
 
       # Move release notes
       cp -vr ${./release-notes} release-notes
@@ -74,9 +95,9 @@ in
       nixos-render-docs manual html \
         --manpage-urls ${path + "/doc/manpage-urls.json"} \
         --revision ${lib.trivial.revisionWithDefault manual-release} \
-        --stylesheet style.css \
+        --stylesheet "$dest"/style.css \
-        --script highlightjs/highlight.pack.js \
+        --script ./highlightjs/highlight.pack.js \
-        --script highlightjs/loader.js \
+        --script ./highlightjs/loader.js \
         --script script/anchor-use.js \
         --script script/anchor-min.js \
         --toc-depth 2 \

docs/static/style.scss

@@ -1,3 +1,5 @@
+@use "scss-reset/reset";
+
 :root {
 	--nmd-color0: #0a3e68;
 	--nmd-color1: #268598;
@@ -32,8 +34,6 @@ $color-blue-700: #1d4ed8;
 $color-blue-800: #1e40af;
 $color-blue-900: #1e3a8a;
 
-@use "scss-reset/reset";
-
 @mixin boxed {
 	background: $color-gray-50;
 	margin: 2rem 16px;

docs/static/tomorrow-night.min.css

@@ -4,99 +4,4 @@
   License: ~ MIT (or more permissive) [via base16-schemes-source]
   Maintainer: @highlightjs/core-team
   Version: 2021.09.0
-*/
+*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#ccc;background:#2d2d2d}.hljs ::selection,.hljs::selection{background-color:#515151;color:#ccc}.hljs-comment{color:#999}.hljs-tag{color:#b4b7b4}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#ccc}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#f2777a}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#f99157}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#fc6}.hljs-strong{font-weight:700;color:#fc6}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#9c9}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#6cc}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#69c}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#c9c}.hljs-emphasis{color:#c9c;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#a3685a}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}
-pre code.hljs {
-	display: block;
-	overflow-x: auto;
-	padding: 1em;
-}
-code.hljs {
-	padding: 3px 5px;
-}
-.hljs {
-	color: #ccc;
-	background: #2d2d2d;
-}
-.hljs ::selection,
-.hljs::selection {
-	background-color: #515151;
-	color: #ccc;
-}
-.hljs-comment {
-	color: #999;
-}
-.hljs-tag {
-	color: #b4b7b4;
-}
-.hljs-operator,
-.hljs-punctuation,
-.hljs-subst {
-	color: #ccc;
-}
-.hljs-operator {
-	opacity: 0.7;
-}
-.hljs-bullet,
-.hljs-deletion,
-.hljs-name,
-.hljs-selector-tag,
-.hljs-template-variable,
-.hljs-variable {
-	color: #f2777a;
-}
-.hljs-attr,
-.hljs-link,
-.hljs-literal,
-.hljs-number,
-.hljs-symbol,
-.hljs-variable.constant_ {
-	color: #f99157;
-}
-.hljs-class .hljs-title,
-.hljs-title,
-.hljs-title.class_ {
-	color: #fc6;
-}
-.hljs-strong {
-	font-weight: 700;
-	color: #fc6;
-}
-.hljs-addition,
-.hljs-code,
-.hljs-string,
-.hljs-title.class_.inherited__ {
-	color: #9c9;
-}
-.hljs-built_in,
-.hljs-doctag,
-.hljs-keyword.hljs-atrule,
-.hljs-quote,
-.hljs-regexp {
-	color: #6cc;
-}
-.hljs-attribute,
-.hljs-function .hljs-title,
-.hljs-section,
-.hljs-title.function_,
-.ruby .hljs-property {
-	color: #69c;
-}
-.diff .hljs-meta,
-.hljs-keyword,
-.hljs-template-tag,
-.hljs-type {
-	color: #c9c;
-}
-.hljs-emphasis {
-	color: #c9c;
-	font-style: italic;
-}
-.hljs-meta,
-.hljs-meta .hljs-keyword,
-.hljs-meta .hljs-string {
-	color: #a3685a;
-}
-.hljs-meta .hljs-keyword,
-.hljs-meta-keyword {
-	font-weight: 700;
-}