Implemented SCSS compilation

.stylelintignore

@@ -27,4 +27,4 @@ src/**/*.html
 src/assets/stylesheets/_shame.scss
 
 # Prevent stylelint from constantly complaining
-webpack.config.ts
+*.ts

package.json

@@ -55,6 +55,7 @@
     "@typescript-eslint/eslint-plugin": "^4.15.0",
     "@typescript-eslint/parser": "^4.15.0",
     "autoprefixer": "10.2.4",
+    "cssnano": "^4.1.10",
     "esbuild": "^0.8.46",
     "eslint": "^7.20.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
@@ -78,6 +79,7 @@
     "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-scss": "^3.19.0",
+    "svgo": "^2.0.1",
     "tiny-glob": "^0.2.8",
     "ts-node": "^9.1.1",
     "tslib": "^2.1.0",

src/assets/javascripts/browser/request/index.ts

@@ -36,7 +36,7 @@ import {
  * Fetch the given URL
  *
  * @param url - Request URL
- * @param options - Request options
+ * @param options - Options
  *
  * @returns Response observable
  */
@@ -55,7 +55,7 @@ export function request(
  * @template T - Data type
  *
  * @param url - Request URL
- * @param options - Request options
+ * @param options - Options
  *
  * @returns Data observable
  */
@@ -73,7 +73,7 @@ export function requestJSON<T>(
  * Fetch XML from the given URL
  *
  * @param url - Request URL
- * @param options - Request options
+ * @param options - Options
  *
  * @returns Data observable
  */

src/assets/stylesheets/main/_typeset.scss

@@ -57,8 +57,8 @@ kbd {
 
 // Icon definitions
 :root {
-  --md-typeset-table--ascending: svg-load("@mdi/svg/svg/arrow-down.svg");
-  --md-typeset-table--descending: svg-load("@mdi/svg/svg/arrow-up.svg");
+  --md-typeset-table--ascending: svg-load("material/arrow-down.svg");
+  --md-typeset-table--descending: svg-load("material/arrow-up.svg");
 }
 
 // ----------------------------------------------------------------------------

src/assets/stylesheets/main/extensions/markdown/_admonition.scss

@@ -48,7 +48,7 @@ $admonitions: (
 :root {
   @each $names, $props in $admonitions {
     --md-admonition-icon--#{nth($names, 1)}:
-      svg-load("@mdi/svg/svg/#{nth($props, 1)}.svg");
+      svg-load("material/#{nth($props, 1)}.svg");
   }
 }
 

src/assets/stylesheets/main/extensions/markdown/_footnotes.scss

@@ -26,7 +26,7 @@
 
 // Icon definitions
 :root {
-  --md-footnotes-icon: svg-load("@mdi/svg/svg/keyboard-return.svg");
+  --md-footnotes-icon: svg-load("material/keyboard-return.svg");
 }
 
 // ----------------------------------------------------------------------------

src/assets/stylesheets/main/extensions/pymdownx/_details.scss

@@ -26,7 +26,7 @@
 
 // Icon definitions
 :root {
-  --md-details-icon: svg-load("@mdi/svg/svg/chevron-right.svg");
+  --md-details-icon: svg-load("material/chevron-right.svg");
 }
 
 // ----------------------------------------------------------------------------

src/assets/stylesheets/main/extensions/pymdownx/_tasklist.scss

@@ -27,9 +27,9 @@
 // Icon definitions
 :root {
   --md-tasklist-icon:
-    svg-load("@primer/octicons/build/svg/check-circle-fill-24.svg");
+    svg-load("octicons/check-circle-fill-24.svg");
   --md-tasklist-icon--checked:
-    svg-load("@primer/octicons/build/svg/check-circle-fill-24.svg");
+    svg-load("octicons/check-circle-fill-24.svg");
 }
 
 // ----------------------------------------------------------------------------

src/assets/stylesheets/main/layout/_clipboard.scss

@@ -26,7 +26,7 @@
 
 // Icon definitions
 :root {
-  --md-clipboard-icon: svg-load("@mdi/svg/svg/content-copy.svg");
+  --md-clipboard-icon: svg-load("material/content-copy.svg");
 }
 
 // ----------------------------------------------------------------------------

src/assets/stylesheets/main/layout/_nav.scss

@@ -26,9 +26,9 @@
 
 // Icon definitions
 :root {
-  --md-nav-icon--prev: svg-load("@mdi/svg/svg/arrow-left.svg");
-  --md-nav-icon--next: svg-load("@mdi/svg/svg/chevron-right.svg");
-  --md-toc-icon: svg-load("@mdi/svg/svg/table-of-contents.svg");
+  --md-nav-icon--prev: svg-load("material/arrow-left.svg");
+  --md-nav-icon--next: svg-load("material/chevron-right.svg");
+  --md-toc-icon: svg-load("material/table-of-contents.svg");
 }
 
 // ----------------------------------------------------------------------------

src/assets/stylesheets/main/layout/_search.scss

@@ -26,7 +26,7 @@
 
 // Icon definitions
 :root {
-  --md-search-result-icon: svg-load("@mdi/svg/svg/file-search-outline.svg");
+  --md-search-result-icon: svg-load("material/file-search-outline.svg");
 }
 
 // ----------------------------------------------------------------------------

tools/copy/index.ts

@@ -0,0 +1,104 @@
+/*
+ * Copyright (c) 2016-2021 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import * as fs from "fs/promises"
+import * as path from "path"
+import { Observable, from } from "rxjs"
+import { mapTo, mergeMap, switchMap } from "rxjs/operators"
+
+import { mkdir, resolve } from "../resolve"
+
+/* ----------------------------------------------------------------------------
+ * Helper types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Copy transform function
+ *
+ * @param content - Content
+ *
+ * @returns Transformed content
+ */
+type CopyTransformFn = (content: string) => Promise<string> | string
+
+/* ------------------------------------------------------------------------- */
+
+/**
+ * Copy options
+ */
+interface CopyOptions {
+  src: string                          /* Source file */
+  out: string                          /* Target file */
+  fn?: CopyTransformFn                 /* Transform function */
+}
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Copy a file
+ *
+ * @param options - Options
+ *
+ * @returns File observable
+ */
+export function copy(
+  { src, out, fn }: CopyOptions
+): Observable<string> {
+  return mkdir(path.dirname(out))
+    .pipe(
+      switchMap(() => typeof fn === "undefined"
+        ? from(fs.copyFile(src, out))
+        : from(fs.readFile(src, "utf8"))
+            .pipe(
+              switchMap(content => from(fn(content))),
+              switchMap(content => fs.writeFile(out, content))
+            )
+      ),
+      mapTo(out)
+    )
+}
+
+/**
+ * Copy all files matching the given pattern
+ *
+ * Note that this function will rebase all files that match the pattern to the
+ * target folder, even if the pattern resolves to a parent folder.
+ *
+ * @param pattern - Pattern
+ * @param options - Options
+ *
+ * @returns File observable
+ */
+export function copyAll(
+  pattern: string, options: CopyOptions
+): Observable<string> {
+  return resolve(pattern, { cwd: options.src })
+    .pipe(
+      mergeMap(file => copy({
+        ...options,
+        src: `${options.src}/${file}`,
+        out: `${options.out}/${file.replace(/(\.{2}\/)+/, "")}`
+      }), 16)
+    )
+}

tools/index.ts

@@ -21,165 +21,65 @@
  */
 
 // import { build } from "esbuild"
-import * as fs from "fs/promises"
 import { minify as minhtml } from "html-minifier"
-import * as path from "path"
-import { concat, from } from "rxjs"
-import {
-  finalize,
-  mapTo,
-  mergeMap,
-  switchMap
-} from "rxjs/operators"
-import glob from "tiny-glob"
+import { concat } from "rxjs"
+import { concatMap } from "rxjs/operators"
 
-/* ----------------------------------------------------------------------------
- * Data
- * ------------------------------------------------------------------------- */
-
-/**
- * Base directory
- */
-const base = "material2"
-
-/* ----------------------------------------------------------------------------
- * Helper types
- * ------------------------------------------------------------------------- */
-
-/**
- * Transform function
- *
- * @param content - Content
- *
- * @returns Promise resolving with transformed content
- */
-type TransformFn = (content: string) => Promise<string>
-
-/* ------------------------------------------------------------------------- */
-
-/**
- * Copy options
- */
-interface CopyOptions {
-  source: string                       /* Source destination */
-  target: string                       /* Target destination */
-  transform?: TransformFn              /* Transform function */
-}
-
-/* ----------------------------------------------------------------------------
- * Helper functions
- * ------------------------------------------------------------------------- */
-
-/**
- * Recursively create the given directory
- *
- * @param directory - Directory
- *
- * @returns Directory observable
- */
-function mkdir(directory: string) {
-  return from(fs.mkdir(directory, { recursive: true }))
-    .pipe(
-      mapTo(directory)
-    )
-}
-
-/**
- * Copy a file from source to target
- *
- * @param options - Options
- *
- * @returns File observable
- */
-function copy({ source, target, transform }: CopyOptions) {
-  return mkdir(path.dirname(target))
-    .pipe(
-      switchMap(() => typeof transform === "undefined"
-        ? from(fs.copyFile(source, target))
-        : from(fs.readFile(source, "utf8"))
-            .pipe(
-              switchMap(transform),
-              switchMap(content => fs.writeFile(target, content))
-            )
-      ),
-      mapTo(target)
-    )
-}
-
-/**
- * Resolve a pattern and copy all files to target
- *
- * Note that this function will rebase all files that match the pattern to the
- * target folder, even if the pattern resolves to a parent folder.
- *
- * @param pattern - Pattern
- * @param options - Options
- *
- * @returns File observable
- */
-function copyAll(pattern: string, options: CopyOptions) {
-  return from(glob(pattern, { cwd: options.source }))
-    .pipe(
-      switchMap(from),
-      mergeMap(file => copy({
-        ...options,
-        source: `${options.source}/${file}`,
-        target: `${options.target}/${file.replace(/(\.{2}\/)+/, "")}`,
-      }), 16)
-    )
-}
+import { copyAll } from "./copy"
+import { base, resolve } from "./resolve"
+import { transformStyle } from "./transform"
 
 /* ----------------------------------------------------------------------------
  * Program
  * ------------------------------------------------------------------------- */
 
-const icons$ = concat(
+/* Copy all dependencies */
+const dependencies$ = concat(
 
   /* Copy Material Design icons */
   ...["*.svg", "../LICENSE"]
     .map(pattern => copyAll(pattern, {
-      source: "node_modules/@mdi/svg/svg",
-      target: `${base}/.icons/material`
+      src: "node_modules/@mdi/svg/svg",
+      out: `${base}/.icons/material`
     })),
 
   /* Copy GitHub octicons */
   ...["*.svg", "../../LICENSE"]
     .map(pattern => copyAll(pattern, {
-      source: "node_modules/@primer/octicons/build/svg",
-      target: `${base}/.icons/octicons`
+      src: "node_modules/@primer/octicons/build/svg",
+      out: `${base}/.icons/octicons`
     })),
 
   /* Copy FontAwesome icons */
   ...["**/*.svg", "../LICENSE.txt"]
     .map(pattern => copyAll(pattern, {
-      source: "node_modules/@fortawesome/fontawesome-free/svgs",
-      target: `${base}/.icons/fontawesome`
+      src: "node_modules/@fortawesome/fontawesome-free/svgs",
+      out: `${base}/.icons/fontawesome`
+    })),
+
+  /* Copy Lunr.js search stemmers and segmenter */
+  ...["min/*.js", "tinyseg.js"]
+    .map(pattern => copyAll(pattern, {
+      src: "node_modules/lunr-languages",
+      out: `${base}/assets/javascripts/lunr`
     }))
 )
 
+/* Copy all assets */
 const assets$ = concat(
-  icons$,
 
-  /* Copy search stemmers and segmenter */
-  ...["min/*.js", "tinyseg.js"]
-    .map(pattern => copyAll(pattern, {
-      source: "node_modules/lunr-languages",
-      target: `${base}/assets/javascripts/lunr`
-    })),
-
-  /* Copy assets and configuration */
+  /* Copy icons, images and configurations */
   ...[".icons/*.svg", "assets/images/*", "**/*.{py,yml}"]
     .map(pattern => copyAll(pattern, {
-      source: "src",
-      target: base
+      src: "src",
+      out: base
     })),
 
-  /* Template files */
-  ...["**/*.html"]
-    .map(pattern => copyAll(pattern, {
-      source: "src",
-      target: base,
-      transform: async content => {
+  /* Copy and minify template files */
+  copyAll("**/*.html", {
+    src: "src",
+    out: base,
+    fn: content => {
       const metadata = require("../package.json")
       const banner =
         "{#-\n" +
@@ -205,28 +105,23 @@ const assets$ = concat(
         .replace("$md-name$", metadata.name)
         .replace("$md-version$", metadata.version)
     }
-    }))
+  })
 )
 
-console.time("a")
-
-assets$
+/* Transform stylesheets with SASS and PostCSS */
+const styles$ = resolve("**/[!_]*.scss", { cwd: "src" })
   .pipe(
-    finalize(() => console.timeEnd("a"))
+    concatMap(file => transformStyle({
+      src: `src/${file}`,
+      out: `${base}/${file.replace(/\.scss$/, ".css")}`,
+      optimize: true // TODO: wrap with commander
+    }))
   )
-    .subscribe()
-    // .subscribe(console.log)
 
-// async function main() {
-//   console.time("build")
-//   const res = await build({
-//     bundle: true,
-//     sourceMap: true,
-//     entryPoints: [
-//       "src/assets/javascripts/index.ts"
-//     ],
-//     outdir: "material2"
-//   })
-//   console.timeEnd("build")
-//   console.log(res)
-// }
+/* Compile everything */
+concat(
+  dependencies$,
+  assets$,
+  styles$
+)
+  .subscribe()

tools/resolve/index.ts

@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) 2016-2021 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import * as fs from "fs/promises"
+import { Observable, from } from "rxjs"
+import { mapTo, switchMap } from "rxjs/operators"
+import glob from "tiny-glob"
+
+/* ----------------------------------------------------------------------------
+ * Helper types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Resolve options
+ */
+interface ResolveOptions {
+  cwd: string                          /* Working directory */
+}
+
+/* ----------------------------------------------------------------------------
+ * Data
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Base directory for compiled files
+ */
+export const base = "material2"
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Resolve a pattern
+ *
+ * @param pattern - Pattern
+ * @param options - Options
+ *
+ * @returns Files
+ */
+export function resolve(
+  pattern: string, options?: ResolveOptions
+): Observable<string> {
+  return from(glob(pattern, options))
+    .pipe(
+      switchMap(files => from(files))
+    )
+}
+
+/**
+ * Recursively create the given directory
+ *
+ * @param directory - Directory
+ *
+ * @returns Directory observable
+ */
+export function mkdir(
+  directory: string
+): Observable<string> {
+  return from(fs.mkdir(directory, { recursive: true }))
+    .pipe(
+      mapTo(directory)
+    )
+}

tools/transform/index.ts

@@ -0,0 +1,114 @@
+/*
+ * Copyright (c) 2016-2021 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import * as fs from "fs/promises"
+import * as path from "path"
+import postcss from "postcss"
+import { Observable, defer, merge } from "rxjs"
+import {
+  endWith,
+  ignoreElements,
+  switchMap,
+  tap
+} from "rxjs/operators"
+import { render as sass } from "sass"
+import { promisify } from "util"
+
+import { base, mkdir } from "../resolve"
+
+/* ----------------------------------------------------------------------------
+ * Helper types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Transform options
+ */
+interface TransformOptions {
+  src: string                          /* Source file */
+  out: string                          /* Target file */
+  optimize?: boolean                   /* Optimize assets */
+}
+
+/* ----------------------------------------------------------------------------
+ * Data
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Base directory for source maps
+ */
+const root = new RegExp(`file://${path.resolve(".")}/`, "g")
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Transform a stylesheet
+ *
+ * @param options - Options
+ *
+ * @returns File observable
+ */
+export function transformStyle(
+  { src, out, optimize }: TransformOptions
+): Observable<string> {
+  return defer(() => promisify(sass)({
+    file: src,
+    includePaths: [
+      "src/assets/stylesheets",
+      "node_modules/modularscale-sass/stylesheets",
+      "node_modules/material-design-color",
+      "node_modules/material-shadows"
+    ],
+    sourceMap: true,
+    sourceMapRoot: ".",
+    outFile: out
+  }))
+    .pipe(
+      switchMap(({ css, map }) => postcss([
+        require("autoprefixer"),
+        require("postcss-inline-svg")({
+          paths: [
+            `${base}/.icons`
+          ],
+          encode: false
+        }),
+        ...optimize ? [require("cssnano")] : []
+      ])
+        .process(css, {
+          from: src,
+          to: out,
+          map: {
+            prev: `${map}`.replace(root, ""),
+            inline: false
+          }
+        })
+      ),
+      tap(() => mkdir(path.dirname(out))),
+      switchMap(({ css, map }) => merge(
+        fs.writeFile(`${out}`, css),
+        fs.writeFile(`${out}.map`, map.toString())
+      )),
+      ignoreElements(),
+      endWith(out)
+    )
+}