\href{https://travis-ci.org/TrySound/postcss-value-parser}{\texttt{ }}

Transforms CSS declaration values and at-\/rule parameters into a tree of nodes, and provides a simple traversal API.\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21357}{}\doxysection{Usage}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21357}

\begin{DoxyCode}{0}
\DoxyCodeLine{var valueParser = require('postcss-\/value-\/parser');}
\DoxyCodeLine{var cssBackgroundValue = 'url(foo.png) no-\/repeat 40px 73\%';}
\DoxyCodeLine{var parsedValue = valueParser(cssBackgroundValue);}
\DoxyCodeLine{// parsedValue exposes an API described below,}
\DoxyCodeLine{// e.g. parsedValue.walk(..), parsedValue.toString(), etc. }

\end{DoxyCode}


For example, parsing the value {\ttfamily rgba(233, 45, 66, .5)} will return the following\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  nodes: [}
\DoxyCodeLine{    \{}
\DoxyCodeLine{      type: 'function',}
\DoxyCodeLine{      value: 'rgba',}
\DoxyCodeLine{      before: '',}
\DoxyCodeLine{      after: '',}
\DoxyCodeLine{      nodes: [}
\DoxyCodeLine{        \{ type: 'word', value: '233' \},}
\DoxyCodeLine{        \{ type: 'div', value: ',', before: '', after: ' ' \},}
\DoxyCodeLine{        \{ type: 'word', value: '45' \},}
\DoxyCodeLine{        \{ type: 'div', value: ',', before: '', after: ' ' \},}
\DoxyCodeLine{        \{ type: 'word', value: '66' \},}
\DoxyCodeLine{        \{ type: 'div', value: ',', before: ' ', after: '' \},}
\DoxyCodeLine{        \{ type: 'word', value: '.5' \}}
\DoxyCodeLine{      ]}
\DoxyCodeLine{    \}}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}


If you wanted to convert each {\ttfamily rgba()} value in {\ttfamily source\+CSS} to a hex value, you could do so like this\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{var valueParser = require('postcss-\/value-\/parser');}
\DoxyCodeLine{}
\DoxyCodeLine{var parsed = valueParser(sourceCSS);}
\DoxyCodeLine{}
\DoxyCodeLine{// walk() will visit all the of the nodes in the tree,}
\DoxyCodeLine{// invoking the callback for each.}
\DoxyCodeLine{parsed.walk(function (node) \{}
\DoxyCodeLine{}
\DoxyCodeLine{  // Since we only want to transform rgba() values,}
\DoxyCodeLine{  // we can ignore anything else.}
\DoxyCodeLine{  if (node.type !== 'function' \&\& node.value !== 'rgba') return;}
\DoxyCodeLine{}
\DoxyCodeLine{  // We can make an array of the rgba() arguments to feed to a}
\DoxyCodeLine{  // convertToHex() function}
\DoxyCodeLine{  var color = node.nodes.filter(function (node) \{}
\DoxyCodeLine{    return node.type === 'word';}
\DoxyCodeLine{  \}).map(function (node) \{}
\DoxyCodeLine{    return Number(node.value);}
\DoxyCodeLine{  \}); // [233, 45, 66, .5]}
\DoxyCodeLine{}
\DoxyCodeLine{  // Now we will transform the existing rgba() function node}
\DoxyCodeLine{  // into a word node with the hex value}
\DoxyCodeLine{  node.type = 'word';}
\DoxyCodeLine{  node.value = convertToHex(color);}
\DoxyCodeLine{\})}
\DoxyCodeLine{}
\DoxyCodeLine{parsed.toString(); // \#E92D42 }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21358}{}\doxysection{Nodes}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21358}
Each node is an object with these common properties\+:


\begin{DoxyItemize}
\item {\bfseries{type}}\+: The type of node ({\ttfamily word}, {\ttfamily string}, {\ttfamily div}, {\ttfamily space}, {\ttfamily comment}, or {\ttfamily function}). Each type is documented below.
\item {\bfseries{value}}\+: Each node has a {\ttfamily value} property; but what exactly {\ttfamily value} means is specific to the node type. Details are documented for each type below.
\item {\bfseries{source\+Index}}\+: The starting index of the node within the original source string. For example, given the source string {\ttfamily 10px 20px}, the {\ttfamily word} node whose value is {\ttfamily 20px} will have a {\ttfamily source\+Index} of {\ttfamily 5}.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21359}{}\doxysubsection{word}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21359}
The catch-\/all node type that includes keywords (e.\+g. {\ttfamily no-\/repeat}), quantities (e.\+g. {\ttfamily 20px}, {\ttfamily 75\%}, {\ttfamily 1.\+5}), and hex colors (e.\+g. {\ttfamily \#e6e6e6}).

Node-\/specific properties\+:


\begin{DoxyItemize}
\item {\bfseries{value}}\+: The \char`\"{}word\char`\"{} itself.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21360}{}\doxysubsection{string}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21360}
A quoted string value, e.\+g. {\ttfamily \char`\"{}something\char`\"{}} in {\ttfamily content\+: \char`\"{}something\char`\"{};}.

Node-\/specific properties\+:


\begin{DoxyItemize}
\item {\bfseries{value}}\+: The text content of the string.
\item {\bfseries{quote}}\+: The quotation mark surrounding the string, either {\ttfamily \char`\"{}$<$/tt$>$ or `'$<$tt$>$. -\/ $\ast$$\ast$unclosed$\ast$$\ast$\+:$<$/tt$>$true$<$tt$>$if the string was not closed properly. e.\+g.$<$/tt$>$\char`\"{}unclosed string \`{}.}
\end{DoxyItemize}

{\ttfamily }\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21361}{}\doxysubsection{div}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21361}
{\ttfamily  A divider, for example}

{\ttfamily 
\begin{DoxyItemize}
\item {\ttfamily ,} in {\ttfamily animation-\/duration\+: 1s, 2s, 3s}
\item {\ttfamily /} in {\ttfamily border-\/radius\+: 10px / 23px}
\item {\ttfamily \+:} in {\ttfamily (min-\/width\+: 700px)}
\end{DoxyItemize}}

{\ttfamily Node-\/specific properties\+:}

{\ttfamily 
\begin{DoxyItemize}
\item {\bfseries{value}}\+: The divider character. Either {\ttfamily ,}, {\ttfamily /}, or {\ttfamily \+:} (see examples above).
\item {\bfseries{before}}\+: Whitespace before the divider.
\item {\bfseries{after}}\+: Whitespace after the divider.
\end{DoxyItemize}}

{\ttfamily }\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21362}{}\doxysubsection{space}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21362}
{\ttfamily  Whitespace used as a separator, e.\+g. occurring twice in {\ttfamily border\+: 1px solid black;}.}

{\ttfamily Node-\/specific properties\+:}

{\ttfamily 
\begin{DoxyItemize}
\item {\bfseries{value}}\+: The whitespace itself.
\end{DoxyItemize}}

{\ttfamily }\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21363}{}\doxysubsection{comment}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21363}
{\ttfamily  A CSS comment starts with {\ttfamily /$\ast$} and ends with {\ttfamily $\ast$/}}

{\ttfamily Node-\/specific properties\+:}

{\ttfamily 
\begin{DoxyItemize}
\item {\bfseries{value}}\+: The comment value without {\ttfamily /$\ast$} and {\ttfamily $\ast$/}
\item {\bfseries{unclosed}}\+: {\ttfamily true} if the comment was not closed properly. e.\+g. {\ttfamily /$\ast$ comment without an end}.
\end{DoxyItemize}}

{\ttfamily }\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21364}{}\doxysubsection{function}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21364}
{\ttfamily  A CSS function, e.\+g. {\ttfamily rgb(0,0,0)} or {\ttfamily url(foo.\+bar)}.}

{\ttfamily Function nodes have nodes nested within them\+: the function arguments.}

{\ttfamily Additional properties\+:}

{\ttfamily 
\begin{DoxyItemize}
\item {\bfseries{value}}\+: The name of the function, e.\+g. {\ttfamily rgb} in {\ttfamily rgb(0,0,0)}.
\item {\bfseries{before}}\+: Whitespace after the opening parenthesis and before the first argument, e.\+g. in {\ttfamily rgb(  0,0,0)}.
\item {\bfseries{after}}\+: Whitespace before the closing parenthesis and after the last argument, e.\+g. in {\ttfamily rgb(0,0,0  )}.
\item {\bfseries{nodes}}\+: More nodes representing the arguments to the function.
\item {\bfseries{unclosed}}\+: {\ttfamily true} if the parentheses was not closed properly. e.\+g. {\ttfamily ( unclosed-\/function}.
\end{DoxyItemize}}

{\ttfamily Media features surrounded by parentheses are considered functions with an empty value. For example, {\ttfamily (min-\/width\+: 700px)} parses to these nodes\+:}

{\ttfamily 
\begin{DoxyCode}{0}
\DoxyCodeLine{[}
\DoxyCodeLine{  \{}
\DoxyCodeLine{    type: 'function', value: '', before: '', after: '',}
\DoxyCodeLine{    nodes: [}
\DoxyCodeLine{      \{ type: 'word', value: 'min-\/width' \},}
\DoxyCodeLine{      \{ type: 'div', value: ':', before: '', after: ' ' \},}
\DoxyCodeLine{      \{ type: 'word', value: '700px' \}}
\DoxyCodeLine{    ]}
\DoxyCodeLine{  \}}
\DoxyCodeLine{] }

\end{DoxyCode}
}

{\ttfamily {\ttfamily url()} functions can be parsed a little bit differently depending on whether the first character in the argument is a quotation mark.}

{\ttfamily {\ttfamily url( /gfx/img/bg.jpg )} parses to\+:}

{\ttfamily 
\begin{DoxyCode}{0}
\DoxyCodeLine{\{ type: 'function', sourceIndex: 0, value: 'url', before: ' ', after: ' ', nodes: [}
\DoxyCodeLine{    \{ type: 'word', sourceIndex: 5, value: '/gfx/img/bg.jpg' \}}
\DoxyCodeLine{] \} }

\end{DoxyCode}
}

{\ttfamily {\ttfamily url( \char`\"{}/gfx/img/bg.\+jpg\char`\"{} )}, on the other hand, parses to\+:}

{\ttfamily 
\begin{DoxyCode}{0}
\DoxyCodeLine{\{ type: 'function', sourceIndex: 0, value: 'url', before: ' ', after: ' ', nodes: [}
\DoxyCodeLine{     type: 'string', sourceIndex: 5, quote: '"{}', value: '/gfx/img/bg.jpg' \},}
\DoxyCodeLine{] \} }

\end{DoxyCode}
}

{\ttfamily }\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21365}{}\doxysection{API}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21365}
{\ttfamily  
\begin{DoxyCode}{0}
\DoxyCodeLine{var valueParser = require('postcss-\/value-\/parser'); }

\end{DoxyCode}
}

{\ttfamily }\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21366}{}\doxysubsection{value\+Parser.\+unit(quantity)}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21366}
{\ttfamily  Parses {\ttfamily quantity}, distinguishing the number from the unit. Returns an object like the following\+:}

{\ttfamily 
\begin{DoxyCode}{0}
\DoxyCodeLine{// Given 2rem}
\DoxyCodeLine{\{}
\DoxyCodeLine{  number: '2',}
\DoxyCodeLine{  unit: 'rem'}
\DoxyCodeLine{\} }

\end{DoxyCode}
}

{\ttfamily If the {\ttfamily quantity} argument cannot be parsed as a number, returns {\ttfamily false}.}

{\ttfamily {\itshape This function does not parse complete values}\+: you cannot pass it {\ttfamily 1px solid black} and expect {\ttfamily px} as the unit. Instead, you should pass it single quantities only. Parse {\ttfamily 1px solid black}, then pass it the stringified {\ttfamily 1px} node (a {\ttfamily word} node) to parse the number and unit.}

{\ttfamily }\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21367}{}\doxysubsection{value\+Parser.\+stringify(nodes\mbox{[}, custom\mbox{]})}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21367}
{\ttfamily  Stringifies a node or array of nodes.}

{\ttfamily The {\ttfamily custom} function is called for each {\ttfamily node}; return a string to override the default behaviour.}

{\ttfamily }\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21368}{}\doxysubsection{value\+Parser.\+walk(nodes, callback\mbox{[}, bubble\mbox{]})}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21368}
{\ttfamily  Walks each provided node, recursively walking all descendent nodes within functions.}

{\ttfamily Returning {\ttfamily false} in the {\ttfamily callback} will prevent traversal of descendent nodes (within functions). You can use this feature to for shallow iteration, walking over only the {\itshape immediate} children. {\itshape Note\+: This only applies if {\ttfamily bubble} is {\ttfamily false} (which is the default).}}

{\ttfamily By default, the tree is walked from the outermost node inwards. To reverse the direction, pass {\ttfamily true} for the {\ttfamily bubble} argument.}

{\ttfamily The {\ttfamily callback} is invoked with three arguments\+: {\ttfamily callback(node, index, nodes)}.}

{\ttfamily 
\begin{DoxyItemize}
\item {\ttfamily node}\+: The current node.
\item {\ttfamily index}\+: The index of the current node.
\item {\ttfamily nodes}\+: The complete nodes array passed to {\ttfamily walk()}.
\end{DoxyItemize}}

{\ttfamily Returns the {\ttfamily value\+Parser} instance.}

{\ttfamily }\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21369}{}\doxysubsection{var parsed = value\+Parser(value)}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21369}
{\ttfamily  Returns the parsed node tree.}

{\ttfamily }\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21370}{}\doxysubsection{parsed.\+nodes}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21370}
{\ttfamily  The array of nodes.}

{\ttfamily }\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21371}{}\doxysubsection{parsed.\+to\+String()}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21371}
{\ttfamily  Stringifies the node tree.}

{\ttfamily }\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21372}{}\doxysubsection{parsed.\+walk(callback\mbox{[}, bubble\mbox{]})}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21372}
{\ttfamily  Walks each node inside {\ttfamily parsed.\+nodes}. See the documentation for {\ttfamily value\+Parser.\+walk()} above.}

{\ttfamily }\hypertarget{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21373}{}\doxysection{License}\label{md_sfcode_node_modules_postcss_merge_longhand_node_modules_postcss_value_parser_README_autotoc_md21373}
{\ttfamily  MIT © \href{mailto:trysound@yandex.ru}{\texttt{ Bogdan Chadkin}} }