import { toAST } from 'media-query-parser'

// Simple responsive media query
console.log(toAST('(max-width: 768px)'))
/* [
  {
    "mediaPrefix":null,
    "mediaType":"all",
    "mediaCondition":{
      "operator":null,
      "children":[
        {"context":"value",
         "prefix":"max",
         "feature":"width",
         "value":{"type":"<dimension-token>","value":768,"unit":"px","flag":"number"}
        }
      ]
    }
  }
] */

// Supports comma separated media-query lists
console.log(toAST('print, (not (color))'))
// Trims the `@media` if it starts with it, the `{` and anything that follows
console.log(toAST('@media screen { body { background: #000 } }'))
// Full support for new range syntax
console.log(toAST('(100px < width < 200px)'))
// ...which was no mean feat...
console.log(toAST('(4/3 <= aspect-ratio <= 16/9)'))
// Throws an Error with invalid media query syntax
console.log(toAST('clearly this is not a valid media query')) // => Error
// ...even the normal looking but invalid ones:
{
  console.log(toAST('(max-width: 768px) and screen')) // => Error
  // explanation: screen must be on left hand side
  console.log(toAST('screen and (max-width: 768px) or (hover)')) // => Error
  // explanation: spec disallows `and` and `or` on same level as ambiguous
}