Use the font-family library to parse font-family property in postcss ast

Prevents the backslash from being kept in "font-family: Font Awesome\ 5 Free" Fixes #128
Munter · Dec 12, 2020 · bc19327 · bc19327
1 parent 35bed43
commit bc19327
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 4 deletions.
diff --git a/lib/subsetFonts.js b/lib/subsetFonts.js
@@ -114,7 +114,6 @@ function groupTextsByFontFamilyProps(
     if (family === undefined) {
       return [];
     }
-
     // Find all the families in the traced font-family that we have @font-face declarations for:
     const families = fontFamily
       .parse(family)
@@ -746,7 +745,9 @@ async function subsetFonts(
                 node.walkDecls((declaration) => {
                   const propName = declaration.prop.toLowerCase();
                   if (propName === 'font-family') {
-                    fontFaceDeclaration[propName] = unquote(declaration.value);
+                    fontFaceDeclaration[propName] = fontFamily.parse(
+                      declaration.value
+                    )[0];
                   } else {
                     fontFaceDeclaration[propName] = declaration.value;
                   }
@@ -1273,7 +1274,7 @@ These glyphs are used on your site, but they don't exist in the font you applied
           }
 
           if (propName === 'font-family') {
-            name = unquote(value);
+            name = fontFamily.parse(value)[0];
           } else if (propName === 'src') {
             const fontRelations = cssAsset.outgoingRelations.filter(
               (relation) => relation.node === rule
@@ -1577,7 +1578,9 @@ These glyphs are used on your site, but they don't exist in the font you applied
           const fontFamilies = cssListHelpers.splitByCommas(cssRule.value);
           for (let i = 0; i < fontFamilies.length; i += 1) {
             const subsetFontFamily =
-              webfontNameMap[unquote(fontFamilies[i]).toLowerCase()];
+              webfontNameMap[
+                fontFamily.parse(fontFamilies[i])[0].toLowerCase()
+              ];
             if (subsetFontFamily && !fontFamilies.includes(subsetFontFamily)) {
               fontFamilies.splice(
                 i,

diff --git a/test/subsetFonts.js b/test/subsetFonts.js
@@ -1,6 +1,7 @@
 const expect = require('unexpected')
   .clone()
   .use(require('unexpected-sinon'))
+  .use(require('unexpected-set'))
   .use(require('assetgraph/test/unexpectedAssetGraph'));
 
 const AssetGraph = require('assetgraph');
@@ -4570,6 +4571,29 @@ describe('subsetFonts', function () {
       await assetGraph.populate();
       await subsetFonts(assetGraph);
     });
+
+    it('should handle escaped characters in font-family', async function () {
+      const assetGraph = new AssetGraph({
+        root: pathModule.resolve(
+          __dirname,
+          '../testdata/subsetFonts/font-family-with-escape/'
+        ),
+      });
+      const [htmlAsset] = await assetGraph.loadAssets('index.html');
+      await assetGraph.populate();
+      const { fontInfo } = await subsetFonts(assetGraph);
+      expect(fontInfo, 'to satisfy', [
+        { fontUsages: [{ fontFamilies: new Set(['Font Awesome 5 Free']) }] },
+      ]);
+      expect(
+        htmlAsset.text,
+        'to contain',
+        "font-family: 'Font Awesome 5 Free__subset', Font Awesome\\ 5 Free;"
+      ).and(
+        'to contain',
+        "font: 12px 'Font Awesome 5 Free__subset', 'Font Awesome 5 Free'"
+      );
+    });
   });
 
   describe('with non-truetype fonts in the mix', function () {

diff --git a/testdata/subsetFonts/font-family-with-escape/OpenSans.ttf b/testdata/subsetFonts/font-family-with-escape/OpenSans.ttf
diff --git a/testdata/subsetFonts/font-family-with-escape/index.html b/testdata/subsetFonts/font-family-with-escape/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    @font-face {
+      font-family: Font Awesome\ 5 Free;
+      font-style: normal;
+      font-weight: 400;
+      src: url(OpenSans.ttf) format('truetype');
+    }
+
+    .foo {
+      font-family: Font Awesome\ 5 Free;
+    }
+    .bar {
+      /* The bareword version doesn't work due to /~https://github.com/bramstein/css-font-parser/issues/6 */
+      font: 12px 'Font Awesome 5 Free';
+    }
+  </style>
+</head>
+<body>
+  <div class="foo">Hello!</div>
+  <div class="bar">World!</div>
+</body>
+</html>