Call a listener once the given stylesheets have loaded

README.md

const styles = require('./styles')
const promise = styles.onLoad('foo.css', 'bar.css')

promise.then(() => {
  console.log('Stylesheets loaded!')
  // Now, measurements can be done safely!
})

Note that the strings passed to onLoad can be fragments of the stylesheet's full URL. This means foo.css will match any stylesheet whose href contains foo.css.

styles.js

exports.onLoad = function() {
  const loading = new Set
  for (let i = 0; i < arguments.length; i++) {
    const string = arguments[i]
    if (typeof string == 'string') {
      loading.add(string)
    }
  }

  const sheets = document.styleSheets
  function check(string) {
    for (let i = 0; i < sheets.length; i++) {
      const href = sheets[i].href
      if (href && ~href.indexOf(string)) {
        return loading.delete(string)
      }
    }
  }

  // Check immediately.
  if (sheets.length) {
    loading.forEach(check)
    if (loading.size == 0) {
      return Promise.resolve()
    }
  }

  return new Promise(function(resolve) {
    perFrame(function() {
      if (sheets.length) {
        loading.forEach(check)
        if (loading.size == 0) {
          resolve()
          return false
        }
      }
      return true
    })
  })
}

function perFrame(callback) {
  requestAnimationFrame(function next() {
    if (callback()) requestAnimationFrame(next)
  })
}