code: function jsonToMediaQuery (query, el) {
    // Ensure the query is of the correct form
    const keys = Object.keys(query)
    if (keys.length !== 1) {
      throw new Error('Expected exactly one key in query object.')
    }
  
    const key = keys[0]
  
    const validKeys = ['minHeight', 'maxHeight', 'minWidth', 'maxWidth']
  
    if (validKeys.indexOf(key) === -1) {
      throw new Error(
        `Invalid key \`${key}\` in query object. Valid keys should consist of one of the following: ` +
        `${validKeys.join(', ')} (case sensitive)`
      )
    }
  
    const value = query[key]
  
    if (typeof value !== 'string' && typeof value !== 'number') {
      throw new Error('The value of the query object must be a string or number.')
    }
  
    if (!value) {
      throw new Error ('No value supplied for query object')
    }
  
    return `(${hyphenateQueryKey(key.toLowerCase())}: ${px(value, el)}px)`
  }
docs: ---
  category: utilities/layout
  ---
  
  Given a valid json query object, converts it to a standard media query
  string. Valid queries should be an object consisting of exactly one of
  the following `minWidth`, `maxWidth`, `minHeight`, or `maxHeight` and
  a value as a string or number.
  
  Example input
  ```js
  { minWidth: 350 }
  ```
  Example output
  ```js
  '(min-width: 350px)'
  ```
  
  @param {Object} query - an object consisting of the query type and value
  @param {ReactComponent|DomNode} el - component or DOM node which will be
  passed to the pixel conversion if the unit type is `em`
  @returns {string} media query string