@projectwallace/css-analyzer 5.0.0-alpha.1 → 5.0.2

package/src/index.js

@@ -1,259 +0,0 @@
-import * as csstree from 'css-tree'
-import { compareSpecificity } from './selectors/specificity.js'
-import { analyzeRules } from './rules/rules.js'
-import { analyzeColors, colorFunctions, colorNames } from './values/colors.js'
-import { analyzeFontFamilies } from './values/font-families.js'
-import { analyzeFontSizes } from './values/font-sizes.js'
-import { analyzeDeclarations } from './declarations/declarations.js'
-import { analyzeSelectors } from './selectors/selectors.js'
-import { analyzeProperties } from './properties/properties.js'
-import { analyzeValues } from './values/values.js'
-import { analyzeAnimations } from './values/animations.js'
-import { analyzeVendorPrefixes } from './values/vendor-prefix.js'
-import { analyzeAtRules } from './atrules/atrules.js'
-import { CountableCollection } from './countable-collection.js'
-import { ContextCollection } from './context-collection.js'
-
-/**
- *
- * @param {string} css
- * @returns
- */
-const analyze = (css) => {
-  const start = new Date()
-
-  // We need all lines later on when we need to stringify the AST again
-  // e.g. for Selectors
-  const lines = css.split(/\r?\n/)
-
-  /**
-   * Recreate the authored CSS from a CSSTree node
-   * @param {import('css-tree').Node} node - Node from CSSTree AST to stringify
-   * @returns {string} str - The stringified node
-   */
-  function stringifyNode(node) {
-    const start = node.loc.start
-    const end = node.loc.end
-    const lineCount = end.line - start.line
-
-    // Single-line nodes
-    if (lineCount === 0) {
-      return lines[start.line - 1].substring(start.column - 1, end.column - 1)
-    }
-
-    // Multi-line nodes
-    const value = []
-
-    for (let i = start.line; i <= end.line; i++) {
-      const line = lines[i - 1]
-      // First line
-      if (i === start.line) {
-        value.push(line.substring(start.column - 1))
-        continue
-      }
-      // Last line
-      if (i === end.line) {
-        value.push(line.substring(0, end.column - 1))
-        continue
-      }
-      // All lines in between first and last
-      value.push(line)
-    }
-
-    return value.join('\n')
-  }
-
-  const startParse = new Date()
-  let totalComments = 0
-  let commentsSize = 0
-
-  const ast = csstree.parse(css, {
-    parseAtrulePrelude: false,
-    parseCustomProperty: true, // To find font-families, colors, etc.
-    positions: true, // So we can use stringifyNode()
-    onComment: function (comment) {
-      totalComments++
-      commentsSize += comment.length
-    },
-  })
-
-  const startAnalysis = new Date()
-  const atrules = []
-  const rules = []
-  const selectors = []
-  const declarations = []
-  const properties = []
-  const values = []
-  const zindex = []
-  const textShadows = []
-  const boxShadows = []
-  const fontValues = []
-  const fontFamilyValues = []
-  const fontSizeValues = []
-  const animations = []
-  const timingFunctions = []
-  const durations = []
-  const colors = new ContextCollection()
-  const units = new ContextCollection()
-
-  csstree.walk(ast, {
-    enter: function (node) {
-      switch (node.type) {
-        case 'Atrule': {
-          atrules.push(node)
-          break
-        }
-        case 'Rule': {
-          rules.push(node)
-          break
-        }
-        case 'Selector': {
-          selectors.push({
-            ...node,
-            isKeyframeSelector: this.atrule && this.atrule.name.endsWith('keyframes')
-          })
-
-          // Avoid further walking of selectors to not mess with
-          // our specificity calculations in case of a selector
-          // with :where() or :is() that contain SelectorLists
-          // as children
-          return this.skip
-        }
-        case 'Dimension': {
-          if (!this.declaration) {
-            break
-          }
-
-          units.push(node.unit, this.declaration.property)
-
-          return this.skip
-        }
-        case 'Declaration': {
-          declarations.push({
-            ...node,
-            inKeyframe: this.atrule && this.atrule.name.endsWith('keyframes')
-          })
-
-          const { value, property } = node
-          const fullProperty = {
-            authored: property,
-            ...csstree.property(property)
-          }
-
-          properties.push(fullProperty)
-          values.push(value)
-
-          switch (fullProperty.basename) {
-            case 'z-index': {
-              zindex.push(value)
-              break
-            }
-            case 'text-shadow': {
-              textShadows.push(value)
-              break
-            }
-            case 'box-shadow': {
-              boxShadows.push(value)
-              break
-            }
-            case 'font': {
-              fontValues.push(value)
-              break
-            }
-            case 'font-family': {
-              fontFamilyValues.push(stringifyNode(value))
-              // Prevent analyzer to find color names in this property
-              return this.skip
-            }
-            case 'font-size': {
-              fontSizeValues.push(stringifyNode(value))
-              break
-            }
-            case 'transition':
-            case 'animation': {
-              animations.push(node)
-              break
-            }
-            case 'animation-duration':
-            case 'transition-duration': {
-              durations.push(value)
-              break
-            }
-            case 'transition-timing-function':
-            case 'animation-timing-function': {
-              timingFunctions.push(value)
-              break
-            }
-          }
-
-          csstree.walk(node.value, {
-            enter: function (valueNode) {
-              switch (valueNode.type) {
-                case 'Hash': {
-                  colors.push(stringifyNode(valueNode), property)
-
-                  return this.skip
-                }
-                case 'Identifier': {
-                  const { name } = valueNode
-                  // Bail out if it can't be a color name
-                  // 20 === 'lightgoldenrodyellow'.length
-                  // 3 === 'red'.length
-                  if (name.length > 20 || name.length < 3) {
-                    return this.skip
-                  }
-                  if (colorNames[name.toLowerCase()]) {
-                    colors.push(stringifyNode(valueNode), property)
-                  }
-                  return this.skip
-                }
-                case 'Function': {
-                  if (colorFunctions[valueNode.name.toLowerCase()]) {
-                    colors.push(stringifyNode(valueNode), property)
-                  }
-                  // No this.skip here intentionally,
-                  // otherwise we'll miss colors in linear-gradient() etc.
-                }
-              }
-            }
-          })
-        }
-      }
-    }
-  })
-
-  return {
-    stylesheet: {
-      sourceLinesOfCode: atrules.length + selectors.length + declarations.length,
-      linesOfCode: lines.length,
-      size: css.length,
-      comments: {
-        total: totalComments,
-        size: commentsSize,
-      },
-    },
-    atrules: analyzeAtRules({ atrules, stringifyNode }),
-    rules: analyzeRules({ rules }),
-    selectors: analyzeSelectors({ stringifyNode, selectors }),
-    declarations: analyzeDeclarations({ stringifyNode, declarations }),
-    properties: analyzeProperties({ properties }),
-    values: {
-      colors: analyzeColors({ colors }),
-      fontFamilies: analyzeFontFamilies({ stringifyNode, fontValues, fontFamilyValues }),
-      fontSizes: analyzeFontSizes({ stringifyNode, fontValues, fontSizeValues }),
-      zindexes: analyzeValues({ values: zindex, stringifyNode }),
-      textShadows: analyzeValues({ values: textShadows, stringifyNode }),
-      boxShadows: analyzeValues({ values: boxShadows, stringifyNode }),
-      animations: analyzeAnimations({ animations, timingFunctions, durations, stringifyNode }),
-      prefixes: analyzeVendorPrefixes({ values, stringifyNode }),
-      units: units.count(),
-    },
-    __meta__: {
-      parseTime: startAnalysis - startParse,
-      analyzeTime: new Date() - startAnalysis,
-      total: new Date() - start
-    }
-  }
-}
-
-export { analyze, compareSpecificity }

