Allow hidden CSS src in tabbed examples (#989)

* Allow hidden CSS src in tabbed examples

* prettier

editor/tmpl/live-tabbed-tmpl.html

@@ -128,6 +128,9 @@ <h4 class="console-label">Console Output</h4>
       <title></title>
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <link href="../../css/editor-tabbed.css%cache-buster%" rel="stylesheet" />
+      <style>
+        %example-hidden-css-src%
+      </style>
       <style id="css-output">
         %css-content%
       </style>

lib/tabbedPageBuilder.js

@@ -1,6 +1,7 @@
 import fse from "fs-extra";
 import * as pageBuilderUtils from "./pageBuilderUtils.js";
 import * as processor from "./processor.js";
+import CleanCSS from "clean-css";
 
 /**
  * Replace the template tag with the CSS source, or an empty string
@@ -46,6 +47,24 @@ function addJS(currentPage, tmpl) {
   return tmpl;
 }
 
+/**
+ * Adds optional hidden CSS to tabbed example.
+ * Its primary use case is adding new font to the example, without displaying @font-face to the user
+ * @param {Object} currentPage - The current page as an Object
+ * @param {String} tmpl - The template as a string
+ * @returns the processed template string
+ */
+function addHiddenCSS(currentPage, tmpl) {
+  if (currentPage.cssHiddenSrc) {
+    const content = fse.readFileSync(currentPage.cssHiddenSrc, "utf8");
+    const minified = new CleanCSS().minify(content).styles;
+
+    return tmpl.replace("%example-hidden-css-src%", minified);
+  } else {
+    return tmpl.replace("%example-hidden-css-src%", "");
+  }
+}
+
 /**
  * Builds and returns the HTML source for a tabbed example
  * @param {String} tmpl - The template as a string
@@ -70,5 +89,7 @@ export function buildTabbedExample(tmpl, currentPage) {
   tmpl = addHTML(currentPage, tmpl);
   // add the example JS
   tmpl = addJS(currentPage, tmpl);
+  // add hidden example-dependent CSS
+  tmpl = addHiddenCSS(currentPage, tmpl);
   return tmpl;
 }

live-examples/fonts/molot.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: molot;
+  src: url("/media/fonts/molot.woff2") format("woff2");
+}

live-examples/html-examples/table-content/caption.html

@@ -0,0 +1,25 @@
+<table>
+  <caption>
+    He-Man and Skeletor facts
+  </caption>
+  <tr>
+    <td> </td>
+    <th scope="col" class="heman">He-Man</th>
+    <th scope="col" class="skeletor">Skeletor</th>
+  </tr>
+  <tr>
+    <th scope="row">Role</th>
+    <td>Hero</td>
+    <td>Villain</td>
+  </tr>
+  <tr>
+    <th scope="row">Weapon</th>
+    <td>Power Sword</td>
+    <td>Havoc Staff</td>
+  </tr>
+  <tr>
+    <th scope="row">Dark secret</th>
+    <td>Expert florist</td>
+    <td>Cries at romcoms</td>
+  </tr>
+</table>

live-examples/html-examples/table-content/css/caption.css

@@ -0,0 +1,45 @@
+caption {
+  padding: 10px;
+  caption-side: bottom;
+}
+
+table {
+  border-collapse: collapse;
+  border: 2px solid rgb(200, 200, 200);
+  letter-spacing: 1px;
+  font-family: sans-serif;
+  font-size: 0.8rem;
+}
+
+td,
+th {
+  border: 1px solid rgb(190, 190, 190);
+  padding: 7px 5px;
+}
+
+th {
+  background-color: rgb(235, 235, 235);
+}
+
+td {
+  text-align: center;
+}
+
+tr:nth-child(even) td {
+  background-color: rgb(250, 250, 250);
+}
+
+tr:nth-child(odd) td {
+  background-color: rgb(240, 240, 240);
+}
+
+.heman {
+  font: 1.4rem molot;
+  text-shadow: 1px 1px 1px #fff, 2px 2px 1px #000;
+}
+
+.skeletor {
+  font: 1.7rem rapscallion;
+  letter-spacing: 3px;
+  text-shadow: 1px 1px 0 #fff, 0 0 9px #000;
+}

live-examples/html-examples/table-content/meta.json

@@ -0,0 +1,13 @@
+{
+  "pages": {
+    "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",
+      "fileName": "caption.html",
+      "title": "HTML Demo: <caption>",
+      "type": "tabbed",
+      "height": "tabbed-taller"
+    }
+  }
+}