@@ -5,8 +5,8 @@ Transforms CSS declaration values and at-rule parameters into a tree of nodes, a
55## Usage
66
77``` js
8- var valueParser = require (' postcss-value-parser' );
9- var cssBackgroundValue = ' url(foo.png) no-repeat 40px 73%' ;
8+ var valueParser = require (" postcss-value-parser" );
9+ var cssBackgroundValue = " url(foo.png) no-repeat 40px 73%" ;
1010var parsedValue = valueParser (cssBackgroundValue);
1111// parsedValue exposes an API described below,
1212// e.g. parsedValue.walk(..), parsedValue.toString(), etc.
@@ -18,52 +18,53 @@ For example, parsing the value `rgba(233, 45, 66, .5)` will return the following
1818{
1919 nodes: [
2020 {
21- type: ' function' ,
22- value: ' rgba' ,
23- before: ' ' ,
24- after: ' ' ,
21+ type: " function" ,
22+ value: " rgba" ,
23+ before: " " ,
24+ after: " " ,
2525 nodes: [
26- { type: ' word' , value: ' 233' },
27- { type: ' div' , value: ' , ' , before: ' ' , after: ' ' },
28- { type: ' word' , value: ' 45 ' },
29- { type: ' div' , value: ' , ' , before: ' ' , after: ' ' },
30- { type: ' word' , value: ' 66 ' },
31- { type: ' div' , value: ' , ' , before: ' ' , after: ' ' },
32- { type: ' word' , value: ' .5 ' }
33- ]
34- }
35- ]
26+ { type: " word" , value: " 233" },
27+ { type: " div" , value: " , " , before: " " , after: " " },
28+ { type: " word" , value: " 45 " },
29+ { type: " div" , value: " , " , before: " " , after: " " },
30+ { type: " word" , value: " 66 " },
31+ { type: " div" , value: " , " , before: " " , after: " " },
32+ { type: " word" , value: " .5 " },
33+ ],
34+ },
35+ ];
3636}
3737```
3838
3939If you wanted to convert each ` rgba() ` value in ` sourceCSS ` to a hex value, you could do so like this:
4040
4141``` js
42- var valueParser = require (' postcss-value-parser' );
42+ var valueParser = require (" postcss-value-parser" );
4343
4444var parsed = valueParser (sourceCSS);
4545
4646// walk() will visit all the of the nodes in the tree,
4747// invoking the callback for each.
4848parsed .walk (function (node ) {
49-
5049 // Since we only want to transform rgba() values,
5150 // we can ignore anything else.
52- if (node .type !== ' function' && node .value !== ' rgba' ) return ;
51+ if (node .type !== " function" && node .value !== " rgba" ) return ;
5352
5453 // We can make an array of the rgba() arguments to feed to a
5554 // convertToHex() function
56- var color = node .nodes .filter (function (node ) {
57- return node .type === ' word' ;
58- }).map (function (node ) {
59- return Number (node .value );
60- }); // [233, 45, 66, .5]
55+ var color = node .nodes
56+ .filter (function (node ) {
57+ return node .type === " word" ;
58+ })
59+ .map (function (node ) {
60+ return Number (node .value );
61+ }); // [233, 45, 66, .5]
6162
6263 // Now we will transform the existing rgba() function node
6364 // into a word node with the hex value
64- node .type = ' word' ;
65+ node .type = " word" ;
6566 node .value = convertToHex (color);
66- })
67+ });
6768
6869parsed .toString (); // #E92D42
6970```
@@ -152,14 +153,17 @@ empty value. For example, `(min-width: 700px)` parses to these nodes:
152153``` js
153154[
154155 {
155- type: ' function' , value: ' ' , before: ' ' , after: ' ' ,
156+ type: " function" ,
157+ value: " " ,
158+ before: " " ,
159+ after: " " ,
156160 nodes: [
157- { type: ' word' , value: ' min-width' },
158- { type: ' div' , value: ' : ' , before: ' ' , after: ' ' },
159- { type: ' word' , value: ' 700px' }
160- ]
161- }
162- ]
161+ { type: " word" , value: " min-width" },
162+ { type: " div" , value: " : " , before: " " , after: " " },
163+ { type: " word" , value: " 700px" },
164+ ],
165+ },
166+ ];
163167```
164168
165169` url() ` functions can be parsed a little bit differently depending on
@@ -194,7 +198,7 @@ Node-specific properties:
194198## API
195199
196200``` js
197- var valueParser = require (' postcss-value-parser' );
201+ var valueParser = require (" postcss-value-parser" );
198202```
199203
200204### valueParser.unit(quantity)
@@ -211,7 +215,7 @@ Parses `quantity`, distinguishing the number from the unit. Returns an object li
211215
212216If the ` quantity ` argument cannot be parsed as a number, returns ` false ` .
213217
214- * This function does not parse complete values * : you cannot pass it ` 1px solid black ` and expect ` px ` as
218+ _ This function does not parse complete values _ : you cannot pass it ` 1px solid black ` and expect ` px ` as
215219the unit. Instead, you should pass it single quantities only. Parse ` 1px solid black ` , then pass it
216220the stringified ` 1px ` node (a ` word ` node) to parse the number and unit.
217221
@@ -226,8 +230,8 @@ The `custom` function is called for each `node`; return a string to override the
226230Walks each provided node, recursively walking all descendent nodes within functions.
227231
228232Returning ` false ` in the ` callback ` will prevent traversal of descendent nodes (within functions).
229- You can use this feature to for shallow iteration, walking over only the * immediate * children.
230- * Note : This only applies if ` bubble ` is ` false ` (which is the default).*
233+ You can use this feature to for shallow iteration, walking over only the _ immediate _ children.
234+ _ Note : This only applies if ` bubble ` is ` false ` (which is the default)._
231235
232236By default, the tree is walked from the outermost node inwards.
233237To reverse the direction, pass ` true ` for the ` bubble ` argument.
0 commit comments