@projectwallace/css-analyzer 4.0.3 → 5.0.1

package/src/analyzer/values/animations.js

@@ -1,122 +0,0 @@
-const {parse} = require('postcss-values-parser')
-const splitValue = require('split-css-value')
-const {sortFn: timeSortFn} = require('css-time-sort')
-const uniquer = require('../../utils/uniquer')
-const {KEYWORDS} = require('../../utils/css')
-
-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,
-    timeSortFn
-  )
-
-  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
-    }
-  }
-}

package/src/analyzer/values/box-shadows.js

@@ -1,17 +0,0 @@
-const uniquer = require('../../utils/uniquer')
-const {KEYWORDS} = require('../../utils/css')
-
-module.exports = declarations => {
-  const all = declarations
-    .filter(({property}) => property === 'box-shadow')
-    .filter(({value}) => !KEYWORDS.includes(value))
-    .map(declaration => declaration.value)
-
-  const {unique, totalUnique} = uniquer(all)
-
-  return {
-    total: all.length,
-    unique,
-    totalUnique
-  }
-}

package/src/analyzer/values/browserhacks.js

@@ -1,16 +0,0 @@
-const isBrowserHack = require('css-value-browser-h4cks-analyzer')
-const uniquer = require('../../utils/uniquer')
-
-module.exports = declarations => {
-  const all = declarations
-    .filter(declaration => isBrowserHack(declaration.value))
-    .map(declaration => declaration.value)
-
-  const {unique, totalUnique} = uniquer(all)
-
-  return {
-    total: all.length,
-    unique,
-    totalUnique
-  }
-}

package/src/analyzer/values/colors.js

@@ -1,137 +0,0 @@
-const {parse} = require('postcss-values-parser')
-const tinycolor = require('tinycolor2')
-const colorSorter = require('color-sorter')
-
-const uniquer = require('../../utils/uniquer')
-
-function extractColorsFromDeclaration(declaration) {
-  const colors = []
-
-  // Try-catch to ignore values that cannot be parsed with postcss-values-parser
-  // Examples:
-  // - Base64-encoded images
-  // - startColorstr=\'#5243AA\', endColorstr=\'#0079bf\', GradientType=1
-  // - opacity=50
-  // - 1.5deg
-  try {
-    parse(declaration.value, {loose: true}).walk(node => {
-      if (node.isColor) {
-        return colors.push(node)
-      }
-    })
-  } catch (_) {}
-
-  if (colors.length > 0) {
-    declaration.colors = colors.map(color => color.toString().trim())
-  }
-
-  return declaration
-}
-
-const addCount = color => {
-  return {
-    ...color,
-    count: color.notations.reduce((total, {count}) => {
-      return total + count
-    }, 0)
-  }
-}
-
-const addMostCommonNotation = color => {
-  return {
-    ...color,
-    value: [...color.notations]
-      .sort((a, b) => {
-        // If counts are the same, get the shortest notation
-        if (a.count === b.count) {
-          return a.value.length - b.value.length
-        }
-
-        return b.count - a.count
-      })
-      .shift().value
-  }
-}
-
-const addNotations = (acc, curr) => {
-  if (!acc[curr.normalized]) {
-    acc[curr.normalized] = {
-      notations: []
-    }
-  }
-
-  acc[curr.normalized] = {
-    notations: [...acc[curr.normalized].notations, curr]
-  }
-
-  return acc
-}
-
-const filterDuplicateColors = color => {
-  // Filter out the actual duplicate colors
-  return color.notations.length > 1
-}
-
-const validateColor = color => {
-  return tinycolor(color.value).isValid()
-}
-
-const normalizeColors = color => {
-  // Add a normalized value
-
-  // Avoid using TinyColor's toHslString() because it rounds
-  // the numbers and incorrectly reports duplicates
-  const {h, s, l, a} = tinycolor(color.value).toHsl()
-  const normalized = a === 0 ? 0 : `h${h}s${s}l${l}a${a}`
-
-  return {
-    ...color,
-    normalized
-  }
-}
-
-const removeTemporaryProperties = color => {
-  // Remove temporary props that were needed for analysis
-  return {
-    ...color,
-    notations: color.notations.map(notation => {
-      const {normalized, ...colorProps} = notation
-      return colorProps
-    })
-  }
-}
-
-const withDuplicateNotations = colors =>
-  Object.values(
-    colors
-      .filter(validateColor)
-      .map(normalizeColors)
-      .reduce(addNotations, {})
-  )
-    .filter(filterDuplicateColors)
-    .map(addCount)
-    .map(addMostCommonNotation)
-    .map(removeTemporaryProperties)
-
-module.exports = declarations => {
-  const all = declarations
-    .map(extractColorsFromDeclaration)
-    .filter(declaration => declaration.colors && declaration.colors.length > 0)
-    .map(declaration => declaration.colors)
-    .reduce((allColors, declarationColors) => {
-      return [...allColors, ...declarationColors]
-    }, [])
-  const {totalUnique, unique} = uniquer(all, colorSorter.sortFn)
-  const duplicates = withDuplicateNotations(unique)
-
-  return {
-    total: all.length,
-    unique,
-    totalUnique,
-    duplicates: {
-      unique: duplicates,
-      totalUnique: duplicates.length,
-      total: duplicates.length
-    }
-  }
-}

