motion
Version:
motion - moving development forward
79 lines (78 loc) • 9.94 kB
JSON
{
"_args": [
[
"postcss-value-parser@https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.2.3.tgz",
"/Users/nw/flint/packages/flint"
]
],
"_from": "postcss-value-parser@>=3.2.3 <4.0.0",
"_id": "postcss-value-parser@3.2.3",
"_inCache": true,
"_location": "/postcss-value-parser",
"_phantomChildren": {},
"_requested": {
"name": "postcss-value-parser",
"raw": "postcss-value-parser@https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.2.3.tgz",
"rawSpec": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.2.3.tgz",
"scope": null,
"spec": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.2.3.tgz",
"type": "remote"
},
"_requiredBy": [
"/autoprefixer",
"/cssnano",
"/postcss-colormin",
"/postcss-convert-values",
"/postcss-merge-idents",
"/postcss-minify-font-values",
"/postcss-minify-gradients",
"/postcss-minify-params",
"/postcss-normalize-url",
"/postcss-ordered-values",
"/postcss-reduce-idents",
"/postcss-reduce-transforms",
"/postcss-svgo"
],
"_resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.2.3.tgz",
"_shasum": "216e7247bbd26b7668ab9eebd08de6b96eb2b453",
"_shrinkwrap": null,
"_spec": "postcss-value-parser@https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.2.3.tgz",
"_where": "/Users/nw/flint/packages/flint",
"author": {
"email": "trysound@yandex.ru",
"name": "Bogdan Chadkin"
},
"bugs": {
"url": "https://github.com/TrySound/postcss-value-parser/issues"
},
"dependencies": {},
"description": "Transforms css values and at-rule params into the tree",
"devDependencies": {
"eslint": "^1.1.0",
"tap-spec": "^4.1.0",
"tape": "^4.2.0"
},
"files": [
"lib"
],
"homepage": "https://github.com/TrySound/postcss-value-parser",
"keywords": [
"parser",
"postcss",
"value"
],
"license": "MIT",
"main": "lib/index.js",
"name": "postcss-value-parser",
"optionalDependencies": {},
"readme": "# postcss-value-parser\n\n[](https://travis-ci.org/TrySound/postcss-value-parser)\n\nTransforms CSS declaration values and at-rule parameters into a tree of nodes, and provides a simple traversal API.\n\n## Usage\n\n```js\nvar valueParser = require('postcss-value-parser');\nvar cssBackgroundValue = 'url(foo.png) no-repeat 40px 73%';\nvar parsedValue = valueParser(cssBackgroundValue);\n// parsedValue exposes an API described below,\n// e.g. parsedValue.walk(..), parsedValue.toString(), etc.\n```\n\nFor example, parsing the value `rgba(233, 45, 66, .5)` will return the following:\n\n```js\n{\n nodes: [\n {\n type: 'function',\n value: 'rgba',\n before: '',\n after: '',\n nodes: [\n { type: 'word', value: '233' },\n { type: 'div', value: ',', before: '', after: ' ' },\n { type: 'word', value: '45' },\n { type: 'div', value: ',', before: '', after: ' ' },\n { type: 'word', value: '66' },\n { type: 'div', value: ',', before: ' ', after: '' },\n { type: 'word', value: '.5' }\n ]\n }\n ]\n}\n```\n\nIf you wanted to convert each `rgba()` value in `sourceCSS` to a hex value, you could do so like this:\n\n```js\nvar valueParser = require('postcss-value-parser');\n\nvar parsed = valueParser(sourceCSS);\n\n// walk() will visit all the of the nodes in the tree,\n// invoking the callback for each.\nparsed.walk(function (node) {\n\n // Since we only want to transform rgba() values,\n // we can ignore anything else.\n if (node.type !== 'function' && node.value !== 'rgba') return;\n\n // We can make an array of the rgba() arguments to feed to a\n // convertToHex() function\n var color = node.nodes.filter(function (node) {\n return node.type === 'word';\n }).map(function (node) {\n return Number(node.value);\n }); // [233, 45, 66, .5]\n\n // Now we will transform the existing rgba() function node\n // into a word node with the hex value\n node.type = 'word';\n node.value = convertToHex(color);\n})\n\nparsed.toString(); // #E92D42\n```\n\n## Nodes\n\nEach node is an object with these common properties:\n\n- **type**: The type of node (`word`, `string`, `div`, `space`, `comment`, or `function`).\n Each type is documented below.\n- **value**: Each node has a `value` property; but what exactly `value` means\n is specific to the node type. Details are documented for each type below.\n- **sourceIndex**: The starting index of the node within the original source\n string. For example, given the source string `10px 20px`, the `word` node\n whose value is `20px` will have a `sourceIndex` of `5`.\n\n### word\n\nThe catch-all node type that includes keywords (e.g. `no-repeat`),\nquantities (e.g. `20px`, `75%`, `1.5`), and hex colors (e.g. `#e6e6e6`).\n\nNode-specific properties:\n\n- **value**: The \"word\" itself.\n\n### string\n\nA quoted string value, e.g. `\"something\"` in `content: \"something\";`.\n\nNode-specific properties:\n\n- **value**: The text content of the string.\n- **quote**: The quotation mark surrounding the string, either `\"` or `'`.\n- **unclosed**: `true` if the string was not closed properly. e.g. `\"unclosed string `.\n\n### div\n\nA divider, for example\n\n- `,` in `animation-duration: 1s, 2s, 3s`\n- `/` in `border-radius: 10px / 23px`\n- `:` in `(min-width: 700px)`\n\nNode-specific properties:\n\n- **value**: The divider character. Either `,`, `/`, or `:` (see examples above).\n- **before**: Whitespace before the divider.\n- **after**: Whitespace after the divider.\n\n### space\n\nWhitespace used as a separator, e.g. ` ` occurring twice in `border: 1px solid black;`.\n\nNode-specific properties:\n\n- **value**: The whitespace itself.\n\n### comment\n\nA CSS comment starts with `/*` and ends with `*/`\n\nNode-specific properties:\n\n- **value**: The comment value without `/*` and `*/`\n- **unclosed**: `true` if the comment was not closed properly. e.g. `/* comment without an end `.\n\n### function\n\nA CSS function, e.g. `rgb(0,0,0)` or `url(foo.bar)`.\n\nFunction nodes have nodes nested within them: the function arguments.\n\nAdditional properties:\n\n- **value**: The name of the function, e.g. `rgb` in `rgb(0,0,0)`.\n- **before**: Whitespace after the opening parenthesis and before the first argument,\n e.g. ` ` in `rgb( 0,0,0)`.\n- **after**: Whitespace before the closing parenthesis and after the last argument,\n e.g. ` ` in `rgb(0,0,0 )`.\n- **nodes**: More nodes representing the arguments to the function.\n- **unclosed**: `true` if the parentheses was not closed properly. e.g. `( unclosed-function `.\n\nMedia features surrounded by parentheses are considered functions with an\nempty value. For example, `(min-width: 700px)` parses to these nodes:\n\n```js\n[\n {\n type: 'function', value: '', before: '', after: '',\n nodes: [\n { type: 'word', value: 'min-width' },\n { type: 'div', value: ':', before: '', after: ' ' },\n { type: 'word', value: '700px' }\n ]\n }\n]\n```\n\n`url()` functions can be parsed a little bit differently depending on\nwhether the first character in the argument is a quotation mark.\n\n`url( /gfx/img/bg.jpg )` parses to:\n\n```js\n{ type: 'function', sourceIndex: 0, value: 'url', before: ' ', after: ' ', nodes: [\n { type: 'word', sourceIndex: 5, value: '/gfx/img/bg.jpg' }\n] }\n```\n\n`url( \"/gfx/img/bg.jpg\" )`, on the other hand, parses to:\n\n```js\n{ type: 'function', sourceIndex: 0, value: 'url', before: ' ', after: ' ', nodes: [\n type: 'string', sourceIndex: 5, quote: '\"', value: '/gfx/img/bg.jpg' },\n] }\n```\n\n## API\n\n```\nvar valueParser = require('postcss-value-parser');\n```\n\n### valueParser.unit(quantity)\n\nParses `quantity`, distinguishing the number from the unit. Returns an object like the following:\n\n```js\n// Given 2rem\n{\n number: '2',\n unit: 'rem'\n}\n```\n\nIf the `quantity` argument cannot be parsed as a number, returns `false`.\n\n*This function does not parse complete values*: you cannot pass it `1px solid black` and expect `px` as\nthe unit. Instead, you should pass it single quantities only. Parse `1px solid black`, then pass it\nthe stringified `1px` node (a `word` node) to parse the number and unit.\n\n### valueParser.stringify(nodes)\n\nStringifies a node or array of nodes.\n\n### valueParser.walk(nodes, callback[, bubble])\n\nWalks each provided node, recursively walking all descendent nodes within functions.\n\nReturning `false` in the `callback` will prevent traversal of descendent nodes (within functions).\nYou can use this feature to for shallow iteration, walking over only the *immediate* children.\n*Note: This only applies if `bubble` is `false` (which is the default).*\n\nBy default, the tree is walked from the outermost node inwards.\nTo reverse the direction, pass `true` for the `bubble` argument.\n\nThe `callback` is invoked with three arguments: `callback(node, index, nodes)`.\n\n- `node`: The current node.\n- `index`: The index of the current node.\n- `nodes`: The complete nodes array passed to `walk()`.\n\nReturns the `valueParser` instance.\n\n### var parsed = valueParser(value)\n\nReturns the parsed node tree.\n\n### parsed.nodes\n\nThe array of nodes.\n\n### parsed.toString()\n\nStringifies the node tree.\n\n### parsed.walk(callback[, bubble])\n\nWalks each node inside `parsed.nodes`. See the documentation for `valueParser.walk()` above.\n\n# License\n\nMIT © [Bogdan Chadkin](mailto:trysound@yandex.ru)\n",
"readmeFilename": "README.md",
"repository": {
"type": "git",
"url": "git+https://github.com/TrySound/postcss-value-parser.git"
},
"scripts": {
"test": "eslint lib test && tape test/*.js | tap-spec"
},
"version": "3.2.3"
}