UNPKG

react-saasify-chrisvxd

Version:

React components for Saasify web clients.

2,343 lines (1,500 loc) 454 kB
<!doctype html> <html> <head> <meta charset='utf-8' /> <title>postcss 7.0.17 | Documentation</title> <meta name='description' content='Tool for transforming styles with JS plugins'> <meta name='viewport' content='width=device-width,initial-scale=1'> <link href='assets/styles.min.css' rel='stylesheet' /> </head> <body class='documentation'> <div class='px2'> <div class='clearfix md-flex lg-flex flex-stretch mxn2'> <div class='documentation-sidebar relative top-0 bottom-0 right-0 px2 py2 col-3 md-show'> <div class='font-smaller fixed col-3 top-0 bottom-0 left-0 overflow-auto fill-light dark-link'> <div class='px2'> <h3 class='mb0 no-anchor'><code>postcss</code></h3> <div class='mb1'><code>7.0.17</code></div> <input placeholder='Filter' id='filter-input' class='col12 block input' type='text' /> <div id="toc"> <a href='#classes' class="blockmt1 quiet rounded bold block h4 mt2 "> <code>CLASSES</code> </a> <a href='#atrule' class="regular block toggle-sibling"> <code>AtRule</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#atruleappend' class='button-indent regular block'> <code>#append</code> </a> <a href='#atruleeach' class='button-indent regular block'> <code>#each</code> </a> <a href='#atruleevery' class='button-indent regular block'> <code>#every</code> </a> <a href='#atrulefirst' class='button-indent regular block'> <code>#first</code> </a> <a href='#atruleindex' class='button-indent regular block'> <code>#index</code> </a> <a href='#atruleinsertafter' class='button-indent regular block'> <code>#insertAfter</code> </a> <a href='#atruleinsertbefore' class='button-indent regular block'> <code>#insertBefore</code> </a> <a href='#atrulelast' class='button-indent regular block'> <code>#last</code> </a> <a href='#atruleprepend' class='button-indent regular block'> <code>#prepend</code> </a> <a href='#atruleremoveall' class='button-indent regular block'> <code>#removeAll</code> </a> <a href='#atruleremovechild' class='button-indent regular block'> <code>#removeChild</code> </a> <a href='#atrulereplacevalues' class='button-indent regular block'> <code>#replaceValues</code> </a> <a href='#atrulesome' class='button-indent regular block'> <code>#some</code> </a> <a href='#atrulewalk' class='button-indent regular block'> <code>#walk</code> </a> <a href='#atrulewalkatrules' class='button-indent regular block'> <code>#walkAtRules</code> </a> <a href='#atrulewalkcomments' class='button-indent regular block'> <code>#walkComments</code> </a> <a href='#atrulewalkdecls' class='button-indent regular block'> <code>#walkDecls</code> </a> <a href='#atrulewalkrules' class='button-indent regular block'> <code>#walkRules</code> </a> </div> <a href='#comment' class="regular block toggle-sibling"> <code>Comment</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#commentafter' class='button-indent regular block'> <code>#after</code> </a> <a href='#commentbefore' class='button-indent regular block'> <code>#before</code> </a> <a href='#commentcleanraws' class='button-indent regular block'> <code>#cleanRaws</code> </a> <a href='#commentclone' class='button-indent regular block'> <code>#clone</code> </a> <a href='#commentcloneafter' class='button-indent regular block'> <code>#cloneAfter</code> </a> <a href='#commentclonebefore' class='button-indent regular block'> <code>#cloneBefore</code> </a> <a href='#commenterror' class='button-indent regular block'> <code>#error</code> </a> <a href='#commentnext' class='button-indent regular block'> <code>#next</code> </a> <a href='#commentprev' class='button-indent regular block'> <code>#prev</code> </a> <a href='#commentraw' class='button-indent regular block'> <code>#raw</code> </a> <a href='#commentremove' class='button-indent regular block'> <code>#remove</code> </a> <a href='#commentreplacewith' class='button-indent regular block'> <code>#replaceWith</code> </a> <a href='#commentroot' class='button-indent regular block'> <code>#root</code> </a> <a href='#commenttostring' class='button-indent regular block'> <code>#toString</code> </a> <a href='#commentwarn' class='button-indent regular block'> <code>#warn</code> </a> </div> <a href='#container' class="regular block toggle-sibling"> <code>Container</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#containerafter' class='button-indent regular block'> <code>#after</code> </a> <a href='#containerappend' class='button-indent regular block'> <code>#append</code> </a> <a href='#containerbefore' class='button-indent regular block'> <code>#before</code> </a> <a href='#containercleanraws' class='button-indent regular block'> <code>#cleanRaws</code> </a> <a href='#containerclone' class='button-indent regular block'> <code>#clone</code> </a> <a href='#containercloneafter' class='button-indent regular block'> <code>#cloneAfter</code> </a> <a href='#containerclonebefore' class='button-indent regular block'> <code>#cloneBefore</code> </a> <a href='#containereach' class='button-indent regular block'> <code>#each</code> </a> <a href='#containererror' class='button-indent regular block'> <code>#error</code> </a> <a href='#containerevery' class='button-indent regular block'> <code>#every</code> </a> <a href='#containerfirst' class='button-indent regular block'> <code>#first</code> </a> <a href='#containerindex' class='button-indent regular block'> <code>#index</code> </a> <a href='#containerinsertafter' class='button-indent regular block'> <code>#insertAfter</code> </a> <a href='#containerinsertbefore' class='button-indent regular block'> <code>#insertBefore</code> </a> <a href='#containerlast' class='button-indent regular block'> <code>#last</code> </a> <a href='#containernext' class='button-indent regular block'> <code>#next</code> </a> <a href='#containerprepend' class='button-indent regular block'> <code>#prepend</code> </a> <a href='#containerprev' class='button-indent regular block'> <code>#prev</code> </a> <a href='#containerraw' class='button-indent regular block'> <code>#raw</code> </a> <a href='#containerremove' class='button-indent regular block'> <code>#remove</code> </a> <a href='#containerremoveall' class='button-indent regular block'> <code>#removeAll</code> </a> <a href='#containerremovechild' class='button-indent regular block'> <code>#removeChild</code> </a> <a href='#containerreplacevalues' class='button-indent regular block'> <code>#replaceValues</code> </a> <a href='#containerreplacewith' class='button-indent regular block'> <code>#replaceWith</code> </a> <a href='#containerroot' class='button-indent regular block'> <code>#root</code> </a> <a href='#containersome' class='button-indent regular block'> <code>#some</code> </a> <a href='#containertostring' class='button-indent regular block'> <code>#toString</code> </a> <a href='#containerwalk' class='button-indent regular block'> <code>#walk</code> </a> <a href='#containerwalkatrules' class='button-indent regular block'> <code>#walkAtRules</code> </a> <a href='#containerwalkcomments' class='button-indent regular block'> <code>#walkComments</code> </a> <a href='#containerwalkdecls' class='button-indent regular block'> <code>#walkDecls</code> </a> <a href='#containerwalkrules' class='button-indent regular block'> <code>#walkRules</code> </a> <a href='#containerwarn' class='button-indent regular block'> <code>#warn</code> </a> </div> <a href='#csssyntaxerror' class="regular block toggle-sibling"> <code>CssSyntaxError</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#csssyntaxerrorname' class='button-indent regular block'> <code>#name</code> </a> <a href='#csssyntaxerrorreason' class='button-indent regular block'> <code>#reason</code> </a> <a href='#csssyntaxerrorfile' class='button-indent regular block'> <code>#file</code> </a> <a href='#csssyntaxerrorsource' class='button-indent regular block'> <code>#source</code> </a> <a href='#csssyntaxerrorplugin' class='button-indent regular block'> <code>#plugin</code> </a> <a href='#csssyntaxerrorline' class='button-indent regular block'> <code>#line</code> </a> <a href='#csssyntaxerrorcolumn' class='button-indent regular block'> <code>#column</code> </a> <a href='#csssyntaxerrormessage' class='button-indent regular block'> <code>#message</code> </a> <a href='#csssyntaxerrorshowsourcecode' class='button-indent regular block'> <code>#showSourceCode</code> </a> <a href='#csssyntaxerrortostring' class='button-indent regular block'> <code>#toString</code> </a> </div> <a href='#declaration' class="regular block toggle-sibling"> <code>Declaration</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#declarationafter' class='button-indent regular block'> <code>#after</code> </a> <a href='#declarationbefore' class='button-indent regular block'> <code>#before</code> </a> <a href='#declarationcleanraws' class='button-indent regular block'> <code>#cleanRaws</code> </a> <a href='#declarationclone' class='button-indent regular block'> <code>#clone</code> </a> <a href='#declarationcloneafter' class='button-indent regular block'> <code>#cloneAfter</code> </a> <a href='#declarationclonebefore' class='button-indent regular block'> <code>#cloneBefore</code> </a> <a href='#declarationerror' class='button-indent regular block'> <code>#error</code> </a> <a href='#declarationnext' class='button-indent regular block'> <code>#next</code> </a> <a href='#declarationprev' class='button-indent regular block'> <code>#prev</code> </a> <a href='#declarationraw' class='button-indent regular block'> <code>#raw</code> </a> <a href='#declarationremove' class='button-indent regular block'> <code>#remove</code> </a> <a href='#declarationreplacewith' class='button-indent regular block'> <code>#replaceWith</code> </a> <a href='#declarationroot' class='button-indent regular block'> <code>#root</code> </a> <a href='#declarationtostring' class='button-indent regular block'> <code>#toString</code> </a> <a href='#declarationwarn' class='button-indent regular block'> <code>#warn</code> </a> </div> <a href='#input' class="regular block toggle-sibling"> <code>Input</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#inputcss' class='button-indent regular block'> <code>#css</code> </a> <a href='#inputfile' class='button-indent regular block'> <code>#file</code> </a> <a href='#inputmap' class='button-indent regular block'> <code>#map</code> </a> <a href='#inputid' class='button-indent regular block'> <code>#id</code> </a> <a href='#inputorigin' class='button-indent regular block'> <code>#origin</code> </a> <a href='#inputfrom' class='button-indent regular block'> <code>#from</code> </a> </div> <a href='#lazyresult' class="regular block toggle-sibling"> <code>LazyResult</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#lazyresultprocessor' class='button-indent regular block'> <code>#processor</code> </a> <a href='#lazyresultopts' class='button-indent regular block'> <code>#opts</code> </a> <a href='#lazyresultcss' class='button-indent regular block'> <code>#css</code> </a> <a href='#lazyresultcontent' class='button-indent regular block'> <code>#content</code> </a> <a href='#lazyresultmap' class='button-indent regular block'> <code>#map</code> </a> <a href='#lazyresultroot' class='button-indent regular block'> <code>#root</code> </a> <a href='#lazyresultmessages' class='button-indent regular block'> <code>#messages</code> </a> <a href='#lazyresultwarnings' class='button-indent regular block'> <code>#warnings</code> </a> <a href='#lazyresulttostring' class='button-indent regular block'> <code>#toString</code> </a> <a href='#lazyresultthen' class='button-indent regular block'> <code>#then</code> </a> <a href='#lazyresultcatch' class='button-indent regular block'> <code>#catch</code> </a> <a href='#lazyresultfinally' class='button-indent regular block'> <code>#finally</code> </a> </div> <a href='#node' class="regular block toggle-sibling"> <code>Node</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#nodeerror' class='button-indent regular block'> <code>#error</code> </a> <a href='#nodewarn' class='button-indent regular block'> <code>#warn</code> </a> <a href='#noderemove' class='button-indent regular block'> <code>#remove</code> </a> <a href='#nodetostring' class='button-indent regular block'> <code>#toString</code> </a> <a href='#nodeclone' class='button-indent regular block'> <code>#clone</code> </a> <a href='#nodeclonebefore' class='button-indent regular block'> <code>#cloneBefore</code> </a> <a href='#nodecloneafter' class='button-indent regular block'> <code>#cloneAfter</code> </a> <a href='#nodereplacewith' class='button-indent regular block'> <code>#replaceWith</code> </a> <a href='#nodenext' class='button-indent regular block'> <code>#next</code> </a> <a href='#nodeprev' class='button-indent regular block'> <code>#prev</code> </a> <a href='#nodebefore' class='button-indent regular block'> <code>#before</code> </a> <a href='#nodeafter' class='button-indent regular block'> <code>#after</code> </a> <a href='#noderaw' class='button-indent regular block'> <code>#raw</code> </a> <a href='#noderoot' class='button-indent regular block'> <code>#root</code> </a> <a href='#nodecleanraws' class='button-indent regular block'> <code>#cleanRaws</code> </a> </div> <a href='#previousmap' class="regular block toggle-sibling"> <code>PreviousMap</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#previousmapinline' class='button-indent regular block'> <code>#inline</code> </a> <a href='#previousmapconsumer' class='button-indent regular block'> <code>#consumer</code> </a> <a href='#previousmapwithcontent' class='button-indent regular block'> <code>#withContent</code> </a> </div> <a href='#processor' class="regular block toggle-sibling"> <code>Processor</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#processorversion' class='button-indent regular block'> <code>#version</code> </a> <a href='#processorplugins' class='button-indent regular block'> <code>#plugins</code> </a> <a href='#processoruse' class='button-indent regular block'> <code>#use</code> </a> <a href='#processorprocess' class='button-indent regular block'> <code>#process</code> </a> </div> <a href='#result' class="regular block toggle-sibling"> <code>Result</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#resultprocessor' class='button-indent regular block'> <code>#processor</code> </a> <a href='#resultmessages' class='button-indent regular block'> <code>#messages</code> </a> <a href='#resultroot' class='button-indent regular block'> <code>#root</code> </a> <a href='#resultopts' class='button-indent regular block'> <code>#opts</code> </a> <a href='#resultcss' class='button-indent regular block'> <code>#css</code> </a> <a href='#resultmap' class='button-indent regular block'> <code>#map</code> </a> <a href='#resulttostring' class='button-indent regular block'> <code>#toString</code> </a> <a href='#resultwarn' class='button-indent regular block'> <code>#warn</code> </a> <a href='#resultwarnings' class='button-indent regular block'> <code>#warnings</code> </a> <a href='#resultcontent' class='button-indent regular block'> <code>#content</code> </a> </div> <a href='#root' class="regular block toggle-sibling"> <code>Root</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#rootappend' class='button-indent regular block'> <code>#append</code> </a> <a href='#rooteach' class='button-indent regular block'> <code>#each</code> </a> <a href='#rootevery' class='button-indent regular block'> <code>#every</code> </a> <a href='#rootfirst' class='button-indent regular block'> <code>#first</code> </a> <a href='#rootindex' class='button-indent regular block'> <code>#index</code> </a> <a href='#rootinsertafter' class='button-indent regular block'> <code>#insertAfter</code> </a> <a href='#rootinsertbefore' class='button-indent regular block'> <code>#insertBefore</code> </a> <a href='#rootlast' class='button-indent regular block'> <code>#last</code> </a> <a href='#rootprepend' class='button-indent regular block'> <code>#prepend</code> </a> <a href='#rootremoveall' class='button-indent regular block'> <code>#removeAll</code> </a> <a href='#rootremovechild' class='button-indent regular block'> <code>#removeChild</code> </a> <a href='#rootreplacevalues' class='button-indent regular block'> <code>#replaceValues</code> </a> <a href='#rootwalk' class='button-indent regular block'> <code>#walk</code> </a> <a href='#rootwalkatrules' class='button-indent regular block'> <code>#walkAtRules</code> </a> <a href='#rootwalkcomments' class='button-indent regular block'> <code>#walkComments</code> </a> <a href='#rootwalkrules' class='button-indent regular block'> <code>#walkRules</code> </a> <a href='#rooton' class='button-indent regular block'> <code>#on</code> </a> <a href='#rootsome' class='button-indent regular block'> <code>#some</code> </a> <a href='#roottoresult' class='button-indent regular block'> <code>#toResult</code> </a> <a href='#rootwalkdecls' class='button-indent regular block'> <code>#walkDecls</code> </a> </div> <a href='#rule' class="regular block toggle-sibling"> <code>Rule</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#ruleappend' class='button-indent regular block'> <code>#append</code> </a> <a href='#ruleeach' class='button-indent regular block'> <code>#each</code> </a> <a href='#ruleevery' class='button-indent regular block'> <code>#every</code> </a> <a href='#rulefirst' class='button-indent regular block'> <code>#first</code> </a> <a href='#ruleindex' class='button-indent regular block'> <code>#index</code> </a> <a href='#ruleinsertafter' class='button-indent regular block'> <code>#insertAfter</code> </a> <a href='#ruleinsertbefore' class='button-indent regular block'> <code>#insertBefore</code> </a> <a href='#rulelast' class='button-indent regular block'> <code>#last</code> </a> <a href='#ruleprepend' class='button-indent regular block'> <code>#prepend</code> </a> <a href='#ruleremoveall' class='button-indent regular block'> <code>#removeAll</code> </a> <a href='#ruleremovechild' class='button-indent regular block'> <code>#removeChild</code> </a> <a href='#rulereplacevalues' class='button-indent regular block'> <code>#replaceValues</code> </a> <a href='#ruleselectors' class='button-indent regular block'> <code>#selectors</code> </a> <a href='#rulesome' class='button-indent regular block'> <code>#some</code> </a> <a href='#rulewalk' class='button-indent regular block'> <code>#walk</code> </a> <a href='#rulewalkatrules' class='button-indent regular block'> <code>#walkAtRules</code> </a> <a href='#rulewalkcomments' class='button-indent regular block'> <code>#walkComments</code> </a> <a href='#rulewalkdecls' class='button-indent regular block'> <code>#walkDecls</code> </a> <a href='#rulewalkrules' class='button-indent regular block'> <code>#walkRules</code> </a> </div> <a href='#warning' class="regular block toggle-sibling"> <code>Warning</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#warningtype' class='button-indent regular block'> <code>#type</code> </a> <a href='#warningtext' class='button-indent regular block'> <code>#text</code> </a> <a href='#warningline' class='button-indent regular block'> <code>#line</code> </a> <a href='#warningcolumn' class='button-indent regular block'> <code>#column</code> </a> <a href='#warningtostring' class='button-indent regular block'> <code>#toString</code> </a> </div> <a href='#namespaces' class="blockmt1 quiet rounded bold block h4 mt2 "> <code>NAMESPACES</code> </a> <a href='#list' class="regular block toggle-sibling"> <code>list</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#listspace' class='button-indent px1 quiet regular rounded block'> <code>.space</code> </a> <a href='#listcomma' class='button-indent px1 quiet regular rounded block'> <code>.comma</code> </a> </div> <a href='#postcss' class="regular block toggle-sibling"> <code>postcss</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#postcssplugin' class='button-indent px1 quiet regular rounded block'> <code>.plugin</code> </a> <a href='#postcssstringify' class='button-indent px1 quiet regular rounded block'> <code>.stringify</code> </a> <a href='#postcssparse' class='button-indent px1 quiet regular rounded block'> <code>.parse</code> </a> <a href='#postcssvendor' class='button-indent px1 quiet regular rounded block'> <code>.vendor</code> </a> <a href='#postcsslist' class='button-indent px1 quiet regular rounded block'> <code>.list</code> </a> <a href='#postcsscomment' class='button-indent px1 quiet regular rounded block'> <code>.comment</code> </a> <a href='#postcssatrule' class='button-indent px1 quiet regular rounded block'> <code>.atRule</code> </a> <a href='#postcssdecl' class='button-indent px1 quiet regular rounded block'> <code>.decl</code> </a> <a href='#postcssrule' class='button-indent px1 quiet regular rounded block'> <code>.rule</code> </a> <a href='#postcssroot' class='button-indent px1 quiet regular rounded block'> <code>.root</code> </a> </div> <a href='#vendor' class="regular block toggle-sibling"> <code>vendor</code> <span class='icon'>▾</span> </a> <div class='toggle-target'> <a href='#vendorprefix' class='button-indent px1 quiet regular rounded block'> <code>.prefix</code> </a> <a href='#vendorunprefixed' class='button-indent px1 quiet regular rounded block'> <code>.unprefixed</code> </a> </div> <a href='#global' class="blockmt1 quiet rounded bold block h4 mt2 "> <code>GLOBAL</code> </a> </div> <div class='mt1 h6 quiet'> <a href='https://documentation.js.org/reading-documentation.html'>Need help reading this?</a> </div> </div> </div> </div> <div class='sm-col-12 md-col-9 lg-col-9 flex flex-column'> <div class='flex-auto full-width'> <div class='hide'> <section class='py2 clearfix'> <h2 id='classes' class='mt0'> CLASSES </h2> </section> </div> <section id='atrule'class='mt2 mb2 px3 py1 keyline-top'> <div class='right py2'> <span class='font-smaller'> Extends <a href="#container">Container</a> </span> <span class="px2"></span> <a class='fr fill-darken0 round round pad1x quiet h5' href='https://git@github.com/:postcss/postcss/blob/ca2aebad42a24508d6de0a2a6a760fd18c5b8648/lib/at-rule.js#L23-L94'> <span>lib/at-rule.js</span> </a> </div> <h3 class='regular'> <a class='black' href='#atrule'> <code> AtRule <span class='gray'>(defaults)</span> </code> </a> </h3> <p>Represents an at-rule.</p> <p>If it’s followed in the CSS by a {} block, this node will have a nodes property representing its children.</p> <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'> <thead class='fill-light'> <th class='col-3 small caps quiet'>parameter</th> <th class='col-3 small caps quiet'>type</th> <th class='col-6 small caps quiet'>description</th> </thead> <tr> <td class='col-3 strong'><code>defaults</code></td> <td class='col-3 quiet'> any </td> <td class='col-6'></td> </tr> </table> <h4 class='caps quiet mb1 mt3'>Examples</h4> <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> root = postcss.parse(<span class="hljs-string">'@charset "UTF-8"; @media print {}'</span>) <span class="hljs-keyword">const</span> charset = root.first charset.type <span class="hljs-comment">//=&gt; 'atrule'</span> charset.nodes <span class="hljs-comment">//=&gt; undefined</span> <span class="hljs-keyword">const</span> media = root.last media.nodes <span class="hljs-comment">//=&gt; []</span></code></pre> <h4 class='caps quiet mb2 mt3'>Instance Members</h4> <div class="section-indent"> <section id='atruleappend'class='mt2 mb2 px3 py1 keyline-top'> <div class='right py2'> <span class="px2"></span> <a class='fr fill-darken0 round round pad1x quiet h5' href='https://git@github.com/:postcss/postcss/blob/ca2aebad42a24508d6de0a2a6a760fd18c5b8648/lib/container.js#L370-L379'> <span>lib/container.js</span> </a> </div> <h3 class='regular'> <a class='black' href='#atruleappend'> <code> append <span class='gray'>(children)</span> </code> </a> </h3> <p>Inserts new nodes to the end of the container.</p> <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'> <thead class='fill-light'> <th class='col-3 small caps quiet'>parameter</th> <th class='col-3 small caps quiet'>type</th> <th class='col-6 small caps quiet'>description</th> </thead> <tr> <td class='col-3 strong'><code>children</code></td> <td class='col-3 quiet'> ...(<a href="#node">Node</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="#node">Node</a>>) </td> <td class='col-6'>New nodes. </td> </tr> </table> <h4 class='caps quiet mb1 mt3'>Returns</h4> <code><a href="#node">Node</a></code> : <span class='force-inline'>This node for methods chain. </span> <h4 class='caps quiet mb1 mt3'>Examples</h4> <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> decl1 = postcss.decl({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'color'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'black'</span> }) <span class="hljs-keyword">const</span> decl2 = postcss.decl({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'background-color'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'white'</span> }) rule.append(decl1, decl2) root.append({ <span class="hljs-attr">name</span>: <span class="hljs-string">'charset'</span>, <span class="hljs-attr">params</span>: <span class="hljs-string">'"UTF-8"'</span> }) <span class="hljs-comment">// at-rule</span> root.append({ <span class="hljs-attr">selector</span>: <span class="hljs-string">'a'</span> }) <span class="hljs-comment">// rule</span> rule.append({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'color'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'black'</span> }) <span class="hljs-comment">// declaration</span> rule.append({ <span class="hljs-attr">text</span>: <span class="hljs-string">'Comment'</span> }) <span class="hljs-comment">// comment</span> root.append(<span class="hljs-string">'a {}'</span>) root.first.append(<span class="hljs-string">'color: black; z-index: 1'</span>)</code></pre> </section> <section id='atruleeach'class='mt2 mb2 px3 py1 keyline-top'> <div class='right py2'> <span class="px2"></span> <a class='fr fill-darken0 round round pad1x quiet h5' href='https://git@github.com/:postcss/postcss/blob/ca2aebad42a24508d6de0a2a6a760fd18c5b8648/lib/container.js#L76-L102'> <span>lib/container.js</span> </a> </div> <h3 class='regular'> <a class='black' href='#atruleeach'> <code> each <span class='gray'>(callback)</span> </code> </a> </h3> <p>Iterates through the container’s immediate children, calling <code>callback</code> for each child.</p> <p>Returning <code>false</code> in the callback will break iteration.</p> <p>This method only iterates through the container’s immediate children. If you need to recursively iterate through all the container’s descendant nodes, use <a href="#containerwalk">Container#walk</a>.</p> <p>Unlike the for <code>{}</code>-cycle or <code>Array#forEach</code> this iterator is safe if you are mutating the array of child nodes during iteration. PostCSS will adjust the current index to match the mutations.</p> <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'> <thead class='fill-light'> <th class='col-3 small caps quiet'>parameter</th> <th class='col-3 small caps quiet'>type</th> <th class='col-6 small caps quiet'>description</th> </thead> <tr> <td class='col-3 strong'><code>callback</code></td> <td class='col-3 quiet'> <a href="#childiterator">childIterator</a> </td> <td class='col-6'>Iterator receives each node and index. </td> </tr> </table> <h4 class='caps quiet mb1 mt3'>Returns</h4> <code>(<code>false</code> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>)</code> : <span class='force-inline'>Returns <code>false</code> if iteration was broke. </span> <h4 class='caps quiet mb1 mt3'>Examples</h4> <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> root = postcss.parse(<span class="hljs-string">'a { color: black; z-index: 1 }'</span>) <span class="hljs-keyword">const</span> rule = root.first <span class="hljs-keyword">for</span> (<span class="hljs-keyword">const</span> decl <span class="hljs-keyword">of</span> rule.nodes) { decl.cloneBefore({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'-webkit-'</span> + decl.prop }) <span class="hljs-comment">// Cycle will be infinite, because cloneBefore moves the current node</span> <span class="hljs-comment">// to the next index</span> } rule.each(<span class="hljs-function"><span class="hljs-params">decl</span> =&gt;</span> { decl.cloneBefore({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'-webkit-'</span> + decl.prop }) <span class="hljs-comment">// Will be executed only for color and z-index</span> })</code></pre> </section> <section id='atruleevery'class='mt2 mb2 px3 py1 keyline-top'> <div class='right py2'> <span class="px2"></span> <a class='fr fill-darken0 round round pad1x quiet h5' href='https://git@github.com/:postcss/postcss/blob/ca2aebad42a24508d6de0a2a6a760fd18c5b8648/lib/container.js#L587-L589'> <span>lib/container.js</span> </a> </div> <h3 class='regular'> <a class='black' href='#atruleevery'> <code> every <span class='gray'>(condition)</span> </code> </a> </h3> <p>Returns <code>true</code> if callback returns <code>true</code> for all of the container’s children.</p> <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'> <thead class='fill-light'> <th class='col-3 small caps quiet'>parameter</th> <th class='col-3 small caps quiet'>type</th> <th class='col-6 small caps quiet'>description</th> </thead> <tr> <td class='col-3 strong'><code>condition</code></td> <td class='col-3 quiet'> <a href="#childcondition">childCondition</a> </td> <td class='col-6'>Iterator returns true or false. </td> </tr> </table> <h4 class='caps quiet mb1 mt3'>Returns</h4> <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code> : <span class='force-inline'>Is every child pass condition. </span> <h4 class='caps quiet mb1 mt3'>Examples</h4> <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> noPrefixes = rule.every(<span class="hljs-function"><span class="hljs-params">i</span> =&gt;</span> i.prop[<span class="hljs-number">0</span>] !== <span class="hljs-string">'-'</span>)</code></pre> </section> <section id='atrulefirst'class='mt2 mb2 px3 py1 keyline-top'> <div class='right py2'> <span class="px2"></span> <a class='fr fill-darken0 round round pad1x quiet h5' href='https://git@github.com/:postcss/postcss/blob/ca2aebad42a24508d6de0a2a6a760fd18c5b8648/lib/container.js#L631-L634'> <span>lib/container.js</span> </a> </div> <h3 class='regular'> <a class='black' href='#atrulefirst'> <code> first <span class='gray'>()</span> </code> </a> </h3> <p>The container’s first child.</p> <p> Type: <a href="#node">Node</a> </p> <h4 class='caps quiet mb1 mt3'>Examples</h4> <pre class='p1 overflow-auto round fill-light'><code>rule.first === rules.nodes[<span class="hljs-number">0</span>]</code></pre> </section> <section id='atruleindex'class='mt2 mb2 px3 py1 keyline-top'> <div class='right py2'> <span class="px2"></span> <a class='fr fill-darken0 round round pad1x quiet h5' href='https://git@github.com/:postcss/postcss/blob/ca2aebad42a24508d6de0a2a6a760fd18c5b8648/lib/container.js#L616-L621'> <span>lib/container.js</span> </a> </div> <h3 class='regular'> <a class='black' href='#atruleindex'> <code> index <span class='gray'>(child)</span> </code> </a> </h3> <p>Returns a <code>child</code>’s index within the <a href="Container#nodes">Container#nodes</a> array.</p> <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'> <thead class='fill-light'> <th class='col-3 small caps quiet'>parameter</th> <th class='col-3 small caps quiet'>type</th> <th class='col-6 small caps quiet'>description</th> </thead> <tr> <td class='col-3 strong'><code>child</code></td> <td class='col-3 quiet'> <a href="#node">Node</a> </td> <td class='col-6'>Child of the current container. </td> </tr> </table> <h4 class='caps quiet mb1 mt3'>Returns</h4> <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code> : <span class='force-inline'>Child index. </span> <h4 class='caps quiet mb1 mt3'>Examples</h4> <pre class='p1 overflow-auto round fill-light'><code>rule.index( rule.nodes[<span class="hljs-number">2</span>] ) <span class="hljs-comment">//=&gt; 2</span></code></pre> </section> <section id='atruleinsertafter'class='mt2 mb2 px3 py1 keyline-top'> <div class='right py2'> <span class="px2"></span> <a class='fr fill-darken0 round round pad1x quiet h5' href='https://git@github.com/:postcss/postcss/blob/ca2aebad42a24508d6de0a2a6a760fd18c5b8648/lib/container.js#L462-L479'> <span>lib/container.js</span> </a> </div> <h3 class='regular'> <a class='black' href='#atruleinsertafter'> <code> insertAfter <span class='gray'>(exist, add)</span> </code> </a> </h3> <p>Insert new node after old node within the container.</p> <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'> <thead class='fill-light'> <th class='col-3 small caps quiet'>parameter</th> <th class='col-3 small caps quiet'>type</th> <th class='col-6 small caps quiet'>description</th> </thead> <tr> <td class='col-3 strong'><code>exist</code></td> <td class='col-3 quiet'> (<a href="#node">Node</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>) </td> <td class='col-6'>Child or child’s index. </td> </tr> <tr> <td class='col-3 strong'><code>add</code></td> <td class='col-3 quiet'> (<a href="#node">Node</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="#node">Node</a>>) </td> <td class='col-6'>New node. </td> </tr> </table> <h4 class='caps quiet mb1 mt3'>Returns</h4> <code><a href="#node">Node</a></code> : <span class='force-inline'>This node for methods chain. </span> </section> <section id='atruleinsertbefore'class='mt2 mb2 px3 py1 keyline-top'> <div class='right py2'> <span class="px2"></span> <a class='fr fill-darken0 round round pad1x quiet h5' href='https://git@github.com/:postcss/postcss/blob/ca2aebad42a24508d6de0a2a6a760fd18c5b8648/lib/container.js#L434-L452'> <span>lib/container.js</span> </a> </div> <h3 class='regular'> <a class='black' href='#atruleinsertbefore'> <code> insertBefore <span class='gray'>(exist, add)</span> </code> </a> </h3> <p>Insert new node before old node within the container.</p> <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'> <thead class='fill-light'> <th class='col-3 small caps quiet'>parameter</th> <th class='col-3 small caps quiet'>type</th> <th class='col-6 small caps quiet'>description</t