feat(meta): Allow cssHiddenSrc to be an array

mdn · Jun 10, 2023 · e9ab997 · e9ab997
1 parent 8446965
commit e9ab997
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 5 deletions.
diff --git a/__tests__/built-example.test.js b/__tests__/built-example.test.js
@@ -15,4 +15,26 @@ describe("example", () => {
       expect(content).toBe(expectedOutput);
     });
   });
+  describe("article", () => {
+    it("should have content of `cssHiddenSrc` path", () => {
+      const path = "pages/tabbed/article.html";
+      const content = fse.readFileSync(config.baseDir + path, "utf8");
+
+      const expectedOutput =
+        '@font-face{font-family:molot;src:url("/media/fonts/molot.woff2") format("woff2")}';
+
+      expect(content).toContain(expectedOutput);
+    });
+  });
+  describe("caption", () => {
+    it("should have content of both `cssHiddenSrc` paths", () => {
+      const path = "pages/tabbed/caption.html";
+      const content = fse.readFileSync(config.baseDir + path, "utf8");
+
+      const expectedOutput =
+        '@font-face{font-family:molot;src:url("/media/fonts/molot.woff2") format("woff2")}@font-face{font-family:rapscallion;src:url("/media/fonts/rapscall.woff2") format("woff2")}';
+
+      expect(content).toContain(expectedOutput);
+    });
+  });
 });
diff --git a/lib/tabbedPageBuilder.ts b/lib/tabbedPageBuilder.ts
@@ -55,11 +55,17 @@ function addJS(currentPage, tmpl) {
  * @returns the processed template string
  */
 function addHiddenCSS(currentPage, tmpl) {
+  function getHiddenCSS(path) {
+    const content = fse.readFileSync(path, "utf8");
+    return minifyCSS(content, path);
+  }
   if (currentPage.cssHiddenSrc) {
-    const content = fse.readFileSync(currentPage.cssHiddenSrc, "utf8");
-    const minified = minifyCSS(content, currentPage.cssHiddenSrc);
+    const paths = Array.isArray(currentPage.cssHiddenSrc)
+      ? currentPage.cssHiddenSrc
+      : [currentPage.cssHiddenSrc];
+    const hiddenCSS = paths.map(getHiddenCSS).join("");
 
-    return tmpl.replace("%example-hidden-css-src%", minified);
+    return tmpl.replace("%example-hidden-css-src%", hiddenCSS);
   } else {
     return tmpl.replace("%example-hidden-css-src%", "");
   }

diff --git a/live-examples/fonts/rapscallion.css b/live-examples/fonts/rapscallion.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: rapscallion;
+  src: url("/media/fonts/rapscall.woff2") format("woff2");
+}
diff --git a/live-examples/html-examples/content-sectioning/css/article.css b/live-examples/html-examples/content-sectioning/css/article.css
@@ -2,7 +2,7 @@
   margin: 0;
   padding: 0.3rem;
   background-color: #eee;
-  font: 1rem "Fira Sans", sans-serif;
+  font-family: molot, sans-serif;
 }
 
 .forecast > h1,

diff --git a/live-examples/html-examples/content-sectioning/meta.json b/live-examples/html-examples/content-sectioning/meta.json
@@ -11,6 +11,7 @@
     "article": {
       "exampleCode": "live-examples/html-examples/content-sectioning/article.html",
       "cssExampleSrc": "live-examples/html-examples/content-sectioning/css/article.css",
+      "cssHiddenSrc": "live-examples/fonts/molot.css",
       "fileName": "article.html",
       "title": "HTML Demo: <article>",
       "type": "tabbed",

diff --git a/live-examples/html-examples/table-content/meta.json b/live-examples/html-examples/table-content/meta.json
@@ -3,7 +3,10 @@
     "dialog": {
       "exampleCode": "live-examples/html-examples/table-content/caption.html",
       "cssExampleSrc": "live-examples/html-examples/table-content/css/caption.css",
-      "cssHiddenSrc": "live-examples/fonts/molot.css",
+      "cssHiddenSrc": [
+        "live-examples/fonts/molot.css",
+        "live-examples/fonts/rapscallion.css"
+      ],
       "fileName": "caption.html",
       "title": "HTML Demo: <caption>",
       "type": "tabbed",