package/src/analyzer/values/font-families.js

@@ -1,30 +0,0 @@
-const expand = require('css-shorthand-expand')
-const uniquer = require('../../utils/uniquer')
-const {KEYWORDS} = require('../../utils/css')
-
-module.exports = declarations => {
-  const all = declarations.reduce((previous, {property, value}) => {
-    if (KEYWORDS.includes(value)) {
-      return previous
-    }
-
-    if (property === 'font-family') {
-      previous = [...previous, value]
-    }
-
-    if (property === 'font') {
-      const expanded = expand('font', value)
-
-      if (expanded) {
-        previous = [...previous, expanded['font-family']]
-      }
-    }
-
-    return previous
-  }, [])
-
-  return {
-    total: all.length,
-    ...uniquer(all)
-  }
-}

package/src/analyzer/values/font-sizes.js

@@ -1,31 +0,0 @@
-const expand = require('css-shorthand-expand')
-const unitSort = require('css-unit-sort')
-const uniquer = require('../../utils/uniquer')
-const {KEYWORDS} = require('../../utils/css')
-
-module.exports = declarations => {
-  const all = declarations.reduce((previous, {property, value}) => {
-    if (KEYWORDS.includes(value)) {
-      return previous
-    }
-
-    if (property === 'font-size') {
-      previous = [...previous, value]
-    }
-
-    if (property === 'font') {
-      const expanded = expand('font', value)
-
-      if (expanded) {
-        previous = [...previous, expanded['font-size']]
-      }
-    }
-
-    return previous
-  }, [])
-
-  return {
-    total: all.length,
-    ...uniquer(all, unitSort.sortFn)
-  }
-}

package/src/analyzer/values/index.js

@@ -1,26 +0,0 @@
-module.exports = declarations => {
-  const all = declarations.map(({value}) => value)
-
-  const prefixed = require('./prefixed.js')(all)
-  const fontsizes = require('./font-sizes.js')(declarations)
-  const fontfamilies = require('./font-families.js')(declarations)
-  const colors = require('./colors.js')(declarations)
-  const browserhacks = require('./browserhacks.js')(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,
-    prefixed,
-    fontsizes,
-    fontfamilies,
-    colors,
-    browserhacks,
-    boxshadows,
-    textshadows,
-    zindexes,
-    animations
-  }
-}

package/src/analyzer/values/prefixed.js

@@ -1,22 +0,0 @@
-const vendorPrefixes = require('vendor-prefixes')()
-const uniquer = require('../../utils/uniquer')
-
-const PREFIX_REGEX = new RegExp(`^${vendorPrefixes.join('|')}`)
-
-module.exports = values => {
-  const all = values.filter(property => PREFIX_REGEX.test(property))
-
-  const share = (() => {
-    if (values.length === 0) {
-      return 0
-    }
-
-    return all.length / values.length
-  })()
-
-  return {
-    total: all.length,
-    ...uniquer(all),
-    share
-  }
-}

package/src/analyzer/values/text-shadows.js

@@ -1,17 +0,0 @@
-const uniquer = require('../../utils/uniquer')
-const {KEYWORDS} = require('../../utils/css')
-
-module.exports = declarations => {
-  const all = declarations
-    .filter(({property}) => property === 'text-shadow')
-    .filter(({value}) => !KEYWORDS.includes(value))
-    .map(declaration => declaration.value)
-
-  const {unique, totalUnique} = uniquer(all)
-
-  return {
-    total: all.length,
-    unique,
-    totalUnique
-  }
-}

package/src/analyzer/values/z-indexes.js

@@ -1,20 +0,0 @@
-const uniquer = require('../../utils/uniquer')
-const {KEYWORDS} = require('../../utils/css')
-
-module.exports = declarations => {
-  const all = declarations
-    // Ignore all declarations that are not z-index
-    .filter(({property}) => property === 'z-index')
-    // Ignore all CSS keywords and globals
-    .filter(({value}) => !KEYWORDS.includes(value))
-    // Create a list of integers
-    .map(({value}) => parseInt(value, 10))
-
-  const {unique, totalUnique} = uniquer(all, (a, b) => a - b)
-
-  return {
-    total: all.length,
-    unique,
-    totalUnique
-  }
-}

package/src/parser/atrules.js

