You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					264 lines
				
				7.5 KiB
			
		
		
			
		
	
	
					264 lines
				
				7.5 KiB
			| 
											3 years ago
										 | # postcss-value-parser
 | ||
|  | 
 | ||
|  | [](https://travis-ci.org/TrySound/postcss-value-parser) | ||
|  | 
 | ||
|  | Transforms CSS declaration values and at-rule parameters into a tree of nodes, and provides a simple traversal API. | ||
|  | 
 | ||
|  | ## Usage
 | ||
|  | 
 | ||
|  | ```js | ||
|  | var valueParser = require('postcss-value-parser'); | ||
|  | var cssBackgroundValue = 'url(foo.png) no-repeat 40px 73%'; | ||
|  | var parsedValue = valueParser(cssBackgroundValue); | ||
|  | // parsedValue exposes an API described below, | ||
|  | // e.g. parsedValue.walk(..), parsedValue.toString(), etc. | ||
|  | ``` | ||
|  | 
 | ||
|  | For example, parsing the value `rgba(233, 45, 66, .5)` will return the following: | ||
|  | 
 | ||
|  | ```js | ||
|  | { | ||
|  |   nodes: [ | ||
|  |     { | ||
|  |       type: 'function', | ||
|  |       value: 'rgba', | ||
|  |       before: '', | ||
|  |       after: '', | ||
|  |       nodes: [ | ||
|  |         { type: 'word', value: '233' }, | ||
|  |         { type: 'div', value: ',', before: '', after: ' ' }, | ||
|  |         { type: 'word', value: '45' }, | ||
|  |         { type: 'div', value: ',', before: '', after: ' ' }, | ||
|  |         { type: 'word', value: '66' }, | ||
|  |         { type: 'div', value: ',', before: ' ', after: '' }, | ||
|  |         { type: 'word', value: '.5' } | ||
|  |       ] | ||
|  |     } | ||
|  |   ] | ||
|  | } | ||
|  | ``` | ||
|  | 
 | ||
|  | If you wanted to convert each `rgba()` value in `sourceCSS` to a hex value, you could do so like this: | ||
|  | 
 | ||
|  | ```js | ||
|  | var valueParser = require('postcss-value-parser'); | ||
|  | 
 | ||
|  | var parsed = valueParser(sourceCSS); | ||
|  | 
 | ||
|  | // walk() will visit all the of the nodes in the tree, | ||
|  | // invoking the callback for each. | ||
|  | parsed.walk(function (node) { | ||
|  | 
 | ||
|  |   // Since we only want to transform rgba() values, | ||
|  |   // we can ignore anything else. | ||
|  |   if (node.type !== 'function' && node.value !== 'rgba') return; | ||
|  | 
 | ||
|  |   // We can make an array of the rgba() arguments to feed to a | ||
|  |   // convertToHex() function | ||
|  |   var color = node.nodes.filter(function (node) { | ||
|  |     return node.type === 'word'; | ||
|  |   }).map(function (node) { | ||
|  |     return Number(node.value); | ||
|  |   }); // [233, 45, 66, .5] | ||
|  | 
 | ||
|  |   // Now we will transform the existing rgba() function node | ||
|  |   // into a word node with the hex value | ||
|  |   node.type = 'word'; | ||
|  |   node.value = convertToHex(color); | ||
|  | }) | ||
|  | 
 | ||
|  | parsed.toString(); // #E92D42 | ||
|  | ``` | ||
|  | 
 | ||
|  | ## Nodes
 | ||
|  | 
 | ||
|  | Each node is an object with these common properties: | ||
|  | 
 | ||
|  | - **type**: The type of node (`word`, `string`, `div`, `space`, `comment`, or `function`). | ||
|  |   Each type is documented below. | ||
|  | - **value**: Each node has a `value` property; but what exactly `value` means | ||
|  |   is specific to the node type. Details are documented for each type below. | ||
|  | - **sourceIndex**: The starting index of the node within the original source | ||
|  |   string. For example, given the source string `10px 20px`, the `word` node | ||
|  |   whose value is `20px` will have a `sourceIndex` of `5`. | ||
|  | 
 | ||
|  | ### word
 | ||
|  | 
 | ||
|  | The catch-all node type that includes keywords (e.g. `no-repeat`), | ||
|  | quantities (e.g. `20px`, `75%`, `1.5`), and hex colors (e.g. `#e6e6e6`). | ||
|  | 
 | ||
|  | Node-specific properties: | ||
|  | 
 | ||
|  | - **value**: The "word" itself. | ||
|  | 
 | ||
|  | ### string
 | ||
|  | 
 | ||
|  | A quoted string value, e.g. `"something"` in `content: "something";`. | ||
|  | 
 | ||
|  | Node-specific properties: | ||
|  | 
 | ||
|  | - **value**: The text content of the string. | ||
|  | - **quote**: The quotation mark surrounding the string, either `"` or `'`. | ||
|  | - **unclosed**: `true` if the string was not closed properly. e.g. `"unclosed string  `. | ||
|  | 
 | ||
|  | ### div
 | ||
|  | 
 | ||
|  | A divider, for example | ||
|  | 
 | ||
|  | - `,` in `animation-duration: 1s, 2s, 3s` | ||
|  | - `/` in `border-radius: 10px / 23px` | ||
|  | - `:` in `(min-width: 700px)` | ||
|  | 
 | ||
|  | Node-specific properties: | ||
|  | 
 | ||
|  | - **value**: The divider character. Either `,`, `/`, or `:` (see examples above). | ||
|  | - **before**: Whitespace before the divider. | ||
|  | - **after**: Whitespace after the divider. | ||
|  | 
 | ||
|  | ### space
 | ||
|  | 
 | ||
|  | Whitespace used as a separator, e.g. ` ` occurring twice in `border: 1px solid black;`. | ||
|  | 
 | ||
|  | Node-specific properties: | ||
|  | 
 | ||
|  | - **value**: The whitespace itself. | ||
|  | 
 | ||
|  | ### comment
 | ||
|  | 
 | ||
|  | A CSS comment starts with `/*` and ends with `*/` | ||
|  | 
 | ||
|  | Node-specific properties: | ||
|  | 
 | ||
|  | - **value**: The comment value without `/*` and `*/` | ||
|  | - **unclosed**: `true` if the comment was not closed properly. e.g. `/* comment without an end  `. | ||
|  | 
 | ||
|  | ### function
 | ||
|  | 
 | ||
|  | A CSS function, e.g. `rgb(0,0,0)` or `url(foo.bar)`. | ||
|  | 
 | ||
|  | Function nodes have nodes nested within them: the function arguments. | ||
|  | 
 | ||
|  | Additional properties: | ||
|  | 
 | ||
|  | - **value**: The name of the function, e.g. `rgb` in `rgb(0,0,0)`. | ||
|  | - **before**: Whitespace after the opening parenthesis and before the first argument, | ||
|  |   e.g. `  ` in `rgb(  0,0,0)`. | ||
|  | - **after**: Whitespace before the closing parenthesis and after the last argument, | ||
|  |   e.g. `  ` in `rgb(0,0,0  )`. | ||
|  | - **nodes**: More nodes representing the arguments to the function. | ||
|  | - **unclosed**: `true` if the parentheses was not closed properly. e.g. `( unclosed-function  `. | ||
|  | 
 | ||
|  | Media features surrounded by parentheses are considered functions with an | ||
|  | empty value. For example, `(min-width: 700px)` parses to these nodes: | ||
|  | 
 | ||
|  | ```js | ||
|  | [ | ||
|  |   { | ||
|  |     type: 'function', value: '', before: '', after: '', | ||
|  |     nodes: [ | ||
|  |       { type: 'word', value: 'min-width' }, | ||
|  |       { type: 'div', value: ':', before: '', after: ' ' }, | ||
|  |       { type: 'word', value: '700px' } | ||
|  |     ] | ||
|  |   } | ||
|  | ] | ||
|  | ``` | ||
|  | 
 | ||
|  | `url()` functions can be parsed a little bit differently depending on | ||
|  | whether the first character in the argument is a quotation mark. | ||
|  | 
 | ||
|  | `url( /gfx/img/bg.jpg )` parses to: | ||
|  | 
 | ||
|  | ```js | ||
|  | { type: 'function', sourceIndex: 0, value: 'url', before: ' ', after: ' ', nodes: [ | ||
|  |     { type: 'word', sourceIndex: 5, value: '/gfx/img/bg.jpg' } | ||
|  | ] } | ||
|  | ``` | ||
|  | 
 | ||
|  | `url( "/gfx/img/bg.jpg" )`, on the other hand, parses to: | ||
|  | 
 | ||
|  | ```js | ||
|  | { type: 'function', sourceIndex: 0, value: 'url', before: ' ', after: ' ', nodes: [ | ||
|  |      type: 'string', sourceIndex: 5, quote: '"', value: '/gfx/img/bg.jpg' }, | ||
|  | ] } | ||
|  | ``` | ||
|  | 
 | ||
|  | ### unicode-range
 | ||
|  | 
 | ||
|  | The unicode-range CSS descriptor sets the specific range of characters to be  | ||
|  | used from a font defined by @font-face and made available  | ||
|  | for use on the current page (`unicode-range: U+0025-00FF`). | ||
|  | 
 | ||
|  | Node-specific properties: | ||
|  | 
 | ||
|  | - **value**: The "unicode-range" itself. | ||
|  | 
 | ||
|  | ## API
 | ||
|  | 
 | ||
|  | ``` | ||
|  | var valueParser = require('postcss-value-parser'); | ||
|  | ``` | ||
|  | 
 | ||
|  | ### valueParser.unit(quantity)
 | ||
|  | 
 | ||
|  | Parses `quantity`, distinguishing the number from the unit. Returns an object like the following: | ||
|  | 
 | ||
|  | ```js | ||
|  | // Given 2rem | ||
|  | { | ||
|  |   number: '2', | ||
|  |   unit: 'rem' | ||
|  | } | ||
|  | ``` | ||
|  | 
 | ||
|  | If the `quantity` argument cannot be parsed as a number, returns `false`. | ||
|  | 
 | ||
|  | *This function does not parse complete values*: you cannot pass it `1px solid black` and expect `px` as | ||
|  | the unit. Instead, you should pass it single quantities only. Parse `1px solid black`, then pass it | ||
|  | the stringified `1px` node (a `word` node) to parse the number and unit. | ||
|  | 
 | ||
|  | ### valueParser.stringify(nodes[, custom])
 | ||
|  | 
 | ||
|  | Stringifies a node or array of nodes. | ||
|  | 
 | ||
|  | The `custom` function is called for each `node`; return a string to override the default behaviour. | ||
|  | 
 | ||
|  | ### valueParser.walk(nodes, callback[, bubble])
 | ||
|  | 
 | ||
|  | Walks each provided node, recursively walking all descendent nodes within functions. | ||
|  | 
 | ||
|  | Returning `false` in the `callback` will prevent traversal of descendent nodes (within functions). | ||
|  | You can use this feature to for shallow iteration, walking over only the *immediate* children. | ||
|  | *Note: This only applies if `bubble` is `false` (which is the default).* | ||
|  | 
 | ||
|  | By default, the tree is walked from the outermost node inwards. | ||
|  | To reverse the direction, pass `true` for the `bubble` argument. | ||
|  | 
 | ||
|  | The `callback` is invoked with three arguments: `callback(node, index, nodes)`. | ||
|  | 
 | ||
|  | - `node`: The current node. | ||
|  | - `index`: The index of the current node. | ||
|  | - `nodes`: The complete nodes array passed to `walk()`. | ||
|  | 
 | ||
|  | Returns the `valueParser` instance. | ||
|  | 
 | ||
|  | ### var parsed = valueParser(value)
 | ||
|  | 
 | ||
|  | Returns the parsed node tree. | ||
|  | 
 | ||
|  | ### parsed.nodes
 | ||
|  | 
 | ||
|  | The array of nodes. | ||
|  | 
 | ||
|  | ### parsed.toString()
 | ||
|  | 
 | ||
|  | Stringifies the node tree. | ||
|  | 
 | ||
|  | ### parsed.walk(callback[, bubble])
 | ||
|  | 
 | ||
|  | Walks each node inside `parsed.nodes`. See the documentation for `valueParser.walk()` above. | ||
|  | 
 | ||
|  | # License
 | ||
|  | 
 | ||
|  | MIT © [Bogdan Chadkin](mailto:trysound@yandex.ru) |