react-saasify-chrisvxd
Version:
React components for Saasify web clients.
2,343 lines (1,500 loc) • 454 kB
HTML
<!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">//=> 'atrule'</span>
charset.nodes <span class="hljs-comment">//=> undefined</span>
<span class="hljs-keyword">const</span> media = root.last
media.nodes <span class="hljs-comment">//=> []</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><<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> =></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> =></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">//=> 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><<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