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

package/src/selectors/specificity.js

@@ -1,201 +0,0 @@
-import * as csstree from 'css-tree'
-
-/**
- * @typedef {[number, number, number]} Specificity
- *
- * @typedef {import('css-tree').Selector} Selector
- */
-
-/**
- * Compare specificity A to Specificity B
- * @param {Specificity} a - Specificity A
- * @param {Specificity} b - Specificity B
- * @returns {number} sortIndex - 0 when a==b, 1 when a<b, -1 when a>b
- */
-function compareSpecificity(a, b) {
-  if (a[0] === b[0]) {
-    if (a[1] === b[1]) {
-      return b[2] - a[2]
-    }
-
-    return b[1] - a[1]
-  }
-
-  return b[0] - a[0]
-}
-
-/**
- *
- * @param {import('css-tree').SelectorList} selectorListAst
- * @returns {Selector} topSpecificitySelector
- */
-function selectorListSpecificities(selectorListAst) {
-  const childSelectors = []
-  csstree.walk(selectorListAst, {
-    visit: 'Selector',
-    enter(node) {
-      childSelectors.push(analyzeSpecificity(node))
-    }
-  })
-
-  return childSelectors.sort((a, b) => compareSpecificity(a.specificity, b.specificity))
-}
-
-/**
- * Get the Specificity for the AST of a Selector Node
- * @param {import('css-tree').Node} ast - AST Node for a Selector
- * @return {Object}
- * @property {Specificity} specificity
- * @property {number} complexity
- */
-const analyzeSpecificity = (ast) => {
-  let A = 0
-  let B = 0
-  let C = 0
-  let complexity = 0
-  let isA11y = false
-
-  csstree.walk(ast, {
-    enter: function (selector) {
-      switch (selector.type) {
-        case 'IdSelector': {
-          A++
-          complexity++
-          break
-        }
-        case 'ClassSelector': {
-          B++
-          complexity++
-          break
-        }
-        case 'AttributeSelector': {
-          B++
-          complexity++
-
-          if (Boolean(selector.value)) {
-            complexity++
-          }
-          isA11y = selector.name.name === 'role' || selector.name.name.startsWith('aria-')
-          break
-        }
-        case 'PseudoElementSelector':
-        case 'TypeSelector': {
-          if (selector.name !== '*') {
-            C++
-          }
-          complexity++
-          break
-        }
-        case 'PseudoClassSelector': {
-          if (['before', 'after', 'first-letter', 'first-line'].includes(selector.name)) {
-            C++
-            complexity++
-            return this.skip
-          }
-          // The specificity of an :is(), :not(), or :has() pseudo-class is
-          // replaced by the specificity of the most specific complex
-          // selector in its selector list argument.
-
-          // CSSTree doesn't parse the arguments of :is, :has and :matches,
-          // so we need to create an AST out of them ourselves
-          if (['is', 'has', 'matches'].includes(selector.name)) {
-            const rawSelectorList = csstree.find(selector, ({ type }) => type === 'Raw')
-            const childAst = csstree.parse(rawSelectorList.value, { context: 'selectorList' })
-            const selectorList = selectorListSpecificities(childAst)
-            const [topA, topB, topC] = selectorList[0].specificity
-            A += topA
-            B += topB
-            C += topC
-
-            for (let i = 0; i < selectorList.length; i++) {
-              complexity += selectorList[i].complexity
-            }
-            complexity++
-            return
-          }
-
-          // CSSTree *does* parse the arguments of the :not() pseudo-class,
-          // so we have direct access to the AST, instead of having to parse
-          // the arguments ourselves.
-          if (selector.name === 'not') {
-            const selectorList = selectorListSpecificities(selector)
-            const [topA, topB, topC] = selectorList[0].specificity
-            A += topA
-            B += topB
-            C += topC
-
-            for (let i = 0; i < selectorList.length; i++) {
-              complexity += selectorList[i].complexity
-            }
-            complexity++
-            return this.skip
-          }
-
-          // The specificity of an :nth-child() or :nth-last-child() selector
-          // is the specificity of the pseudo class itself (counting as one
-          // pseudo-class selector) plus the specificity of the most
-          // specific complex selector in its selector list argument (if any).
-          if (['nth-child', 'nth-last-child'].includes(selector.name)) {
-            // +1 for the pseudo class itself
-            B++
-
-            const childSelectors = selectorListSpecificities(selector)
-
-            if (childSelectors.length === 0) {
-              return
-            }
-
-            const [topA, topB, topC] = childSelectors[0].specificity
-            A += topA
-            B += topB
-            C += topC
-
-            for (let i = 0; i < childSelectors.length; i++) {
-              complexity += childSelectors[i].complexity;
-            }
-
-            complexity++
-            return
-          }
-
-          // The specificity of a :where() pseudo-class is replaced by zero,
-          // but it does count towards complexity.
-          if (selector.name === 'where') {
-            const rawSelectorList = csstree.find(selector, ({ type }) => type === 'Raw')
-            const childAst = csstree.parse(rawSelectorList.value, { context: 'selectorList' })
-            const childSelectors = selectorListSpecificities(childAst)
-
-            for (let i = 0; i < childSelectors.length; i++) {
-              complexity += childSelectors[i].complexity;
-            }
-
-            complexity++
-            return
-          }
-
-          // Regular pseudo classes have specificity [0,1,0]
-          complexity++
-          B++
-          break
-        }
-        case 'Combinator': {
-          complexity++
-          break
-        }
-      }
-    }
-  })
-
-  return {
-    /** @type Specificity */
-    specificity: [A, B, C],
-    complexity,
-    isId: A > 0,
-    isA11y
-  }
-}
-
-export {
-  analyzeSpecificity,
-  compareSpecificity,
-}

