theme - Refactor cleaning of sourceMappingURLs and apply it to revealjs too.

Author: cderv

src/command/render/pandoc-html.ts

@@ -19,7 +19,7 @@ import { ProjectContext } from "../../project/types.ts";
 
 import { TempContext } from "../../core/temp.ts";
 import { cssImports, cssResources } from "../../core/css.ts";
-import { compileSass } from "../../core/sass.ts";
+import { cleanSourceMappingUrl, compileSass } from "../../core/sass.ts";
 
 import { kSourceMappingRegexes } from "../../config/constants.ts";
 
@@ -38,6 +38,7 @@ import { kMinimal } from "../../format/html/format-html-shared.ts";
 import { kSassBundles } from "../../config/types.ts";
 import { md5HashBytes } from "../../core/hash.ts";
 import { InternalError } from "../../core/lib/error.ts";
+import { writeTextFileSyncPreserveMode } from "../../core/write.ts";
 
 // The output target for a sass bundle
 // (controls the overall style tag that is emitted)
@@ -127,7 +128,8 @@ export async function resolveSassBundles(
 
     for (const target of targets) {
       let cssPath = await compileSass(target.bundles, temp);
-
+      // First, Clean CSS
+      cleanSourceMappingUrl(cssPath);
       // look for a sentinel 'dark' value, extract variables
       const cssResult = processCssIntoExtras(cssPath, extras, temp);
       cssPath = cssResult.path;
@@ -436,13 +438,8 @@ function processCssIntoExtras(
   temp: TempContext,
 ): CSSResult {
   extras.html = extras.html || {};
-  const css = Deno.readTextFileSync(cssPath).replaceAll(
-    kSourceMappingRegexes[0],
-    "",
-  ).replaceAll(
-    kSourceMappingRegexes[1],
-    "",
-  );
+
+  const css = Deno.readTextFileSync(cssPath);
 
   // Extract dark sentinel value
   const hasDarkSentinel = cssHasDarkModeSentinel(css);
@@ -474,21 +471,7 @@ function processCssIntoExtras(
       const hash = md5HashBytes(new TextEncoder().encode(cleanedCss));
       const newCssPath = temp.createFile({ suffix: `-${hash}.css` });
 
-      // Preserve the existing permissions if possible
-      // See https://github.com/quarto-dev/quarto-cli/issues/660
-      let mode;
-      if (Deno.build.os !== "windows") {
-        const stat = Deno.statSync(cssPath);
-        if (stat.mode !== null) {
-          mode = stat.mode;
-        }
-      }
-
-      if (mode !== undefined) {
-        Deno.writeTextFileSync(newCssPath, cleanedCss, { mode });
-      } else {
-        Deno.writeTextFileSync(newCssPath, cleanedCss);
-      }
+      writeTextFileSyncPreserveMode(newCssPath, cleanedCss);
 
       return {
         dark: hasDarkSentinel,

src/core/sass.ts

@@ -17,6 +17,8 @@ import * as ld from "./lodash.ts";
 import { lines } from "./text.ts";
 import { sassCache } from "./sass/cache.ts";
 import { md5HashBytes } from "./hash.ts";
+import { kSourceMappingRegexes } from "../config/constants.ts";
+import { writeTextFileSyncPreserveMode } from "./write.ts";
 
 export interface SassVariable {
   name: string;
@@ -327,3 +329,15 @@ export async function compileWithCache(
     return outputFilePath;
   }
 }
+
+// Clean sourceMappingUrl from css after saas compilation
+export function cleanSourceMappingUrl(cssPath: string): void {
+  const cleaned = Deno.readTextFileSync(cssPath).replaceAll(
+    kSourceMappingRegexes[0],
+    "",
+  ).replaceAll(
+    kSourceMappingRegexes[1],
+    "",
+  );
+  writeTextFileSyncPreserveMode(cssPath, cleaned);
+}

src/core/write.ts

@@ -0,0 +1,27 @@
+/*
+ * write.ts
+ *
+ * Copyright (C)2024 Posit Software, PBC
+ */
+
+export function writeTextFileSyncPreserveMode(
+  path: string,
+  data: string,
+  options?: Deno.WriteFileOptions | undefined,
+): void {
+  // Preserve the existing permissions if possible
+  // See https://github.com/quarto-dev/quarto-cli/issues/660
+  let mode;
+  if (Deno.build.os !== "windows") {
+    const stat = Deno.statSync(path);
+    if (stat.mode !== null) {
+      mode = stat.mode;
+    }
+  }
+
+  if (mode !== undefined) {
+    options = { ...options, mode }; // Merge provided options with mode
+  }
+
+  Deno.writeTextFileSync(path, data, options);
+}

src/format/reveal/format-reveal-theme.ts

@@ -20,6 +20,7 @@ import { isFileRef } from "../../core/http.ts";
 import { pathWithForwardSlashes } from "../../core/path.ts";
 import { formatResourcePath } from "../../core/resources.ts";
 import {
+  cleanSourceMappingUrl,
   compileSass,
   mergeLayers,
   outputVariable,
@@ -188,6 +189,8 @@ export async function revealTheme(
 
   // compile sass
   const css = await compileSass([bundleLayers, ...brandLayers], temp);
+  // Remove sourcemap information
+  cleanSourceMappingUrl(css);
   // convert from string to bytes
   const hash = md5HashBytes(Deno.readFileSync(css));
   const fileName = `quarto-${hash}`;

tests/docs/smoke-all/2024/05/03/9548.qmd

@@ -6,12 +6,14 @@ _quarto:
   tests:
     revealjs:
       ensureHtmlElements:
-        - ['head > link[rel="stylesheet"][href$="quarto-4f64e0fc78c89fc90127583bb01c366c.css"]']
+        - []
         - ['head > link[rel="stylesheet"][href$="beige.css"]']
+      ensureFileRegexMatches:
+        - ['<link .* href=.+revealjs/dist/theme/quarto-([a-f0-9]{32})\.css']
 ---
 
 # Revealjs theme handling
 
-User provided theme should be used to build a `quarto-<hash>.css` using SASS and the `theme: beige` should internally by overridden to `theme: quarto` so that the later is added in Pandoc's template
+User provided them9548_files/libs/revealjs/dist/theme/e should be used to build a `quarto-<hash>.css` using SASS and the `theme: beige` should internally by overridden to `theme: quarto` so that the later is added in Pandoc's template
 
 2024-08-26: `quarto.css` now carries the MD5 hash of the content to allow different revealjs themes to work on the same website.