improve analysis of animations

Author: Bart Veneman

src/__fixtures__/bol-com-20190617.json

@@ -53919,19 +53919,19 @@
         "total": 126,
         "totalUnique": 15,
         "unique": {
-          "750ms": 1,
-          "250ms": 5,
-          "0s": 2,
           ".25s": 70,
           "2s": 1,
           "1s": 4,
           "1.4s": 2,
           ".15s": 17,
           ".3s": 9,
           ".5s": 7,
+          "750ms": 1,
           ".2s": 2,
           "330ms": 1,
           "130ms": 2,
+          "250ms": 5,
+          "0s": 2,
           ".4s": 1,
           "200ms": 2
         },
@@ -53941,18 +53941,18 @@
         "total": 118,
         "totalUnique": 12,
         "unique": {
-          "linear": 6,
-          "cubic-bezier(0,1,0,1)": 4,
-          "cubic-bezier(1,0,1,0)": 5,
-          "cubic-bezier(.4,0,.6,1)": 3,
-          "cubic-bezier(0,0,.2,1)": 2,
           "ease-out": 5,
+          "linear": 6,
           "steps(8)": 1,
           "ease-in-out": 19,
           "ease-in": 66,
           "cubic-bezier(.175,.885,.32,1.275)": 2,
           "ease": 4,
-          "cubic-bezier(0,0,.3,1)": 1
+          "cubic-bezier(0,1,0,1)": 4,
+          "cubic-bezier(1,0,1,0)": 5,
+          "cubic-bezier(0,0,.3,1)": 1,
+          "cubic-bezier(.4,0,.6,1)": 3,
+          "cubic-bezier(0,0,.2,1)": 2
         },
         "uniquenessRatio": 0.1016949152542373
       }

src/__fixtures__/bootstrap-5.0.0.json

@@ -22788,7 +22788,6 @@
         "total": 64,
         "totalUnique": 10,
         "unique": {
-          "1.5s": 2,
           "0.15s": 46,
           "0.1s": 2,
           "0.35s": 1,
@@ -22797,7 +22796,8 @@
           "1s": 2,
           "0.3s": 2,
           "0s": 1,
-          "0.75s": 4
+          "0.75s": 4,
+          "1.5s": 2
         },
         "uniquenessRatio": 0.15625
       },

src/__fixtures__/cnn-20220403.json

@@ -143983,14 +143983,11 @@
         "total": 652,
         "totalUnique": 30,
         "unique": {
-          "1s": 29,
-          ".1s": 20,
-          "175ms": 4,
-          "0.1s": 9,
-          "400ms": 1,
           ".2s": 112,
+          "1s": 29,
           ".5s": 34,
           ".4s": 103,
+          ".1s": 20,
           ".3s": 108,
           ".7s": 6,
           "0s": 18,
@@ -144000,17 +143997,20 @@
           "0.5s": 18,
           "0.25s": 7,
           ".6s": 8,
+          "175ms": 4,
           ".15s": 9,
           "75ms": 4,
           "1915ms": 3,
           "2098ms": 3,
           "2.13s": 3,
           ".07s": 2,
           "0.2s": 36,
+          "0.1s": 9,
           "0.3s": 32,
           "0.7s": 2,
           "0.6s": 2,
           "0.15s": 1,
+          "400ms": 1,
           "300ms": 3,
           "150ms": 1
         },
@@ -144020,12 +144020,12 @@
         "total": 327,
         "totalUnique": 7,
         "unique": {
-          "linear": 30,
-          "cubic-bezier(.2,.9,.3,1.1)": 3,
-          "cubic-bezier(0.2, 0.9, 0.3, 1.1)": 1,
           "ease-in-out": 47,
           "ease": 195,
+          "linear": 30,
+          "cubic-bezier(.2,.9,.3,1.1)": 3,
           "ease-out": 45,
+          "cubic-bezier(0.2, 0.9, 0.3, 1.1)": 1,
           "ease-in": 6
         },
         "uniquenessRatio": 0.021406727828746176

src/__fixtures__/facebook-20190319.json

