@mariusandra/simmerjs/modules/methods/inspectTags.js

A pure Javascript reverse CSS selector engine which calculates a DOM element's unique CSS selector on the current page.

import { tagName } from './validationHelpers'

/**
/**
 * Inspect the elements' Tag names and add them to the calculates CSS selector
 * @param {array} hierarchy. The hierarchy of elements
 * @param {object} state. The current calculated CSS selector
 */
export default function (hierarchy, state) {
  return hierarchy.reduce((selectorState, currentElem, index) => {
    ;[currentElem.el.nodeName].filter(tagName).forEach(tagName => {
      selectorState.stack[index].splice(0, 0, tagName)
      // custom elements get a few more points
      if (tagName.includes('-')) {
        selectorState.specificity += 30
      } else {
        selectorState.specificity += 10
      }
    })
    return selectorState
  }, state)
}