export function getComputedStyles()

in src/utils/testing.tsx [100:159]

• 16 lines of code
• 5 McCabe index (conditional complexity)

export function getComputedStyles(className: string) {
  const div = document.createElement('div')
  div.className = className

  const computed: ComputedStyles = {}
  for (const sheet of document.styleSheets) {
    // CSSRulesLists assumes every rule is a CSSRule, not a CSSStyleRule
    for (const rule of sheet.cssRules) {
      if (rule instanceof CSSMediaRule) {
        readMedia(rule)
      } else if (rule instanceof CSSStyleRule) {
        readRule(rule, computed)
      } else {
        // console.warn('rule.type =', rule.type)
      }
    }
  }

  return computed

  function matchesSafe(node: HTMLDivElement, selector: string) {
    if (!selector) {
      return false
    }
    try {
      return node.matches(selector)
    } catch (error) {
      return false
    }
  }

  function readRule(rule: CSSStyleRule, dest: ComputedStyles) {
    if (matchesSafe(div, rule.selectorText)) {
      const {style} = rule
      for (let i = 0; i < style.length; i++) {
        const prop = style[i]
        dest[prop] = style.getPropertyValue(prop)
      }
    } else {
      // console.warn('no match:', rule.selectorText)
    }
  }

  function readMedia(mediaRule: CSSMediaRule) {
    const key = `@media ${mediaRule.media[0]}`
    // const dest = computed[key] || (computed[key] = {})
    const dest = {}
    for (const rule of mediaRule.cssRules) {
      if (rule instanceof CSSStyleRule) {
        readRule(rule, dest)
      }
    }

    // Don't add media rule to computed styles
    // if no styles were actually applied
    if (Object.keys(dest).length > 0) {
      computed[key] = dest
    }
  }
}