feat: handle font files in css

Author: thepassle

package-lock.json

@@ -45,13 +45,12 @@
   ],
   "dependencies": {
     "@web/parse5-utils": "^2.1.0",
-    "clean-css": "^5.3.3",
     "glob": "^10.0.0",
     "html-minifier-terser": "^7.1.0",
+    "lightningcss": "^1.24.0",
     "parse5": "^6.0.1"
   },
   "devDependencies": {
-    "@types/clean-css": "^4.2.11",
     "@types/html-minifier-terser": "^7.0.0",
     "rollup": "^4.4.0"
   }

packages/rollup-plugin-html/package.json

@@ -1,6 +1,7 @@
 import { PluginContext } from 'rollup';
 import path from 'path';
-import CleanCSS from 'clean-css';
+import { transform } from 'lightningcss';
+import fs from 'fs';
 
 import { InputAsset, InputData } from '../input/InputData';
 import { RollupPluginHTMLOptions, TransformAssetFunction } from '../RollupPluginHTMLOptions';
@@ -10,6 +11,16 @@ export interface EmittedAssets {
   hashed: Map<string, string>;
 }
 
+function shouldHandleFontFile(url: string) {
+  return (
+    (url.endsWith('.woff2') || url.endsWith('.woff')) &&
+    !url.startsWith('http') &&
+    !url.startsWith('data') &&
+    !url.startsWith('#') &&
+    !url.startsWith('/')
+  );
+}
+
 export async function emitAssets(
   this: PluginContext,
   inputs: InputData[],
@@ -44,18 +55,6 @@ export async function emitAssets(
   const allAssets = [...hashedAssets, ...staticAssets];
 
   for (const asset of allAssets) {
-    if (asset.filePath.endsWith('.css')) {
-      // TODO: try css bundlers like https://lightningcss.dev/bundling.html or esbuild
-      // TODO: question: do we need to recursively analyze all assets that are referenced inside the first css file?
-      // TODO: make a flag to enable this behavior, "false" by default
-      const { styles } = await new CleanCSS({
-        rebaseTo: path.dirname(asset.filePath),
-        returnPromise: true,
-      }).minify([asset.filePath]);
-      console.log('emitEsset.ts styles', styles);
-      asset.content = Buffer.from(styles, 'utf-8');
-    }
-
     const map = asset.hashed ? emittedHashedAssets : emittedStaticAssets;
     if (!map.has(asset.filePath)) {
       let source: Buffer = asset.content;
@@ -70,7 +69,46 @@ export async function emitAssets(
 
       let ref: string;
       let basename = path.basename(asset.filePath);
+      const emittedFonts = new Map();
       if (asset.hashed) {
+        if (basename.endsWith('.css')) {
+          let updatedCssSource = false;
+          const { code } = await transform({
+            filename: basename,
+            code: asset.content,
+            minify: false,
+            visitor: {
+              Url: url => {
+                if (shouldHandleFontFile(url.url)) {
+                  // Read the font file, get the font from the source location on the FS using asset.filePath
+                  const fontLocation = path.resolve(path.dirname(asset.filePath), url.url);
+                  const fontContent = fs.readFileSync(fontLocation);
+
+                  // Avoid duplicates
+                  if (!emittedFonts.has(fontLocation)) {
+                    const fontFileRef = this.emitFile({
+                      type: 'asset',
+                      name: path.basename(url.url),
+                      source: fontContent,
+                    });
+                    const emittedFontFilePath = path.basename(this.getFileName(fontFileRef));
+                    emittedFonts.set(fontLocation, emittedFontFilePath);
+                    // Update the URL in the original CSS file to point to the emitted font file
+                    url.url = emittedFontFilePath;
+                  } else {
+                    url.url = emittedFonts.get(fontLocation);
+                  }
+                }
+                updatedCssSource = true;
+                return url;
+              },
+            },
+          });
+          if (updatedCssSource) {
+            source = Buffer.from(code);
+          }
+        }
+
         ref = this.emitFile({ type: 'asset', name: basename, source });
       } else {
         // ensure the output filename is unique

packages/rollup-plugin-html/src/output/emitAssets.ts

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Font';
+  src: url('fonts/font-normal.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}