package/src/index.test.js

@@ -1,60 +0,0 @@
-import { suite } from 'uvu';
-import * as assert from 'uvu/assert';
-import { analyze, compareSpecificity } from './index.js'
-import { readFileSync } from 'fs'
-
-
-const fixtures = [
-  'bol-com-20190617.css',
-  'css-tricks-20190319.css',
-  'facebook-20190319.css',
-  'gazelle-20210905.css',
-  'github-20210501.css',
-  'lego-20190617.css',
-  'smashing-magazine-20190319.css',
-  'trello-20190617.css',
-].map(fileName => {
-  const css = readFileSync(`./src/__fixtures__/${fileName}`, 'utf-8')
-  return {
-    css,
-    fileName
-  }
-})
-
-const Api = suite('Public API')
-
-Api('exposes the analyze method', () => {
-  assert.is(typeof compareSpecificity, 'function')
-})
-
-Api('exposes the compareSpecificity method', () => {
-  assert.is(typeof compareSpecificity, 'function')
-})
-
-Api('does not break on CSS Syntax Errors', () => {
-  assert.not.throws(() => analyze('test, {}'))
-  assert.not.throws(() => analyze('test { color red }'))
-})
-
-Api('serializes into small objects', () => {
-  for (const { css, fileName } of fixtures) {
-    const actual = JSON.stringify(analyze(css))
-    assert.ok(
-      actual.length < css.length * 0.51,
-      `Expected serialized size to be smaller (${actual.length} serialized vs. ${css.length} raw css (${actual.length / css.length}) on ${fileName})`
-    )
-  }
-})
-
-Api('it runs fast', () => {
-  const start = Date.now()
-  for (const { css } of fixtures) {
-    analyze(css)
-  }
-  const end = Date.now()
-  const actual = end - start
-
-  assert.ok(actual < 2500, `Expected to be fast, but took ${actual}ms`)
-})
-
-Api.run()

