support a separate print stylesheet (#574)

tc39 · Mar 7, 2024 · 7d626c9 · 7d626c9
1 parent 149b67e
commit 7d626c9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/css/elements.css b/css/elements.css
@@ -1368,12 +1368,6 @@ li.menu-search-result-term:before {
   padding-right: 5px;
 }
 
-@media print {
-  #menu-toggle {
-    display: none;
-  }
-}
-
 [normative-optional],
 [deprecated],
 [legacy] {

diff --git a/css/print.css b/css/print.css
@@ -0,0 +1,3 @@
+#menu-toggle {
+  display: none;
+}
diff --git a/src/Spec.ts b/src/Spec.ts
@@ -1035,6 +1035,7 @@ ${await utils.readFile(path.join(__dirname, '../js/multipage.js'))}
     }
 
     let cssContents = await utils.readFile(path.join(__dirname, '../css/elements.css'));
+    const printCssContents = await utils.readFile(path.join(__dirname, '../css/print.css'));
 
     const FONT_FILE_CONTENTS = new Map(
       zip(
@@ -1072,9 +1073,11 @@ ${await utils.readFile(path.join(__dirname, '../js/multipage.js'))}
 
       const scriptLocationOnDisk = path.join(this.assets.directory, 'ecmarkup.js');
       const styleLocationOnDisk = path.join(this.assets.directory, 'ecmarkup.css');
+      const printStyleLocationOnDisk = path.join(this.assets.directory, 'print.css');
 
       this.generatedFiles.set(scriptLocationOnDisk, jsContents);
       this.generatedFiles.set(styleLocationOnDisk, cssContents);
+      this.generatedFiles.set(printStyleLocationOnDisk, printCssContents);
       for (const [, fontFile] of FONT_FILES) {
         this.generatedFiles.set(
           path.join(this.assets.directory, fontFile),
@@ -1087,6 +1090,7 @@ ${await utils.readFile(path.join(__dirname, '../js/multipage.js'))}
       script.setAttribute('defer', '');
       this.doc.head.appendChild(script);
 
+      this.addStyle(this.doc.head, path.relative(outDir, printStyleLocationOnDisk), 'print');
       this.addStyle(this.doc.head, path.relative(outDir, styleLocationOnDisk));
     } else {
       // i.e. assets.type === 'inline'
@@ -1099,6 +1103,9 @@ ${await utils.readFile(path.join(__dirname, '../js/multipage.js'))}
       const style = this.doc.createElement('style');
       style.textContent = cssContents;
       this.doc.head.appendChild(style);
+      const printStyle = this.doc.createElement('style');
+      printStyle.textContent = `@media print {\n${printCssContents}\n}`;
+      this.doc.head.appendChild(printStyle);
     }
     this.addStyle(
       this.doc.head,
@@ -1108,10 +1115,13 @@ ${await utils.readFile(path.join(__dirname, '../js/multipage.js'))}
     );
   }
 
-  private addStyle(head: HTMLHeadElement, href: string) {
+  private addStyle(head: HTMLHeadElement, href: string, media?: 'all' | 'print' | 'screen') {
     const style = this.doc.createElement('link');
     style.setAttribute('rel', 'stylesheet');
     style.setAttribute('href', href);
+    if (media != null) {
+      style.setAttribute('media', media);
+    }
 
     // insert early so that the document's own stylesheets can override
     const firstLink = head.querySelector('link[rel=stylesheet], style');