@@ -37013,24 +37013,24 @@
         "totalUnique": 22,
         "unique": {
           "200ms": 13,
-          ".7s": 1,
-          "1s": 4,
-          "16s": 1,
-          ".5s": 7,
-          "5s": 1,
-          "4s": 1,
-          "2000ms": 1,
-          "2s": 1,
-          "250ms": 3,
           ".3s": 3,
           "1.5s": 1,
           "50ms": 1,
+          ".7s": 1,
+          "1s": 4,
+          ".5s": 7,
           ".25s": 2,
+          "250ms": 3,
           "1.2s": 3,
           "100ms": 2,
           ".2s": 1,
           "150ms": 4,
           "300ms": 4,
+          "16s": 1,
+          "5s": 1,
+          "4s": 1,
+          "2000ms": 1,
+          "2s": 1,
           ".1s": 1,
           "1ms": 1,
           "550ms": 1
@@ -37041,22 +37041,22 @@
         "total": 50,
         "totalUnique": 17,
         "unique": {
+          "cubic-bezier(.08,.52,.52,1)": 5,
+          "ease-in-out": 8,
           "ease": 10,
           "linear": 5,
-          "cubic-bezier(.895, .03, .685, .22)": 2,
-          "cubic-bezier(.165, .84, .44, 1)": 2,
           "ease-out": 8,
-          "cubic-bezier(.5, 0, .5, 1)": 1,
-          "steps(60, end)": 1,
-          "steps(4, start)": 1,
-          "ease-in-out": 8,
-          "var(--fds-soft)": 1,
-          "cubic-bezier(.08,.52,.52,1)": 5,
           "steps(20, end)": 1,
           "cubic-bezier(.19, 1, .22, 1)": 1,
           "cubic-bezier(.23, 1, .32, 1)": 1,
           "cubic-bezier(.08, .52, .52, 1)": 1,
           "ease-in": 1,
+          "cubic-bezier(.895, .03, .685, .22)": 2,
+          "cubic-bezier(.165, .84, .44, 1)": 2,
+          "cubic-bezier(.5, 0, .5, 1)": 1,
+          "steps(60, end)": 1,
+          "steps(4, start)": 1,
+          "var(--fds-soft)": 1,
           "cubic-bezier(.1, .7, .1, 1)": 1
         },
         "uniquenessRatio": 0.34

src/__fixtures__/gazelle-20210905.json

@@ -88384,7 +88384,6 @@
         "total": 392,
         "totalUnique": 34,
         "unique": {
-          ".35s": 3,
           "0.3s": 37,
           "250ms": 19,
           ".75s": 1,
@@ -88410,6 +88409,7 @@
           "0.1s": 3,
           "1400ms": 7,
           ".15s": 9,
+          ".35s": 3,
           "2s": 3,
           "0.15s": 3,
           "0.35s": 1,
@@ -88425,11 +88425,11 @@
         "total": 285,
         "totalUnique": 8,
         "unique": {
-          "ease": 132,
           "ease-out": 7,
           "ease-in-out": 79,
           "linear": 32,
           "cubic-bezier(.25, .1, .25, 1)": 19,
+          "ease": 132,
           "steps(4, end)": 7,
           "cubic-bezier(0.25, 0.8, 0.25, 1)": 8,
           "cubic-bezier(0.4, 0, 0.2, 1)": 1

src/__fixtures__/github-20210501.json

@@ -33549,16 +33549,16 @@
         "total": 31,
         "totalUnique": 13,
         "unique": {
+          ".2s": 4,
           ".1s\n": 3,
+          ".12s": 1,
           ".1s": 1,
           "1s": 3,
           ".3s\n": 2,
           ".3s": 5,
           ".15s": 1,
           "2s": 1,
           ".5s\n": 1,
-          ".2s": 4,
-          ".12s": 1,
           "1.06s": 2,
           "3s": 1,
           ".4s": 6
@@ -33569,16 +33569,16 @@
         "total": 19,
         "totalUnique": 12,
         "unique": {
+          "cubic-bezier(.3, 0, .5, 1)": 3,
+          "ease-out": 2,
           "ease-in": 1,
           "ease-in-out\n": 1,
           "ease-out\n": 1,
-          "ease-out": 2,
           "ease-in\n": 1,
           "ease": 1,
           "ease-in-out": 2,
           "cubic-bezier(.2, 0, .13, 1.5)\n": 1,
           "linear": 2,
-          "cubic-bezier(.3, 0, .5, 1)": 3,
           "steps(1)": 2,
           "cubic-bezier(.73, .005, .22, 1)": 2
         },

src/__fixtures__/lego-20190617.json

@@ -21160,17 +21160,17 @@
         "totalUnique": 13,
         "unique": {
           "0": 2,
-          "400ms": 1,
-          ".3s": 7,
-          ".15s": 8,
-          ".5s,.4s": 2,
           ".2s": 7,
-          ".1s": 2,
           "150ms": 7,
+          "400ms": 1,
           "0s": 10,
           "100ms": 1,
           "300ms": 4,
+          ".3s": 7,
           "2s": 2,
+          ".15s": 8,
+          ".5s,.4s": 2,
+          ".1s": 2,
           ".5s": 2
         },
         "uniquenessRatio": 0.23636363636363636
@@ -21179,9 +21179,9 @@
         "total": 36,
         "totalUnique": 4,
         "unique": {
-          "linear": 12,
-          "ease-in-out": 11,
           "ease": 7,
+          "ease-in-out": 11,
+          "linear": 12,
           "ease-out": 6
         },
         "uniquenessRatio": 0.1111111111111111

src/__fixtures__/smashing-magazine-20190319.json

@@ -90168,20 +90168,20 @@
         "total": 1467,
         "totalUnique": 20,
         "unique": {
-          ".2s": 590,
           ".1s": 280,
-          ".6s": 42,
-          "1s": 16,
-          ".4s": 134,
-          ".5s": 32,
-          ".55s": 4,
           ".3s": 225,
+          ".2s": 590,
           ".25s": 10,
+          ".4s": 134,
+          ".6s": 42,
           "2s": 4,
           "5s": 12,
+          ".5s": 32,
           ".8s": 8,
           ".15s": 16,
           "0s": 54,
+          "1s": 16,
+          ".55s": 4,
           "1.5s": 4,
           ".75s": 4,
           ".7s": 8,
@@ -90195,14 +90195,14 @@
         "total": 1093,
         "totalUnique": 10,
         "unique": {
-          "ease-in-out": 300,
-          "cubic-bezier(.67,.17,.32,.95)": 4,
           "ease-in": 32,
           "ease-out": 623,
           "cubic-bezier(.17,.67,.45,2.01)": 30,
+          "ease-in-out": 300,
           "linear": 56,
           "ease": 24,
           "cubic-bezier(.39,.575,.565,1)": 12,
+          "cubic-bezier(.67,.17,.32,.95)": 4,
           "cubic-bezier(.175,.885,.32,1.275)": 4,
           "cubic-bezier(.77,0,.175,1)": 8
         },

src/__fixtures__/trello-20190617.json

@@ -37522,9 +37522,9 @@
         "total": 34,
         "totalUnique": 3,
         "unique": {
-          "ease-out": 4,
           "ease-in-out": 24,
-          "ease": 6
+          "ease": 6,
+          "ease-out": 4
         },
         "uniquenessRatio": 0.08823529411764706
       }

src/index.js

@@ -6,7 +6,7 @@ import { colorFunctions, colorNames } from './values/colors.js'
 import { isFontFamilyKeyword, getFamilyFromFont } from './values/font-families.js'
 import { isFontSizeKeyword, getSizeFromFont } from './values/font-sizes.js'
 import { isValueKeyword } from './values/values.js'
-import { analyzeAnimations } from './values/animations.js'
+import { analyzeAnimation } from './values/animations.js'
 import { isAstVendorPrefixed } from './values/vendor-prefix.js'
 import { analyzeAtRules } from './atrules/atrules.js'
 import { ContextCollection } from './context-collection.js'
@@ -105,9 +105,8 @@ const analyze = (css) => {
   const boxShadows = new CountableCollection()
   const fontFamilies = new CountableCollection()
   const fontSizes = new CountableCollection()
-  const animations = []
-  const timingFunctions = []
-  const durations = []
+  const timingFunctions = new CountableCollection()
+  const durations = new CountableCollection()
   const colors = new ContextCollection()
   const units = new ContextCollection()
 
@@ -257,7 +256,13 @@ const analyze = (css) => {
           }
           break
         } else if (isProperty('transition', property) || isProperty('animation', property)) {
-          animations.push(node.children)
+          const [times, fns] = analyzeAnimation(node.children, stringifyNode)
+          for (let i = 0; i < times.length; i++) {
+            durations.push(times[i])
+          }
+          for (let i = 0; i < fns.length; i++) {
+            timingFunctions.push(fns[i])
+          }
           break
         } else if (isProperty('animation-duration', property) || isProperty('transition-duration', property)) {
           durations.push(stringifyNode(node))
@@ -451,7 +456,10 @@ const analyze = (css) => {
       zindexes: zindex.count(),
       textShadows: textShadows.count(),
       boxShadows: boxShadows.count(),
-      animations: analyzeAnimations({ animations, timingFunctions, durations, stringifyNode }),
+      animations: {
+        durations: durations.count(),
+        timingFunctions: timingFunctions.count(),
+      },
       prefixes: vendorPrefixedValues.count(),
       units: units.count(),
     },