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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectwallace/css-analyzer",
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.2",
   "author": "Bart Veneman",
   "repository": {
     "type": "git",
@@ -37,10 +37,7 @@
     "metrics"
   ],
   "files": [
-    "dist",
-    "src",
-    "!src/__fixtures__",
-    "!*.test.js"
+    "dist"
   ],
   "dependencies": {
     "css-tree": "^2.0.1"

package/src/aggregate-collection.js

@@ -1,113 +0,0 @@
-/**
- * Find the mode (most occurring value) in an array of Numbers
- * Takes the mean/average of multiple values if multiple values occur the same amount of times.
- *
- * @see https://github.com/angus-c/just/blob/684af9ca0c7808bc78543ec89379b1fdfce502b1/packages/array-mode/index.js
- * @param {Array} arr - Array to find the mode value for
- * @returns {Number} mode - The `mode` value of `arr`
- */
-function Mode(arr) {
-  const frequencies = Object.create(null)
-  let maxOccurrences = -1
-  let maxOccurenceCount = 0
-  let sum = 0
-
-  for (let i = 0; i < arr.length; i++) {
-    const element = arr[i]
-    const updatedCount = (frequencies[element] || 0) + 1
-    frequencies[element] = updatedCount
-
-    if (updatedCount > maxOccurrences) {
-      maxOccurrences = updatedCount
-      maxOccurenceCount = 0
-      sum = 0
-    }
-
-    if (updatedCount >= maxOccurrences) {
-      maxOccurenceCount++
-      sum += element
-    }
-  }
-
-  return sum / maxOccurenceCount
-}
-
-/**
- * Find the middle number in an Array of Numbers
- * Returns the average of 2 numbers if the Array length is an even number
- * @see https://github.com/angus-c/just/blob/684af9ca0c7808bc78543ec89379b1fdfce502b1/packages/array-median/index.js
- * @param {Array} arr - A sorted Array
- * @returns {Number} - The array's Median
- */
-function Median(arr) {
-  const middle = arr.length / 2
-  const lowerMiddleRank = Math.floor(middle)
-
-  if (middle !== lowerMiddleRank) {
-    return arr[lowerMiddleRank]
-  }
-  return (arr[lowerMiddleRank] + arr[lowerMiddleRank - 1]) / 2
-}
-
-class AggregateCollection {
-  constructor(size) {
-    /** @type Number[] */
-    this.items = new Uint8Array(size)
-    this.sum = 0
-    this.cursor = 0
-  }
-
-  /**
-   * Add a new Integer to the AggregateCollection
-   * @param {number} item - The item to add to the AggregateCollection
-   */
-  add(item) {
-    this.items[this.cursor] = (item)
-    this.sum += item
-    this.cursor++
-  }
-
-  aggregate() {
-    if (this.cursor === 0) {
-      return {
-        min: 0,
-        max: 0,
-        mean: 0,
-        mode: 0,
-        median: 0,
-        range: 0,
-        sum: 0,
-      }
-    }
-
-    /** @type Number[] */
-    const sorted = new Uint8Array(
-      this.items.slice(0, this.cursor)
-    ).sort((a, b) => a - b)
-    const min = sorted[0]
-    const max = sorted[sorted.length - 1]
-
-    const mode = Mode(sorted)
-    const median = Median(sorted)
-
-    return {
-      min,
-      max,
-      mean: this.sum / this.cursor,
-      mode,
-      median,
-      range: max - min,
-      sum: this.sum,
-    }
-  }
-
-  toArray() {
-    return Array.from(
-      this.items.subarray(0, this.cursor)
-    )
-  }
-}
-
-export {
-  AggregateCollection
-}

package/src/aggregate-collection.test.js

@@ -1,47 +0,0 @@
-import { suite } from 'uvu';
-import * as assert from 'uvu/assert';
-import { AggregateCollection } from './aggregate-collection.js'
-
-const CollectionSuite = suite('AggregateCollection')
-
-CollectionSuite('aggregates correctly', () => {
-  const fixture = new AggregateCollection(6)
-  fixture.add(1)
-  fixture.add(2)
-  fixture.add(25)
-  fixture.add(3)
-  fixture.add(4)
-  fixture.add(4)
-  const actual = fixture.aggregate()
-  const expected = {
-    max: 25,
-    min: 1,
-    range: 24,
-    mean: 39 / 6,
-    median: 3.5,
-    mode: 4,
-    sum: 39,
-  }
-
-  assert.equal(actual, expected)
-  assert.equal(fixture.toArray(), [1, 2, 25, 3, 4, 4])
-})
-
-CollectionSuite('handles collections without values', () => {
-  const fixture = new AggregateCollection(0)
-  const aggregate = fixture.aggregate()
-  const items = fixture.toArray()
-
-  assert.equal(aggregate, {
-    max: 0,
-    min: 0,
-    range: 0,
-    mean: 0,
-    median: 0,
-    mode: 0,
-    sum: 0,
-  })
-  assert.equal(items, [])
-})
-
-CollectionSuite.run()

package/src/atrules/atrules.js

@@ -1,76 +0,0 @@
-import { CountableCollection } from '../countable-collection.js'
-import { hasVendorPrefix } from '../vendor-prefix.js'
-
-const analyzeAtRules = ({ atrules, stringifyNode }) => {
-  const fontfaces = []
-  const imports = new CountableCollection()
-  const medias = new CountableCollection()
-  const charsets = new CountableCollection()
-  const supports = new CountableCollection()
-  const keyframes = new CountableCollection()
-  const prefixedKeyframes = new CountableCollection()
-  const containers = new CountableCollection()
-
-  const machine = {
-    'font-face': (node) => {
-      const descriptors = {}
-
-      node.block.children.forEach(descriptor => {
-        descriptors[descriptor.property] = stringifyNode(descriptor.value)
-      })
-
-      fontfaces.push(descriptors)
-    },
-    'media': node => medias.push(node.prelude.value),
-    'supports': node => supports.push(node.prelude.value),
-    'keyframes': node => keyframes.push(`@${node.name} ${node.prelude.value}`),
-    'import': node => imports.push(node.prelude.value),
-    'charset': node => charsets.push(node.prelude.value),
-    'container': node => containers.push(node.prelude.value),
-  }
-
-  for (let i = 0; i < atrules.length; i++) {
-    const node = atrules[i]
-    const nodeName = node.name
-    const action = machine[nodeName]
-    if (action) {
-      action(node)
-      continue
-    }
-
-    if (nodeName.endsWith('keyframes')) {
-      const name = `@${nodeName} ${node.prelude.value}`
-      keyframes.push(name)
-
-      if (hasVendorPrefix(nodeName)) {
-        prefixedKeyframes.push(name)
-      }
-      continue
-    }
-  }
-
-  return {
-    fontface: {
-      total: fontfaces.length,
-      totalUnique: fontfaces.length,
-      unique: fontfaces,
-      uniquenessRatio: 1
-    },
-    import: imports.count(),
-    media: medias.count(),
-    charset: charsets.count(),
-    supports: supports.count(),
-    keyframes: {
-      ...keyframes.count(),
-      prefixed: {
-        ...prefixedKeyframes.count(),
-        ratio: prefixedKeyframes.size() / keyframes.size()
-      }
-    },
-    container: containers.count(),
-  }
-}
-
-export {
-  analyzeAtRules
-}

package/src/atrules/atrules.test.js

@@ -1,289 +0,0 @@
-import { suite } from 'uvu'
-import * as assert from 'uvu/assert'
-import { analyze } from '../index.js'
-
-const AtRules = suite('at-rules')
-
-AtRules('finds @font-face', () => {
-  const fixture = `
-    @font-face {
-      font-family: Arial;
-      src: url("https://url-to-arial.woff");
-    }
-
-    @font-face {
-      font-display: swap;
-      font-family: Test;
-      font-stretch: condensed;
-      font-style: italic;
-      font-weight: 700;
-      font-variant: no-common-ligatures proportional-nums;
-      font-feature-settings: "liga" 0;
-      font-variation-settings: "xhgt" 0.7;
-      src: local("Input Mono");
-      unicode-range: U+0025-00FF;
-    }
-
-    @font-face {
-      font-family: 'Input Mono';
-      src: local('Input Mono') url("https://url-to-input-mono.woff");
-    }
-
-    @font-face {
-      font-family: MyHelvetica;
-      src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf);
-      font-weight: bold;
-    }
-
-    /* Duplicate @font-face in Media Query */
-    @media (min-width: 1000px) {
-      @font-face {
-        font-family: 'Input Mono';
-        src: local('Input Mono') url("https://url-to-input-mono.woff");
-      }
-    }`
-  const actual = analyze(fixture).atrules.fontface
-  const expected = {
-    total: 5,
-    totalUnique: 5,
-    unique: [
-      {
-        "font-family": "Arial",
-        "src": "url(\"https://url-to-arial.woff\")"
-      },
-      {
-        "font-display": `swap`,
-        "font-family": `Test`,
-        "font-stretch": `condensed`,
-        "font-style": `italic`,
-        "font-weight": `700`,
-        "font-variant": `no-common-ligatures proportional-nums`,
-        "font-feature-settings": `"liga" 0`,
-        "font-variation-settings": `"xhgt" 0.7`,
-        "src": `local("Input Mono")`,
-        "unicode-range": `U+0025-00FF`,
-      },
-      {
-        "font-family": "'Input Mono'",
-        "src": "local('Input Mono') url(\"https://url-to-input-mono.woff\")"
-      },
-      {
-        'font-family': 'MyHelvetica',
-        'src': 'local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf)',
-        'font-weight': 'bold',
-      },
-      {
-        "font-family": "'Input Mono'",
-        "src": "local('Input Mono') url(\"https://url-to-input-mono.woff\")"
-      }
-    ],
-    uniquenessRatio: 1
-  }
-
-  assert.equal(actual, expected)
-})
-
-AtRules('finds @imports', () => {
-  const fixture = `
-    @import "https://example.com/without-url";
-    @import url("https://example.com/with-url");
-    @import url("https://example.com/with-media-query") screen and (min-width: 33em);
-    @import url("https://example.com/with-multiple-media-queries") screen, projection;
-  `
-  const actual = analyze(fixture).atrules.import
-  const expected = {
-    total: 4,
-    totalUnique: 4,
-    unique: {
-      '"https://example.com/without-url"': 1,
-      'url("https://example.com/with-url")': 1,
-      'url("https://example.com/with-media-query") screen and (min-width: 33em)': 1,
-      'url("https://example.com/with-multiple-media-queries") screen, projection': 1,
-    },
-    uniquenessRatio: 4 / 4
-  }
-
-  assert.equal(actual, expected)
-})
-
-AtRules('finds @charsets', () => {
-  const fixture = `
-    @charset "UTF-8";
-    @charset "UTF-16";
-  `
-  const actual = analyze(fixture).atrules.charset
-  const expected = {
-    total: 2,
-    totalUnique: 2,
-    unique: {
-      '"UTF-8"': 1,
-      '"UTF-16"': 1,
-    },
-    uniquenessRatio: 2 / 2
-  }
-
-  assert.equal(actual, expected)
-})
-
-AtRules('finds @supports', () => {
-  const fixture = `
-    @supports (filter: blur(5px)) {}
-    @supports (display: table-cell) and (display: list-item) {}
-    @supports (-webkit-appearance: none) {}
-
-    @media (min-width: 0) {
-      @supports (-webkit-appearance: none) {}
-    }
-  `
-  const actual = analyze(fixture).atrules.supports
-  const expected = {
-    total: 4,
-    totalUnique: 3,
-    unique: {
-      '(filter: blur(5px))': 1,
-      '(display: table-cell) and (display: list-item)': 1,
-      '(-webkit-appearance: none)': 2,
-    },
-    uniquenessRatio: 3 / 4
-  }
-
-  assert.equal(actual, expected)
-})
-
-AtRules('finds @media', () => {
-  const fixture = `
-    @media screen {}
-    @media screen and (min-width: 33em) {}
-    @media (min-width: 20px) {}
-    @media (max-width: 200px) {}
-    @media screen or print {}
-    @media \\0 all {}
-
-    @supports (-webkit-appearance: none) {
-      @media (min-width: 0) {}
-    }
-  `
-  const actual = analyze(fixture).atrules.media
-  const expected = {
-    total: 7,
-    totalUnique: 7,
-    unique: {
-      'screen': 1,
-      'screen and (min-width: 33em)': 1,
-      '(min-width: 20px)': 1,
-      '(max-width: 200px)': 1,
-      'screen or print': 1,
-      '\\0 all': 1,
-      '(min-width: 0)': 1,
-    },
-    uniquenessRatio: 7 / 7
-  }
-
-  assert.equal(actual, expected)
-})
-
-AtRules('analyzes @keyframes', () => {
-  const fixture = `
-    @keyframes one {}
-    @keyframes one {}
-    @keyframes TWO {}
-
-    /* Prefixes */
-    @-webkit-keyframes animation {}
-    @-moz-keyframes animation {}
-    @-o-keyframes animation {}
-  `
-  const actual = analyze(fixture).atrules.keyframes
-  const expected = {
-    total: 6,
-    totalUnique: 5,
-    unique: {
-      '@keyframes one': 2,
-      '@keyframes TWO': 1,
-      '@-webkit-keyframes animation': 1,
-      '@-moz-keyframes animation': 1,
-      '@-o-keyframes animation': 1,
-    },
-    uniquenessRatio: 5 / 6,
-    prefixed: {
-      total: 3,
-      totalUnique: 3,
-      unique: {
-        '@-webkit-keyframes animation': 1,
-        '@-moz-keyframes animation': 1,
-        '@-o-keyframes animation': 1,
-      },
-      uniquenessRatio: 3 / 3,
-      ratio: 3 / 6
-    }
-  }
-
-  assert.equal(actual, expected)
-})
-
-AtRules('analyzes container queries', () => {
-  // Fixture contains examples from the spec.
-  // https://drafts.csswg.org/css-contain-3/
-  const fixture = `
-    /* Example 2 */
-    @container (inline-size > 45em) {
-      .media-object {
-        grid-template: 'img content' auto / auto 1fr;
-      }
-    }
-
-    /* Example 3 */
-    @container (width > 40em) {
-      h2 { font-size: 1.5em; }
-    }
-
-    /* Example 4 */
-    @container (--cards) {
-      article {
-        border: thin solid silver;
-        border-radius: 0.5em;
-        padding: 1em;
-      }
-    }
-
-    /* Example 5 */
-    @container page-layout (block-size > 12em) {
-      .card { margin-block: 2em; }
-    }
-
-    @container component-library (inline-size > 30em) {
-      .card { margin-inline: 2em; }
-    }
-
-    /* Example 8 */
-    @container card (inline-size > 30em) and (--responsive = true) {
-      /* styles */
-    }
-
-    /* Example 11 */
-    @container type(inline-size) {
-      /* only applies when an inline-size container is available */
-      h2 { font-size: calc(1.2em + 1cqi); }
-    }
-  `
-  const result = analyze(fixture)
-  const actual = result.atrules.container
-  const expected = {
-    total: 7,
-    totalUnique: 7,
-    unique: {
-      '(inline-size > 45em)': 1,
-      '(width > 40em)': 1,
-      '(--cards)': 1,
-      'page-layout (block-size > 12em)': 1,
-      'component-library (inline-size > 30em)': 1,
-      'card (inline-size > 30em) and (--responsive = true)': 1,
-      'type(inline-size)': 1,
-    },
-    uniquenessRatio: 7 / 7
-  }
-
-  assert.equal(actual, expected)
-})
-
-AtRules.run()

package/src/context-collection.js

@@ -1,36 +0,0 @@
-import { CountableCollection } from './countable-collection.js'
-
-class ContextCollection {
-  constructor() {
-    this.list = new CountableCollection()
-    this.contexts = {}
-    this.contextCount = 0
-  }
-
-  push(item, context) {
-    this.list.push(item)
-
-    if (!this.contexts[context]) {
-      this.contexts[context] = new CountableCollection()
-      this.contextCount++
-    }
-
-    this.contexts[context].push(item)
-  }
-
-  count() {
-    const itemsPerContext = {}
-
-    for (let context in this.contexts) {
-      itemsPerContext[context] = this.contexts[context].count()
-    }
-
-    return Object.assign(this.list.count(), {
-      itemsPerContext
-    })
-  }
-}
-
-export {
-  ContextCollection
-}

package/src/countable-collection.js

@@ -1,46 +0,0 @@
-class CountableCollection {
-  constructor(initial) {
-    this.items = {}
-    this.total = 0
-    this.totalUnique = 0
-
-    if (initial) {
-      for (let index = 0; index < initial.length; index++) {
-        this.push(initial[index])
-      }
-    }
-  }
-
-  /**
-   *
-   * @param {string} item
-   */
-  push(item) {
-    this.total++
-
-    if (this.items[item]) {
-      this.items[item]++
-      return
-    }
-
-    this.items[item] = 1
-    this.totalUnique++
-  }
-
-  size() {
-    return this.total
-  }
-
-  count() {
-    return {
-      total: this.total,
-      totalUnique: this.totalUnique,
-      unique: this.items,
-      uniquenessRatio: this.total === 0 ? 0 : this.totalUnique / this.total,
-    }
-  }
-}
-
-export {
-  CountableCollection
-}

package/src/declarations/declarations.js

@@ -1,46 +0,0 @@
-const analyzeDeclarations = ({ stringifyNode, declarations }) => {
-  const total = declarations.length
-  const cache = Object.create(null)
-  let importants = 0
-  let totalUnique = 0
-  let totalInKeyframes = 0
-
-  for (let i = 0; i < total; i++) {
-    const declaration = declarations[i]
-
-    if (declaration.important === true) {
-      importants++
-
-      if (declaration.inKeyframe) {
-        totalInKeyframes++
-      }
-    }
-
-    const stringified = stringifyNode(declaration)
-
-    if (!cache[stringified]) {
-      cache[stringified] = 1
-      totalUnique++
-    }
-  }
-
-  return {
-    total,
-    unique: {
-      total: totalUnique,
-      ratio: total === 0 ? 0 : totalUnique / total,
-    },
-    importants: {
-      total: importants,
-      ratio: total === 0 ? 0 : importants / total,
-      inKeyframes: {
-        total: totalInKeyframes,
-        ratio: importants === 0 ? 0 : totalInKeyframes / importants,
-      },
-    },
-  }
-}
-
-export {
-  analyzeDeclarations
-}