package/src/properties/properties.js

@@ -1,48 +0,0 @@
-import { CountableCollection } from '../countable-collection.js'
-
-const analyzeProperties = ({ properties }) => {
-  const all = new CountableCollection(properties.map(p => p.authored))
-  const prefixed = new CountableCollection()
-  const hacks = new CountableCollection()
-  const customs = new CountableCollection()
-  const totalProperties = properties.length
-
-  for (let i = 0; i < totalProperties; i++) {
-    const property = properties[i]
-
-    if (property.vendor) {
-      prefixed.push(property.authored)
-      continue
-    }
-
-    if (property.hack) {
-      hacks.push(property.authored)
-      continue
-    }
-
-    if (property.custom) {
-      customs.push(property.authored)
-      continue
-    }
-  }
-
-  return {
-    ...all.count(),
-    prefixed: {
-      ...prefixed.count(),
-      ratio: prefixed.size() / totalProperties,
-    },
-    custom: {
-      ...customs.count(),
-      ratio: customs.size() / totalProperties,
-    },
-    browserhacks: {
-      ...hacks.count(),
-      ratio: hacks.size() / totalProperties,
-    }
-  }
-}
-
-export {
-  analyzeProperties
-}

package/src/properties/properties.test.js

@@ -1,138 +0,0 @@
-import { suite } from 'uvu'
-import * as assert from 'uvu/assert'
-import { analyze } from '../index.js'
-
-const Properties = suite('Properties')
-
-Properties('counts totals', () => {
-  const fixture = `
-    properties {
-      margin: 0;
-      --custom: 1;
-    }
-
-    @media print {
-      nested {
-        --custom: 2;
-      }
-    }
-  `
-  const actual = analyze(fixture).properties.total
-
-  assert.is(actual, 3)
-})
-
-Properties('calculates uniqueness', () => {
-  const fixture = `
-    properties {
-      margin: 0;
-      --custom: 1;
-    }
-
-    @media print {
-      nested {
-        --custom: 1;
-      }
-    }
-  `
-  const actual = analyze(fixture).properties
-  const expected = {
-    'margin': 1,
-    '--custom': 2,
-  }
-
-  assert.is(actual.totalUnique, 2)
-  assert.equal(actual.unique, expected)
-  assert.is(actual.uniquenessRatio, 2 / 3)
-})
-
-Properties('counts vendor prefixes', () => {
-  const fixture = `
-    prefixed {
-      border-radius: 2px;
-      -webkit-border-radius: 2px;
-      -khtml-border-radius: 2px;
-      -o-border-radius: 2px;
-    }
-
-    @media (min-width: 0) {
-      @supports (-o-border-radius: 2px) {
-        prefixed2 {
-          -o-border-radius: 4px;
-        }
-      }
-    }
-  `
-  const actual = analyze(fixture).properties.prefixed
-  const expected = {
-    '-webkit-border-radius': 1,
-    '-khtml-border-radius': 1,
-    '-o-border-radius': 2,
-  }
-
-  assert.is(actual.total, 4)
-  assert.is(actual.totalUnique, 3)
-  assert.equal(actual.unique, expected)
-  assert.is(actual.ratio, 4 / 5)
-})
-
-Properties('counts browser hacks', () => {
-  const fixture = `
-    hacks {
-      margin: 0;
-      *zoom: 1;
-    }
-
-    @media (min-width: 0) {
-      @supports (-o-border-radius: 2px) {
-        hacks2 {
-          *zoom: 1;
-        }
-      }
-    }
-  `
-  const actual = analyze(fixture).properties.browserhacks
-  const expected = {
-    '*zoom': 2
-  }
-
-  assert.is(actual.total, 2)
-  assert.is(actual.totalUnique, 1)
-  assert.equal(actual.unique, expected)
-  assert.is(actual.ratio, 2 / 3)
-})
-
-Properties('counts custom properties', () => {
-  const fixture = `
-    :root {
-      --yellow-400: yellow;
-    }
-
-    custom {
-      margin: 0;
-      --yellow-400: yellow;
-      color: var(--yellow-400);
-    }
-
-    @media (min-width: 0) {
-      @supports (-o-border-radius: 2px) {
-        custom2 {
-          --green-400: green;
-          color: var(--green-400);
-        }
-      }
-    }
-  `
-  const actual = analyze(fixture).properties.custom
-  const expected = {
-    '--yellow-400': 2,
-    '--green-400': 1,
-  }
-
-  assert.is(actual.total, 3)
-  assert.is(actual.totalUnique, 2)
-  assert.equal(actual.unique, expected)
-  assert.is(actual.ratio, 3 / 6)
-})
-
-Properties.run()

