🐛 calculate embedded size correctly on duplicate embeds

Author: Bart Veneman

src/__fixtures__/bol-com-20190617.json

@@ -42,8 +42,8 @@
       },
       "uniquenessRatio": 0.6666666666666666,
       "size": {
-        "total": 33224,
-        "ratio": 0.07099069454386171
+        "total": 37768,
+        "ratio": 0.08069999252144743
       },
       "types": {
         "total": 42,

src/__fixtures__/bootstrap-5.0.0.json

@@ -30,8 +30,8 @@
       },
       "uniquenessRatio": 0.8,
       "size": {
-        "total": 3473,
-        "ratio": 0.01784136443028871
+        "total": 4439,
+        "ratio": 0.02280386314599815
       },
       "types": {
         "total": 20,

src/__fixtures__/github-20210501.json

@@ -19,8 +19,8 @@
       },
       "uniquenessRatio": 0.7142857142857143,
       "size": {
-        "total": 1198,
-        "ratio": 0.002329905247926812
+        "total": 2050,
+        "ratio": 0.0039868996312604045
       },
       "types": {
         "total": 7,

src/__fixtures__/smashing-magazine-20190319.json

@@ -36,8 +36,8 @@
       },
       "uniquenessRatio": 0.34375,
       "size": {
-        "total": 14286,
-        "ratio": 0.012947817197050442
+        "total": 37316,
+        "ratio": 0.0338205758452425
       },
       "types": {
         "total": 64,

src/__fixtures__/trello-20190617.json

@@ -16,8 +16,8 @@
       },
       "uniquenessRatio": 0.5,
       "size": {
-        "total": 478,
-        "ratio": 0.0015342789370464168
+        "total": 956,
+        "ratio": 0.0030685578740928337
       },
       "types": {
         "total": 4,

src/index.js

@@ -43,6 +43,7 @@ const analyze = (css) => {
   let totalComments = 0
   let commentsSize = 0
   const embeds = new CountableCollection()
+  let embedSize = 0
   const embedTypes = {
     total: 0,
     totalUnique: 0,
@@ -275,6 +276,7 @@ const analyze = (css) => {
           var type = getEmbedType(embed)
 
           embedTypes.total++
+          embedSize += size
 
           if (type in embedTypes.unique) {
             embedTypes.unique[type].count++
@@ -467,7 +469,6 @@ const analyze = (css) => {
   })
 
   const embeddedContent = embeds.count()
-  const embedSize = Object.keys(embeddedContent.unique).join('').length
 
   const totalUniqueDeclarations = uniqueDeclarations.size
 

src/stylesheet/stylesheet.test.js

@@ -138,6 +138,47 @@ Stylesheet('measures base64 contents', () => {
   assert.equal(actual, expected)
 })
 
+Stylesheet('reports embed size correctly when there are duplicates', () => {
+  const fixture = `
+    /* Demo from https://codepen.io/chriscoyier/pen/ZQgvyG/ */
+    .chevron-down {
+      background: url(data:image/svg+xml,%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20195.6%20107.8%22%3E%3Cpath%20fill%3D%22%23B5B5B5%22%20class%3D%22st0%22%20d%3D%22M97.8%20107.8c-2.6%200-5.1-1-7.1-2.9L2.9%2017.1C-1%2013.2-1%206.8%202.9%202.9%206.8-1%2013.2-1%2017.1%202.9l80.7%2080.7%2080.7-80.7c3.9-3.9%2010.2-3.9%2014.1%200%203.9%203.9%203.9%2010.2%200%2014.1l-87.8%2087.8c-1.9%202-4.4%203-7%203z%22%2F%3E%3C%2Fsvg%3E);
+    }
+    .chevron-up {
+      background: url(data:image/svg+xml,%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20195.6%20107.8%22%3E%3Cpath%20fill%3D%22%23B5B5B5%22%20class%3D%22st0%22%20d%3D%22M97.8%20107.8c-2.6%200-5.1-1-7.1-2.9L2.9%2017.1C-1%2013.2-1%206.8%202.9%202.9%206.8-1%2013.2-1%2017.1%202.9l80.7%2080.7%2080.7-80.7c3.9-3.9%2010.2-3.9%2014.1%200%203.9%203.9%203.9%2010.2%200%2014.1l-87.8%2087.8c-1.9%202-4.4%203-7%203z%22%2F%3E%3C%2Fsvg%3E);
+      transform: rotate(.5turn);
+    }
+  `
+
+  const actual = analyze(fixture).stylesheet.embeddedContent
+  const expected = {
+    total: 2,
+    totalUnique: 1,
+    unique: {
+      // .length == 459
+      'data:image/svg+xml,%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20195.6%20107.8%22%3E%3Cpath%20fill%3D%22%23B5B5B5%22%20class%3D%22st0%22%20d%3D%22M97.8%20107.8c-2.6%200-5.1-1-7.1-2.9L2.9%2017.1C-1%2013.2-1%206.8%202.9%202.9%206.8-1%2013.2-1%2017.1%202.9l80.7%2080.7%2080.7-80.7c3.9-3.9%2010.2-3.9%2014.1%200%203.9%203.9%203.9%2010.2%200%2014.1l-87.8%2087.8c-1.9%202-4.4%203-7%203z%22%2F%3E%3C%2Fsvg%3E': 2,
+    },
+    uniquenessRatio: 1 / 2,
+    size: {
+      total: 918,
+      ratio: 0.8218442256042973,
+    },
+    types: {
+      total: 2,
+      totalUnique: 1,
+      uniquenessRatio: 1 / 2,
+      unique: {
+        'image/svg+xml': {
+          count: 2,
+          size: 918,
+        },
+      },
+    }
+  }
+
+  assert.equal(actual, expected)
+})
+
 Stylesheet('correctly extracts embed types', () => {
   ;[
     ['test', 'data:test;nothing-to-see-here'],