@@ -1,37 +0,0 @@
-const declarations = require('./declarations')
-
-const AT_RULES_WITH_DECLARATIONS = ['font-face']
-
-function addDeclarations(atRule, tree) {
-  if (!AT_RULES_WITH_DECLARATIONS.includes(atRule.type)) {
-    return atRule
-  }
-
-  return {
-    ...atRule,
-    declarations: declarations(tree)
-  }
-}
-
-module.exports = tree => {
-  const atRules = []
-
-  tree.walkAtRules(rule => {
-    const atRule = {
-      type: rule.name.trim(),
-      params: rule.params.trim()
-    }
-
-    return atRules.push(addDeclarations(atRule, rule))
-  })
-
-  return atRules
-}
-
-module.exports.isKeyframes = rule => {
-  return (
-    rule.parent &&
-    rule.parent.type === 'atrule' &&
-    rule.parent.name.includes('keyframes')
-  )
-}

package/src/parser/declarations.js

@@ -1,15 +0,0 @@
-module.exports = tree => {
-  const declarations = []
-
-  tree.walkDecls(declaration => {
-    declarations.push({
-      // Need to prefix with the 'before', otherwise PostCSS will
-      // trim off any browser hacks prefixes like * or _
-      property: declaration.raws.before.trim() + declaration.prop,
-      value: declaration.value,
-      important: Boolean(declaration.important)
-    })
-  })
-
-  return declarations
-}

package/src/parser/index.js

@@ -1,30 +0,0 @@
-const {parse} = require('postcss')
-const atRules = require('./atrules')
-const rules = require('./rules')
-const selectors = require('./selectors')
-const declarations = require('./declarations')
-
-function processNodes(tree) {
-  return {
-    atRules: atRules(tree),
-    rules: rules(tree),
-    selectors: selectors(tree),
-    declarations: declarations(tree)
-  }
-}
-
-module.exports = async css => {
-  try {
-    const result = await parse(css)
-    const rootNode = result.toResult().root
-
-    return Promise.resolve(processNodes(rootNode))
-  } catch (error) {
-    const {line, column, reason, source} = error
-    const message = source && line && reason && column
-      ? `${reason} at line ${line}, column ${column}:\n\n${source}`
-      : error.message
-
-    return Promise.reject(new SyntaxError(message))
-  }
-}

package/src/parser/rules.js

@@ -1,17 +0,0 @@
-const {isKeyframes} = require('./atrules')
-const getDeclarationsFromRule = require('./declarations')
-const {getSelectorsFromRule} = require('./selectors')
-
-module.exports = tree => {
-  const rules = []
-
-  tree.walkRules(rule => {
-    const declarations = getDeclarationsFromRule(rule)
-    // Don't include the 'selectors' (from, 50%, to, etc.) inside @keyframes
-    const selectors = isKeyframes(rule) ? [] : getSelectorsFromRule(rule)
-
-    rules.push({declarations, selectors})
-  })
-
-  return rules
-}

package/src/parser/selectors.js

@@ -1,26 +0,0 @@
-const {isKeyframes} = require('./atrules')
-
-module.exports = tree => {
-  const selectors = []
-
-  tree.walkRules(rule => {
-    // Don't include the 'selectors' (from, 50%, to, etc.) inside @keyframes
-    if (isKeyframes(rule)) {
-      return
-    }
-
-    // Get selectors: flatten the list, split each by ',' and trim the results
-    selectors.push(...getSelectorsFromRule(rule))
-  })
-
-  return selectors
-}
-
-const getSelectorsFromRule = rule => {
-  return rule.selector
-    .split(',')
-    .map(s => s.trim())
-    .filter(Boolean)
-}
-
-module.exports.getSelectorsFromRule = getSelectorsFromRule

package/src/utils/css.js

@@ -1,8 +0,0 @@
-module.exports.KEYWORDS = [
-  'auto',
-  'inherit',
-  'initial',
-  'none',
-  'revert',
-  'unset'
-]

package/src/utils/uniquer.js

@@ -1,24 +0,0 @@
-const stringSortFn = require('string-natural-compare')
-
-module.exports = (values, sortFn) => {
-  sortFn =
-    sortFn ||
-    function(a, b) {
-      return stringSortFn(String(a), String(b), {caseInsensitive: true})
-    }
-
-  // Create a Map of unique values and their counts
-  const reduced = [
-    ...values.reduce((map, value) => {
-      return map.set(value, map.get(value) + 1 || 1)
-    }, new Map())
-  ].map(([value, count]) => ({value, count}))
-
-  const sorted = reduced.map(element => element.value).sort(sortFn)
-  const unique = sorted.map(value => reduced.find(r => r.value === value))
-
-  return {
-    unique,
-    totalUnique: unique.length
-  }
-}