code: function parseQuery (query, el) {
    const rules = []
  
    Object.keys(query).forEach((selectorName) => {
      const { minWidth, maxWidth, minHeight, maxHeight } = query[selectorName]
      rules.push([
        selectorName,
        {
          minWidth: px(minWidth, el) || 0,
          maxWidth: px(maxWidth, el) || Infinity,
          minHeight: px(minHeight, el) || 0,
          maxHeight: px(maxHeight, el) || Infinity
        }
      ])
    })
  
    return function ({width, height}) {
      const selectorMap = {}
  
      rules.forEach((rule) => {
        const [selectorName, { minWidth, maxWidth, minHeight, maxHeight }] = rule
        selectorMap[selectorName] = (
          minWidth <= width && width <= maxWidth &&
          minHeight <= height && height <= maxHeight
        )
      })
  
      return selectorMap
    }
  }
docs: ---
  category: utilities/layout
  ---
  
  Given a query and an element, return a function that takes
  size as an argument and returns an object consisting of
  query names and a boolean true false if it matches.
  
  @param {Object} query - an object consisting of query names
  mapped to individual queries
  @param {ReactComponent|DomNode} el - component or DOM node
  @returns {function} takes size {width, height} as an argument
  and returns an object consisting of query names and boolean
  true false if it matches