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.

263 lines
7.5 KiB

4 years ago
  1. # postcss-value-parser
  2. [![Travis CI](https://travis-ci.org/TrySound/postcss-value-parser.svg)](https://travis-ci.org/TrySound/postcss-value-parser)
  3. Transforms CSS declaration values and at-rule parameters into a tree of nodes, and provides a simple traversal API.
  4. ## Usage
  5. ```js
  6. var valueParser = require('postcss-value-parser');
  7. var cssBackgroundValue = 'url(foo.png) no-repeat 40px 73%';
  8. var parsedValue = valueParser(cssBackgroundValue);
  9. // parsedValue exposes an API described below,
  10. // e.g. parsedValue.walk(..), parsedValue.toString(), etc.
  11. ```
  12. For example, parsing the value `rgba(233, 45, 66, .5)` will return the following:
  13. ```js
  14. {
  15. nodes: [
  16. {
  17. type: 'function',
  18. value: 'rgba',
  19. before: '',
  20. after: '',
  21. nodes: [
  22. { type: 'word', value: '233' },
  23. { type: 'div', value: ',', before: '', after: ' ' },
  24. { type: 'word', value: '45' },
  25. { type: 'div', value: ',', before: '', after: ' ' },
  26. { type: 'word', value: '66' },
  27. { type: 'div', value: ',', before: ' ', after: '' },
  28. { type: 'word', value: '.5' }
  29. ]
  30. }
  31. ]
  32. }
  33. ```
  34. If you wanted to convert each `rgba()` value in `sourceCSS` to a hex value, you could do so like this:
  35. ```js
  36. var valueParser = require('postcss-value-parser');
  37. var parsed = valueParser(sourceCSS);
  38. // walk() will visit all the of the nodes in the tree,
  39. // invoking the callback for each.
  40. parsed.walk(function (node) {
  41. // Since we only want to transform rgba() values,
  42. // we can ignore anything else.
  43. if (node.type !== 'function' && node.value !== 'rgba') return;
  44. // We can make an array of the rgba() arguments to feed to a
  45. // convertToHex() function
  46. var color = node.nodes.filter(function (node) {
  47. return node.type === 'word';
  48. }).map(function (node) {
  49. return Number(node.value);
  50. }); // [233, 45, 66, .5]
  51. // Now we will transform the existing rgba() function node
  52. // into a word node with the hex value
  53. node.type = 'word';
  54. node.value = convertToHex(color);
  55. })
  56. parsed.toString(); // #E92D42
  57. ```
  58. ## Nodes
  59. Each node is an object with these common properties:
  60. - **type**: The type of node (`word`, `string`, `div`, `space`, `comment`, or `function`).
  61. Each type is documented below.
  62. - **value**: Each node has a `value` property; but what exactly `value` means
  63. is specific to the node type. Details are documented for each type below.
  64. - **sourceIndex**: The starting index of the node within the original source
  65. string. For example, given the source string `10px 20px`, the `word` node
  66. whose value is `20px` will have a `sourceIndex` of `5`.
  67. ### word
  68. The catch-all node type that includes keywords (e.g. `no-repeat`),
  69. quantities (e.g. `20px`, `75%`, `1.5`), and hex colors (e.g. `#e6e6e6`).
  70. Node-specific properties:
  71. - **value**: The "word" itself.
  72. ### string
  73. A quoted string value, e.g. `"something"` in `content: "something";`.
  74. Node-specific properties:
  75. - **value**: The text content of the string.
  76. - **quote**: The quotation mark surrounding the string, either `"` or `'`.
  77. - **unclosed**: `true` if the string was not closed properly. e.g. `"unclosed string `.
  78. ### div
  79. A divider, for example
  80. - `,` in `animation-duration: 1s, 2s, 3s`
  81. - `/` in `border-radius: 10px / 23px`
  82. - `:` in `(min-width: 700px)`
  83. Node-specific properties:
  84. - **value**: The divider character. Either `,`, `/`, or `:` (see examples above).
  85. - **before**: Whitespace before the divider.
  86. - **after**: Whitespace after the divider.
  87. ### space
  88. Whitespace used as a separator, e.g. ` ` occurring twice in `border: 1px solid black;`.
  89. Node-specific properties:
  90. - **value**: The whitespace itself.
  91. ### comment
  92. A CSS comment starts with `/*` and ends with `*/`
  93. Node-specific properties:
  94. - **value**: The comment value without `/*` and `*/`
  95. - **unclosed**: `true` if the comment was not closed properly. e.g. `/* comment without an end `.
  96. ### function
  97. A CSS function, e.g. `rgb(0,0,0)` or `url(foo.bar)`.
  98. Function nodes have nodes nested within them: the function arguments.
  99. Additional properties:
  100. - **value**: The name of the function, e.g. `rgb` in `rgb(0,0,0)`.
  101. - **before**: Whitespace after the opening parenthesis and before the first argument,
  102. e.g. ` ` in `rgb( 0,0,0)`.
  103. - **after**: Whitespace before the closing parenthesis and after the last argument,
  104. e.g. ` ` in `rgb(0,0,0 )`.
  105. - **nodes**: More nodes representing the arguments to the function.
  106. - **unclosed**: `true` if the parentheses was not closed properly. e.g. `( unclosed-function `.
  107. Media features surrounded by parentheses are considered functions with an
  108. empty value. For example, `(min-width: 700px)` parses to these nodes:
  109. ```js
  110. [
  111. {
  112. type: 'function', value: '', before: '', after: '',
  113. nodes: [
  114. { type: 'word', value: 'min-width' },
  115. { type: 'div', value: ':', before: '', after: ' ' },
  116. { type: 'word', value: '700px' }
  117. ]
  118. }
  119. ]
  120. ```
  121. `url()` functions can be parsed a little bit differently depending on
  122. whether the first character in the argument is a quotation mark.
  123. `url( /gfx/img/bg.jpg )` parses to:
  124. ```js
  125. { type: 'function', sourceIndex: 0, value: 'url', before: ' ', after: ' ', nodes: [
  126. { type: 'word', sourceIndex: 5, value: '/gfx/img/bg.jpg' }
  127. ] }
  128. ```
  129. `url( "/gfx/img/bg.jpg" )`, on the other hand, parses to:
  130. ```js
  131. { type: 'function', sourceIndex: 0, value: 'url', before: ' ', after: ' ', nodes: [
  132. type: 'string', sourceIndex: 5, quote: '"', value: '/gfx/img/bg.jpg' },
  133. ] }
  134. ```
  135. ### unicode-range
  136. The unicode-range CSS descriptor sets the specific range of characters to be
  137. used from a font defined by @font-face and made available
  138. for use on the current page (`unicode-range: U+0025-00FF`).
  139. Node-specific properties:
  140. - **value**: The "unicode-range" itself.
  141. ## API
  142. ```
  143. var valueParser = require('postcss-value-parser');
  144. ```
  145. ### valueParser.unit(quantity)
  146. Parses `quantity`, distinguishing the number from the unit. Returns an object like the following:
  147. ```js
  148. // Given 2rem
  149. {
  150. number: '2',
  151. unit: 'rem'
  152. }
  153. ```
  154. If the `quantity` argument cannot be parsed as a number, returns `false`.
  155. *This function does not parse complete values*: you cannot pass it `1px solid black` and expect `px` as
  156. the unit. Instead, you should pass it single quantities only. Parse `1px solid black`, then pass it
  157. the stringified `1px` node (a `word` node) to parse the number and unit.
  158. ### valueParser.stringify(nodes[, custom])
  159. Stringifies a node or array of nodes.
  160. The `custom` function is called for each `node`; return a string to override the default behaviour.
  161. ### valueParser.walk(nodes, callback[, bubble])
  162. Walks each provided node, recursively walking all descendent nodes within functions.
  163. Returning `false` in the `callback` will prevent traversal of descendent nodes (within functions).
  164. You can use this feature to for shallow iteration, walking over only the *immediate* children.
  165. *Note: This only applies if `bubble` is `false` (which is the default).*
  166. By default, the tree is walked from the outermost node inwards.
  167. To reverse the direction, pass `true` for the `bubble` argument.
  168. The `callback` is invoked with three arguments: `callback(node, index, nodes)`.
  169. - `node`: The current node.
  170. - `index`: The index of the current node.
  171. - `nodes`: The complete nodes array passed to `walk()`.
  172. Returns the `valueParser` instance.
  173. ### var parsed = valueParser(value)
  174. Returns the parsed node tree.
  175. ### parsed.nodes
  176. The array of nodes.
  177. ### parsed.toString()
  178. Stringifies the node tree.
  179. ### parsed.walk(callback[, bubble])
  180. Walks each node inside `parsed.nodes`. See the documentation for `valueParser.walk()` above.
  181. # License
  182. MIT © [Bogdan Chadkin](mailto:trysound@yandex.ru)