{"_id":"postcss-media-query-parser","_rev":"106835","name":"postcss-media-query-parser","description":"A tool for parsing media query lists.","dist-tags":{"latest":"0.2.3"},"maintainers":[{"name":"dryoma","email":"dryoma-npm@yandex.ru"}],"time":{"modified":"2021-06-03T10:38:49.000Z","created":"2016-07-13T09:50:28.460Z","0.2.3":"2016-10-27T14:11:47.315Z","0.2.2":"2016-10-21T12:47:41.894Z","0.2.1":"2016-09-04T08:18:23.122Z","0.2.0":"2016-07-26T09:04:30.281Z","0.1.0":"2016-07-13T09:50:28.460Z"},"users":{"dryoma":true},"author":{"name":"dryoma"},"repository":{"type":"git","url":"git+https://github.com/dryoma/postcss-media-query-parser.git"},"versions":{"0.2.3":{"name":"postcss-media-query-parser","version":"0.2.3","description":"A tool for parsing media query lists.","main":"dist/index.js","keywords":["postcss","postcss tool","media query","media query parsing"],"author":{"name":"dryoma"},"license":"MIT","homepage":"https://github.com/dryoma/postcss-media-query-parser","repository":{"type":"git","url":"git+https://github.com/dryoma/postcss-media-query-parser.git"},"bugs":{"url":"https://github.com/dryoma/postcss-media-query-parser/issues"},"devDependencies":{"babel-cli":"^6.14.0","babel-preset-es2015":"^6.14.0","babel-register":"^6.14.0","eslint":"^2.5.1","eslint-config-airbnb":"^6.0.2","eslint-plugin-react":"^4.2.3","tap-spec":"^4.1.1","tape":"^4.6.0"},"scripts":{"lint":"eslint . --ignore-path .gitignore","test":"tape -r babel-register \"src/**/__tests__/*.js\" | tap-spec","pretest":"npm run lint","prebuild":"rimraf dist","prepublish":"npm run build","build":"babel src --out-dir dist"},"eslintConfig":{"extends":"airbnb","rules":{"max-len":[2,80,4],"func-names":0}},"babel":{"presets":["es2015"]},"files":["dist","!**/__tests__"],"gitHead":"640b0a662b8e918561b69ab79f7723327b3bbcbb","_id":"postcss-media-query-parser@0.2.3","_shasum":"27b39c6f4d94f81b1a73b8f76351c609e5cef244","_from":".","_npmVersion":"2.15.1","_nodeVersion":"0.12.15","_npmUser":{"name":"dryoma","email":"dryoma-npm@yandex.ru"},"dist":{"shasum":"27b39c6f4d94f81b1a73b8f76351c609e5cef244","size":7245,"noattachment":false,"key":"/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz","tarball":"http://registry.cnpm.dingdandao.com/postcss-media-query-parser/download/postcss-media-query-parser-0.2.3.tgz"},"maintainers":[{"name":"dryoma","email":"dryoma-npm@yandex.ru"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/postcss-media-query-parser-0.2.3.tgz_1477577504664_0.6458375623915344"},"directories":{},"publish_time":1477577507315,"_cnpm_publish_time":1477577507315,"_hasShrinkwrap":false},"0.2.2":{"name":"postcss-media-query-parser","version":"0.2.2","description":"A tool for parsing media query lists.","main":"dist/index.js","keywords":["postcss","postcss tool","media query","media query parsing"],"author":{"name":"dryoma"},"license":"MIT","homepage":"https://github.com/dryoma/postcss-media-query-parser","repository":{"type":"git","url":"git+https://github.com/dryoma/postcss-media-query-parser.git"},"bugs":{"url":"https://github.com/dryoma/postcss-media-query-parser/issues"},"devDependencies":{"babel-cli":"^6.14.0","babel-preset-es2015":"^6.14.0","babel-register":"^6.14.0","eslint":"^2.5.1","eslint-config-airbnb":"^6.0.2","eslint-plugin-react":"^4.2.3","tap-spec":"^4.1.1","tape":"^4.6.0"},"scripts":{"lint":"eslint . --ignore-path .gitignore","test":"tape -r babel-register \"src/**/__tests__/*.js\" | tap-spec","pretest":"npm run lint","prebuild":"rimraf dist","build":"babel src --out-dir dist"},"eslintConfig":{"extends":"airbnb","rules":{"max-len":[2,80,4],"func-names":0}},"babel":{"presets":["es2015"]},"files":["dist","src","!**/__tests__"],"gitHead":"a5d7e97a1e80e490a1a39e190c5dbfee4e20e77d","_id":"postcss-media-query-parser@0.2.2","_shasum":"ca29cb99718d7df1d5ff9998f62bd93e73ffb9f5","_from":".","_npmVersion":"2.15.1","_nodeVersion":"0.12.15","_npmUser":{"name":"dryoma","email":"dryoma-npm@yandex.ru"},"dist":{"shasum":"ca29cb99718d7df1d5ff9998f62bd93e73ffb9f5","size":9090,"noattachment":false,"key":"/postcss-media-query-parser/-/postcss-media-query-parser-0.2.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/postcss-media-query-parser/download/postcss-media-query-parser-0.2.2.tgz"},"maintainers":[{"name":"dryoma","email":"dryoma-npm@yandex.ru"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/postcss-media-query-parser-0.2.2.tgz_1477054059855_0.917179690208286"},"directories":{},"publish_time":1477054061894,"_cnpm_publish_time":1477054061894,"_hasShrinkwrap":false},"0.2.1":{"name":"postcss-media-query-parser","version":"0.2.1","description":"A tool for parsing media query lists.","main":"dist/index.js","keywords":["postcss","postcss tool","media query","media query parsing"],"author":{"name":"dryoma"},"license":"MIT","homepage":"https://github.com/dryoma/postcss-media-query-parser","repository":{"type":"git","url":"git+https://github.com/dryoma/postcss-media-query-parser.git"},"bugs":{"url":"https://github.com/dryoma/postcss-media-query-parser/issues"},"devDependencies":{"babel-cli":"^6.14.0","babel-preset-es2015":"^6.14.0","babel-register":"^6.14.0","eslint":"^2.5.1","eslint-config-airbnb":"^6.0.2","eslint-plugin-react":"^4.2.3","tap-spec":"^4.1.1","tape":"^4.6.0"},"scripts":{"lint":"eslint . --ignore-path .gitignore","test":"tape -r babel-register \"src/**/__tests__/*.js\" | tap-spec","pretest":"npm run lint","prebuild":"rimraf dist","build":"babel src --out-dir dist"},"eslintConfig":{"extends":"airbnb","rules":{"max-len":[2,80,4],"func-names":0}},"babel":{"presets":["es2015"]},"files":["dist","src","!**/__tests__"],"gitHead":"d3019c3503ce88d8def07eb41e3b3c09514db410","_id":"postcss-media-query-parser@0.2.1","_shasum":"b7389644997a5718d05d008756ecafc5f9cf22c9","_from":".","_npmVersion":"3.8.1","_nodeVersion":"4.4.0","_npmUser":{"name":"dryoma","email":"dryoma-npm@yandex.ru"},"dist":{"shasum":"b7389644997a5718d05d008756ecafc5f9cf22c9","size":9019,"noattachment":false,"key":"/postcss-media-query-parser/-/postcss-media-query-parser-0.2.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/postcss-media-query-parser/download/postcss-media-query-parser-0.2.1.tgz"},"maintainers":[{"name":"dryoma","email":"dryoma-npm@yandex.ru"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/postcss-media-query-parser-0.2.1.tgz_1472977100700_0.16083996486850083"},"directories":{},"publish_time":1472977103122,"_cnpm_publish_time":1472977103122,"_hasShrinkwrap":false},"0.2.0":{"name":"postcss-media-query-parser","version":"0.2.0","description":"A tool for parsing media query lists.","main":"dist/index.js","keywords":["postcss","postcss tool","media query","media query parsing"],"author":{"name":"dryoma"},"license":"MIT","homepage":"https://github.com/dryoma/postcss-media-query-parser","repository":{"type":"git","url":"git+https://github.com/dryoma/postcss-media-query-parser.git"},"bugs":{"url":"https://github.com/dryoma/postcss-media-query-parser/issues"},"devDependencies":{"babel-cli":"^6.6.5","babel-preset-es2015":"^6.6.0","babel-tape-runner":"^2.0.1","eslint":"^2.5.1","eslint-config-airbnb":"^6.0.2","eslint-plugin-react":"^4.2.3","tape":"^4.6.0"},"scripts":{"lint":"eslint . --ignore-path .gitignore","test":"babel-tape-runner \"src/**/__tests__/*.js\"","pretest":"npm run lint","prebuild":"rimraf dist","build":"babel src --out-dir dist"},"eslintConfig":{"extends":"airbnb","rules":{"max-len":[2,80,4],"func-names":0}},"babel":{"presets":["es2015"]},"files":["dist","src","!**/__tests__"],"gitHead":"0bf3d9c4c8b46c0f21ab48a98b06e1096b6b7ee8","_id":"postcss-media-query-parser@0.2.0","_shasum":"253bd1af287de7b5a2327cf2f354bd253e00547e","_from":".","_npmVersion":"3.8.1","_nodeVersion":"4.4.0","_npmUser":{"name":"dryoma","email":"dryoma-npm@yandex.ru"},"dist":{"shasum":"253bd1af287de7b5a2327cf2f354bd253e00547e","size":8588,"noattachment":false,"key":"/postcss-media-query-parser/-/postcss-media-query-parser-0.2.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/postcss-media-query-parser/download/postcss-media-query-parser-0.2.0.tgz"},"maintainers":[{"name":"dryoma","email":"dryoma-npm@yandex.ru"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/postcss-media-query-parser-0.2.0.tgz_1469523868307_0.3047204236499965"},"directories":{},"publish_time":1469523870281,"_cnpm_publish_time":1469523870281,"_hasShrinkwrap":false},"0.1.0":{"name":"postcss-media-query-parser","version":"0.1.0","description":"A tool for parsing media query lists.","main":"dist/index.js","keywords":["postcss","postcss tool","media query","media query parsing"],"author":{"name":"dryoma"},"license":"MIT","homepage":"https://github.com/dryoma/postcss-media-query-parser","repository":{"type":"git","url":"git+https://github.com/dryoma/postcss-media-query-parser.git"},"bugs":{"url":"https://github.com/dryoma/postcss-media-query-parser/issues"},"devDependencies":{"babel-cli":"^6.6.5","babel-preset-es2015":"^6.6.0","babel-tape-runner":"^2.0.1","eslint":"^2.5.1","eslint-config-airbnb":"^6.0.2","eslint-plugin-react":"^4.2.3","tape":"^4.6.0"},"scripts":{"lint":"eslint . --ignore-path .gitignore","test":"babel-tape-runner \"src/**/__tests__/*.js\"","pretest":"npm run lint","prebuild":"rimraf dist","build":"babel src --out-dir dist"},"eslintConfig":{"extends":"airbnb","rules":{"max-len":[2,80,4],"func-names":0}},"babel":{"presets":["es2015"]},"files":["dist","src","!**/__tests__"],"gitHead":"90d0d3a3d06c23b69cf939287d85cbee8233d254","_id":"postcss-media-query-parser@0.1.0","_shasum":"af258e28ef89f2d84b10102ac8be4a99fc779445","_from":".","_npmVersion":"3.8.1","_nodeVersion":"4.4.0","_npmUser":{"name":"dryoma","email":"dryoma-npm@yandex.ru"},"dist":{"shasum":"af258e28ef89f2d84b10102ac8be4a99fc779445","size":8058,"noattachment":false,"key":"/postcss-media-query-parser/-/postcss-media-query-parser-0.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/postcss-media-query-parser/download/postcss-media-query-parser-0.1.0.tgz"},"maintainers":[{"name":"dryoma","email":"dryoma-npm@yandex.ru"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/postcss-media-query-parser-0.1.0.tgz_1468403426172_0.05790597922168672"},"directories":{},"publish_time":1468403428460,"_cnpm_publish_time":1468403428460,"_hasShrinkwrap":false}},"readme":"# postcss-media-query-parser\r\n\r\n[![NPM version](http://img.shields.io/npm/v/postcss-media-query-parser.svg)](https://www.npmjs.com/package/postcss-media-query-parser) [![Build Status](https://travis-ci.org/dryoma/postcss-media-query-parser.svg?branch=master)](https://travis-ci.org/dryoma/postcss-media-query-parser)\r\n\r\nMedia query parser with very simple traversing functionality.\r\n\r\n## Installation and usage\r\n\r\nFirst install it via NPM:\r\n\r\n```\r\nnpm install postcss-media-query-parser\r\n```\r\n\r\nThen in your Node.js application:\r\n\r\n```js\r\nimport mediaParser from \"postcss-media-query-parser\";\r\n\r\nconst mediaQueryString = \"(max-width: 100px), not print\";\r\nconst result = mediaParser(mediaQueryString);\r\n```\r\n\r\nThe `result` will be this object:\r\n\r\n```js\r\n{\r\n  type: 'media-query-list',\r\n  value: '(max-width: 100px), not print',\r\n  after: '',\r\n  before: '',\r\n  sourceIndex: 0,\r\n\r\n  // the first media query\r\n  nodes: [{\r\n    type: 'media-query',\r\n    value: '(max-width: 100px)',\r\n    before: '',\r\n    after: '',\r\n    sourceIndex: 0,\r\n    parent: <link to parent 'media-query-list' node>,\r\n    nodes: [{\r\n      type: 'media-feature-expression',\r\n      value: '(max-width: 100px)',\r\n      before: '',\r\n      after: '',\r\n      sourceIndex: 0,\r\n      parent: <link to parent 'media-query' node>,\r\n      nodes: [{\r\n        type: 'media-feature',\r\n        value: 'max-width',\r\n        before: '',\r\n        after: '',\r\n        sourceIndex: 1,\r\n        parent: <link to parent 'media-feature-expression' node>,\r\n      }, {\r\n        type: 'colon',\r\n        value: ':',\r\n        before: '',\r\n        after: ' ',\r\n        sourceIndex: 10,\r\n        parent: <link to parent 'media-feature-expression' node>,\r\n      }, {\r\n        type: 'value',\r\n        value: '100px',\r\n        before: ' ',\r\n        after: '',\r\n        sourceIndex: 12,\r\n        parent: <link to parent 'media-feature-expression' node>,\r\n      }]\r\n    }]\r\n  },\r\n  // the second media query\r\n  {\r\n    type: 'media-query',\r\n    value: 'not print',\r\n    before: ' ',\r\n    after: '',\r\n    sourceIndex: 20,\r\n    parent: <link to parent 'media-query-list' node>,\r\n    nodes: [{\r\n      type: 'keyword',\r\n      value: 'not',\r\n      before: ' ',\r\n      after: ' ',\r\n      sourceIndex: 20,\r\n      parent: <link to parent 'media-query' node>,\r\n    }, {\r\n      type: 'media-type',\r\n      value: 'print',\r\n      before: ' ',\r\n      after: '',\r\n      sourceIndex: 24,\r\n      parent: <link to parent 'media-query' node>,\r\n    }]\r\n  }]\r\n}\r\n```\r\n\r\nOne of the likely sources of a string to parse would be traversing [a PostCSS container node](http://api.postcss.org/Root.html) and getting the `params` property of nodes with the name of \"atRule\":\r\n\r\n```js\r\nimport postcss from \"postcss\";\r\nimport mediaParser from \"postcss-media-query-parser\";\r\n\r\nconst root = postcss.parse(<contents>);\r\n// ... or any other way to get sucn container\r\n\r\nroot.walkAtRules(\"media\", (atRule) => {\r\n  const mediaParsed = mediaParser(atRule.params);\r\n  // Do something with \"mediaParsed\" object\r\n});\r\n```\r\n\r\n## Nodes\r\n\r\nNode is a very generic item in terms of this parser. It's is pretty much everything that ends up in the parsed result. Each node has these properties:\r\n\r\n* `type`: the type of the node (see below);\r\n* `value`: the node's value stripped of trailing whitespaces;\r\n* `sourceIndex`: 0-based index of the node start relative to the source start (excluding trailing whitespaces);\r\n* `before`: a string that contain a whitespace between the node start and the previous node end/source start;\r\n* `after`: a string that contain a whitespace between the node end and the next node start/source end;\r\n* `parent`: a link to this node's parent node (a container).\r\n\r\nA node can have one of these types (according to [the 2012 CSS3 standard](https://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/)):\r\n\r\n* `media-query-list`: that is the root level node of the parsing result. A [container](#containers); its children can have types of `url` and `media-query`.\r\n* `url`: if a source is taken from a CSS `@import` rule, it will have a `url(...)` function call. The value of such node will be `url(http://uri-address)`, it is to be parsed separately.\r\n* `media-query`: such nodes correspond to each media query in a comma separated list. In the exapmle above there are two. Nodes of this type are [containers](#containers).\r\n* `media-type`: `screen`, `tv` and other media types.\r\n* `keyword`: `only`, `not` or `and` keyword.\r\n* `media-feature-expression`: an expression in parentheses that checks for a condition of a particular media feature. The value would be like this: `(max-width: 1000px)`. Such nodes are [containers](#containers). They always have a `media-feature` child node, but might not have a `value` child node (like in `screen and (color)`).\r\n* `media-feature`: a media feature, e.g. `max-width`.\r\n* `colon`: present if a media feature expression has a colon (e.g. `(min-width: 1000px)`, compared to `(color)`).\r\n* `value`: a media feature expression value, e.g. `100px` in `(max-width: 1000px)`.\r\n\r\n### Parsing details\r\n\r\npostcss-media-query-parser allows for cases of some **non-standard syntaxes** and tries its best to work them around. For example, in a media query from a code with SCSS syntax:\r\n\r\n```scss\r\n@media #{$media-type} and ( #{\"max-width\" + \": 10px\"} ) { ... }\r\n```\r\n\r\n`#{$media-type}` will be the node of type `media-type`, alghough `$media-type`'s value can be `only screen`. And inside `media-feature-expression` there will only be a `media-feature` type node with the value of `#{\"max-width\" + \": 10px\"}` (this example doesn't make much sense, it's for demo purpose).\r\n\r\nBut the result of parsing **malformed media queries** (such as with incorrect amount of closing parens, curly braces, etc.) can be unexpected. For exapmle, parsing:\r\n\r\n```scss\r\n@media ((min-width: -100px)\r\n```\r\n\r\nwould return a media query list with the single `media-query` node that has no child nodes.\r\n\r\n## Containers\r\n\r\nContainers are [nodes](#nodes) that have other nodes as children. Container nodes have an additional property `nodes` which is an array of their child nodes. And also these methods:\r\n\r\n* `each(callback)` - traverses the direct child nodes of a container, calling `callback` function for each of them. Returns `false` if traversing has stopped by means of `callback` returning `false`, and `true` otherwise.\r\n* `walk([filter, ]callback)` - traverses ALL descendant nodes of a container, calling `callback` function for each of them. Returns `false` if traversing has stopped by means of `callback` returning `false`, and `true` otherwise.\r\n\r\nIn both cases `callback` takes these parameters:\r\n\r\n- `node` - the current node (one of the container's descendats, that the callback has been called against).\r\n- `i` - 0-based index of the `node` in an array of its parent's children.\r\n- `nodes` - array of child nodes of `node`'s parent.\r\n\r\nIf `callback` returns `false`, the traversing stops.\r\n\r\n## License\r\n\r\nMIT\r\n","_attachments":{},"homepage":"https://github.com/dryoma/postcss-media-query-parser","bugs":{"url":"https://github.com/dryoma/postcss-media-query-parser/issues"},"license":"MIT"}