add animations report (#159)

Author: bartveneman

package-lock.json

@@ -70,6 +70,7 @@
     "postcss": "^7.0.17",
     "postcss-values-parser": "^3.0.5",
     "specificity": "^0.4.1",
+    "split-css-value": "^0.1.1",
     "split-lines": "^2.0.0",
     "string-natural-compare": "^2.0.3",
     "tinycolor2": "^1.4.1",

package.json

@@ -29,7 +29,7 @@ yarn add @projectwallace/css-analyzer
 ## Usage
 
 ```js
-const analyze = require('css-analyzer');
+const analyze = require('@projectwallace/css-analyzer');
 
 analyze('foo{}')
   .then(result => console.log(result))
@@ -144,6 +144,12 @@ analyze('foo{}')
 //   'stylesheets.size': 5,
 //   'stylesheets.browserhacks.total': 0,
 //   'stylesheets.browserhacks.totalUnique': 0,
+//   'values.animations.durations.total': 0,
+//   'values.animations.durations.totalUnique': 0,
+//   'values.animations.durations.unique': [],
+//   'values.animations.timingFunctions.total': 0,
+//   'values.animations.timingFunctions.totalUnique': 0,
+//   'values.animations.timingFunctions.unique': [],
 //   'values.boxshadows.total': 0,
 //   'values.boxshadows.unique': [],
 //   'values.boxshadows.totalUnique': 0,

readme.md

@@ -0,0 +1,122 @@
+const {parse} = require('postcss-values-parser')
+const splitValue = require('split-css-value')
+const uniquer = require('../../utils/uniquer')
+const {KEYWORDS} = require('../../utils/css')
+const durationSort = require('../../utils/duration-sort')
+
+function getSingleDuration(animation) {
+  let duration
+
+  parse(animation).walkNumerics(node => {
+    // The first time-value is always the duration, as per spec
+    if (duration) {
+      return
+    }
+
+    duration = node.toString()
+  })
+
+  return duration
+}
+
+function getDuration(animation) {
+  return splitValue(animation)
+    .map(animation => getSingleDuration(animation))
+    .filter(Boolean)
+}
+
+function getSingleTimingFunction(animation) {
+  let timingFunction
+
+  parse(animation).walk(node => {
+    // There should only be one timing function per shorthand
+    if (timingFunction) {
+      return
+    }
+
+    // Look for timing keywords
+    if (
+      node.type === 'word' &&
+      [
+        'ease',
+        'ease-in',
+        'ease-in-out',
+        'ease-out',
+        'linear',
+        'step-start',
+        'step-end'
+      ].includes(node.toString())
+    ) {
+      timingFunction = node.toString()
+      return
+    }
+
+    // If there's no keyword, it should either be cubic-bezier() or steps()
+    if (node.type === 'func' && ['cubic-bezier', 'steps'].includes(node.name)) {
+      timingFunction = node.toString()
+    }
+  })
+
+  return timingFunction
+}
+
+function getTimingFunction(animation) {
+  return splitValue(animation)
+    .map(animation => getSingleTimingFunction(animation))
+    .filter(Boolean)
+}
+
+module.exports = declarations => {
+  const all = declarations.filter(({value}) => !KEYWORDS.includes(value))
+
+  const durations = all
+    // First, find all durations directly
+    .filter(({property}) =>
+      ['animation-duration', 'transition-duration'].includes(property)
+    )
+    .map(declaration => declaration.value)
+    // Then, find more through the shorthand declarations
+    .concat(
+      ...all
+        .filter(({property}) => ['animation', 'transition'].includes(property))
+        .map(({value}) => getDuration(value))
+    )
+
+  const {unique: uniqueDurations, totalUnique: totalUniqueDurations} = uniquer(
+    durations,
+    durationSort
+  )
+
+  const timingFunctions = all
+    // First, find all timing-functions directly
+    .filter(({property}) =>
+      ['animation-timing-function', 'transition-timing-function'].includes(
+        property
+      )
+    )
+    .map(declaration => declaration.value)
+    // Then, find more through the shorthand declarations
+    .concat(
+      ...all
+        .filter(({property}) => ['animation', 'transition'].includes(property))
+        .map(({value}) => getTimingFunction(value))
+    )
+
+  const {
+    unique: uniqueTimingFunctions,
+    totalUnique: totalUniqueTimingFunctions
+  } = uniquer(timingFunctions)
+
+  return {
+    durations: {
+      total: durations.length,
+      unique: uniqueDurations,
+      totalUnique: totalUniqueDurations
+    },
+    timingFunctions: {
+      total: timingFunctions.length,
+      unique: uniqueTimingFunctions,
+      totalUnique: totalUniqueTimingFunctions
+    }
+  }
+}

src/analyzer/values/animations.js

@@ -9,6 +9,7 @@ module.exports = declarations => {
   const boxshadows = require('./box-shadows.js')(declarations)
   const textshadows = require('./text-shadows.js')(declarations)
   const zindexes = require('./z-indexes.js')(declarations)
+  const animations = require('./animations.js')(declarations)
 
   return {
     total: all.length,
@@ -19,6 +20,7 @@ module.exports = declarations => {
     browserhacks,
     boxshadows,
     textshadows,
-    zindexes
+    zindexes,
+    animations
   }
 }

src/analyzer/values/index.js

@@ -0,0 +1,20 @@
+function durationToSeconds(duration) {
+  if (/\d+ms$/.test(duration)) {
+    return parseInt(duration, 10) / 1000
+  }
+
+  // Complicated workaround for parseInt '0.002s' => 0
+  duration = duration.replace(/s|ms/, '') * 1000
+  return parseInt(duration, 10) / 1000
+}
+
+module.exports = (a, b) => {
+  const A = durationToSeconds(a)
+  const B = durationToSeconds(b)
+
+  if (A === B) {
+    return a.endsWith('ms') ? -1 : 1
+  }
+
+  return A - B
+}

src/utils/duration-sort.js

@@ -131,6 +131,12 @@ test('it returns the correct analysis object structure', async t => {
     'stylesheets.size': 5,
     'stylesheets.browserhacks.total': 0,
     'stylesheets.browserhacks.totalUnique': 0,
+    'values.animations.durations.total': 0,
+    'values.animations.durations.totalUnique': 0,
+    'values.animations.durations.unique': [],
+    'values.animations.timingFunctions.total': 0,
+    'values.animations.timingFunctions.totalUnique': 0,
+    'values.animations.timingFunctions.unique': [],
     'values.boxshadows.total': 0,
     'values.boxshadows.unique': [],
     'values.boxshadows.totalUnique': 0,