feat(css): Allow @import in css examples (#1129)

* feat(css): Allow `@import` in css examples

* Make it work also in `cssHiddenSrc`

* Correct test file extension

* Add types

__tests__/built-example.test.js

@@ -0,0 +1,18 @@
+import fse from "fs-extra";
+import getConfig from "../lib/config.js";
+
+const config = getConfig();
+
+describe("example", () => {
+  describe("font-stretch", () => {
+    it("should have content of @import directly in css", () => {
+      const path = "live-examples/css-examples/fonts/font-stretch.css";
+      const content = fse.readFileSync(config.baseDir + path, "utf8");
+
+      const expectedOutput =
+        '@font-face{font-family:molot;src:url("/media/fonts/molot.woff2") format("woff2")}#output section{font-size:1.2em;font-family:molot,sans-serif}';
+
+      expect(content).toBe(expectedOutput);
+    });
+  });
+});

lib/processor.ts

@@ -2,8 +2,10 @@ import CleanCSS from "clean-css";
 import fse from "fs-extra";
 import uglify from "uglify-js";
 import getConfig from "./config.js";
+import path from "node:path";
 
 const config = getConfig();
+const basePath = path.resolve("");
 
 const MAX_LINE_COUNT_OF_SHORT_JS_EXAMPLES = 7;
 const MIN_LINE_COUNT_OF_TALL_JS_EXAMPLES = 14;
@@ -22,22 +24,34 @@ export function preprocessHTML(html) {
 
 /**
  * Minifies the CSS and writes the minified code back to disk
- * @param {String} source - The source filepat
  */
-function preprocessCSS(source) {
-  const minified = new CleanCSS().minify(
-    fse.readFileSync(source, "utf8")
-  ).styles;
-  fse.outputFileSync(config.baseDir + source, minified);
+function preprocessCSS(sourceFilePath: string) {
+  const source = fse.readFileSync(sourceFilePath, "utf8");
+  const minified = minifyCSS(source, sourceFilePath);
+  fse.outputFileSync(config.baseDir + sourceFilePath, minified);
+}
+
+export function minifyCSS(source: string, sourceFilePath: string) {
+  // We need to change the current working path, so @import will be relative to the sourceFilePath
+  // Version 5.3.2 of CleanCSS doesn't provide any config to set the base path
+  const sourceFileDirectory = path.dirname(sourceFilePath);
+  const absoluteSourcePath = path.resolve(sourceFileDirectory);
+  process.chdir(absoluteSourcePath);
+
+  const minified = new CleanCSS().minify(source);
+
+  // Changing back current working path
+  process.chdir(basePath);
+  return minified.styles;
 }
 
 /**
  * Uglifies the JS and writes the uglified code back to disk
- * @param {String} source - The source filepat
  */
-function preprocessJS(source) {
-  const minified = uglify.minify(fse.readFileSync(source, "utf8")).code;
-  fse.outputFileSync(config.baseDir + source, minified);
+function preprocessJS(sourceFilePath: string) {
+  const source = fse.readFileSync(sourceFilePath, "utf8");
+  const minified = uglify.minify(source).code;
+  fse.outputFileSync(config.baseDir + sourceFilePath, minified);
 }
 
 /**

lib/tabbedPageBuilder.ts

@@ -1,7 +1,7 @@
 import fse from "fs-extra";
 import * as pageBuilderUtils from "./pageBuilderUtils.js";
 import * as processor from "./processor.js";
-import CleanCSS from "clean-css";
+import { minifyCSS } from "./processor.js";
 
 /**
  * Replace the template tag with the CSS source, or an empty string
@@ -57,7 +57,7 @@ function addJS(currentPage, tmpl) {
 function addHiddenCSS(currentPage, tmpl) {
   if (currentPage.cssHiddenSrc) {
     const content = fse.readFileSync(currentPage.cssHiddenSrc, "utf8");
-    const minified = new CleanCSS().minify(content).styles;
+    const minified = minifyCSS(content, currentPage.cssHiddenSrc);
 
     return tmpl.replace("%example-hidden-css-src%", minified);
   } else {

live-examples/css-examples/fonts/font-stretch.css

@@ -0,0 +1,6 @@
+@import "../../fonts/molot.css";
+
+#output section {
+  font-size: 1.2em;
+  font-family: molot, sans-serif;
+}

live-examples/css-examples/fonts/font-stretch.html

@@ -0,0 +1,54 @@
+<section
+  id="example-choice-list"
+  class="example-choice-list"
+  data-property="font-stretch"
+>
+  <div class="example-choice" initial-choice="true">
+    <pre><code class="language-css">font-stretch: condensed;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+  <div class="example-choice">
+    <pre><code class="language-css">font-stretch: expanded;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+  <div class="example-choice">
+    <pre><code class="language-css">font-stretch: ultra-expanded;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+  <div class="example-choice">
+    <pre><code class="language-css">font-stretch: 50%;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+  <div class="example-choice">
+    <pre><code class="language-css">font-stretch: 100%;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+  <div class="example-choice">
+    <pre><code class="language-css">font-stretch: 150%;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+</section>
+
+<div id="output" class="output hidden">
+  <section id="default-example" class="default-example">
+    <p id="example-element" class="transition-all">
+      London. Michaelmas term lately over, and the Lord Chancellor sitting in
+      Lincoln's Inn Hall. Implacable November weather. As much mud in the
+      streets as if the waters had but newly retired from the face of the earth,
+      and it would not be wonderful to meet a Megalosaurus, forty feet long or
+      so, waddling like an elephantine lizard up Holborn Hill.
+    </p>
+  </section>
+</div>

live-examples/css-examples/fonts/meta.json

@@ -0,0 +1,11 @@
+{
+  "pages": {
+    "fontStretch": {
+      "cssExampleSrc": "./live-examples/css-examples/fonts/font-stretch.css",
+      "exampleCode": "./live-examples/css-examples/fonts/font-stretch.html",
+      "fileName": "font-stretch.html",
+      "title": "CSS Demo: font-stretch",
+      "type": "css"
+    }
+  }
+}