Adds font-face analysis

projectwallace · May 6, 2018 · dbef7ed · dbef7ed
1 parent f567f82
commit dbef7ed
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 22 deletions.
diff --git a/src/analyzer/atrules/fontfaces.js b/src/analyzer/atrules/fontfaces.js
@@ -1,9 +1,26 @@
+const uniquer = require('../../utils/uniquer')
+
 module.exports = atRules => {
   const all = atRules
     .filter(rule => rule.type === 'font-face')
-    .map(rule => rule.params)
+    .map(rule => rule.descriptors)
+
+  // Tricky bit: uniqueness will be based on the `src` of the @font-face
+  const uniqueWithCount = uniquer(
+    all.map(ff => ff.src)
+  ).uniqueWithCount.map(item => {
+    // Once we have a list of unique @font-faces,
+    // we'll map it back to the original values again
+    return {
+      count: item.count,
+      value: all.find(ff => ff.src === item.value)
+    }
+  })
 
   return {
-    total: all.length
+    total: all.length,
+    unique: uniqueWithCount.map(item => item.value),
+    totalUnique: uniqueWithCount.length,
+    uniqueWithCount
   }
 }
diff --git a/src/parser/atrules.js b/src/parser/atrules.js
@@ -1,11 +1,33 @@
+const AT_RULES_WITH_DESCRIPTORS = ['font-face']
+
+function addDescriptorsToAtRuleFromTree(atRule, tree) {
+  if (!AT_RULES_WITH_DESCRIPTORS.includes(atRule.type)) {
+    return atRule
+  }
+
+  const descriptors = {}
+  tree.walkDecls(declaration => {
+    descriptors[declaration.prop] = declaration.value
+  })
+
+  return {
+    ...atRule,
+    descriptors
+  }
+}
+
 module.exports = tree => {
   const atrules = []
 
   tree.walkAtRules(rule => {
-    atrules.push({
+    const atRule = {
       type: rule.name.trim(),
       params: rule.params.trim()
-    })
+    }
+
+    return atrules.push(
+      addDescriptorsToAtRuleFromTree(atRule, rule)
+    )
   })
 
   return atrules

diff --git a/src/utils/uniquer.js b/src/utils/uniquer.js
@@ -1,19 +1,18 @@
+function stringCompare(a, b) {
+  return a
+    .toLowerCase()
+    .localeCompare(
+      b.toLowerCase()
+    )
+}
+
 module.exports = (values, sortFn) => {
-  if (!sortFn) {
-    sortFn = (a, b) => {
-      return a
-        .toLowerCase()
-        .localeCompare(
-          b.toLowerCase()
-        )
-    }
-  }
+  sortFn = sortFn || stringCompare
 
   const reduced = Array.from(
     values.reduce((map, value) => {
       // Create a Map of unique values and their counts
-      map.set(value, map.get(value) + 1 || 1)
-      return map
+      return map.set(value, map.get(value) + 1 || 1)
     }, new Map())
   ).map(value => {
     // Create an array of [{value, count}]

diff --git a/test/analyzer/atrules/fontfaces/input.css b/test/analyzer/atrules/fontfaces/input.css
@@ -1,13 +1,53 @@
-.rule {
+.regular-rule {
     color: red
 }
 
+/**
+ * All bells and whistles
+ */
+
 @font-face {
-    /* empty */
+    font-display: swap;
+    font-family: monospace;
+    font-stretch: condensed;
+    font-style: italic;
+    font-weight: bold;
+    font-variant: no-common-ligatures proportional-nums;
+    font-feature-settings: "liga" 0;
+    font-variation-settings: "xhgt" 0.7;
+    src: local('Input Mono');
+    unicode-range: U+0025-00FF;
 }
 
+/**
+ * Intentional duplicate to test uniqueness
+ */
 @font-face {
-    font-family: monospace;
-    font-variant: normal;
-    font-weight: normal;
+    src: url('https://example.com');
+    font-family: 'Example Duplicate';
+}
+
+@font-face {
+    src: url('https://example.com');
+    font-family: 'Example Duplicate';
 }
+
+/**
+ * These examples are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#Descriptors
+ */
+
+@font-face {
+    font-family: MyHelvetica;
+    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf);
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "Bitstream Vera Serif Bold";
+    src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
+}
+
+@font-face {
+    font-family: "Open Sans";
+    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}
diff --git a/test/analyzer/atrules/fontfaces/output.json b/test/analyzer/atrules/fontfaces/output.json
@@ -1,3 +1,81 @@
 {
-  "total": 2
+  "total": 6,
+  "totalUnique": 5,
+  "unique": [
+    {
+      "font-display": "swap",
+      "font-family": "monospace",
+      "font-stretch": "condensed",
+      "font-style": "italic",
+      "font-weight": "bold",
+      "font-variant": "no-common-ligatures proportional-nums",
+      "font-feature-settings": "\"liga\" 0",
+      "font-variation-settings": "\"xhgt\" 0.7",
+      "src": "local('Input Mono')",
+      "unicode-range": "U+0025-00FF"
+    },
+    {
+      "font-family": "MyHelvetica",
+      "src": "local(\"Helvetica Neue Bold\"), local(\"HelveticaNeue-Bold\"), url(MgOpenModernaBold.ttf)",
+      "font-weight": "bold"
+    },
+    {
+      "src": "url('https://example.com')",
+      "font-family": "'Example Duplicate'"
+    },
+    {
+      "font-family": "\"Open Sans\"",
+      "src": "url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"), url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")"
+    },
+    {
+      "font-family": "\"Bitstream Vera Serif Bold\"",
+      "src": "url(\"https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf\")"
+    }
+  ],
+  "uniqueWithCount": [
+    {
+      "count": 1,
+      "value": {
+        "font-display": "swap",
+        "font-family": "monospace",
+        "font-stretch": "condensed",
+        "font-style": "italic",
+        "font-weight": "bold",
+        "font-variant": "no-common-ligatures proportional-nums",
+        "font-feature-settings": "\"liga\" 0",
+        "font-variation-settings": "\"xhgt\" 0.7",
+        "src": "local('Input Mono')",
+        "unicode-range": "U+0025-00FF"
+      }
+    },
+    {
+      "count": 1,
+      "value": {
+        "font-family": "MyHelvetica",
+        "src": "local(\"Helvetica Neue Bold\"), local(\"HelveticaNeue-Bold\"), url(MgOpenModernaBold.ttf)",
+        "font-weight": "bold"
+      }
+    },
+    {
+      "count": 2,
+      "value": {
+        "src": "url('https://example.com')",
+        "font-family": "'Example Duplicate'"
+      }
+    },
+    {
+      "count": 1,
+      "value": {
+        "font-family": "\"Open Sans\"",
+        "src": "url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"), url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\")"
+      }
+    },
+    {
+      "count": 1,
+      "value": {
+        "font-family": "\"Bitstream Vera Serif Bold\"",
+        "src": "url(\"https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf\")"
+      }
+    }
+  ]
 }
diff --git a/test/analyzer/index.js b/test/analyzer/index.js
@@ -26,7 +26,10 @@ test('Returns the correct analysis object structure', async t => {
         uniqueWithCount: []
       },
       fontfaces: {
-        total: 0
+        total: 0,
+        totalUnique: 0,
+        unique: [],
+        uniqueWithCount: []
       },
       imports: {
         total: 0,