package/src/selectors/specificity.test.js

@@ -1,247 +0,0 @@
-import { suite } from 'uvu'
-import * as assert from 'uvu/assert'
-import { analyze } from '../index.js'
-
-const Specificity = suite('Specificity')
-
-Specificity('handles the universal selector', () => {
-  const fixture = `
-    * {}
-  `
-  const actual = analyze(fixture).selectors.specificity.items
-  const expected = [
-    [0, 0, 0],
-  ]
-  assert.equal(actual, expected)
-})
-
-Specificity('handles ID selectors', () => {
-  const fixture = `
-    #id,
-    .Foo > .Bar ~ .Baz [type="text"] + span::before #bazz #fizz #buzz #brick #house,
-
-    /* https://drafts.csswg.org/selectors-4/#example-d97bd125 */
-    :not(span,strong#foo), /* a=1 b=0 c=1 */
-    #x34y,                /* a=1 b=0 c=0 */
-    #s12:not(FOO)         /* a=1 b=0 c=1 */
-    {}
-  `
-  const actual = analyze(fixture).selectors.specificity.items
-  const expected = [
-    [1, 0, 0],
-    [5, 4, 2],
-    [1, 0, 1],
-    [1, 0, 0],
-    [1, 0, 1],
-  ]
-  assert.equal(actual, expected)
-})
-
-Specificity('handles class selectors', () => {
-  const fixture = `
-    .class,
-    .class.class
-    {}
-  `
-  const actual = analyze(fixture).selectors.specificity.items
-  const expected = [
-    [0, 1, 0],
-    [0, 2, 0],
-  ]
-  assert.equal(actual, expected)
-})
-
-Specificity('handles element selectors', () => {
-  const fixture = `
-    element,
-    element element
-    {}
-  `
-  const actual = analyze(fixture).selectors.specificity.items
-  const expected = [
-    [0, 0, 1],
-    [0, 0, 2],
-  ]
-  assert.equal(actual, expected)
-})
-
-Specificity('handles the :not, :is and :has pseudo classes', () => {
-  const fixture = `
-    /* https://drafts.csswg.org/selectors-4/#example-bd54871c */
-    :is(em, #foo), /* [1,0,0] like an ID selector (#foo)—when matched against any of <em>, <p id=foo>, or <em id=foo>. */
-    :not(span, strong#foo), /* [1,0,1] like a tag selector (strong) combined with an ID selector (#foo)—when matched against any element. */
-
-    /* https://drafts.csswg.org/selectors-4/#example-d97bd125 */
-    #s12:not(FOO),       /* a=1 b=0 c=1 */
-    .foo :is(.bar, #baz) /* a=1 b=1 c=0 */
-    {}
-  `
-  const actual = analyze(fixture).selectors.specificity.items
-  const expected = [
-    [1, 0, 0],
-    [1, 0, 1],
-    [1, 0, 1],
-    [1, 1, 0],
-  ]
-  assert.equal(actual, expected)
-})
-
-Specificity('handles attribute selectors', () => {
-  const fixture = `
-    [attribute],
-    .Foo > .Bar ~ .Baz [type="text"] + span::before #bazz #fizz #buzz #brick #house,
-    H1 + *[REL=up],
-    /* https://drafts.csswg.org/selectors-4/#attribute-representation */
-    a[rel~="copyright"],
-    a[hreflang=fr],
-    a[hreflang|="en"],
-    /* https://drafts.csswg.org/selectors-4/#attribute-substrings */
-    object[type^="image"],
-    a[href$=".html"],
-    p[title*="hello"],
-    /* https://drafts.csswg.org/selectors-4/#attribute-case */
-    [frame=hsides i],
-    [type="a" s],
-    [type="A" s],
-    /* https://drafts.csswg.org/selectors-4/#attrnmsp */
-    [foo|att=val],
-    [*|att],
-    [|att]
-    {}
-  `
-  const actual = analyze(fixture).selectors.specificity.items
-  const expected = [
-    [0, 1, 0],
-    [5, 4, 2],
-    [0, 1, 1],
-
-    [0, 1, 1],
-    [0, 1, 1],
-    [0, 1, 1],
-
-    [0, 1, 1],
-    [0, 1, 1],
-    [0, 1, 1],
-
-    [0, 1, 0],
-    [0, 1, 0],
-    [0, 1, 0],
-
-    [0, 1, 0],
-    [0, 1, 0],
-    [0, 1, 0],
-  ]
-  assert.equal(actual, expected)
-})
-
-Specificity('handles the :where pseudo class', () => {
-  const fixture = `
-    .qux:where(em, #foo#bar#baz) /* [0,1,0] only the .qux outside the :where() contributes to selector specificity.  */
-    {}
-  `
-  const actual = analyze(fixture).selectors.specificity.items
-  const expected = [
-    [0, 1, 0]
-  ]
-  assert.equal(actual, expected)
-})
-
-Specificity('handles pseudo element selectors', () => {
-  const fixture = `
-    element::before,
-    element:before,
-    element::first-letter,
-    element:first-letter,
-    element::after,
-    element:after,
-    element::first-line,
-    element:first-line,
-    :nth-child(2n+1)
-    {}
-  `
-  const actual = analyze(fixture).selectors.specificity.items
-  const expected = [
-    [0, 0, 2],
-    [0, 0, 2],
-    [0, 0, 2],
-    [0, 0, 2],
-    [0, 0, 2],
-    [0, 0, 2],
-    [0, 0, 2],
-    [0, 0, 2],
-    [0, 1, 0]
-  ]
-  assert.equal(actual, expected)
-})
-
-// TODO: test this whenever CSSTree contains 'native' specificity analysis
-// https://twitter.com/csstree/status/1386799196355825664
-Specificity.skip('handles multiple :where or :is parts')
-
-Specificity('calculates the lowest value', () => {
-  const fixture = `
-    #test,
-    .me,
-    now,
-    [crazy] ~ .selector > for [no|="good"] {}
-  `
-  const actual = analyze(fixture).selectors.specificity.min
-  assert.equal(actual, [0, 0, 1])
-})
-
-Specificity('calculates the highest value', () => {
-  const fixture = `
-    #test,
-    .me,
-    now,
-    [crazy] ~ .selector > for [no|="good"] {}
-  `
-  const actual = analyze(fixture).selectors.specificity.max
-  assert.equal(actual, [1, 0, 0])
-})
-
-Specificity('calculates the mean value', () => {
-  const fixture = `
-    #test,
-    .me,
-    now,
-    [crazy] ~ .selector > for [no|="good"] {}
-  `
-  const actual = analyze(fixture).selectors.specificity.mean
-  assert.equal(actual, [.25, 1, 0.5])
-})
-
-Specificity('calculates the mode value', () => {
-  const fixture = `
-    #test,
-    .me,
-    now,
-    [crazy] ~ .selector > for [no|="good"] {}
-  `
-  const actual = analyze(fixture).selectors.specificity.mode
-  assert.equal(actual, [0, 0, 0.5])
-})
-
-Specificity('calculates the median value', () => {
-  const fixture = `
-    #test,
-    .me,
-    now,
-    [crazy] ~ .selector > check {}
-  `
-  const actual = analyze(fixture).selectors.specificity.median
-  assert.equal(actual, [0, 0.5, 0.5])
-})
-
-Specificity('calculates total specificity', () => {
-  const fixture = `
-    #test,
-    .me,
-    now,
-    [crazy] ~ .selector > for [no|="good"] {}
-  `
-  const actual = analyze(fixture).selectors.specificity.sum
-  assert.equal(actual, [1, 4, 2])
-})
-
-Specificity.run()

