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

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
-}

package/src/declarations/declarations.test.js

@@ -1,113 +0,0 @@
-import { suite } from 'uvu'
-import * as assert from 'uvu/assert'
-import { analyze } from '../index.js'
-
-const Declarations = suite('Declarations')
-
-Declarations('should be counted', () => {
-  const fixture = `
-    rule {
-      color: green;
-      color: orange !important;
-    }
-
-    rule2 {
-      color: green; /* not unique */
-    }
-
-    @media print {
-      @media (min-width: 1000px) {
-        @supports (display: grid) {
-          @keyframes test {
-            from {
-              opacity: 1;
-            }
-            to {
-              opacity: 0;
-            }
-          }
-
-          another-rule {
-            color: purple;
-          }
-        }
-      }
-    }
-  `
-  const actual = analyze(fixture).declarations
-
-  assert.is(actual.total, 6)
-  assert.is(actual.unique.total, 5)
-  assert.is(actual.unique.ratio, 5 / 6)
-})
-
-Declarations('should count !importants', () => {
-  const fixture = `
-    some {
-      color: red;
-      color: red: !important;
-    }
-
-    @media (min-width: 0) {
-      nested {
-        color: darkred;
-        color: darkred !important;
-      }
-    }
-
-    @supports (color: rebeccapurple) {
-      nested-too {
-        color: rebeccapurple;
-        color: rebeccapurple !important;
-      }
-    }
-
-    @media print {
-      @media (max-width: 0) {
-        @page {
-          color: black;
-          color: black !important;
-        }
-      }
-    }
-  `
-  const actual = analyze(fixture).declarations.importants
-  const expected = {
-    total: 4,
-    ratio: 0.5,
-    inKeyframes: {
-      total: 0,
-      ratio: 0
-    }
-  }
-
-  assert.equal(actual, expected)
-})
-
-/**
- * @see https://drafts.csswg.org/css-animations-1/#keyframes
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes#!important_in_a_keyframe
- */
-Declarations('should calculate !importants within @keyframes', () => {
-  const fixture = `
-    test1 {
-      color: green !important;
-    }
-
-    @keyframes myTest {
-      from {
-        opacity: 1 !important;
-      }
-    }
-  `
-  const result = analyze(fixture)
-  const actual = result.declarations.importants
-
-  assert.is(actual.total, 2)
-  assert.equal(actual.inKeyframes, {
-    total: 1,
-    ratio: 1 / 2
-  })
-})
-
-Declarations.run()