package/src/rules/rules.js

@@ -1,57 +0,0 @@
-import * as csstree from 'css-tree'
-import { AggregateCollection } from '../aggregate-collection.js'
-
-const analyzeRules = ({ rules }) => {
-  const totalRules = rules.length
-  const selectorsPerRule = new AggregateCollection(totalRules)
-  const declarationsPerRule = new AggregateCollection(totalRules)
-
-  let emptyRules = 0
-
-  for (let i = 0; i < totalRules; i++) {
-    let selectors = 0
-    let declarations = 0
-
-    csstree.walk(rules[i], {
-      enter: function (childNode) {
-        if (childNode.type === 'Selector') {
-          selectors++
-          return this.skip
-        }
-
-        if (childNode.type === 'Declaration') {
-          declarations++
-          return this.skip
-        }
-      }
-    })
-
-    if (declarations === 0) {
-      emptyRules++
-    }
-
-    // For later aggregations
-    selectorsPerRule.add(selectors)
-    declarationsPerRule.add(declarations)
-  }
-
-  return {
-    total: totalRules,
-    empty: {
-      total: emptyRules,
-      ratio: emptyRules / totalRules
-    },
-    selectors: {
-      ...selectorsPerRule.aggregate(),
-      items: selectorsPerRule.toArray(),
-    },
-    declarations: {
-      ...declarationsPerRule.aggregate(),
-      items: declarationsPerRule.toArray()
-    },
-  }
-}
-
-export {
-  analyzeRules
-}