fix animation-duration in value lists, closes #322

projectwallace · Apr 25, 2023 · 8b5313d · 8b5313d
1 parent 92887eb
commit 8b5313d
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 7 deletions.
diff --git a/src/__fixtures__/lego-20190617.json b/src/__fixtures__/lego-20190617.json
@@ -23237,7 +23237,7 @@
     },
     "animations": {
       "durations": {
-        "total": 55,
+        "total": 57,
         "totalUnique": 13,
         "unique": {
           "0": 2,
@@ -23250,11 +23250,11 @@
           ".3s": 7,
           "2s": 2,
           ".15s": 8,
-          ".5s,.4s": 2,
-          ".1s": 2,
-          ".5s": 2
+          ".5s": 4,
+          ".4s": 2,
+          ".1s": 2
         },
-        "uniquenessRatio": 0.23636363636363636
+        "uniquenessRatio": 0.22807017543859648
       },
       "timingFunctions": {
         "total": 36,

diff --git a/src/index.js b/src/index.js
@@ -384,10 +384,26 @@ function analyze(css) {
           }
           break
         } else if (isProperty('animation-duration', property) || isProperty('transition-duration', property)) {
-          durations.push(stringifyNode(node))
+          if (node.children && node.children.size > 1) {
+            node.children.forEach(child => {
+              if (child.type !== 'Operator') {
+                durations.push(stringifyNode(child))
+              }
+            })
+          } else {
+            durations.push(stringifyNode(node))
+          }
           break
         } else if (isProperty('transition-timing-function', property) || isProperty('animation-timing-function', property)) {
-          timingFunctions.push(stringifyNode(node))
+          if (node.children && node.children.size > 1) {
+            node.children.forEach(child => {
+              if (child.type !== 'Operator') {
+                timingFunctions.push(stringifyNode(child))
+              }
+            })
+          } else {
+            timingFunctions.push(stringifyNode(node))
+          }
           break
         } else if (isProperty('text-shadow', property)) {
           if (!isValueKeyword(node)) {

diff --git a/src/values/animations.test.js b/src/values/animations.test.js
@@ -27,6 +27,27 @@ Animations('finds simple durations', () => {
   assert.equal(actual, expected)
 })
 
+Animations('finds duration lists', () => {
+  const fixture = `
+    durations {
+      animation-duration: 1s, 1s;
+      transition-duration: 300ms, 400ms;
+    }
+  `
+  const actual = analyze(fixture).values.animations.durations
+  const expected = {
+    total: 4,
+    totalUnique: 3,
+    unique: {
+      '1s': 2,
+      '300ms': 1,
+      '400ms': 1,
+    },
+    uniquenessRatio: 3 / 4
+  }
+  assert.equal(actual, expected)
+})
+
 Animations('finds simple timing functions', () => {
   const fixture = `
     timings {
@@ -54,6 +75,26 @@ Animations('finds simple timing functions', () => {
   assert.equal(actual, expected)
 })
 
+Animations('finds timing functions in value lists', () => {
+  const fixture = `
+    timings {
+      animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);
+    }
+  `
+  const actual = analyze(fixture).values.animations.timingFunctions
+  const expected = {
+    total: 3,
+    totalUnique: 3,
+    unique: {
+      'ease': 1,
+      'step-start': 1,
+      'cubic-bezier(0.1, 0.7, 1, 0.1)': 1,
+    },
+    uniquenessRatio: 1
+  }
+  assert.equal(actual, expected)
+})
+
 Animations('finds shorthand durations', () => {
   const fixture = `
     durations {