package/src/smoke.test.js

@@ -1,39 +0,0 @@
-import * as fs from 'fs'
-import { suite } from 'uvu';
-import * as assert from 'uvu/assert';
-import { analyze } from './index.js'
-
-const Smoke = suite('Smoke testing')
-
-Object.entries({
-  'Bol.com': 'bol-com-20190617',
-  'Bootstrap v5.0.0': 'bootstrap-5.0.0',
-  'CSS Tricks': 'css-tricks-20190319',
-  'Facebook': 'facebook-20190319',
-  'GitHub': 'github-20210501',
-  'Lego.com': 'lego-20190617',
-  'Trello': 'trello-20190617',
-  'Gazelle': 'gazelle-20210905',
-  'Smashing Magazine': 'smashing-magazine-20190319',
-}).map(([name, fileName]) => {
-  const css = fs.readFileSync(`./src/__fixtures__/${fileName}.css`, 'utf-8')
-  const json = fs.readFileSync(`./src/__fixtures__/${fileName}.json`, 'utf-8')
-  return {
-    name,
-    fileName,
-    json,
-    css,
-  }
-}).forEach(({ name, fileName, css, json }) => {
-  // const result = analyze(css)
-  // delete result.__meta__
-  // fs.writeFileSync(`./src/__fixtures__/${fileName}.json`, JSON.stringify(result, null, 2))
-  Smoke(name, () => {
-    assert.not.throws(() => analyze(css))
-    const result = analyze(css)
-    delete result.__meta__
-    assert.fixture(JSON.stringify(result, null, 2), json)
-  })
-})
-
-Smoke.run()

