get-css-rules.js

get-css-rules.js

/**
* Iterates through all stylesheets loaded onto the page and returns an array of all css rules.
* Useful for getter a quick glance at roughly how many css selector rules there are on a page.
*/
function getCssRules() {
  const skipped = {}
  const rules = Array.from(document.styleSheets)
    .flatMap(sheet => Array.from(sheet.rules)
      .flatMap(rule => {
        const ruleType = rule.constructor.name
        if (ruleType === 'CSSMediaRule') { //Media rule
          return Array.from(rule.cssRules).map(mediaRule => `@media(${rule.conditionText}) ${mediaRule.selectorText}`)
        }
        if (!rule.selectorText) {
          skipped[ruleType] = (skipped[ruleType] || 0) + 1
          return false
        }
        return rule.selectorText || rule
      })
    )
    .filter(rule => !!rule)

  if (Object.keys(skipped)) {
    /* eslint-disable-next-line no-console */
    console.log("Skipped rules", skipped)
  }

  return rules
}