package/src/stylesheet/stylesheet.test.js

@@ -1,88 +0,0 @@
-import { suite } from 'uvu'
-import * as assert from 'uvu/assert'
-import { analyze } from '../index.js'
-
-const Stylesheet = suite('Stylesheet')
-
-Stylesheet('counts Lines of Code', () => {
-  const fixture = `
-    /* doc */
-
-    html {
-      nothing: here;
-    }
-
-    @done {
-
-    }
-  `
-  const actual = analyze(fixture).stylesheet.linesOfCode
-  assert.is(actual, 11)
-})
-
-Stylesheet('counts Source Lines of Code', () => {
-  const fixture = `
-    rule {
-      color: green;
-      color: orange !important;
-    }
-
-    @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).stylesheet.sourceLinesOfCode
-  assert.is(actual, 13)
-})
-
-Stylesheet('calculates filesize', () => {
-  const fixture = `test {}`
-  const actual = analyze(fixture).stylesheet.size
-  assert.is(actual, 7)
-})
-
-Stylesheet('counts comments', () => {
-  const fixture = `
-    /* comment 1 */
-    test1,
-    /* comment 2 */
-    test2 {
-      /* comment 3 */
-      color: /* comment 4 */ green;
-      background:
-        red,
-        /* comment 5 */
-        yellow
-      ;
-    }
-
-    @media all {
-      /* comment 6 */
-    }
-  `
-  const result = analyze(fixture)
-  const actual = result.stylesheet.comments
-  const expected = {
-    total: 6,
-    size: 66,
-  }
-
-  assert.equal(actual, expected)
-})
-
-Stylesheet.run()

package/src/values/animations.js

@@ -1,53 +0,0 @@
-import { CountableCollection } from '../countable-collection.js'
-
-const timingKeywords = {
-  'linear': 1,
-  'ease': 1,
-  'ease-in': 1,
-  'ease-out': 1,
-  'ease-in-out': 1,
-  'step-start': 1,
-  'step-end': 1,
-}
-
-const analyzeAnimations = ({ animations, durations, timingFunctions, stringifyNode }) => {
-  const allDurations = new CountableCollection(durations.map(stringifyNode))
-  const allTimingFunctions = new CountableCollection(timingFunctions.map(stringifyNode))
-
-  for (let index = 0; index < animations.length; index++) {
-    const node = animations[index]
-    // Flag to know if we've grabbed the first Duration
-    // yet (the first Dimension in a shorthand)
-    let durationFound = false
-
-    node.value.children.forEach(child => {
-      // Right after a ',' we start over again
-      if (child.type === 'Operator') {
-        return durationFound = false
-      }
-      if (child.type === 'Dimension' && durationFound === false) {
-        durationFound = true
-        return allDurations.push(stringifyNode(child))
-      }
-      if (child.type === 'Identifier' && timingKeywords[child.name]) {
-        return allTimingFunctions.push(stringifyNode(child))
-      }
-      if (child.type === 'Function'
-        && (
-          child.name === 'cubic-bezier' || child.name === 'steps'
-        )
-      ) {
-        return allTimingFunctions.push(stringifyNode(child))
-      }
-    })
-  }
-
-  return {
-    durations: allDurations.count(),
-    timingFunctions: allTimingFunctions.count(),
-  }
-}
-
-export {
-  analyzeAnimations
-}