diff options
Diffstat (limited to 'node_modules/autoprefixer/node_modules/postcss/docs/api')
3 files changed, 22540 insertions, 0 deletions
diff --git a/node_modules/autoprefixer/node_modules/postcss/docs/api/assets/scripts.min.js b/node_modules/autoprefixer/node_modules/postcss/docs/api/assets/scripts.min.js new file mode 100644 index 0000000..d22a9d5 --- /dev/null +++ b/node_modules/autoprefixer/node_modules/postcss/docs/api/assets/scripts.min.js @@ -0,0 +1,8 @@ +parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"SyYu":[function(require,module,exports) { +var define; +var A;!function(e,t){"use strict";"function"==typeof A&&A.amd?A([],t):"object"==typeof module&&module.exports?module.exports=t():(e.AnchorJS=t(),e.anchors=new e.AnchorJS)}(this,function(){"use strict";return function(A){function e(A){A.icon=A.hasOwnProperty("icon")?A.icon:"",A.visible=A.hasOwnProperty("visible")?A.visible:"hover",A.placement=A.hasOwnProperty("placement")?A.placement:"right",A.ariaLabel=A.hasOwnProperty("ariaLabel")?A.ariaLabel:"Anchor",A.class=A.hasOwnProperty("class")?A.class:"",A.base=A.hasOwnProperty("base")?A.base:"",A.truncate=A.hasOwnProperty("truncate")?Math.floor(A.truncate):64,A.titleText=A.hasOwnProperty("titleText")?A.titleText:""}function t(A){var e;if("string"==typeof A||A instanceof String)e=[].slice.call(document.querySelectorAll(A));else{if(!(Array.isArray(A)||A instanceof NodeList))throw new Error("The selector provided to AnchorJS was invalid.");e=[].slice.call(A)}return e}this.options=A||{},this.elements=[],e(this.options),this.isTouchDevice=function(){return!!("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)},this.add=function(A){var i,n,o,s,a,r,c,h,l,u,d,p,w=[];if(e(this.options),"touch"===(d=this.options.visible)&&(d=this.isTouchDevice()?"always":"hover"),A||(A="h2, h3, h4, h5, h6"),0===(i=t(A)).length)return this;for(function(){if(null===document.head.querySelector("style.anchorjs")){var A,e=document.createElement("style");e.className="anchorjs",e.appendChild(document.createTextNode("")),void 0===(A=document.head.querySelector('[rel="stylesheet"], style'))?document.head.appendChild(e):document.head.insertBefore(e,A),e.sheet.insertRule(" .anchorjs-link { opacity: 0; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }",e.sheet.cssRules.length),e.sheet.insertRule(" *:hover > .anchorjs-link, .anchorjs-link:focus { opacity: 1; }",e.sheet.cssRules.length),e.sheet.insertRule(" [data-anchorjs-icon]::after { content: attr(data-anchorjs-icon); }",e.sheet.cssRules.length),e.sheet.insertRule(' @font-face { font-family: "anchorjs-icons"; src: url(data:n/a;base64,AAEAAAALAIAAAwAwT1MvMg8yG2cAAAE4AAAAYGNtYXDp3gC3AAABpAAAAExnYXNwAAAAEAAAA9wAAAAIZ2x5ZlQCcfwAAAH4AAABCGhlYWQHFvHyAAAAvAAAADZoaGVhBnACFwAAAPQAAAAkaG10eASAADEAAAGYAAAADGxvY2EACACEAAAB8AAAAAhtYXhwAAYAVwAAARgAAAAgbmFtZQGOH9cAAAMAAAAAunBvc3QAAwAAAAADvAAAACAAAQAAAAEAAHzE2p9fDzz1AAkEAAAAAADRecUWAAAAANQA6R8AAAAAAoACwAAAAAgAAgAAAAAAAAABAAADwP/AAAACgAAA/9MCrQABAAAAAAAAAAAAAAAAAAAAAwABAAAAAwBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAMCQAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAg//0DwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAAIAAAACgAAxAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADAAAAAIAAgAAgAAACDpy//9//8AAAAg6cv//f///+EWNwADAAEAAAAAAAAAAAAAAAAACACEAAEAAAAAAAAAAAAAAAAxAAACAAQARAKAAsAAKwBUAAABIiYnJjQ3NzY2MzIWFxYUBwcGIicmNDc3NjQnJiYjIgYHBwYUFxYUBwYGIwciJicmNDc3NjIXFhQHBwYUFxYWMzI2Nzc2NCcmNDc2MhcWFAcHBgYjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAAADACWAAEAAAAAAAEACAAAAAEAAAAAAAIAAwAIAAEAAAAAAAMACAAAAAEAAAAAAAQACAAAAAEAAAAAAAUAAQALAAEAAAAAAAYACAAAAAMAAQQJAAEAEAAMAAMAAQQJAAIABgAcAAMAAQQJAAMAEAAMAAMAAQQJAAQAEAAMAAMAAQQJAAUAAgAiAAMAAQQJAAYAEAAMYW5jaG9yanM0MDBAAGEAbgBjAGgAbwByAGoAcwA0ADAAMABAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAP) format("truetype"); }',e.sheet.cssRules.length)}}(),n=document.querySelectorAll("[id]"),o=[].map.call(n,function(A){return A.id}),a=0;a<i.length;a++)if(this.hasAnchorJSLink(i[a]))w.push(a);else{if(i[a].hasAttribute("id"))s=i[a].getAttribute("id");else if(i[a].hasAttribute("data-anchor-id"))s=i[a].getAttribute("data-anchor-id");else{l=h=this.urlify(i[a].textContent),c=0;do{void 0!==r&&(l=h+"-"+c),r=o.indexOf(l),c+=1}while(-1!==r);r=void 0,o.push(l),i[a].setAttribute("id",l),s=l}s.replace(/-/g," "),(u=document.createElement("a")).className="anchorjs-link "+this.options.class,u.setAttribute("aria-label",this.options.ariaLabel),u.setAttribute("data-anchorjs-icon",this.options.icon),this.options.titleText&&(u.title=this.options.titleText),p=document.querySelector("base")?window.location.pathname+window.location.search:"",p=this.options.base||p,u.href=p+"#"+s,"always"===d&&(u.style.opacity="1"),""===this.options.icon&&(u.style.font="1em/1 anchorjs-icons","left"===this.options.placement&&(u.style.lineHeight="inherit")),"left"===this.options.placement?(u.style.position="absolute",u.style.marginLeft="-1em",u.style.paddingRight="0.5em",i[a].insertBefore(u,i[a].firstChild)):(u.style.paddingLeft="0.375em",i[a].appendChild(u))}for(a=0;a<w.length;a++)i.splice(w[a]-a,1);return this.elements=this.elements.concat(i),this},this.remove=function(A){for(var e,i,n=t(A),o=0;o<n.length;o++)(i=n[o].querySelector(".anchorjs-link"))&&(-1!==(e=this.elements.indexOf(n[o]))&&this.elements.splice(e,1),n[o].removeChild(i));return this},this.removeAll=function(){this.remove(this.elements)},this.urlify=function(A){return this.options.truncate||e(this.options),A.trim().replace(/\'/gi,"").replace(/[& +$,:;=?@"#{}|^~[`%!'<>\]\.\/\(\)\*\\\n\t\b\v]/g,"-").replace(/-{2,}/g,"-").substring(0,this.options.truncate).replace(/^-+|-+$/gm,"").toLowerCase()},this.hasAnchorJSLink=function(A){var e=A.firstChild&&(" "+A.firstChild.className+" ").indexOf(" anchorjs-link ")>-1,t=A.lastChild&&(" "+A.lastChild.className+" ").indexOf(" anchorjs-link ")>-1;return e||t||!1}}}); +},{}],"S+Fx":[function(require,module,exports) { +var e=require("anchor-js"),t=new e;t.options.placement="left",t.add("h3");var n=document.getElementById("toc").getElementsByTagName("a");document.getElementById("filter-input").addEventListener("keyup",function(e){var t,s,i;if(13===e.keyCode)for(t=0;t<n.length;t++)if(!(s=n[t]).classList.contains("display-none"))return location.replace(s.firstChild.href),e.preventDefault();var a=function(){return!0},o=this.value.toLowerCase();for(o.match(/^\s*$/)||(a=function(e){var t=e.firstChild.innerHTML||e.textContent;return t&&-1!==t.toLowerCase().indexOf(o)}),t=0;t<n.length;t++)s=n[t],i=Array.from(s.getElementsByTagName("a")),a(s)||i.some(a)?s.classList.remove("display-none"):s.classList.add("display-none")});for(var s=document.getElementsByClassName("toggle-sibling"),i=0;i<s.length;i++)s[i].addEventListener("click",a);function a(){var e=this.nextElementSibling,t=this.getElementsByClassName("icon")[0],n="display-none";e.classList.contains(n)?(e.classList.remove(n),t.innerHTML="▾"):(e.classList.add(n),t.innerHTML="▸")}function o(e){if(e){var t=document.getElementById(e);t&&0===t.offsetHeight&&t.parentNode.parentNode.classList.contains("display-none")&&t.parentNode.parentNode.classList.remove("display-none")}}function r(e){if(e&&!history.state){var t=document.getElementById(e);t&&t.scrollIntoView()}}function l(){o(location.hash.substring(1)),r(location.hash.substring(1))}window.addEventListener("hashchange",l),l();for(var d=document.getElementsByClassName("pre-open"),c=0;c<d.length;c++)d[c].addEventListener("mousedown",u,!1);function u(){o(this.hash.substring(1))}function m(){history.replaceState({},document.title)}function f(e){e&&history.replaceState(e.state,document.title)}window.addEventListener("load",function(){setTimeout(function(){f(),m()},1)}),window.addEventListener("popstate",f); +},{"anchor-js":"SyYu"}],"249i":[function(require,module,exports) { +require("./site"); +},{"./site":"S+Fx"}]},{},["249i"], null)
\ No newline at end of file diff --git a/node_modules/autoprefixer/node_modules/postcss/docs/api/assets/styles.min.css b/node_modules/autoprefixer/node_modules/postcss/docs/api/assets/styles.min.css new file mode 100644 index 0000000..9258853 --- /dev/null +++ b/node_modules/autoprefixer/node_modules/postcss/docs/api/assets/styles.min.css @@ -0,0 +1 @@ +body,button{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%}img{max-width:100%}svg{max-height:100%}fieldset,input,select,textarea{font-size:1rem;margin-top:0;margin-bottom:.5rem}input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week]{box-sizing:border-box;height:2.25rem;padding:.5rem;vertical-align:middle;-webkit-appearance:none}select{box-sizing:border-box;line-height:1.75;padding:.5rem}select:not([multiple]){height:2.25rem;vertical-align:middle}textarea{box-sizing:border-box;line-height:1.75;padding:.5rem}.fieldset-reset{padding:0;margin-left:0;margin-right:0;border:0}.fieldset-reset legend{padding:0}.button,button{font-size:inherit;font-weight:700;text-decoration:none;cursor:pointer;display:inline-block;box-sizing:border-box;line-height:1.125rem;padding:.4rem .6rem;margin:0;height:auto;border:1px solid transparent;vertical-align:middle;-webkit-appearance:none}::-moz-focus-inner{border:0;padding:0}.button:hover{text-decoration:none}table{border-collapse:separate;border-spacing:0;max-width:100%;width:100%}th{text-align:left;font-weight:700}td,th{padding:.25rem 1rem;line-height:inherit}th{vertical-align:bottom}td{vertical-align:top}body{line-height:1.5;font-size:100%}body,h1,h2,h3,h4,h5,h6{font-family:Helvetica Neue,Helvetica,sans-serif}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.25;margin-top:1em;margin-bottom:.5em}dl,ol,p,ul{font-size:1rem;margin-top:0;margin-bottom:1rem}ol,ul{padding-left:2rem}code,pre,samp{font-family:Consolas,Source Code Pro,monospace;font-size:inherit}pre{margin-top:0;margin-bottom:1rem;overflow-x:scroll;padding:1rem;background-color:rgba(0,0,0,.03125)}blockquote,hr{margin-top:2rem;margin-bottom:2rem}blockquote{margin-left:0;padding-left:1rem;padding-right:1rem}blockquote,blockquote p{font-size:1.25rem;font-style:italic}.h1,h1{font-size:2rem}.h2,h2{font-size:1.5rem}.h3,h3{font-size:1.25rem}.h4,h4{font-size:1rem}.h5,h5{font-size:.875rem}.h6,h6{font-size:.75rem}.list-reset{list-style:none;padding-left:0}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.left{float:left}.right{float:right}.fit{max-width:100%}.half-width{width:50%}.full-width{width:100%}.bold{font-weight:700}.regular{font-weight:400}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.left-align{text-align:left}.center{text-align:center}.right-align{text-align:right}.justify{text-align:justify}.nowrap{white-space:nowrap}.m0{margin:0}.mt0{margin-top:0}.mr0{margin-right:0}.mb0{margin-bottom:0}.ml0{margin-left:0}.m1{margin:.5rem}.mt1{margin-top:.5rem}.mr1{margin-right:.5rem}.mb1{margin-bottom:.5rem}.ml1{margin-left:.5rem}.m2{margin:1rem}.mt2{margin-top:1rem}.mr2{margin-right:1rem}.mb2{margin-bottom:1rem}.ml2{margin-left:1rem}.m3{margin:2rem}.mt3{margin-top:2rem}.mr3{margin-right:2rem}.mb3{margin-bottom:2rem}.ml3{margin-left:2rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.mxn1{margin-left:-.5rem;margin-right:-.5rem}.mxn2{margin-left:-1rem;margin-right:-1rem}.mxn3{margin-left:-2rem;margin-right:-2rem}.mxn4{margin-left:-4rem;margin-right:-4rem}.mx-auto{margin-left:auto;margin-right:auto}.p1{padding:.5rem}.py1{padding-top:.5rem;padding-bottom:.5rem}.px1{padding-left:.5rem;padding-right:.5rem}.p2{padding:1rem}.py2{padding-top:1rem;padding-bottom:1rem}.px2{padding-left:1rem;padding-right:1rem}.p3{padding:2rem}.py3{padding-top:2rem;padding-bottom:2rem}.px3{padding-left:2rem;padding-right:2rem}.p4{padding:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.px4{padding-left:4rem;padding-right:4rem}.lg-show,.md-show,.sm-show{display:none!important}@media (min-width:40em){.sm-show{display:block!important}}@media (min-width:52em){.md-show{display:block!important}}@media (min-width:64em){.lg-show{display:block!important}}@media (min-width:40em){.sm-hide{display:none!important}}@media (min-width:52em){.md-hide{display:none!important}}@media (min-width:64em){.lg-hide{display:none!important}}.display-none{display:none!important}.hide{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.z1{z-index:1}.z2{z-index:2}.z3{z-index:3}.z4{z-index:4}.absolute-center{top:0;right:0;bottom:0;left:0;margin:auto;display:table}.button-small{padding:.25rem .5rem}.button-big{padding:1rem 1.25rem}.button-narrow{padding-left:.5rem;padding-right:.5rem}.container{max-width:64em;margin-left:auto;margin-right:auto}.col{float:left}.col,.col-right{box-sizing:border-box}.col-right{float:right}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}@media (min-width:40em){.sm-col{float:left;box-sizing:border-box}.sm-col-right{float:right;box-sizing:border-box}.sm-col-1{width:8.33333%}.sm-col-2{width:16.66667%}.sm-col-3{width:25%}.sm-col-4{width:33.33333%}.sm-col-5{width:41.66667%}.sm-col-6{width:50%}.sm-col-7{width:58.33333%}.sm-col-8{width:66.66667%}.sm-col-9{width:75%}.sm-col-10{width:83.33333%}.sm-col-11{width:91.66667%}.sm-col-12{width:100%}}@media (min-width:52em){.md-col{float:left;box-sizing:border-box}.md-col-right{float:right;box-sizing:border-box}.md-col-1{width:8.33333%}.md-col-2{width:16.66667%}.md-col-3{width:25%}.md-col-4{width:33.33333%}.md-col-5{width:41.66667%}.md-col-6{width:50%}.md-col-7{width:58.33333%}.md-col-8{width:66.66667%}.md-col-9{width:75%}.md-col-10{width:83.33333%}.md-col-11{width:91.66667%}.md-col-12{width:100%}}@media (min-width:64em){.lg-col{float:left;box-sizing:border-box}.lg-col-right{float:right;box-sizing:border-box}.lg-col-1{width:8.33333%}.lg-col-2{width:16.66667%}.lg-col-3{width:25%}.lg-col-4{width:33.33333%}.lg-col-5{width:41.66667%}.lg-col-6{width:50%}.lg-col-7{width:58.33333%}.lg-col-8{width:66.66667%}.lg-col-9{width:75%}.lg-col-10{width:83.33333%}.lg-col-11{width:91.66667%}.lg-col-12{width:100%}}.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flex-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.flex-baseline{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.flex-stretch{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.flex-start{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.flex-end{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.flex-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.flex-last{-webkit-box-ordinal-group:1025;-webkit-order:1024;-ms-flex-order:1024;order:1024}.flex-auto{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.flex-grow{-webkit-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto}.flex-none{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.flex>div{box-sizing:border-box}@media (min-width:40em){.sm-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.sm-flex>div{box-sizing:border-box}}@media (min-width:52em){.md-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.md-flex>div{box-sizing:border-box}}@media (min-width:64em){.lg-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.lg-flex>div{box-sizing:border-box}}body{color:#222;background-color:#fff}a{color:#0074d9;text-decoration:none}a:hover{text-decoration:underline}hr{border:0;border-bottom:1px solid rgba(0,0,0,.125)}.button{color:#fff;background-color:#0074d9;border-radius:3px}.button:hover{box-shadow:inset 0 0 0 20rem rgba(0,0,0,.0625)}.button:focus{outline:none;border-color:rgba(0,0,0,.125);box-shadow:0 0 2px 1px rgba(0,0,0,.25)}.button.is-active,.button:active{box-shadow:inset 0 0 0 20rem rgba(0,0,0,.125),inset 0 3px 4px 0 rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.125)}.button.is-disabled,.button:disabled{opacity:.5}.field-light{background-color:#fff;-webkit-transition:box-shadow .2s ease;transition:box-shadow .2s ease;border:1px solid rgba(0,0,0,.125);border-radius:3px}.field-light:focus{outline:none;border-color:#0074d9;box-shadow:0 0 2px rgba(0,116,217,.5)}.field-light:disabled{color:#aaa}.field-light:disabled,.field-light:read-only:not(select){background-color:rgba(0,0,0,.125)}.field-light:invalid{border-color:#ff4136}.field-light.is-success{border-color:#2ecc40}.field-light.is-warning{border-color:#ffdc00}.field-light.is-error{border-color:#ff4136}.checkbox-light,.radio-light{-webkit-transition:box-shadow .2s ease;transition:box-shadow .2s ease}.radio-light{border-radius:50%}.checkbox-light:focus,.radio-light:focus{outline:none;box-shadow:0 0 2px rgba(0,116,217,.5)}.field-dark{color:#fff;background-color:rgba(0,0,0,.25);border:1px solid rgba(0,0,0,.0625);border-radius:3px}.field-dark::-webkit-input-placeholder{color:hsla(0,0%,100%,.75)}.field-dark::-moz-placeholder{color:hsla(0,0%,100%,.75)}.field-dark:-ms-input-placeholder{color:hsla(0,0%,100%,.75)}.field-dark::placeholder{color:hsla(0,0%,100%,.75)}.field-dark:focus{outline:0;border:1px solid hsla(0,0%,100%,.5)}.field-dark:read-only:not(select){background-color:hsla(0,0%,100%,.25)}.field-dark:invalid{border-color:#ff4136}.field-dark.is-success{border-color:#2ecc40}.field-dark.is-warning{border-color:#ffdc00}.field-dark.is-error{border-color:#ff4136}input[type=range]{vertical-align:middle;background-color:transparent}.range-light{color:inherit;-webkit-appearance:none;padding-top:.5rem;padding-bottom:.5rem}.range-light::-webkit-slider-thumb{-webkit-appearance:none;position:relative;width:.5rem;height:1.25rem;border-radius:3px;background-color:currentcolor;cursor:pointer;margin-top:-.5rem}.range-light::-webkit-slider-thumb:before{content:"";display:block;position:absolute;top:-.5rem;left:-.875rem;width:2.25rem;height:2.25rem;opacity:0}.range-light::-moz-range-thumb{width:.5rem;height:1.25rem;border-radius:3px;border-color:transparent;border-width:0;background-color:currentcolor;cursor:pointer}.range-light::-webkit-slider-runnable-track{height:.25rem;cursor:pointer;border-radius:3px;background-color:rgba(0,0,0,.25)}.range-light::-moz-range-track{height:.25rem;cursor:pointer;border-radius:3px;background-color:rgba(0,0,0,.25)}.range-light:focus{outline:none}.range-light:focus::-webkit-slider-thumb{outline:none;border:0;box-shadow:0 0 1px 2px currentcolor}.range-light:focus::-moz-range-thumb{outline:none;border:0;box-shadow:0 0 1px 2px currentcolor}.progress{display:block;width:100%;height:.5625rem;margin:.5rem 0;background-color:rgba(0,0,0,.125);border:0;border-radius:10000px;overflow:hidden;-webkit-appearance:none;cursor:pointer}.progress::-webkit-progress-bar{-webkit-appearance:none;background-color:rgba(0,0,0,.125)}.progress::-webkit-progress-value{-webkit-appearance:none;background-color:currentColor}.progress::-moz-progress-bar{background-color:currentColor}.table-light td,.table-light th{border-bottom:1px solid rgba(0,0,0,.125)}.table-light tr:last-child td{border-bottom:0}.button-outline{position:relative;z-index:2;color:inherit;background-color:transparent;border-radius:3px;border:1px solid;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition-property:box-shadow,background-color;transition-property:box-shadow,background-color}.button-outline:before{content:"";width:100%;height:100%;display:block;position:absolute;z-index:-1;top:-1px;left:-1px;border:1px solid transparent;background-color:currentcolor;border-radius:3px;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition-property:opacity;transition-property:opacity;opacity:0}.button-outline:hover{box-shadow:none}.button-outline:hover:before{opacity:.125}.button-outline:focus{outline:none;border:1px solid;box-shadow:0 0 3px 1px}.button-outline.is-active,.button-outline:active{box-shadow:inset 0 1px 5px 0,0 0 1px}.button-outline.is-disabled,.button-outline:disabled{opacity:.5}.button-transparent{position:relative;z-index:2;color:inherit;background-color:transparent;border-radius:0;border:1px solid transparent}.button-transparent:before{content:"";width:100%;height:100%;display:block;position:absolute;z-index:-1;top:-1px;left:-1px;border:1px solid transparent;background-color:currentcolor;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition-property:opacity;transition-property:opacity;opacity:0}.button-transparent:hover{box-shadow:none}.button-transparent:hover:before{opacity:.0625;opacity:.09375}.button-transparent:focus{outline:none;border-color:transparent;box-shadow:0 0 3px}.button-transparent.is-active:before,.button-transparent:active:before{opacity:.0625}.button-transparent.is-disabled,.button-transparent:disabled{opacity:.5}.bg-cover{background-size:cover}.bg-contain{background-size:contain}.bg-center{background-position:50%}.bg-top{background-position:top}.bg-right{background-position:100%}.bg-bottom{background-position:bottom}.bg-left{background-position:0}.border{border:1px solid rgba(0,0,0,.125)}.border-top{border-top:1px solid rgba(0,0,0,.125)}.border-right{border-right:1px solid rgba(0,0,0,.125)}.border-bottom{border-bottom:1px solid rgba(0,0,0,.125)}.border-left{border-left:1px solid rgba(0,0,0,.125)}.rounded{border-radius:3px}.circle{border-radius:50%}.rounded-top{border-radius:3px 3px 0 0}.rounded-right{border-radius:0 3px 3px 0}.rounded-bottom{border-radius:0 0 3px 3px}.rounded-left{border-radius:3px 0 0 3px}.not-rounded{border-radius:0}.black,.dark-gray{color:#222}.gray,.mid-gray{color:#aaa}.light-gray,.silver{color:#ddd}.white{color:#fff}.aqua{color:#7fdbff}.blue{color:#0074d9}.navy{color:#001f3f}.teal{color:#39cccc}.green{color:#2ecc40}.olive{color:#3d9970}.lime{color:#01ff70}.yellow{color:#ffdc00}.orange{color:#ff851b}.red{color:#ff4136}.fuchsia{color:#f012be}.purple{color:#b10dc9}.maroon{color:#85144b}.bg-black,.bg-dark-gray{background-color:#222}.bg-gray,.bg-mid-gray{background-color:#aaa}.bg-light-gray,.bg-silver{background-color:#ddd}.bg-white{background-color:#fff}.bg-aqua{background-color:#7fdbff}.bg-blue{background-color:#0074d9}.bg-navy{background-color:#001f3f}.bg-teal{background-color:#39cccc}.bg-green{background-color:#2ecc40}.bg-olive{background-color:#3d9970}.bg-lime{background-color:#01ff70}.bg-yellow{background-color:#ffdc00}.bg-orange{background-color:#ff851b}.bg-red{background-color:#ff4136}.bg-fuchsia{background-color:#f012be}.bg-purple{background-color:#b10dc9}.bg-maroon{background-color:#85144b}.bg-darken-0{background-color:rgba(0,0,0,.03125)}.bg-darken-1{background-color:rgba(0,0,0,.0625)}.bg-darken-2{background-color:rgba(0,0,0,.125)}.bg-darken-3{background-color:rgba(0,0,0,.25)}.bg-darken-4{background-color:rgba(0,0,0,.5)}.border-aqua{border-color:#7fdbff}.border-blue{border-color:#0074d9}.border-navy{border-color:#001f3f}.border-teal{border-color:#39cccc}.border-green{border-color:#2ecc40}.border-olive{border-color:#3d9970}.border-lime{border-color:#01ff70}.border-yellow{border-color:#ffdc00}.border-orange{border-color:#ff851b}.border-red{border-color:#ff4136}.border-fuchsia{border-color:#f012be}.border-purple{border-color:#b10dc9}.border-maroon{border-color:#85144b}.border-black{border-color:#222}.border-gray{border-color:#aaa}.border-silver{border-color:#ddd}.border-white{border-color:#fff}.border-darken-1{border-color:rgba(0,0,0,.0625)}.border-darken-2{border-color:rgba(0,0,0,.125)}.border-darken-3{border-color:rgba(0,0,0,.25)}.border-darken-4{border-color:rgba(0,0,0,.5)}.muted{opacity:.5}.hljs{color:#333;background:#f8f8f8;-webkit-text-size-adjust:none}.diff .hljs-header,.hljs-comment,.hljs-javadoc{color:#998;font-style:italic}.css .rule .hljs-keyword,.hljs-keyword,.hljs-request,.hljs-status,.hljs-subst,.hljs-winutils,.nginx .hljs-title{color:#1184ce}.hljs-dartdoc,.hljs-hexcolor,.hljs-number,.hljs-phpdoc,.hljs-string,.hljs-tag .hljs-value,.ruby .hljs-constant,.tex .hljs-formula{color:#ed225d}.hljs-id,.hljs-title,.scss .hljs-preprocessor{color:#900;font-weight:700}.hljs-list .hljs-keyword,.hljs-subst{font-weight:400}.hljs-class .hljs-title,.hljs-type,.tex .hljs-command,.vhdl .hljs-literal{color:#458;font-weight:700}.django .hljs-tag .hljs-keyword,.hljs-rules .hljs-property,.hljs-tag,.hljs-tag .hljs-title{color:navy;font-weight:400}.hljs-attribute,.hljs-variable,.lisp .hljs-body{color:teal}.hljs-regexp{color:#009926}.clojure .hljs-keyword,.hljs-prompt,.hljs-symbol,.lisp .hljs-keyword,.ruby .hljs-symbol .hljs-string,.scheme .hljs-keyword,.tex .hljs-special{color:#990073}.hljs-built_in{color:#0086b3}.hljs-cdata,.hljs-doctype,.hljs-pi,.hljs-pragma,.hljs-preprocessor,.hljs-shebang{color:#999;font-weight:700}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.diff .hljs-change{background:#0086b3}.hljs-chunk{color:#aaa}.hljs{display:block;overflow-x:auto;padding:.5em;background:#232323;color:#e6e1dc}.hljs-comment,.hljs-quote{color:#bc9458;font-style:italic}.hljs-keyword,.hljs-selector-tag{color:#c26230}.hljs-number,.hljs-regexp,.hljs-string,.hljs-template-variable,.hljs-variable{color:#a5c261}.hljs-subst{color:#519f50}.hljs-name,.hljs-tag{color:#e8bf6a}.hljs-type{color:#da4939}.hljs-attr,.hljs-built_in,.hljs-builtin-name,.hljs-bullet,.hljs-link,.hljs-symbol{color:#6d9cbe}.hljs-params{color:#d0d0ff}.hljs-attribute{color:#cda869}.hljs-meta{color:#9b859d}.hljs-section,.hljs-title{color:#ffc66d}.hljs-addition{background-color:#144212}.hljs-addition,.hljs-deletion{color:#e6e1dc;display:inline-block;width:100%}.hljs-deletion{background-color:#600}.hljs-selector-class{color:#9b703f}.hljs-selector-id{color:#8b98ab}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}.documentation{font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;overflow-x:hidden}.documentation a{color:#298ee6}.documentation a.black{color:#052e52}.container-small{max-width:58rem;margin-left:auto;margin-right:auto}.font-smaller{font-size:80%}.dark a.quiet{color:#fff}.dark a{color:#d2d2d2}.fade{opacity:.5}.button-indent{padding:.25rem 1.5rem;font-size:90%}.section-indent{border-left:2px solid #eee}.force-inline *{display:inline}section:target{background:#fafafa}.documentation-sidebar a:active{background:#298ee6;color:#fff}.documentation h1,.documentation h2,.documentation h3,.documentation h4,.documentation h5,.documentation h6{font-family:inherit;font-weight:700}p{font-family:inherit;line-height:1.7rem;color:#464646}.documentation code,.documentation pre,.documentation samp{font-family:Consolas,Inconsolata,Source Code Pro,monospace}pre{border-radius:3px;word-break:break-word;white-space:pre-wrap;display:block}h4{font-size:.8rem}.quiet{color:#7d7d7d}.small{font-size:.9rem}td{word-break:break-word}th.small{font-size:.8rem}.strong{font-weight:700}li{margin-top:10px}.keyline-all{border:1px solid #7d7d7d}.keyline-light{border:1px solid #e0e0e0}.fill-light{background:#efefef}li>code,p>code,td>code>a{font-weight:700}.documentation pre{padding:1rem;background:#052e52;color:#e6e1dc;font-size:.9rem}.bg-midnight{background:#052e52}.dark-link a,.dark-link code{color:#052e52}table p,table td{font-size:.9rem;line-height:1.3rem}.documentation td,.documentation th,.input{padding:.5rem}.input{font-family:inherit;display:block;width:100%;height:2rem;margin-bottom:1rem;border:1px solid #ccc;font-size:.875rem;border-radius:3px;box-sizing:border-box}
\ No newline at end of file diff --git a/node_modules/autoprefixer/node_modules/postcss/docs/api/index.html b/node_modules/autoprefixer/node_modules/postcss/docs/api/index.html new file mode 100644 index 0000000..8dfeb47 --- /dev/null +++ b/node_modules/autoprefixer/node_modules/postcss/docs/api/index.html @@ -0,0 +1,22531 @@ +<!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</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> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>rule.insertBefore(decl, decl.clone({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'-webkit-'</span> + decl.prop }))</code></pre> + + + + + + + + + + +</section> + + + <section id='atrulelast'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#L644-L647'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#atrulelast'> + <code> + last + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>The container’s last 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.last === rule.nodes[rule.nodes.length - <span class="hljs-number">1</span>]</code></pre> + + + + + + + + + + +</section> + + + <section id='atruleprepend'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#L401-L414'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#atruleprepend'> + <code> + prepend + <span class='gray'>(children)</span> + </code> + </a> + </h3> + + <p>Inserts new nodes to the start 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.prepend(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='atruleremoveall'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#L523-L530'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#atruleremoveall'> + <code> + removeAll + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Removes all children from the container +and cleans their parent properties.</p> + + + + + + + + + + + + + + + + + <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>rule.removeAll() +rule.nodes.length <span class="hljs-comment">//=> 0</span></code></pre> + + + + + + + + + + +</section> + + + <section id='atruleremovechild'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#L495-L511'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#atruleremovechild'> + <code> + removeChild + <span class='gray'>(child)</span> + </code> + </a> + </h3> + + <p>Removes node from the container and cleans the parent properties +from the node and 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>child</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> + + + </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>rule.nodes.length <span class="hljs-comment">//=> 5</span> +rule.removeChild(decl) +rule.nodes.length <span class="hljs-comment">//=> 4</span> +decl.parent <span class="hljs-comment">//=> undefined</span></code></pre> + + + + + + + + + + +</section> + + + <section id='atrulereplacevalues'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#L558-L574'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#atrulereplacevalues'> + <code> + replaceValues + <span class='gray'>(pattern, opts, callback)</span> + </code> + </a> + </h3> + + <p>Passes all declaration values within the container that match pattern +through callback, replacing those values with the returned result +of callback.</p> +<p>This method is useful if you are using a custom unit or function +and need to iterate through all values.</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>pattern</code></td> + <td class='col-3 quiet'> + (<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/RegExp">RegExp</a>) + + </td> + <td class='col-6'>Replace pattern. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> + + </td> + <td class='col-6'>Options to speed up the search. +</td> + </tr> + + + <tr> + <td class='col-2 strong'>opts.props</td> + <td class="col-2 quiet"> + (<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="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>) + + </td> + <td class='col-8'>An array of property names. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.fast</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>String that’s used to narrow down +values and speed up the regexp search. +</td> +</tr> + + + + + + <tr> + <td class='col-3 strong'><code>callback</code></td> + <td class='col-3 quiet'> + (<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>) + + </td> + <td class='col-6'>String to replace pattern or callback +that returns a new value. The callback +will receive the same arguments +as those passed to a function parameter +of +<code>String#replace</code> +. +</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>root.replaceValues(<span class="hljs-regexp">/\d+rem/</span>, { <span class="hljs-attr">fast</span>: <span class="hljs-string">'rem'</span> }, string => { + <span class="hljs-keyword">return</span> <span class="hljs-number">15</span> * <span class="hljs-built_in">parseInt</span>(string) + <span class="hljs-string">'px'</span> +})</code></pre> + + + + + + + + + + +</section> + + + <section id='atrulesome'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#L602-L604'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#atrulesome'> + <code> + some + <span class='gray'>(condition)</span> + </code> + </a> + </h3> + + <p>Returns <code>true</code> if callback returns <code>true</code> for (at least) one +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 some 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> hasPrefix = rule.some(<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='atrulewalk'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#L123-L137'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#atrulewalk'> + <code> + walk + <span class='gray'>(callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each node.</p> +<p>Like container.each(), this method is safe to use +if you are mutating arrays during iteration.</p> +<p>If you only need to iterate through the container’s immediate children, +use <a href="#containereach">Container#each</a>.</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>root.walk(<span class="hljs-function"><span class="hljs-params">node</span> =></span> { + <span class="hljs-comment">// Traverses all descendant nodes.</span> +})</code></pre> + + + + + + + + + + +</section> + + + <section id='atrulewalkatrules'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#L303-L324'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#atrulewalkatrules'> + <code> + walkAtRules + <span class='gray'>(name?, callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each at-rule node.</p> +<p>If you pass a filter, iteration will only happen over at-rules +that have matching names.</p> +<p>Like <a href="#containereach">Container#each</a>, this method is safe +to use if you are mutating arrays during iteration.</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>name</code></td> + <td class='col-3 quiet'> + (<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/RegExp">RegExp</a>)? + + </td> + <td class='col-6'>String or regular expression +to filter at-rules by name. +</td> + </tr> + + + <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>root.walkAtRules(<span class="hljs-function"><span class="hljs-params">rule</span> =></span> { + <span class="hljs-keyword">if</span> (isOld(rule.name)) rule.remove() +}) + +<span class="hljs-keyword">let</span> first = <span class="hljs-literal">false</span> +root.walkAtRules(<span class="hljs-string">'charset'</span>, rule => { + <span class="hljs-keyword">if</span> (!first) { + first = <span class="hljs-literal">true</span> + } <span class="hljs-keyword">else</span> { + rule.remove() + } +})</code></pre> + + + + + + + + + + +</section> + + + <section id='atrulewalkcomments'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#L342-L348'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#atrulewalkcomments'> + <code> + walkComments + <span class='gray'>(callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each comment node.</p> +<p>Like <a href="#containereach">Container#each</a>, this method is safe +to use if you are mutating arrays during iteration.</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>root.walkComments(<span class="hljs-function"><span class="hljs-params">comment</span> =></span> { + comment.remove() +})</code></pre> + + + + + + + + + + +</section> + + + <section id='atrulewalkdecls'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#L203-L224'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#atrulewalkdecls'> + <code> + walkDecls + <span class='gray'>(prop?, callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each declaration node.</p> +<p>If you pass a filter, iteration will only happen over declarations +with matching properties.</p> +<p>Like <a href="#containereach">Container#each</a>, this method is safe +to use if you are mutating arrays during iteration.</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>prop</code></td> + <td class='col-3 quiet'> + (<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/RegExp">RegExp</a>)? + + </td> + <td class='col-6'>String or regular expression +to filter declarations by property name. +</td> + </tr> + + + <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>root.walkDecls(<span class="hljs-function"><span class="hljs-params">decl</span> =></span> { + checkPropertySupport(decl.prop) +}) + +root.walkDecls(<span class="hljs-string">'border-radius'</span>, decl => { + decl.remove() +}) + +root.walkDecls(<span class="hljs-regexp">/^background/</span>, decl => { + decl.value = takeFirstColorFromGradient(decl.value) +})</code></pre> + + + + + + + + + + +</section> + + + <section id='atrulewalkrules'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#L249-L271'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#atrulewalkrules'> + <code> + walkRules + <span class='gray'>(selector?, callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each rule node.</p> +<p>If you pass a filter, iteration will only happen over rules +with matching selectors.</p> +<p>Like <a href="#containereach">Container#each</a>, this method is safe +to use if you are mutating arrays during iteration.</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>selector</code></td> + <td class='col-3 quiet'> + (<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/RegExp">RegExp</a>)? + + </td> + <td class='col-6'>String or regular expression +to filter rules by selector. +</td> + </tr> + + + <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> selectors = [] +root.walkRules(<span class="hljs-function"><span class="hljs-params">rule</span> =></span> { + selectors.push(rule.selector) +}) +<span class="hljs-built_in">console</span>.log(<span class="hljs-string">`Your CSS uses <span class="hljs-subst">${ selectors.length }</span> selectors`</span>)</code></pre> + + + + + + + + + + +</section> + + +</div> + + + + + + +</section> + + + + + <section id='comment'class='mt2 mb2 px3 py1 keyline-top'> + + <div class='right py2'> + + <span class='font-smaller'> + Extends + + <a href="#node">Node</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/comment.js#L13-L37'> + <span>lib/comment.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#comment'> + <code> + Comment + <span class='gray'>(defaults)</span> + </code> + </a> + </h3> + + <p>Represents a comment between declarations or statements (rule and at-rules).</p> +<p>Comments inside selectors, at-rule parameters, or declaration values +will be stored in the <code>raws</code> properties explained above.</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 mb2 mt3'>Instance Members</h4> + <div class="section-indent"> + + <section id='commentafter'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/node.js#L312-L315'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#commentafter'> + <code> + after + <span class='gray'>(add)</span> + </code> + </a> + </h3> + + <p>Insert new node after current node to current node’s parent.</p> +<p>Just alias for <code>node.parent.insertAfter(node, add)</code>.</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>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> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>decl.after(<span class="hljs-string">'color: black'</span>)</code></pre> + + + + + + + + + + +</section> + + + <section id='commentbefore'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/node.js#L295-L298'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#commentbefore'> + <code> + before + <span class='gray'>(add)</span> + </code> + </a> + </h3> + + <p>Insert new node before current node to current node’s parent.</p> +<p>Just alias for <code>node.parent.insertBefore(node, add)</code>.</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>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> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>decl.before(<span class="hljs-string">'content: ""'</span>)</code></pre> + + + + + + + + + + +</section> + + + <section id='commentcleanraws'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/node.js#L392-L396'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#commentcleanraws'> + <code> + cleanRaws + <span class='gray'>(keepBetween?)</span> + </code> + </a> + </h3> + + <p>Clear the code style properties for the node and 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>keepBetween</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>? + + </td> + <td class='col-6'>Keep the raws.between symbols. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code> + : + <span class='force-inline'> +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>node.raws.before <span class="hljs-comment">//=> ' '</span> +node.cleanRaws() +node.raws.before <span class="hljs-comment">//=> undefined</span></code></pre> + + + + + + + + + + +</section> + + + <section id='commentclone'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/node.js#L182-L188'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#commentclone'> + <code> + clone + <span class='gray'>(overrides = {})</span> + </code> + </a> + </h3> + + <p>Returns an exact clone of the node.</p> +<p>The resulting cloned node and its (cloned) children will retain +code style properties.</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>overrides</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>New properties to override in the clone. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>Clone of the node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>decl.raws.before <span class="hljs-comment">//=> "\n "</span> +<span class="hljs-keyword">const</span> cloned = decl.clone({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'-moz-'</span> + decl.prop }) +cloned.raws.before <span class="hljs-comment">//=> "\n "</span> +cloned.toString() <span class="hljs-comment">//=> -moz-transform: scale(0)</span></code></pre> + + + + + + + + + + +</section> + + + <section id='commentcloneafter'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/node.js#L215-L219'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#commentcloneafter'> + <code> + cloneAfter + <span class='gray'>(overrides = {})</span> + </code> + </a> + </h3> + + <p>Shortcut to clone the node and insert the resulting cloned node +after the current node.</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>overrides</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>New properties to override in the clone. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>New node. +</span> + + + + + + + + + + + + + + + +</section> + + + <section id='commentclonebefore'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/node.js#L201-L205'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#commentclonebefore'> + <code> + cloneBefore + <span class='gray'>(overrides = {})</span> + </code> + </a> + </h3> + + <p>Shortcut to clone the node and insert the resulting cloned node +before the current node.</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>overrides</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>Mew properties to override in the clone. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>New node +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>decl.cloneBefore({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'-moz-'</span> + decl.prop })</code></pre> + + + + + + + + + + +</section> + + + <section id='commenterror'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/node.js#L88-L94'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#commenterror'> + <code> + error + <span class='gray'>(message, opts = {})</span> + </code> + </a> + </h3> + + <p>Returns a <code>CssSyntaxError</code> instance containing the original position +of the node in the source, showing line and column numbers and also +a small excerpt to facilitate debugging.</p> +<p>If present, an input source map will be used to get the original position +of the source, even from a previous compilation step +(e.g., from Sass compilation).</p> +<p>This method produces very useful error messages.</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>message</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Error description. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>Options. +</td> + </tr> + + + <tr> + <td class='col-2 strong'>opts.plugin</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>Plugin name that created this error. +PostCSS will set it automatically. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.word</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>A word inside a node’s string that should +be highlighted as the source of the error. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.index</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-8'>An index inside a node’s string that should +be highlighted as the source of the error. +</td> +</tr> + + + + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#csssyntaxerror">CssSyntaxError</a></code> + : + <span class='force-inline'>Error object to throw it. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (!variables[name]) { + <span class="hljs-keyword">throw</span> decl.error(<span class="hljs-string">'Unknown variable '</span> + name, { <span class="hljs-attr">word</span>: name }) + <span class="hljs-comment">// CssSyntaxError: postcss-vars:a.sass:4:3: Unknown variable $black</span> + <span class="hljs-comment">// color: $black</span> + <span class="hljs-comment">// a</span> + <span class="hljs-comment">// ^</span> + <span class="hljs-comment">// background: white</span> +}</code></pre> + + + + + + + + + + +</section> + + + <section id='commentnext'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/node.js#L259-L263'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#commentnext'> + <code> + next + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Returns the next child of the node’s parent. +Returns <code>undefined</code> if the current node is the last child.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code>(<a href="#node">Node</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>)</code> + : + <span class='force-inline'>Next node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (comment.text === <span class="hljs-string">'delete next'</span>) { + <span class="hljs-keyword">const</span> next = comment.next() + <span class="hljs-keyword">if</span> (next) { + next.remove() + } +}</code></pre> + + + + + + + + + + +</section> + + + <section id='commentprev'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/node.js#L277-L281'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#commentprev'> + <code> + prev + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Returns the previous child of the node’s parent. +Returns <code>undefined</code> if the current node is the first child.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code>(<a href="#node">Node</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>)</code> + : + <span class='force-inline'>Previous node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> annotation = decl.prev() +<span class="hljs-keyword">if</span> (annotation.type === <span class="hljs-string">'comment'</span>) { + readAnnotation(annotation.text) +}</code></pre> + + + + + + + + + + +</section> + + + <section id='commentraw'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/node.js#L361-L364'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#commentraw'> + <code> + raw + <span class='gray'>(prop, defaultType?)</span> + </code> + </a> + </h3> + + <p>Returns a <a href="Node#raws">Node#raws</a> value. If the node is missing +the code style property (because the node was manually built or cloned), +PostCSS will try to autodetect the code style property by looking +at other nodes in the tree.</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>prop</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Name of code style property. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>defaultType</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>? + + </td> + <td class='col-6'>Name of default value, it can be missed +if the value is the same as prop. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code> + : + <span class='force-inline'>Code style value. +</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 { background: white }'</span>) +root.nodes[<span class="hljs-number">0</span>].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> }) +root.nodes[<span class="hljs-number">0</span>].nodes[<span class="hljs-number">1</span>].raws.before <span class="hljs-comment">//=> undefined</span> +root.nodes[<span class="hljs-number">0</span>].nodes[<span class="hljs-number">1</span>].raw(<span class="hljs-string">'before'</span>) <span class="hljs-comment">//=> ' '</span></code></pre> + + + + + + + + + + +</section> + + + <section id='commentremove'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/node.js#L138-L144'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#commentremove'> + <code> + remove + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Removes the node from its parent and cleans the parent properties +from the node and its children.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>Node to make calls chain. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (decl.prop.match(<span class="hljs-regexp">/^-webkit-/</span>)) { + decl.remove() +}</code></pre> + + + + + + + + + + +</section> + + + <section id='commentreplacewith'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/node.js#L233-L243'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#commentreplacewith'> + <code> + replaceWith + <span class='gray'>(nodes)</span> + </code> + </a> + </h3> + + <p>Inserts node(s) before the current node and removes the current node.</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>nodes</code></td> + <td class='col-3 quiet'> + ...<a href="#node">Node</a> + + </td> + <td class='col-6'>Mode(s) to replace current one. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>Current node to methods chain. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (atrule.name === <span class="hljs-string">'mixin'</span>) { + atrule.replaceWith(mixinRules[atrule.params]) +}</code></pre> + + + + + + + + + + +</section> + + + <section id='commentroot'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/node.js#L374-L378'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#commentroot'> + <code> + root + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Finds the Root instance of the node’s tree.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#root">Root</a></code> + : + <span class='force-inline'>Root parent. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>root.nodes[<span class="hljs-number">0</span>].nodes[<span class="hljs-number">0</span>].root() === root</code></pre> + + + + + + + + + + +</section> + + + <section id='commenttostring'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/node.js#L157-L164'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#commenttostring'> + <code> + toString + <span class='gray'>(stringifier = stringify)</span> + </code> + </a> + </h3> + + <p>Returns a CSS string representing the node.</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>stringifier</code></td> + <td class='col-3 quiet'> + (<a href="#stringifier">stringifier</a> | <a href="#syntax">syntax</a>)? + + = <code>stringify</code> + </td> + <td class='col-6'>A syntax to use +in string generation. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code> + : + <span class='force-inline'>CSS string of this node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.rule({ <span class="hljs-attr">selector</span>: <span class="hljs-string">'a'</span> }).toString() <span class="hljs-comment">//=> "a {}"</span></code></pre> + + + + + + + + + + +</section> + + + <section id='commentwarn'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/node.js#L121-L125'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#commentwarn'> + <code> + warn + <span class='gray'>(result, text, opts?)</span> + </code> + </a> + </h3> + + <p>This method is provided as a convenience wrapper for <a href="#resultwarn">Result#warn</a>.</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>result</code></td> + <td class='col-3 quiet'> + <a href="#result">Result</a> + + </td> + <td class='col-6'>The +<a href="#result">Result</a> + instance +that will receive the warning. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>text</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Warning message. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + </td> + <td class='col-6'>Options +</td> + </tr> + + + <tr> + <td class='col-2 strong'>opts.plugin</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>Plugin name that created this warning. +PostCSS will set it automatically. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.word</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>A word inside a node’s string that should +be highlighted as the source of the warning. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.index</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-8'>An index inside a node’s string that should +be highlighted as the source of the warning. +</td> +</tr> + + + + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#warning">Warning</a></code> + : + <span class='force-inline'>Created warning object. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> plugin = postcss.plugin(<span class="hljs-string">'postcss-deprecated'</span>, () => { + <span class="hljs-keyword">return</span> <span class="hljs-function">(<span class="hljs-params">root, result</span>) =></span> { + root.walkDecls(<span class="hljs-string">'bad'</span>, decl => { + decl.warn(result, <span class="hljs-string">'Deprecated property bad'</span>) + }) + } +})</code></pre> + + + + + + + + + + +</section> + + +</div> + + + + + + +</section> + + + + + <section id='container'class='mt2 mb2 px3 py1 keyline-top'> + + <div class='right py2'> + + <span class='font-smaller'> + Extends + + <a href="#node">Node</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/container.js#L36-L708'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#container'> + <code> + Container + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>The <a href="#root">Root</a>, <a href="#atrule">AtRule</a>, and <a href="#rule">Rule</a> container nodes +inherit some common methods to help work with their children.</p> +<p>Note that all containers can store any content. If you write a rule inside +a rule, PostCSS will parse it.</p> + + + + + + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb2 mt3'>Instance Members</h4> + <div class="section-indent"> + + <section id='containerafter'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/node.js#L312-L315'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerafter'> + <code> + after + <span class='gray'>(add)</span> + </code> + </a> + </h3> + + <p>Insert new node after current node to current node’s parent.</p> +<p>Just alias for <code>node.parent.insertAfter(node, add)</code>.</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>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> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>decl.after(<span class="hljs-string">'color: black'</span>)</code></pre> + + + + + + + + + + +</section> + + + <section id='containerappend'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='#containerappend'> + <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='containerbefore'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/node.js#L295-L298'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerbefore'> + <code> + before + <span class='gray'>(add)</span> + </code> + </a> + </h3> + + <p>Insert new node before current node to current node’s parent.</p> +<p>Just alias for <code>node.parent.insertBefore(node, add)</code>.</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>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> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>decl.before(<span class="hljs-string">'content: ""'</span>)</code></pre> + + + + + + + + + + +</section> + + + <section id='containercleanraws'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/node.js#L392-L396'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containercleanraws'> + <code> + cleanRaws + <span class='gray'>(keepBetween?)</span> + </code> + </a> + </h3> + + <p>Clear the code style properties for the node and 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>keepBetween</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>? + + </td> + <td class='col-6'>Keep the raws.between symbols. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code> + : + <span class='force-inline'> +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>node.raws.before <span class="hljs-comment">//=> ' '</span> +node.cleanRaws() +node.raws.before <span class="hljs-comment">//=> undefined</span></code></pre> + + + + + + + + + + +</section> + + + <section id='containerclone'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/node.js#L182-L188'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerclone'> + <code> + clone + <span class='gray'>(overrides = {})</span> + </code> + </a> + </h3> + + <p>Returns an exact clone of the node.</p> +<p>The resulting cloned node and its (cloned) children will retain +code style properties.</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>overrides</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>New properties to override in the clone. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>Clone of the node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>decl.raws.before <span class="hljs-comment">//=> "\n "</span> +<span class="hljs-keyword">const</span> cloned = decl.clone({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'-moz-'</span> + decl.prop }) +cloned.raws.before <span class="hljs-comment">//=> "\n "</span> +cloned.toString() <span class="hljs-comment">//=> -moz-transform: scale(0)</span></code></pre> + + + + + + + + + + +</section> + + + <section id='containercloneafter'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/node.js#L215-L219'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containercloneafter'> + <code> + cloneAfter + <span class='gray'>(overrides = {})</span> + </code> + </a> + </h3> + + <p>Shortcut to clone the node and insert the resulting cloned node +after the current node.</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>overrides</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>New properties to override in the clone. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>New node. +</span> + + + + + + + + + + + + + + + +</section> + + + <section id='containerclonebefore'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/node.js#L201-L205'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerclonebefore'> + <code> + cloneBefore + <span class='gray'>(overrides = {})</span> + </code> + </a> + </h3> + + <p>Shortcut to clone the node and insert the resulting cloned node +before the current node.</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>overrides</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>Mew properties to override in the clone. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>New node +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>decl.cloneBefore({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'-moz-'</span> + decl.prop })</code></pre> + + + + + + + + + + +</section> + + + <section id='containereach'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='#containereach'> + <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='containererror'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/node.js#L88-L94'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containererror'> + <code> + error + <span class='gray'>(message, opts = {})</span> + </code> + </a> + </h3> + + <p>Returns a <code>CssSyntaxError</code> instance containing the original position +of the node in the source, showing line and column numbers and also +a small excerpt to facilitate debugging.</p> +<p>If present, an input source map will be used to get the original position +of the source, even from a previous compilation step +(e.g., from Sass compilation).</p> +<p>This method produces very useful error messages.</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>message</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Error description. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>Options. +</td> + </tr> + + + <tr> + <td class='col-2 strong'>opts.plugin</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>Plugin name that created this error. +PostCSS will set it automatically. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.word</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>A word inside a node’s string that should +be highlighted as the source of the error. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.index</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-8'>An index inside a node’s string that should +be highlighted as the source of the error. +</td> +</tr> + + + + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#csssyntaxerror">CssSyntaxError</a></code> + : + <span class='force-inline'>Error object to throw it. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (!variables[name]) { + <span class="hljs-keyword">throw</span> decl.error(<span class="hljs-string">'Unknown variable '</span> + name, { <span class="hljs-attr">word</span>: name }) + <span class="hljs-comment">// CssSyntaxError: postcss-vars:a.sass:4:3: Unknown variable $black</span> + <span class="hljs-comment">// color: $black</span> + <span class="hljs-comment">// a</span> + <span class="hljs-comment">// ^</span> + <span class="hljs-comment">// background: white</span> +}</code></pre> + + + + + + + + + + +</section> + + + <section id='containerevery'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='#containerevery'> + <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='containerfirst'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='#containerfirst'> + <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='containerindex'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='#containerindex'> + <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='containerinsertafter'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='#containerinsertafter'> + <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='containerinsertbefore'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='#containerinsertbefore'> + <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</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> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>rule.insertBefore(decl, decl.clone({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'-webkit-'</span> + decl.prop }))</code></pre> + + + + + + + + + + +</section> + + + <section id='containerlast'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#L644-L647'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerlast'> + <code> + last + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>The container’s last 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.last === rule.nodes[rule.nodes.length - <span class="hljs-number">1</span>]</code></pre> + + + + + + + + + + +</section> + + + <section id='containernext'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/node.js#L259-L263'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containernext'> + <code> + next + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Returns the next child of the node’s parent. +Returns <code>undefined</code> if the current node is the last child.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code>(<a href="#node">Node</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>)</code> + : + <span class='force-inline'>Next node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (comment.text === <span class="hljs-string">'delete next'</span>) { + <span class="hljs-keyword">const</span> next = comment.next() + <span class="hljs-keyword">if</span> (next) { + next.remove() + } +}</code></pre> + + + + + + + + + + +</section> + + + <section id='containerprepend'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#L401-L414'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerprepend'> + <code> + prepend + <span class='gray'>(children)</span> + </code> + </a> + </h3> + + <p>Inserts new nodes to the start 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.prepend(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='containerprev'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/node.js#L277-L281'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerprev'> + <code> + prev + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Returns the previous child of the node’s parent. +Returns <code>undefined</code> if the current node is the first child.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code>(<a href="#node">Node</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>)</code> + : + <span class='force-inline'>Previous node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> annotation = decl.prev() +<span class="hljs-keyword">if</span> (annotation.type === <span class="hljs-string">'comment'</span>) { + readAnnotation(annotation.text) +}</code></pre> + + + + + + + + + + +</section> + + + <section id='containerraw'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/node.js#L361-L364'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerraw'> + <code> + raw + <span class='gray'>(prop, defaultType?)</span> + </code> + </a> + </h3> + + <p>Returns a <a href="Node#raws">Node#raws</a> value. If the node is missing +the code style property (because the node was manually built or cloned), +PostCSS will try to autodetect the code style property by looking +at other nodes in the tree.</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>prop</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Name of code style property. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>defaultType</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>? + + </td> + <td class='col-6'>Name of default value, it can be missed +if the value is the same as prop. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code> + : + <span class='force-inline'>Code style value. +</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 { background: white }'</span>) +root.nodes[<span class="hljs-number">0</span>].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> }) +root.nodes[<span class="hljs-number">0</span>].nodes[<span class="hljs-number">1</span>].raws.before <span class="hljs-comment">//=> undefined</span> +root.nodes[<span class="hljs-number">0</span>].nodes[<span class="hljs-number">1</span>].raw(<span class="hljs-string">'before'</span>) <span class="hljs-comment">//=> ' '</span></code></pre> + + + + + + + + + + +</section> + + + <section id='containerremove'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/node.js#L138-L144'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerremove'> + <code> + remove + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Removes the node from its parent and cleans the parent properties +from the node and its children.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>Node to make calls chain. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (decl.prop.match(<span class="hljs-regexp">/^-webkit-/</span>)) { + decl.remove() +}</code></pre> + + + + + + + + + + +</section> + + + <section id='containerremoveall'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#L523-L530'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerremoveall'> + <code> + removeAll + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Removes all children from the container +and cleans their parent properties.</p> + + + + + + + + + + + + + + + + + <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>rule.removeAll() +rule.nodes.length <span class="hljs-comment">//=> 0</span></code></pre> + + + + + + + + + + +</section> + + + <section id='containerremovechild'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#L495-L511'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerremovechild'> + <code> + removeChild + <span class='gray'>(child)</span> + </code> + </a> + </h3> + + <p>Removes node from the container and cleans the parent properties +from the node and 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>child</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> + + + </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>rule.nodes.length <span class="hljs-comment">//=> 5</span> +rule.removeChild(decl) +rule.nodes.length <span class="hljs-comment">//=> 4</span> +decl.parent <span class="hljs-comment">//=> undefined</span></code></pre> + + + + + + + + + + +</section> + + + <section id='containerreplacevalues'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#L558-L574'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerreplacevalues'> + <code> + replaceValues + <span class='gray'>(pattern, opts, callback)</span> + </code> + </a> + </h3> + + <p>Passes all declaration values within the container that match pattern +through callback, replacing those values with the returned result +of callback.</p> +<p>This method is useful if you are using a custom unit or function +and need to iterate through all values.</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>pattern</code></td> + <td class='col-3 quiet'> + (<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/RegExp">RegExp</a>) + + </td> + <td class='col-6'>Replace pattern. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> + + </td> + <td class='col-6'>Options to speed up the search. +</td> + </tr> + + + <tr> + <td class='col-2 strong'>opts.props</td> + <td class="col-2 quiet"> + (<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="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>) + + </td> + <td class='col-8'>An array of property names. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.fast</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>String that’s used to narrow down +values and speed up the regexp search. +</td> +</tr> + + + + + + <tr> + <td class='col-3 strong'><code>callback</code></td> + <td class='col-3 quiet'> + (<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>) + + </td> + <td class='col-6'>String to replace pattern or callback +that returns a new value. The callback +will receive the same arguments +as those passed to a function parameter +of +<code>String#replace</code> +. +</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>root.replaceValues(<span class="hljs-regexp">/\d+rem/</span>, { <span class="hljs-attr">fast</span>: <span class="hljs-string">'rem'</span> }, string => { + <span class="hljs-keyword">return</span> <span class="hljs-number">15</span> * <span class="hljs-built_in">parseInt</span>(string) + <span class="hljs-string">'px'</span> +})</code></pre> + + + + + + + + + + +</section> + + + <section id='containerreplacewith'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/node.js#L233-L243'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerreplacewith'> + <code> + replaceWith + <span class='gray'>(nodes)</span> + </code> + </a> + </h3> + + <p>Inserts node(s) before the current node and removes the current node.</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>nodes</code></td> + <td class='col-3 quiet'> + ...<a href="#node">Node</a> + + </td> + <td class='col-6'>Mode(s) to replace current one. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>Current node to methods chain. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (atrule.name === <span class="hljs-string">'mixin'</span>) { + atrule.replaceWith(mixinRules[atrule.params]) +}</code></pre> + + + + + + + + + + +</section> + + + <section id='containerroot'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/node.js#L374-L378'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerroot'> + <code> + root + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Finds the Root instance of the node’s tree.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#root">Root</a></code> + : + <span class='force-inline'>Root parent. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>root.nodes[<span class="hljs-number">0</span>].nodes[<span class="hljs-number">0</span>].root() === root</code></pre> + + + + + + + + + + +</section> + + + <section id='containersome'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#L602-L604'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containersome'> + <code> + some + <span class='gray'>(condition)</span> + </code> + </a> + </h3> + + <p>Returns <code>true</code> if callback returns <code>true</code> for (at least) one +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 some 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> hasPrefix = rule.some(<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='containertostring'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/node.js#L157-L164'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containertostring'> + <code> + toString + <span class='gray'>(stringifier = stringify)</span> + </code> + </a> + </h3> + + <p>Returns a CSS string representing the node.</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>stringifier</code></td> + <td class='col-3 quiet'> + (<a href="#stringifier">stringifier</a> | <a href="#syntax">syntax</a>)? + + = <code>stringify</code> + </td> + <td class='col-6'>A syntax to use +in string generation. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code> + : + <span class='force-inline'>CSS string of this node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.rule({ <span class="hljs-attr">selector</span>: <span class="hljs-string">'a'</span> }).toString() <span class="hljs-comment">//=> "a {}"</span></code></pre> + + + + + + + + + + +</section> + + + <section id='containerwalk'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#L123-L137'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerwalk'> + <code> + walk + <span class='gray'>(callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each node.</p> +<p>Like container.each(), this method is safe to use +if you are mutating arrays during iteration.</p> +<p>If you only need to iterate through the container’s immediate children, +use <a href="#containereach">Container#each</a>.</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>root.walk(<span class="hljs-function"><span class="hljs-params">node</span> =></span> { + <span class="hljs-comment">// Traverses all descendant nodes.</span> +})</code></pre> + + + + + + + + + + +</section> + + + <section id='containerwalkatrules'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#L303-L324'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerwalkatrules'> + <code> + walkAtRules + <span class='gray'>(name?, callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each at-rule node.</p> +<p>If you pass a filter, iteration will only happen over at-rules +that have matching names.</p> +<p>Like <a href="#containereach">Container#each</a>, this method is safe +to use if you are mutating arrays during iteration.</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>name</code></td> + <td class='col-3 quiet'> + (<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/RegExp">RegExp</a>)? + + </td> + <td class='col-6'>String or regular expression +to filter at-rules by name. +</td> + </tr> + + + <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>root.walkAtRules(<span class="hljs-function"><span class="hljs-params">rule</span> =></span> { + <span class="hljs-keyword">if</span> (isOld(rule.name)) rule.remove() +}) + +<span class="hljs-keyword">let</span> first = <span class="hljs-literal">false</span> +root.walkAtRules(<span class="hljs-string">'charset'</span>, rule => { + <span class="hljs-keyword">if</span> (!first) { + first = <span class="hljs-literal">true</span> + } <span class="hljs-keyword">else</span> { + rule.remove() + } +})</code></pre> + + + + + + + + + + +</section> + + + <section id='containerwalkcomments'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#L342-L348'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerwalkcomments'> + <code> + walkComments + <span class='gray'>(callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each comment node.</p> +<p>Like <a href="#containereach">Container#each</a>, this method is safe +to use if you are mutating arrays during iteration.</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>root.walkComments(<span class="hljs-function"><span class="hljs-params">comment</span> =></span> { + comment.remove() +})</code></pre> + + + + + + + + + + +</section> + + + <section id='containerwalkdecls'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#L203-L224'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerwalkdecls'> + <code> + walkDecls + <span class='gray'>(prop?, callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each declaration node.</p> +<p>If you pass a filter, iteration will only happen over declarations +with matching properties.</p> +<p>Like <a href="#containereach">Container#each</a>, this method is safe +to use if you are mutating arrays during iteration.</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>prop</code></td> + <td class='col-3 quiet'> + (<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/RegExp">RegExp</a>)? + + </td> + <td class='col-6'>String or regular expression +to filter declarations by property name. +</td> + </tr> + + + <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>root.walkDecls(<span class="hljs-function"><span class="hljs-params">decl</span> =></span> { + checkPropertySupport(decl.prop) +}) + +root.walkDecls(<span class="hljs-string">'border-radius'</span>, decl => { + decl.remove() +}) + +root.walkDecls(<span class="hljs-regexp">/^background/</span>, decl => { + decl.value = takeFirstColorFromGradient(decl.value) +})</code></pre> + + + + + + + + + + +</section> + + + <section id='containerwalkrules'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#L249-L271'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerwalkrules'> + <code> + walkRules + <span class='gray'>(selector?, callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each rule node.</p> +<p>If you pass a filter, iteration will only happen over rules +with matching selectors.</p> +<p>Like <a href="#containereach">Container#each</a>, this method is safe +to use if you are mutating arrays during iteration.</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>selector</code></td> + <td class='col-3 quiet'> + (<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/RegExp">RegExp</a>)? + + </td> + <td class='col-6'>String or regular expression +to filter rules by selector. +</td> + </tr> + + + <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> selectors = [] +root.walkRules(<span class="hljs-function"><span class="hljs-params">rule</span> =></span> { + selectors.push(rule.selector) +}) +<span class="hljs-built_in">console</span>.log(<span class="hljs-string">`Your CSS uses <span class="hljs-subst">${ selectors.length }</span> selectors`</span>)</code></pre> + + + + + + + + + + +</section> + + + <section id='containerwarn'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/node.js#L121-L125'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#containerwarn'> + <code> + warn + <span class='gray'>(result, text, opts?)</span> + </code> + </a> + </h3> + + <p>This method is provided as a convenience wrapper for <a href="#resultwarn">Result#warn</a>.</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>result</code></td> + <td class='col-3 quiet'> + <a href="#result">Result</a> + + </td> + <td class='col-6'>The +<a href="#result">Result</a> + instance +that will receive the warning. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>text</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Warning message. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + </td> + <td class='col-6'>Options +</td> + </tr> + + + <tr> + <td class='col-2 strong'>opts.plugin</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>Plugin name that created this warning. +PostCSS will set it automatically. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.word</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>A word inside a node’s string that should +be highlighted as the source of the warning. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.index</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-8'>An index inside a node’s string that should +be highlighted as the source of the warning. +</td> +</tr> + + + + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#warning">Warning</a></code> + : + <span class='force-inline'>Created warning object. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> plugin = postcss.plugin(<span class="hljs-string">'postcss-deprecated'</span>, () => { + <span class="hljs-keyword">return</span> <span class="hljs-function">(<span class="hljs-params">root, result</span>) =></span> { + root.walkDecls(<span class="hljs-string">'bad'</span>, decl => { + decl.warn(result, <span class="hljs-string">'Deprecated property bad'</span>) + }) + } +})</code></pre> + + + + + + + + + + +</section> + + +</div> + + + + + + +</section> + + + + + <section id='csssyntaxerror'class='mt2 mb2 px3 py1 keyline-top'> + + <div class='right py2'> + + <span class='font-smaller'> + Extends + + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Error">Error</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/css-syntax-error.js#L33-L243'> + <span>lib/css-syntax-error.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#csssyntaxerror'> + <code> + CssSyntaxError + <span class='gray'>(message, line?, column?, source?, file?, plugin?)</span> + </code> + </a> + </h3> + + <p>The CSS parser throws this error for broken CSS.</p> +<p>Custom parsers can throw this error for broken custom syntax using +the <a href="#nodeerror">Node#error</a> method.</p> +<p>PostCSS will use the input source map to detect the original error location. +If you wrote a Sass file, compiled it to CSS and then parsed it with PostCSS, +PostCSS will show the original position in the Sass file.</p> +<p>If you need the position in the PostCSS input +(e.g., to debug the previous compiler), use <code>error.input.file</code>.</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>message</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Error message. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>line</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>? + + </td> + <td class='col-6'>Source line of the error. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>column</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>? + + </td> + <td class='col-6'>Source column of the error. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>source</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>? + + </td> + <td class='col-6'>Source code of the broken file. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>file</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>? + + </td> + <td class='col-6'>Absolute path to the broken file. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>plugin</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>? + + </td> + <td class='col-6'>PostCSS plugin name, if error came from plugin. +</td> + </tr> + + + </table> + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-comment">// Catching and checking syntax error</span> +<span class="hljs-keyword">try</span> { + postcss.parse(<span class="hljs-string">'a{'</span>) +} <span class="hljs-keyword">catch</span> (error) { + <span class="hljs-keyword">if</span> (error.name === <span class="hljs-string">'CssSyntaxError'</span>) { + error <span class="hljs-comment">//=> CssSyntaxError</span> + } +}</code></pre> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-comment">// Raising error from plugin</span> +<span class="hljs-keyword">throw</span> node.error(<span class="hljs-string">'Unknown variable'</span>, { <span class="hljs-attr">plugin</span>: <span class="hljs-string">'postcss-vars'</span> })</code></pre> + + + + + + + <h4 class='caps quiet mb2 mt3'>Instance Members</h4> + <div class="section-indent"> + + <section id='csssyntaxerrorname'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/css-syntax-error.js#L58-L58'> + <span>lib/css-syntax-error.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#csssyntaxerrorname'> + <code> + name + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Always equal to <code>'CssSyntaxError'</code>. You should always check error type +by <code>error.name === 'CssSyntaxError'</code> +instead of <code>error instanceof CssSyntaxError</code>, +because npm could have several PostCSS versions.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (error.name === <span class="hljs-string">'CssSyntaxError'</span>) { + error <span class="hljs-comment">//=> CssSyntaxError</span> +}</code></pre> + + + + + + + + + + +</section> + + + <section id='csssyntaxerrorreason'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/css-syntax-error.js#L67-L67'> + <span>lib/css-syntax-error.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#csssyntaxerrorreason'> + <code> + reason + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Error message.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>error.message <span class="hljs-comment">//=> 'Unclosed block'</span></code></pre> + + + + + + + + + + +</section> + + + <section id='csssyntaxerrorfile'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/css-syntax-error.js#L79-L79'> + <span>lib/css-syntax-error.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#csssyntaxerrorfile'> + <code> + file + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Absolute path to the broken file.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>error.file <span class="hljs-comment">//=> 'a.sass'</span> +error.input.file <span class="hljs-comment">//=> 'a.css'</span></code></pre> + + + + + + + + + + +</section> + + + <section id='csssyntaxerrorsource'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/css-syntax-error.js#L91-L91'> + <span>lib/css-syntax-error.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#csssyntaxerrorsource'> + <code> + source + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Source code of the broken file.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>error.source <span class="hljs-comment">//=> 'a { b {} }'</span> +error.input.column <span class="hljs-comment">//=> 'a b { }'</span></code></pre> + + + + + + + + + + +</section> + + + <section id='csssyntaxerrorplugin'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/css-syntax-error.js#L102-L102'> + <span>lib/css-syntax-error.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#csssyntaxerrorplugin'> + <code> + plugin + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Plugin name, if error came from plugin.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>error.plugin <span class="hljs-comment">//=> 'postcss-vars'</span></code></pre> + + + + + + + + + + +</section> + + + <section id='csssyntaxerrorline'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/css-syntax-error.js#L114-L114'> + <span>lib/css-syntax-error.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#csssyntaxerrorline'> + <code> + line + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Source line of the error.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>error.line <span class="hljs-comment">//=> 2</span> +error.input.line <span class="hljs-comment">//=> 4</span></code></pre> + + + + + + + + + + +</section> + + + <section id='csssyntaxerrorcolumn'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/css-syntax-error.js#L124-L124'> + <span>lib/css-syntax-error.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#csssyntaxerrorcolumn'> + <code> + column + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Source column of the error.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>error.column <span class="hljs-comment">//=> 1</span> +error.input.column <span class="hljs-comment">//=> 4</span></code></pre> + + + + + + + + + + +</section> + + + <section id='csssyntaxerrormessage'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/css-syntax-error.js#L144-L144'> + <span>lib/css-syntax-error.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#csssyntaxerrormessage'> + <code> + message + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Full error text in the GNU error format +with plugin, file, line and column.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>error.message <span class="hljs-comment">//=> 'a.css:1:1: Unclosed block'</span></code></pre> + + + + + + + + + + +</section> + + + <section id='csssyntaxerrorshowsourcecode'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/css-syntax-error.js#L173-L211'> + <span>lib/css-syntax-error.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#csssyntaxerrorshowsourcecode'> + <code> + showSourceCode + <span class='gray'>(color?)</span> + </code> + </a> + </h3> + + <p>Returns a few lines of CSS source that caused the error.</p> +<p>If the CSS has an input source map without <code>sourceContent</code>, +this method will return an empty string.</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>color</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>? + + </td> + <td class='col-6'>Whether arrow will be colored red by terminal +color codes. By default, PostCSS will detect +color support by +<code>process.stdout.isTTY</code> + +and +<code>process.env.NODE_DISABLE_COLORS</code> +. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code> + : + <span class='force-inline'>Few lines of CSS source that caused the error. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>error.showSourceCode() <span class="hljs-comment">//=> " 4 | }</span> + <span class="hljs-comment">// 5 | a {</span> + <span class="hljs-comment">// > 6 | bad</span> + <span class="hljs-comment">// | ^</span> + <span class="hljs-comment">// 7 | }</span> + <span class="hljs-comment">// 8 | b {"</span></code></pre> + + + + + + + + + + +</section> + + + <section id='csssyntaxerrortostring'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/css-syntax-error.js#L223-L229'> + <span>lib/css-syntax-error.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#csssyntaxerrortostring'> + <code> + toString + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Returns error position, message and source code of the broken part.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code> + : + <span class='force-inline'>Error position, message and source code. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>error.toString() <span class="hljs-comment">//=> "CssSyntaxError: app.css:1:1: Unclosed block</span> + <span class="hljs-comment">// > 1 | a {</span> + <span class="hljs-comment">// | ^"</span></code></pre> + + + + + + + + + + +</section> + + +</div> + + + + + + +</section> + + + + + <section id='declaration'class='mt2 mb2 px3 py1 keyline-top'> + + <div class='right py2'> + + <span class='font-smaller'> + Extends + + <a href="#node">Node</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/declaration.js#L16-L80'> + <span>lib/declaration.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#declaration'> + <code> + Declaration + <span class='gray'>(defaults)</span> + </code> + </a> + </h3> + + <p>Represents a CSS declaration.</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">'a { color: black }'</span>) +<span class="hljs-keyword">const</span> decl = root.first.first +decl.type <span class="hljs-comment">//=> 'decl'</span> +decl.toString() <span class="hljs-comment">//=> ' color: black'</span></code></pre> + + + + + + + <h4 class='caps quiet mb2 mt3'>Instance Members</h4> + <div class="section-indent"> + + <section id='declarationafter'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/node.js#L312-L315'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#declarationafter'> + <code> + after + <span class='gray'>(add)</span> + </code> + </a> + </h3> + + <p>Insert new node after current node to current node’s parent.</p> +<p>Just alias for <code>node.parent.insertAfter(node, add)</code>.</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>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> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>decl.after(<span class="hljs-string">'color: black'</span>)</code></pre> + + + + + + + + + + +</section> + + + <section id='declarationbefore'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/node.js#L295-L298'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#declarationbefore'> + <code> + before + <span class='gray'>(add)</span> + </code> + </a> + </h3> + + <p>Insert new node before current node to current node’s parent.</p> +<p>Just alias for <code>node.parent.insertBefore(node, add)</code>.</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>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> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>decl.before(<span class="hljs-string">'content: ""'</span>)</code></pre> + + + + + + + + + + +</section> + + + <section id='declarationcleanraws'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/node.js#L392-L396'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#declarationcleanraws'> + <code> + cleanRaws + <span class='gray'>(keepBetween?)</span> + </code> + </a> + </h3> + + <p>Clear the code style properties for the node and 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>keepBetween</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>? + + </td> + <td class='col-6'>Keep the raws.between symbols. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code> + : + <span class='force-inline'> +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>node.raws.before <span class="hljs-comment">//=> ' '</span> +node.cleanRaws() +node.raws.before <span class="hljs-comment">//=> undefined</span></code></pre> + + + + + + + + + + +</section> + + + <section id='declarationclone'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/node.js#L182-L188'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#declarationclone'> + <code> + clone + <span class='gray'>(overrides = {})</span> + </code> + </a> + </h3> + + <p>Returns an exact clone of the node.</p> +<p>The resulting cloned node and its (cloned) children will retain +code style properties.</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>overrides</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>New properties to override in the clone. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>Clone of the node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>decl.raws.before <span class="hljs-comment">//=> "\n "</span> +<span class="hljs-keyword">const</span> cloned = decl.clone({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'-moz-'</span> + decl.prop }) +cloned.raws.before <span class="hljs-comment">//=> "\n "</span> +cloned.toString() <span class="hljs-comment">//=> -moz-transform: scale(0)</span></code></pre> + + + + + + + + + + +</section> + + + <section id='declarationcloneafter'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/node.js#L215-L219'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#declarationcloneafter'> + <code> + cloneAfter + <span class='gray'>(overrides = {})</span> + </code> + </a> + </h3> + + <p>Shortcut to clone the node and insert the resulting cloned node +after the current node.</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>overrides</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>New properties to override in the clone. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>New node. +</span> + + + + + + + + + + + + + + + +</section> + + + <section id='declarationclonebefore'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/node.js#L201-L205'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#declarationclonebefore'> + <code> + cloneBefore + <span class='gray'>(overrides = {})</span> + </code> + </a> + </h3> + + <p>Shortcut to clone the node and insert the resulting cloned node +before the current node.</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>overrides</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>Mew properties to override in the clone. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>New node +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>decl.cloneBefore({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'-moz-'</span> + decl.prop })</code></pre> + + + + + + + + + + +</section> + + + <section id='declarationerror'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/node.js#L88-L94'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#declarationerror'> + <code> + error + <span class='gray'>(message, opts = {})</span> + </code> + </a> + </h3> + + <p>Returns a <code>CssSyntaxError</code> instance containing the original position +of the node in the source, showing line and column numbers and also +a small excerpt to facilitate debugging.</p> +<p>If present, an input source map will be used to get the original position +of the source, even from a previous compilation step +(e.g., from Sass compilation).</p> +<p>This method produces very useful error messages.</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>message</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Error description. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>Options. +</td> + </tr> + + + <tr> + <td class='col-2 strong'>opts.plugin</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>Plugin name that created this error. +PostCSS will set it automatically. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.word</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>A word inside a node’s string that should +be highlighted as the source of the error. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.index</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-8'>An index inside a node’s string that should +be highlighted as the source of the error. +</td> +</tr> + + + + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#csssyntaxerror">CssSyntaxError</a></code> + : + <span class='force-inline'>Error object to throw it. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (!variables[name]) { + <span class="hljs-keyword">throw</span> decl.error(<span class="hljs-string">'Unknown variable '</span> + name, { <span class="hljs-attr">word</span>: name }) + <span class="hljs-comment">// CssSyntaxError: postcss-vars:a.sass:4:3: Unknown variable $black</span> + <span class="hljs-comment">// color: $black</span> + <span class="hljs-comment">// a</span> + <span class="hljs-comment">// ^</span> + <span class="hljs-comment">// background: white</span> +}</code></pre> + + + + + + + + + + +</section> + + + <section id='declarationnext'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/node.js#L259-L263'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#declarationnext'> + <code> + next + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Returns the next child of the node’s parent. +Returns <code>undefined</code> if the current node is the last child.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code>(<a href="#node">Node</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>)</code> + : + <span class='force-inline'>Next node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (comment.text === <span class="hljs-string">'delete next'</span>) { + <span class="hljs-keyword">const</span> next = comment.next() + <span class="hljs-keyword">if</span> (next) { + next.remove() + } +}</code></pre> + + + + + + + + + + +</section> + + + <section id='declarationprev'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/node.js#L277-L281'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#declarationprev'> + <code> + prev + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Returns the previous child of the node’s parent. +Returns <code>undefined</code> if the current node is the first child.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code>(<a href="#node">Node</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>)</code> + : + <span class='force-inline'>Previous node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> annotation = decl.prev() +<span class="hljs-keyword">if</span> (annotation.type === <span class="hljs-string">'comment'</span>) { + readAnnotation(annotation.text) +}</code></pre> + + + + + + + + + + +</section> + + + <section id='declarationraw'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/node.js#L361-L364'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#declarationraw'> + <code> + raw + <span class='gray'>(prop, defaultType?)</span> + </code> + </a> + </h3> + + <p>Returns a <a href="Node#raws">Node#raws</a> value. If the node is missing +the code style property (because the node was manually built or cloned), +PostCSS will try to autodetect the code style property by looking +at other nodes in the tree.</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>prop</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Name of code style property. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>defaultType</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>? + + </td> + <td class='col-6'>Name of default value, it can be missed +if the value is the same as prop. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code> + : + <span class='force-inline'>Code style value. +</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 { background: white }'</span>) +root.nodes[<span class="hljs-number">0</span>].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> }) +root.nodes[<span class="hljs-number">0</span>].nodes[<span class="hljs-number">1</span>].raws.before <span class="hljs-comment">//=> undefined</span> +root.nodes[<span class="hljs-number">0</span>].nodes[<span class="hljs-number">1</span>].raw(<span class="hljs-string">'before'</span>) <span class="hljs-comment">//=> ' '</span></code></pre> + + + + + + + + + + +</section> + + + <section id='declarationremove'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/node.js#L138-L144'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#declarationremove'> + <code> + remove + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Removes the node from its parent and cleans the parent properties +from the node and its children.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>Node to make calls chain. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (decl.prop.match(<span class="hljs-regexp">/^-webkit-/</span>)) { + decl.remove() +}</code></pre> + + + + + + + + + + +</section> + + + <section id='declarationreplacewith'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/node.js#L233-L243'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#declarationreplacewith'> + <code> + replaceWith + <span class='gray'>(nodes)</span> + </code> + </a> + </h3> + + <p>Inserts node(s) before the current node and removes the current node.</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>nodes</code></td> + <td class='col-3 quiet'> + ...<a href="#node">Node</a> + + </td> + <td class='col-6'>Mode(s) to replace current one. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>Current node to methods chain. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (atrule.name === <span class="hljs-string">'mixin'</span>) { + atrule.replaceWith(mixinRules[atrule.params]) +}</code></pre> + + + + + + + + + + +</section> + + + <section id='declarationroot'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/node.js#L374-L378'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#declarationroot'> + <code> + root + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Finds the Root instance of the node’s tree.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#root">Root</a></code> + : + <span class='force-inline'>Root parent. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>root.nodes[<span class="hljs-number">0</span>].nodes[<span class="hljs-number">0</span>].root() === root</code></pre> + + + + + + + + + + +</section> + + + <section id='declarationtostring'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/node.js#L157-L164'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#declarationtostring'> + <code> + toString + <span class='gray'>(stringifier = stringify)</span> + </code> + </a> + </h3> + + <p>Returns a CSS string representing the node.</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>stringifier</code></td> + <td class='col-3 quiet'> + (<a href="#stringifier">stringifier</a> | <a href="#syntax">syntax</a>)? + + = <code>stringify</code> + </td> + <td class='col-6'>A syntax to use +in string generation. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code> + : + <span class='force-inline'>CSS string of this node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.rule({ <span class="hljs-attr">selector</span>: <span class="hljs-string">'a'</span> }).toString() <span class="hljs-comment">//=> "a {}"</span></code></pre> + + + + + + + + + + +</section> + + + <section id='declarationwarn'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/node.js#L121-L125'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#declarationwarn'> + <code> + warn + <span class='gray'>(result, text, opts?)</span> + </code> + </a> + </h3> + + <p>This method is provided as a convenience wrapper for <a href="#resultwarn">Result#warn</a>.</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>result</code></td> + <td class='col-3 quiet'> + <a href="#result">Result</a> + + </td> + <td class='col-6'>The +<a href="#result">Result</a> + instance +that will receive the warning. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>text</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Warning message. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + </td> + <td class='col-6'>Options +</td> + </tr> + + + <tr> + <td class='col-2 strong'>opts.plugin</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>Plugin name that created this warning. +PostCSS will set it automatically. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.word</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>A word inside a node’s string that should +be highlighted as the source of the warning. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.index</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-8'>An index inside a node’s string that should +be highlighted as the source of the warning. +</td> +</tr> + + + + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#warning">Warning</a></code> + : + <span class='force-inline'>Created warning object. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> plugin = postcss.plugin(<span class="hljs-string">'postcss-deprecated'</span>, () => { + <span class="hljs-keyword">return</span> <span class="hljs-function">(<span class="hljs-params">root, result</span>) =></span> { + root.walkDecls(<span class="hljs-string">'bad'</span>, decl => { + decl.warn(result, <span class="hljs-string">'Deprecated property bad'</span>) + }) + } +})</code></pre> + + + + + + + + + + +</section> + + +</div> + + + + + + +</section> + + + + + <section id='input'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/input.js#L15-L169'> + <span>lib/input.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#input'> + <code> + Input + <span class='gray'>(css, opts = {})</span> + </code> + </a> + </h3> + + <p>Represents the source CSS.</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>css</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Input CSS source. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'><a href="#processorprocess">Processor#process</a> + options. +</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(css, { <span class="hljs-attr">from</span>: file }) +<span class="hljs-keyword">const</span> input = root.source.input</code></pre> + + + + + + + <h4 class='caps quiet mb2 mt3'>Instance Members</h4> + <div class="section-indent"> + + <section id='inputcss'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/input.js#L34-L34'> + <span>lib/input.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#inputcss'> + <code> + css + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Input CSS source</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> input = postcss.parse(<span class="hljs-string">'a{}'</span>, { <span class="hljs-attr">from</span>: file }).input +input.css <span class="hljs-comment">//=> "a{}"</span></code></pre> + + + + + + + + + + +</section> + + + <section id='inputfile'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/input.js#L55-L55'> + <span>lib/input.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#inputfile'> + <code> + file + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>The absolute path to the CSS source file defined +with the <code>from</code> option.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + <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(css, { <span class="hljs-attr">from</span>: <span class="hljs-string">'a.css'</span> }) +root.source.input.file <span class="hljs-comment">//=> '/home/ai/a.css'</span></code></pre> + + + + + + + + + + +</section> + + + <section id='inputmap'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/input.js#L72-L72'> + <span>lib/input.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#inputmap'> + <code> + map + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>The input source map passed from a compilation step before PostCSS +(for example, from Sass compiler).</p> + + + <p> + Type: + <a href="#previousmap">PreviousMap</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>root.source.input.map.consumer().sources <span class="hljs-comment">//=> ['a.sass']</span></code></pre> + + + + + + + + + + +</section> + + + <section id='inputid'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/input.js#L90-L90'> + <span>lib/input.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#inputid'> + <code> + id + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>The unique ID of the CSS source. It will be created if <code>from</code> option +is not provided (because PostCSS does not know the file path).</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + <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(css) +root.source.input.file <span class="hljs-comment">//=> undefined</span> +root.source.input.id <span class="hljs-comment">//=> "<input css 1>"</span></code></pre> + + + + + + + + + + +</section> + + + <section id='inputorigin'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/input.js#L127-L144'> + <span>lib/input.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#inputorigin'> + <code> + origin + <span class='gray'>(line, column)</span> + </code> + </a> + </h3> + + <p>Reads the input source map and returns a symbol position +in the input source (e.g., in a Sass file that was compiled +to CSS before being passed to PostCSS).</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>line</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-6'>Line in input CSS. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>column</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-6'>Column in input CSS. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#fileposition">filePosition</a></code> + : + <span class='force-inline'>Position in input source. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>root.source.input.origin(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>) <span class="hljs-comment">//=> { file: 'a.css', line: 3, column: 1 }</span></code></pre> + + + + + + + + + + +</section> + + + <section id='inputfrom'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/input.js#L166-L168'> + <span>lib/input.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#inputfrom'> + <code> + from + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>The CSS source identifier. Contains <a href="#inputfile">Input#file</a> if the user +set the <code>from</code> option, or <a href="#inputid">Input#id</a> if they did not.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + <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(css, { <span class="hljs-attr">from</span>: <span class="hljs-string">'a.css'</span> }) +root.source.input.from <span class="hljs-comment">//=> "/home/ai/a.css"</span> + +<span class="hljs-keyword">const</span> root = postcss.parse(css) +root.source.input.from <span class="hljs-comment">//=> "<input css 1>"</span></code></pre> + + + + + + + + + + +</section> + + +</div> + + + + + + +</section> + + + + + <section id='lazyresult'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/lazy-result.js#L26-L417'> + <span>lib/lazy-result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#lazyresult'> + <code> + LazyResult + <span class='gray'>(processor, css, opts)</span> + </code> + </a> + </h3> + + <p>A Promise proxy for the result of PostCSS transformations.</p> +<p>A <code>LazyResult</code> instance is returned by <a href="#processorprocess">Processor#process</a>.</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>processor</code></td> + <td class='col-3 quiet'> + any + + </td> + <td class='col-6'></td> + </tr> + + + <tr> + <td class='col-3 strong'><code>css</code></td> + <td class='col-3 quiet'> + any + + </td> + <td class='col-6'></td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</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> lazy = postcss([autoprefixer]).process(css)</code></pre> + + + + + + + <h4 class='caps quiet mb2 mt3'>Instance Members</h4> + <div class="section-indent"> + + <section id='lazyresultprocessor'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/lazy-result.js#L63-L65'> + <span>lib/lazy-result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#lazyresultprocessor'> + <code> + processor + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Returns a <a href="#processor">Processor</a> instance, which will be used +for CSS transformations.</p> + + + <p> + Type: + <a href="#processor">Processor</a> + </p> + + + + + + + + + + + + + + + + + + + + + + + + + + +</section> + + + <section id='lazyresultopts'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/lazy-result.js#L72-L74'> + <span>lib/lazy-result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#lazyresultopts'> + <code> + opts + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Options from the <a href="#processorprocess">Processor#process</a> call.</p> + + + <p> + Type: + <a href="#processoptions">processOptions</a> + </p> + + + + + + + + + + + + + + + + + + + + + + + + + + +</section> + + + <section id='lazyresultcss'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/lazy-result.js#L88-L90'> + <span>lib/lazy-result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#lazyresultcss'> + <code> + css + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Processes input CSS through synchronous plugins, converts <code>Root</code> +to a CSS string and returns <a href="#resultcss">Result#css</a>.</p> +<p>This property will only work with synchronous plugins. +If the processor contains any asynchronous plugins +it will throw an error. This is why this method is only +for debug purpose, you should always use <a href="#lazyresultthen">LazyResult#then</a>.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + + + + + + + + +</section> + + + <section id='lazyresultcontent'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/lazy-result.js#L104-L106'> + <span>lib/lazy-result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#lazyresultcontent'> + <code> + content + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>An alias for the <code>css</code> property. Use it with syntaxes +that generate non-CSS output.</p> +<p>This property will only work with synchronous plugins. +If the processor contains any asynchronous plugins +it will throw an error. This is why this method is only +for debug purpose, you should always use <a href="#lazyresultthen">LazyResult#then</a>.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + + + + + + + + +</section> + + + <section id='lazyresultmap'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/lazy-result.js#L120-L122'> + <span>lib/lazy-result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#lazyresultmap'> + <code> + map + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Processes input CSS through synchronous plugins +and returns <a href="#resultmap">Result#map</a>.</p> +<p>This property will only work with synchronous plugins. +If the processor contains any asynchronous plugins +it will throw an error. This is why this method is only +for debug purpose, you should always use <a href="#lazyresultthen">LazyResult#then</a>.</p> + + + <p> + Type: + SourceMapGenerator + </p> + + + + + + + + + + + + + + + + + + + + + + + + + + +</section> + + + <section id='lazyresultroot'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/lazy-result.js#L137-L139'> + <span>lib/lazy-result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#lazyresultroot'> + <code> + root + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Processes input CSS through synchronous plugins +and returns <a href="#resultroot">Result#root</a>.</p> +<p>This property will only work with synchronous plugins. If the processor +contains any asynchronous plugins it will throw an error.</p> +<p>This is why this method is only for debug purpose, +you should always use <a href="#lazyresultthen">LazyResult#then</a>.</p> + + + <p> + Type: + <a href="#root">Root</a> + </p> + + + + + + + + + + + + + + + + + + + + + + + + + + +</section> + + + <section id='lazyresultmessages'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/lazy-result.js#L154-L156'> + <span>lib/lazy-result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#lazyresultmessages'> + <code> + messages + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Processes input CSS through synchronous plugins +and returns <a href="#resultmessages">Result#messages</a>.</p> +<p>This property will only work with synchronous plugins. If the processor +contains any asynchronous plugins it will throw an error.</p> +<p>This is why this method is only for debug purpose, +you should always use <a href="#lazyresultthen">LazyResult#then</a>.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><<a href="#message">Message</a>> + </p> + + + + + + + + + + + + + + + + + + + + + + + + + + +</section> + + + <section id='lazyresultwarnings'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/lazy-result.js#L164-L166'> + <span>lib/lazy-result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#lazyresultwarnings'> + <code> + warnings + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Processes input CSS through synchronous plugins +and calls <a href="Result#warnings()">Result#warnings()</a>.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><<a href="#warning">Warning</a>></code> + : + <span class='force-inline'>Warnings from plugins. +</span> + + + + + + + + + + + + + + + +</section> + + + <section id='lazyresulttostring'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/lazy-result.js#L176-L178'> + <span>lib/lazy-result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#lazyresulttostring'> + <code> + toString + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Alias for the <a href="#lazyresultcss">LazyResult#css</a> property.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code> + : + <span class='force-inline'>Output CSS. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>lazy + <span class="hljs-string">''</span> === lazy.css</code></pre> + + + + + + + + + + +</section> + + + <section id='lazyresultthen'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/lazy-result.js#L198-L209'> + <span>lib/lazy-result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#lazyresultthen'> + <code> + then + <span class='gray'>(onFulfilled, onRejected)</span> + </code> + </a> + </h3> + + <p>Processes input CSS through synchronous and asynchronous plugins +and calls <code>onFulfilled</code> with a Result instance. If a plugin throws +an error, the <code>onRejected</code> callback will be executed.</p> +<p>It implements standard Promise API.</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>onFulfilled</code></td> + <td class='col-3 quiet'> + <a href="#onfulfilled">onFulfilled</a> + + </td> + <td class='col-6'>Callback will be executed +when all plugins will finish work. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>onRejected</code></td> + <td class='col-3 quiet'> + <a href="#onrejected">onRejected</a> + + </td> + <td class='col-6'>Callback will be executed on any error. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> + : + <span class='force-inline'>Promise API to make queue. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss([autoprefixer]).process(css, { <span class="hljs-attr">from</span>: cssPath }).then(<span class="hljs-function"><span class="hljs-params">result</span> =></span> { + <span class="hljs-built_in">console</span>.log(result.css) +})</code></pre> + + + + + + + + + + +</section> + + + <section id='lazyresultcatch'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/lazy-result.js#L228-L230'> + <span>lib/lazy-result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#lazyresultcatch'> + <code> + catch + <span class='gray'>(onRejected)</span> + </code> + </a> + </h3> + + <p>Processes input CSS through synchronous and asynchronous plugins +and calls onRejected for each error thrown in any plugin.</p> +<p>It implements standard Promise API.</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>onRejected</code></td> + <td class='col-3 quiet'> + <a href="#onrejected">onRejected</a> + + </td> + <td class='col-6'>Callback will be executed on any error. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> + : + <span class='force-inline'>Promise API to make queue. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss([autoprefixer]).process(css).then(<span class="hljs-function"><span class="hljs-params">result</span> =></span> { + <span class="hljs-built_in">console</span>.log(result.css) +}).catch(<span class="hljs-function"><span class="hljs-params">error</span> =></span> { + <span class="hljs-built_in">console</span>.error(error) +})</code></pre> + + + + + + + + + + +</section> + + + <section id='lazyresultfinally'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/lazy-result.js#L248-L250'> + <span>lib/lazy-result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#lazyresultfinally'> + <code> + finally + <span class='gray'>(onFinally)</span> + </code> + </a> + </h3> + + <p>Processes input CSS through synchronous and asynchronous plugins +and calls onFinally on any error or when all plugins will finish work.</p> +<p>It implements standard Promise API.</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>onFinally</code></td> + <td class='col-3 quiet'> + onFinally + + </td> + <td class='col-6'>Callback will be executed on any error or +when all plugins will finish work. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> + : + <span class='force-inline'>Promise API to make queue. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss([autoprefixer]).process(css).finally(<span class="hljs-function"><span class="hljs-params">()</span> =></span> { + <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'processing ended'</span>) +})</code></pre> + + + + + + + + + + +</section> + + +</div> + + + + + + +</section> + + + + + <section id='node'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/node.js#L34-L514'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#node'> + <code> + Node + <span class='gray'>(defaults = {})</span> + </code> + </a> + </h3> + + <p>All node classes inherit the following common methods.</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'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>Value for node properties. +</td> + </tr> + + + </table> + + + + + + + + + + + + + + <h4 class='caps quiet mb2 mt3'>Instance Members</h4> + <div class="section-indent"> + + <section id='nodeerror'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/node.js#L88-L94'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#nodeerror'> + <code> + error + <span class='gray'>(message, opts = {})</span> + </code> + </a> + </h3> + + <p>Returns a <code>CssSyntaxError</code> instance containing the original position +of the node in the source, showing line and column numbers and also +a small excerpt to facilitate debugging.</p> +<p>If present, an input source map will be used to get the original position +of the source, even from a previous compilation step +(e.g., from Sass compilation).</p> +<p>This method produces very useful error messages.</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>message</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Error description. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>Options. +</td> + </tr> + + + <tr> + <td class='col-2 strong'>opts.plugin</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>Plugin name that created this error. +PostCSS will set it automatically. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.word</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>A word inside a node’s string that should +be highlighted as the source of the error. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.index</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-8'>An index inside a node’s string that should +be highlighted as the source of the error. +</td> +</tr> + + + + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#csssyntaxerror">CssSyntaxError</a></code> + : + <span class='force-inline'>Error object to throw it. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (!variables[name]) { + <span class="hljs-keyword">throw</span> decl.error(<span class="hljs-string">'Unknown variable '</span> + name, { <span class="hljs-attr">word</span>: name }) + <span class="hljs-comment">// CssSyntaxError: postcss-vars:a.sass:4:3: Unknown variable $black</span> + <span class="hljs-comment">// color: $black</span> + <span class="hljs-comment">// a</span> + <span class="hljs-comment">// ^</span> + <span class="hljs-comment">// background: white</span> +}</code></pre> + + + + + + + + + + +</section> + + + <section id='nodewarn'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/node.js#L121-L125'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#nodewarn'> + <code> + warn + <span class='gray'>(result, text, opts?)</span> + </code> + </a> + </h3> + + <p>This method is provided as a convenience wrapper for <a href="#resultwarn">Result#warn</a>.</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>result</code></td> + <td class='col-3 quiet'> + <a href="#result">Result</a> + + </td> + <td class='col-6'>The +<a href="#result">Result</a> + instance +that will receive the warning. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>text</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Warning message. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + </td> + <td class='col-6'>Options +</td> + </tr> + + + <tr> + <td class='col-2 strong'>opts.plugin</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>Plugin name that created this warning. +PostCSS will set it automatically. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.word</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>A word inside a node’s string that should +be highlighted as the source of the warning. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.index</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-8'>An index inside a node’s string that should +be highlighted as the source of the warning. +</td> +</tr> + + + + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#warning">Warning</a></code> + : + <span class='force-inline'>Created warning object. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> plugin = postcss.plugin(<span class="hljs-string">'postcss-deprecated'</span>, () => { + <span class="hljs-keyword">return</span> <span class="hljs-function">(<span class="hljs-params">root, result</span>) =></span> { + root.walkDecls(<span class="hljs-string">'bad'</span>, decl => { + decl.warn(result, <span class="hljs-string">'Deprecated property bad'</span>) + }) + } +})</code></pre> + + + + + + + + + + +</section> + + + <section id='noderemove'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/node.js#L138-L144'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#noderemove'> + <code> + remove + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Removes the node from its parent and cleans the parent properties +from the node and its children.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>Node to make calls chain. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (decl.prop.match(<span class="hljs-regexp">/^-webkit-/</span>)) { + decl.remove() +}</code></pre> + + + + + + + + + + +</section> + + + <section id='nodetostring'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/node.js#L157-L164'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#nodetostring'> + <code> + toString + <span class='gray'>(stringifier = stringify)</span> + </code> + </a> + </h3> + + <p>Returns a CSS string representing the node.</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>stringifier</code></td> + <td class='col-3 quiet'> + (<a href="#stringifier">stringifier</a> | <a href="#syntax">syntax</a>)? + + = <code>stringify</code> + </td> + <td class='col-6'>A syntax to use +in string generation. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code> + : + <span class='force-inline'>CSS string of this node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.rule({ <span class="hljs-attr">selector</span>: <span class="hljs-string">'a'</span> }).toString() <span class="hljs-comment">//=> "a {}"</span></code></pre> + + + + + + + + + + +</section> + + + <section id='nodeclone'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/node.js#L182-L188'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#nodeclone'> + <code> + clone + <span class='gray'>(overrides = {})</span> + </code> + </a> + </h3> + + <p>Returns an exact clone of the node.</p> +<p>The resulting cloned node and its (cloned) children will retain +code style properties.</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>overrides</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>New properties to override in the clone. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>Clone of the node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>decl.raws.before <span class="hljs-comment">//=> "\n "</span> +<span class="hljs-keyword">const</span> cloned = decl.clone({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'-moz-'</span> + decl.prop }) +cloned.raws.before <span class="hljs-comment">//=> "\n "</span> +cloned.toString() <span class="hljs-comment">//=> -moz-transform: scale(0)</span></code></pre> + + + + + + + + + + +</section> + + + <section id='nodeclonebefore'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/node.js#L201-L205'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#nodeclonebefore'> + <code> + cloneBefore + <span class='gray'>(overrides = {})</span> + </code> + </a> + </h3> + + <p>Shortcut to clone the node and insert the resulting cloned node +before the current node.</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>overrides</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>Mew properties to override in the clone. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>New node +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>decl.cloneBefore({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'-moz-'</span> + decl.prop })</code></pre> + + + + + + + + + + +</section> + + + <section id='nodecloneafter'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/node.js#L215-L219'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#nodecloneafter'> + <code> + cloneAfter + <span class='gray'>(overrides = {})</span> + </code> + </a> + </h3> + + <p>Shortcut to clone the node and insert the resulting cloned node +after the current node.</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>overrides</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>New properties to override in the clone. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>New node. +</span> + + + + + + + + + + + + + + + +</section> + + + <section id='nodereplacewith'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/node.js#L233-L243'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#nodereplacewith'> + <code> + replaceWith + <span class='gray'>(nodes)</span> + </code> + </a> + </h3> + + <p>Inserts node(s) before the current node and removes the current node.</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>nodes</code></td> + <td class='col-3 quiet'> + ...<a href="#node">Node</a> + + </td> + <td class='col-6'>Mode(s) to replace current one. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#node">Node</a></code> + : + <span class='force-inline'>Current node to methods chain. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (atrule.name === <span class="hljs-string">'mixin'</span>) { + atrule.replaceWith(mixinRules[atrule.params]) +}</code></pre> + + + + + + + + + + +</section> + + + <section id='nodenext'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/node.js#L259-L263'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#nodenext'> + <code> + next + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Returns the next child of the node’s parent. +Returns <code>undefined</code> if the current node is the last child.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code>(<a href="#node">Node</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>)</code> + : + <span class='force-inline'>Next node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (comment.text === <span class="hljs-string">'delete next'</span>) { + <span class="hljs-keyword">const</span> next = comment.next() + <span class="hljs-keyword">if</span> (next) { + next.remove() + } +}</code></pre> + + + + + + + + + + +</section> + + + <section id='nodeprev'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/node.js#L277-L281'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#nodeprev'> + <code> + prev + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Returns the previous child of the node’s parent. +Returns <code>undefined</code> if the current node is the first child.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code>(<a href="#node">Node</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>)</code> + : + <span class='force-inline'>Previous node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> annotation = decl.prev() +<span class="hljs-keyword">if</span> (annotation.type === <span class="hljs-string">'comment'</span>) { + readAnnotation(annotation.text) +}</code></pre> + + + + + + + + + + +</section> + + + <section id='nodebefore'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/node.js#L295-L298'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#nodebefore'> + <code> + before + <span class='gray'>(add)</span> + </code> + </a> + </h3> + + <p>Insert new node before current node to current node’s parent.</p> +<p>Just alias for <code>node.parent.insertBefore(node, add)</code>.</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>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> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>decl.before(<span class="hljs-string">'content: ""'</span>)</code></pre> + + + + + + + + + + +</section> + + + <section id='nodeafter'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/node.js#L312-L315'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#nodeafter'> + <code> + after + <span class='gray'>(add)</span> + </code> + </a> + </h3> + + <p>Insert new node after current node to current node’s parent.</p> +<p>Just alias for <code>node.parent.insertAfter(node, add)</code>.</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>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> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>decl.after(<span class="hljs-string">'color: black'</span>)</code></pre> + + + + + + + + + + +</section> + + + <section id='noderaw'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/node.js#L361-L364'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#noderaw'> + <code> + raw + <span class='gray'>(prop, defaultType?)</span> + </code> + </a> + </h3> + + <p>Returns a <a href="Node#raws">Node#raws</a> value. If the node is missing +the code style property (because the node was manually built or cloned), +PostCSS will try to autodetect the code style property by looking +at other nodes in the tree.</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>prop</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Name of code style property. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>defaultType</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>? + + </td> + <td class='col-6'>Name of default value, it can be missed +if the value is the same as prop. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code> + : + <span class='force-inline'>Code style value. +</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 { background: white }'</span>) +root.nodes[<span class="hljs-number">0</span>].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> }) +root.nodes[<span class="hljs-number">0</span>].nodes[<span class="hljs-number">1</span>].raws.before <span class="hljs-comment">//=> undefined</span> +root.nodes[<span class="hljs-number">0</span>].nodes[<span class="hljs-number">1</span>].raw(<span class="hljs-string">'before'</span>) <span class="hljs-comment">//=> ' '</span></code></pre> + + + + + + + + + + +</section> + + + <section id='noderoot'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/node.js#L374-L378'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#noderoot'> + <code> + root + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Finds the Root instance of the node’s tree.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#root">Root</a></code> + : + <span class='force-inline'>Root parent. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>root.nodes[<span class="hljs-number">0</span>].nodes[<span class="hljs-number">0</span>].root() === root</code></pre> + + + + + + + + + + +</section> + + + <section id='nodecleanraws'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/node.js#L392-L396'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#nodecleanraws'> + <code> + cleanRaws + <span class='gray'>(keepBetween?)</span> + </code> + </a> + </h3> + + <p>Clear the code style properties for the node and 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>keepBetween</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>? + + </td> + <td class='col-6'>Keep the raws.between symbols. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code> + : + <span class='force-inline'> +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>node.raws.before <span class="hljs-comment">//=> ' '</span> +node.cleanRaws() +node.raws.before <span class="hljs-comment">//=> undefined</span></code></pre> + + + + + + + + + + +</section> + + +</div> + + + + + + +</section> + + + + + <section id='previousmap'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/previous-map.js#L24-L140'> + <span>lib/previous-map.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#previousmap'> + <code> + PreviousMap + <span class='gray'>(css, opts?)</span> + </code> + </a> + </h3> + + <p>Source map information from input CSS. +For example, source map after Sass compiler.</p> +<p>This class will automatically find source map in input CSS or in file system +near input file (according <code>from</code> option).</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>css</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Input CSS source. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="#processoptions">processOptions</a>? + + </td> + <td class='col-6'><a href="#processorprocess">Processor#process</a> + options. +</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(css, { <span class="hljs-attr">from</span>: <span class="hljs-string">'a.sass.css'</span> }) +root.input.map <span class="hljs-comment">//=> PreviousMap</span></code></pre> + + + + + + + <h4 class='caps quiet mb2 mt3'>Instance Members</h4> + <div class="section-indent"> + + <section id='previousmapinline'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/previous-map.js#L36-L36'> + <span>lib/previous-map.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#previousmapinline'> + <code> + inline + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Was source map inlined by data-uri to input CSS.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a> + </p> + + + + + + + + + + + + + + + + + + + + + + + + + + +</section> + + + <section id='previousmapconsumer'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/previous-map.js#L52-L57'> + <span>lib/previous-map.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#previousmapconsumer'> + <code> + consumer + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Create a instance of <code>SourceMapGenerator</code> class +from the <code>source-map</code> library to work with source map information.</p> +<p>It is lazy method, so it will create object only on first call +and then it will use cache.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code>SourceMapGenerator</code> + : + <span class='force-inline'>Object with source map information. +</span> + + + + + + + + + + + + + + + +</section> + + + <section id='previousmapwithcontent'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/previous-map.js#L64-L67'> + <span>lib/previous-map.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#previousmapwithcontent'> + <code> + withContent + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Does source map contains <code>sourcesContent</code> with input source text.</p> + + + + + + + + + + + + + + + + + <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 +<code>sourcesContent</code> + present. +</span> + + + + + + + + + + + + + + + +</section> + + +</div> + + + + + + +</section> + + + + + <section id='processor'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/processor.js#L12-L135'> + <span>lib/processor.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#processor'> + <code> + Processor + <span class='gray'>(plugins)</span> + </code> + </a> + </h3> + + <p>Contains plugins to process CSS. Create one <code>Processor</code> instance, +initialize its plugins, and then use that instance on numerous CSS files.</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>plugins</code></td> + <td class='col-3 quiet'> + (<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><(<a href="#plugin">Plugin</a> | <a href="#pluginfunction">pluginFunction</a>)> | <a href="#processor">Processor</a>) + + = <code>[]</code> + </td> + <td class='col-6'>PostCSS plugins. +See +<a href="#processoruse">Processor#use</a> + for plugin format. +</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> processor = postcss([autoprefixer, precss]) +processor.process(css1).then(<span class="hljs-function"><span class="hljs-params">result</span> =></span> <span class="hljs-built_in">console</span>.log(result.css)) +processor.process(css2).then(<span class="hljs-function"><span class="hljs-params">result</span> =></span> <span class="hljs-built_in">console</span>.log(result.css))</code></pre> + + + + + + + <h4 class='caps quiet mb2 mt3'>Instance Members</h4> + <div class="section-indent"> + + <section id='processorversion'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/processor.js#L28-L28'> + <span>lib/processor.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#processorversion'> + <code> + version + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Current PostCSS version.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (result.processor.version.split(<span class="hljs-string">'.'</span>)[<span class="hljs-number">0</span>] !== <span class="hljs-string">'6'</span>) { + <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">'This plugin works only with PostCSS 6'</span>) +}</code></pre> + + + + + + + + + + +</section> + + + <section id='processorplugins'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/processor.js#L38-L38'> + <span>lib/processor.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#processorplugins'> + <code> + plugins + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Plugins added to this processor.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><<a href="#pluginfunction">pluginFunction</a>> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> processor = postcss([autoprefixer, precss]) +processor.plugins.length <span class="hljs-comment">//=> 2</span></code></pre> + + + + + + + + + + +</section> + + + <section id='processoruse'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/processor.js#L70-L73'> + <span>lib/processor.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#processoruse'> + <code> + use + <span class='gray'>(plugin)</span> + </code> + </a> + </h3> + + <p>Adds a plugin to be used as a CSS processor.</p> +<p>PostCSS plugin can be in 4 formats:</p> +<ul> +<li>A plugin created by <a href="#postcssplugin">postcss.plugin</a> method.</li> +<li>A function. PostCSS will pass the function a @{link Root} +as the first argument and current <a href="#result">Result</a> instance +as the second.</li> +<li>An object with a <code>postcss</code> method. PostCSS will use that method +as described in #2.</li> +<li>Another <a href="#processor">Processor</a> instance. PostCSS will copy plugins +from that instance into this one.</li> +</ul> +<p>Plugins can also be added by passing them as arguments when creating +a <code>postcss</code> instance (see [<code>postcss(plugins)</code>]).</p> +<p>Asynchronous plugins should return a <code>Promise</code> instance.</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>plugin</code></td> + <td class='col-3 quiet'> + (<a href="#plugin">Plugin</a> | <a href="#pluginfunction">pluginFunction</a> | <a href="#processor">Processor</a>) + + </td> + <td class='col-6'>PostCSS plugin +or +<a href="#processor">Processor</a> + +with plugins. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code>Processes</code> + : + <span class='force-inline'>Current processor to make 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> processor = postcss() + .use(autoprefixer) + .use(precss)</code></pre> + + + + + + + + + + +</section> + + + <section id='processorprocess'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/processor.js#L97-L110'> + <span>lib/processor.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#processorprocess'> + <code> + process + <span class='gray'>(css, opts = {})</span> + </code> + </a> + </h3> + + <p>Parses source CSS and returns a <a href="#lazyresult">LazyResult</a> Promise proxy. +Because some plugins can be asynchronous it doesn’t make +any transformations. Transformations will be applied +in the <a href="#lazyresult">LazyResult</a> methods.</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>css</code></td> + <td class='col-3 quiet'> + (<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> | <a href="#tostring">toString</a> | <a href="#result">Result</a>) + + </td> + <td class='col-6'>String with input CSS or any object +with a +<code>toString()</code> + method, +like a Buffer. Optionally, send +a +<a href="#result">Result</a> + instance +and the processor will take +the +<a href="#root">Root</a> + from it. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="#processoptions">processOptions</a>? + + = <code>{}</code> + </td> + <td class='col-6'>Options. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#lazyresult">LazyResult</a></code> + : + <span class='force-inline'>Promise proxy. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>processor.process(css, { <span class="hljs-attr">from</span>: <span class="hljs-string">'a.css'</span>, <span class="hljs-attr">to</span>: <span class="hljs-string">'a.out.css'</span> }) + .then(<span class="hljs-function"><span class="hljs-params">result</span> =></span> { + <span class="hljs-built_in">console</span>.log(result.css) + })</code></pre> + + + + + + + + + + +</section> + + +</div> + + + + + + +</section> + + + + + <section id='result'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/result.js#L17-L170'> + <span>lib/result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#result'> + <code> + Result + <span class='gray'>(processor, root, opts)</span> + </code> + </a> + </h3> + + <p>Provides the result of the PostCSS transformations.</p> +<p>A Result instance is returned by <a href="#lazyresultthen">LazyResult#then</a> +or <a href="#roottoresult">Root#toResult</a> methods.</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>processor</code></td> + <td class='col-3 quiet'> + <a href="#processor">Processor</a> + + </td> + <td class='col-6'>Processor used for this transformation. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>root</code></td> + <td class='col-3 quiet'> + <a href="#root">Root</a> + + </td> + <td class='col-6'>Root node after all transformations. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="#processoptions">processOptions</a> + + </td> + <td class='col-6'>Options from the +<a href="#processorprocess">Processor#process</a> + +or +<a href="#roottoresult">Root#toResult</a> +. +</td> + </tr> + + + </table> + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss([autoprefixer]).process(css).then(<span class="hljs-function"><span class="hljs-params">result</span> =></span> { + <span class="hljs-built_in">console</span>.log(result.css) +})</code></pre> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> result2 = postcss.parse(css).toResult()</code></pre> + + + + + + + <h4 class='caps quiet mb2 mt3'>Instance Members</h4> + <div class="section-indent"> + + <section id='resultprocessor'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/result.js#L37-L37'> + <span>lib/result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#resultprocessor'> + <code> + processor + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>The Processor instance used for this transformation.</p> + + + <p> + Type: + <a href="#processor">Processor</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">for</span> (<span class="hljs-keyword">const</span> plugin <span class="hljs-keyword">of</span> result.processor.plugins) { + <span class="hljs-keyword">if</span> (plugin.postcssPlugin === <span class="hljs-string">'postcss-bad'</span>) { + <span class="hljs-keyword">throw</span> <span class="hljs-string">'postcss-good is incompatible with postcss-bad'</span> + } +})</code></pre> + + + + + + + + + + +</section> + + + <section id='resultmessages'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/result.js#L56-L56'> + <span>lib/result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#resultmessages'> + <code> + messages + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Contains messages from plugins (e.g., warnings or custom messages). +Each message should have type and plugin properties.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><<a href="#message">Message</a>> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.plugin(<span class="hljs-string">'postcss-min-browser'</span>, () => { + <span class="hljs-keyword">return</span> <span class="hljs-function">(<span class="hljs-params">root, result</span>) =></span> { + <span class="hljs-keyword">const</span> browsers = detectMinBrowsersByCanIUse(root) + result.messages.push({ + <span class="hljs-attr">type</span>: <span class="hljs-string">'min-browser'</span>, + <span class="hljs-attr">plugin</span>: <span class="hljs-string">'postcss-min-browser'</span>, + browsers + }) + } +})</code></pre> + + + + + + + + + + +</section> + + + <section id='resultroot'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/result.js#L65-L65'> + <span>lib/result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#resultroot'> + <code> + root + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Root node after all transformations.</p> + + + <p> + Type: + <a href="#root">Root</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>root.toResult().root === root</code></pre> + + + + + + + + + + +</section> + + + <section id='resultopts'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/result.js#L75-L75'> + <span>lib/result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#resultopts'> + <code> + opts + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Options from the <a href="#processorprocess">Processor#process</a> or <a href="#roottoresult">Root#toResult</a> call +that produced this Result instance.</p> + + + <p> + Type: + <a href="#processoptions">processOptions</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>root.toResult(opts).opts === opts</code></pre> + + + + + + + + + + +</section> + + + <section id='resultcss'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/result.js#L84-L84'> + <span>lib/result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#resultcss'> + <code> + css + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>A CSS string representing of <a href="#resultroot">Result#root</a>.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.parse(<span class="hljs-string">'a{}'</span>).toResult().css <span class="hljs-comment">//=> "a{}"</span></code></pre> + + + + + + + + + + +</section> + + + <section id='resultmap'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/result.js#L99-L99'> + <span>lib/result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#resultmap'> + <code> + map + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>An instance of <code>SourceMapGenerator</code> class from the <code>source-map</code> library, +representing changes to the <a href="#resultroot">Result#root</a> instance.</p> + + + <p> + Type: + SourceMapGenerator + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>result.map.toJSON() <span class="hljs-comment">//=> { version: 3, file: 'a.css', … }</span></code></pre> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (result.map) { + fs.writeFileSync(result.opts.to + <span class="hljs-string">'.map'</span>, result.map.toString()) +}</code></pre> + + + + + + + + + + +</section> + + + <section id='resulttostring'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/result.js#L110-L112'> + <span>lib/result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#resulttostring'> + <code> + toString + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Returns for @{link Result#css} content.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code> + : + <span class='force-inline'>String representing of +<a href="#resultroot">Result#root</a> +. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>result + <span class="hljs-string">''</span> === result.css</code></pre> + + + + + + + + + + +</section> + + + <section id='resultwarn'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/result.js#L130-L141'> + <span>lib/result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#resultwarn'> + <code> + warn + <span class='gray'>(text, opts = {})</span> + </code> + </a> + </h3> + + <p>Creates an instance of <a href="#warning">Warning</a> and adds it +to <a href="#resultmessages">Result#messages</a>.</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>text</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Warning message. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>Warning options. +</td> + </tr> + + + <tr> + <td class='col-2 strong'>opts.node</td> + <td class="col-2 quiet"> + <a href="#node">Node</a> + + </td> + <td class='col-8'>CSS node that caused the warning. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.word</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>Word in CSS source that caused the warning. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.index</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-8'>Index in CSS node string that caused +the warning. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.plugin</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>Name of the plugin that created +this warning. +<a href="#resultwarn">Result#warn</a> + fills +this property automatically. +</td> +</tr> + + + + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#warning">Warning</a></code> + : + <span class='force-inline'>Created warning. +</span> + + + + + + + + + + + + + + + +</section> + + + <section id='resultwarnings'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/result.js#L154-L156'> + <span>lib/result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#resultwarnings'> + <code> + warnings + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Returns warnings from plugins. Filters <a href="#warning">Warning</a> instances +from <a href="#resultmessages">Result#messages</a>.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><<a href="#warning">Warning</a>></code> + : + <span class='force-inline'>Warnings from plugins. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>result.warnings().forEach(<span class="hljs-function"><span class="hljs-params">warn</span> =></span> { + <span class="hljs-built_in">console</span>.warn(warn.toString()) +})</code></pre> + + + + + + + + + + +</section> + + + <section id='resultcontent'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/result.js#L167-L169'> + <span>lib/result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#resultcontent'> + <code> + content + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>An alias for the <a href="#resultcss">Result#css</a> property. +Use it with syntaxes that generate non-CSS output.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>result.css === result.content</code></pre> + + + + + + + + + + +</section> + + +</div> + + + + + + +</section> + + + + + <section id='root'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/root.js#L76-L181'> + <span>lib/root.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#root'> + <code> + Root + <span class='gray'>(defaults)</span> + </code> + </a> + </h3> + + <p>Represents a CSS file and contains all its parsed nodes.</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">'a{color:black} b{z-index:2}'</span>) +root.type <span class="hljs-comment">//=> 'root'</span> +root.nodes.length <span class="hljs-comment">//=> 2</span></code></pre> + + + + + + + <h4 class='caps quiet mb2 mt3'>Instance Members</h4> + <div class="section-indent"> + + <section id='rootappend'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='#rootappend'> + <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='rooteach'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='#rooteach'> + <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='rootevery'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='#rootevery'> + <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='rootfirst'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='#rootfirst'> + <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='rootindex'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='#rootindex'> + <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='rootinsertafter'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='#rootinsertafter'> + <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='rootinsertbefore'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='#rootinsertbefore'> + <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</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> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>rule.insertBefore(decl, decl.clone({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'-webkit-'</span> + decl.prop }))</code></pre> + + + + + + + + + + +</section> + + + <section id='rootlast'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#L644-L647'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rootlast'> + <code> + last + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>The container’s last 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.last === rule.nodes[rule.nodes.length - <span class="hljs-number">1</span>]</code></pre> + + + + + + + + + + +</section> + + + <section id='rootprepend'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#L401-L414'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rootprepend'> + <code> + prepend + <span class='gray'>(children)</span> + </code> + </a> + </h3> + + <p>Inserts new nodes to the start 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.prepend(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='rootremoveall'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#L523-L530'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rootremoveall'> + <code> + removeAll + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Removes all children from the container +and cleans their parent properties.</p> + + + + + + + + + + + + + + + + + <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>rule.removeAll() +rule.nodes.length <span class="hljs-comment">//=> 0</span></code></pre> + + + + + + + + + + +</section> + + + <section id='rootremovechild'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#L495-L511'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rootremovechild'> + <code> + removeChild + <span class='gray'>(child)</span> + </code> + </a> + </h3> + + <p>Removes node from the container and cleans the parent properties +from the node and 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>child</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> + + + </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>rule.nodes.length <span class="hljs-comment">//=> 5</span> +rule.removeChild(decl) +rule.nodes.length <span class="hljs-comment">//=> 4</span> +decl.parent <span class="hljs-comment">//=> undefined</span></code></pre> + + + + + + + + + + +</section> + + + <section id='rootreplacevalues'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#L558-L574'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rootreplacevalues'> + <code> + replaceValues + <span class='gray'>(pattern, opts, callback)</span> + </code> + </a> + </h3> + + <p>Passes all declaration values within the container that match pattern +through callback, replacing those values with the returned result +of callback.</p> +<p>This method is useful if you are using a custom unit or function +and need to iterate through all values.</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>pattern</code></td> + <td class='col-3 quiet'> + (<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/RegExp">RegExp</a>) + + </td> + <td class='col-6'>Replace pattern. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> + + </td> + <td class='col-6'>Options to speed up the search. +</td> + </tr> + + + <tr> + <td class='col-2 strong'>opts.props</td> + <td class="col-2 quiet"> + (<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="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>) + + </td> + <td class='col-8'>An array of property names. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.fast</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>String that’s used to narrow down +values and speed up the regexp search. +</td> +</tr> + + + + + + <tr> + <td class='col-3 strong'><code>callback</code></td> + <td class='col-3 quiet'> + (<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>) + + </td> + <td class='col-6'>String to replace pattern or callback +that returns a new value. The callback +will receive the same arguments +as those passed to a function parameter +of +<code>String#replace</code> +. +</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>root.replaceValues(<span class="hljs-regexp">/\d+rem/</span>, { <span class="hljs-attr">fast</span>: <span class="hljs-string">'rem'</span> }, string => { + <span class="hljs-keyword">return</span> <span class="hljs-number">15</span> * <span class="hljs-built_in">parseInt</span>(string) + <span class="hljs-string">'px'</span> +})</code></pre> + + + + + + + + + + +</section> + + + <section id='rootwalk'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#L123-L137'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rootwalk'> + <code> + walk + <span class='gray'>(callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each node.</p> +<p>Like container.each(), this method is safe to use +if you are mutating arrays during iteration.</p> +<p>If you only need to iterate through the container’s immediate children, +use <a href="#containereach">Container#each</a>.</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>root.walk(<span class="hljs-function"><span class="hljs-params">node</span> =></span> { + <span class="hljs-comment">// Traverses all descendant nodes.</span> +})</code></pre> + + + + + + + + + + +</section> + + + <section id='rootwalkatrules'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#L303-L324'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rootwalkatrules'> + <code> + walkAtRules + <span class='gray'>(name?, callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each at-rule node.</p> +<p>If you pass a filter, iteration will only happen over at-rules +that have matching names.</p> +<p>Like <a href="#containereach">Container#each</a>, this method is safe +to use if you are mutating arrays during iteration.</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>name</code></td> + <td class='col-3 quiet'> + (<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/RegExp">RegExp</a>)? + + </td> + <td class='col-6'>String or regular expression +to filter at-rules by name. +</td> + </tr> + + + <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>root.walkAtRules(<span class="hljs-function"><span class="hljs-params">rule</span> =></span> { + <span class="hljs-keyword">if</span> (isOld(rule.name)) rule.remove() +}) + +<span class="hljs-keyword">let</span> first = <span class="hljs-literal">false</span> +root.walkAtRules(<span class="hljs-string">'charset'</span>, rule => { + <span class="hljs-keyword">if</span> (!first) { + first = <span class="hljs-literal">true</span> + } <span class="hljs-keyword">else</span> { + rule.remove() + } +})</code></pre> + + + + + + + + + + +</section> + + + <section id='rootwalkcomments'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#L342-L348'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rootwalkcomments'> + <code> + walkComments + <span class='gray'>(callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each comment node.</p> +<p>Like <a href="#containereach">Container#each</a>, this method is safe +to use if you are mutating arrays during iteration.</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>root.walkComments(<span class="hljs-function"><span class="hljs-params">comment</span> =></span> { + comment.remove() +})</code></pre> + + + + + + + + + + +</section> + + + <section id='rootwalkrules'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#L249-L271'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rootwalkrules'> + <code> + walkRules + <span class='gray'>(selector?, callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each rule node.</p> +<p>If you pass a filter, iteration will only happen over rules +with matching selectors.</p> +<p>Like <a href="#containereach">Container#each</a>, this method is safe +to use if you are mutating arrays during iteration.</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>selector</code></td> + <td class='col-3 quiet'> + (<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/RegExp">RegExp</a>)? + + </td> + <td class='col-6'>String or regular expression +to filter rules by selector. +</td> + </tr> + + + <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> selectors = [] +root.walkRules(<span class="hljs-function"><span class="hljs-params">rule</span> =></span> { + selectors.push(rule.selector) +}) +<span class="hljs-built_in">console</span>.log(<span class="hljs-string">`Your CSS uses <span class="hljs-subst">${ selectors.length }</span> selectors`</span>)</code></pre> + + + + + + + + + + +</section> + + + <section id='rooton'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/root.js#L160-L164'> + <span>lib/root.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rooton'> + <code> + on + <span class='gray'>(type?, callback?)</span> + </code> + </a> + </h3> + + <p>The method registrations the plugins in postcss to their bypass with +algorithm visitor. The plugin must subscribes to the type of the node. +It can be "atrule", "rule", "decl", "comment". Example: "atrule" is +"@media", "@keyframes"; "rule" is selector (class, id, tag); "decl" is +property (color, border, etc.); "comment" is comment. The plugin will +call on the type of the node to which it is subscribed. The plugin can +be subscribed at the enter to node or at the exit from node. The plugin get +node and index.</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>type</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>? + + </td> + <td class='col-6'>The type of the node ("atrule", "rule", +"decl", "comment"). +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>callback</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a>? + + </td> + <td class='col-6'>Function receives node and index. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code> + : + <span class='force-inline'> +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>css.on(<span class="hljs-string">"decl"</span>, (node, index) => {}) +<span class="hljs-comment">// is shorthand for</span> +css.on(<span class="hljs-string">"decl.enter"</span>, (node, index) => {}) + +css.on(<span class="hljs-string">"decl.exit"</span>, (node, index) => {})</code></pre> + + + + + + + + + + +</section> + + + <section id='rootsome'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#L602-L604'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rootsome'> + <code> + some + <span class='gray'>(condition)</span> + </code> + </a> + </h3> + + <p>Returns <code>true</code> if callback returns <code>true</code> for (at least) one +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 some 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> hasPrefix = rule.some(<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='roottoresult'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/root.js#L129-L135'> + <span>lib/root.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#roottoresult'> + <code> + toResult + <span class='gray'>(opts = {})</span> + </code> + </a> + </h3> + + <p>Returns a <a href="#result">Result</a> instance representing the root’s CSS.</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>opts</code></td> + <td class='col-3 quiet'> + <a href="#processoptions">processOptions</a>? + + = <code>{}</code> + </td> + <td class='col-6'>Options with only +<code>to</code> + and +<code>map</code> + keys. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#result">Result</a></code> + : + <span class='force-inline'>Result with current root’s CSS. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> root1 = postcss.parse(css1, { <span class="hljs-attr">from</span>: <span class="hljs-string">'a.css'</span> }) +<span class="hljs-keyword">const</span> root2 = postcss.parse(css2, { <span class="hljs-attr">from</span>: <span class="hljs-string">'b.css'</span> }) +root1.append(root2) +<span class="hljs-keyword">const</span> result = root1.toResult({ <span class="hljs-attr">to</span>: <span class="hljs-string">'all.css'</span>, <span class="hljs-attr">map</span>: <span class="hljs-literal">true</span> })</code></pre> + + + + + + + + + + +</section> + + + <section id='rootwalkdecls'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#L203-L224'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rootwalkdecls'> + <code> + walkDecls + <span class='gray'>(prop?, callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each declaration node.</p> +<p>If you pass a filter, iteration will only happen over declarations +with matching properties.</p> +<p>Like <a href="#containereach">Container#each</a>, this method is safe +to use if you are mutating arrays during iteration.</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>prop</code></td> + <td class='col-3 quiet'> + (<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/RegExp">RegExp</a>)? + + </td> + <td class='col-6'>String or regular expression +to filter declarations by property name. +</td> + </tr> + + + <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>root.walkDecls(<span class="hljs-function"><span class="hljs-params">decl</span> =></span> { + checkPropertySupport(decl.prop) +}) + +root.walkDecls(<span class="hljs-string">'border-radius'</span>, decl => { + decl.remove() +}) + +root.walkDecls(<span class="hljs-regexp">/^background/</span>, decl => { + decl.value = takeFirstColorFromGradient(decl.value) +})</code></pre> + + + + + + + + + + +</section> + + +</div> + + + + + + +</section> + + + + + <section id='rule'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/rule.js#L17-L90'> + <span>lib/rule.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rule'> + <code> + Rule + <span class='gray'>(defaults)</span> + </code> + </a> + </h3> + + <p>Represents a CSS rule: a selector followed by a declaration block.</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">'a{}'</span>) +<span class="hljs-keyword">const</span> rule = root.first +rule.type <span class="hljs-comment">//=> 'rule'</span> +rule.toString() <span class="hljs-comment">//=> 'a{}'</span></code></pre> + + + + + + + <h4 class='caps quiet mb2 mt3'>Instance Members</h4> + <div class="section-indent"> + + <section id='ruleappend'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='#ruleappend'> + <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='ruleeach'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='#ruleeach'> + <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='ruleevery'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='#ruleevery'> + <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='rulefirst'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='#rulefirst'> + <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='ruleindex'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='#ruleindex'> + <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='ruleinsertafter'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='#ruleinsertafter'> + <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='ruleinsertbefore'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='#ruleinsertbefore'> + <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</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> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>rule.insertBefore(decl, decl.clone({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'-webkit-'</span> + decl.prop }))</code></pre> + + + + + + + + + + +</section> + + + <section id='rulelast'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#L644-L647'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rulelast'> + <code> + last + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>The container’s last 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.last === rule.nodes[rule.nodes.length - <span class="hljs-number">1</span>]</code></pre> + + + + + + + + + + +</section> + + + <section id='ruleprepend'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#L401-L414'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#ruleprepend'> + <code> + prepend + <span class='gray'>(children)</span> + </code> + </a> + </h3> + + <p>Inserts new nodes to the start 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.prepend(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='ruleremoveall'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#L523-L530'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#ruleremoveall'> + <code> + removeAll + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Removes all children from the container +and cleans their parent properties.</p> + + + + + + + + + + + + + + + + + <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>rule.removeAll() +rule.nodes.length <span class="hljs-comment">//=> 0</span></code></pre> + + + + + + + + + + +</section> + + + <section id='ruleremovechild'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#L495-L511'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#ruleremovechild'> + <code> + removeChild + <span class='gray'>(child)</span> + </code> + </a> + </h3> + + <p>Removes node from the container and cleans the parent properties +from the node and 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>child</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> + + + </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>rule.nodes.length <span class="hljs-comment">//=> 5</span> +rule.removeChild(decl) +rule.nodes.length <span class="hljs-comment">//=> 4</span> +decl.parent <span class="hljs-comment">//=> undefined</span></code></pre> + + + + + + + + + + +</section> + + + <section id='rulereplacevalues'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#L558-L574'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rulereplacevalues'> + <code> + replaceValues + <span class='gray'>(pattern, opts, callback)</span> + </code> + </a> + </h3> + + <p>Passes all declaration values within the container that match pattern +through callback, replacing those values with the returned result +of callback.</p> +<p>This method is useful if you are using a custom unit or function +and need to iterate through all values.</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>pattern</code></td> + <td class='col-3 quiet'> + (<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/RegExp">RegExp</a>) + + </td> + <td class='col-6'>Replace pattern. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> + + </td> + <td class='col-6'>Options to speed up the search. +</td> + </tr> + + + <tr> + <td class='col-2 strong'>opts.props</td> + <td class="col-2 quiet"> + (<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="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>) + + </td> + <td class='col-8'>An array of property names. +</td> +</tr> + + + + <tr> + <td class='col-2 strong'>opts.fast</td> + <td class="col-2 quiet"> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>String that’s used to narrow down +values and speed up the regexp search. +</td> +</tr> + + + + + + <tr> + <td class='col-3 strong'><code>callback</code></td> + <td class='col-3 quiet'> + (<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>) + + </td> + <td class='col-6'>String to replace pattern or callback +that returns a new value. The callback +will receive the same arguments +as those passed to a function parameter +of +<code>String#replace</code> +. +</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>root.replaceValues(<span class="hljs-regexp">/\d+rem/</span>, { <span class="hljs-attr">fast</span>: <span class="hljs-string">'rem'</span> }, string => { + <span class="hljs-keyword">return</span> <span class="hljs-number">15</span> * <span class="hljs-built_in">parseInt</span>(string) + <span class="hljs-string">'px'</span> +})</code></pre> + + + + + + + + + + +</section> + + + <section id='ruleselectors'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/rule.js#L41-L43'> + <span>lib/rule.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#ruleselectors'> + <code> + selectors + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>An array containing the rule’s individual selectors. +Groups of selectors are split at commas.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>> + </p> + + + + + + + + + + + + + + + + + + + <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, b { }'</span>) +<span class="hljs-keyword">const</span> rule = root.first + +rule.selector <span class="hljs-comment">//=> 'a, b'</span> +rule.selectors <span class="hljs-comment">//=> ['a', 'b']</span> + +rule.selectors = [<span class="hljs-string">'a'</span>, <span class="hljs-string">'strong'</span>] +rule.selector <span class="hljs-comment">//=> 'a, strong'</span></code></pre> + + + + + + + + + + +</section> + + + <section id='rulesome'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#L602-L604'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rulesome'> + <code> + some + <span class='gray'>(condition)</span> + </code> + </a> + </h3> + + <p>Returns <code>true</code> if callback returns <code>true</code> for (at least) one +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 some 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> hasPrefix = rule.some(<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='rulewalk'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#L123-L137'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rulewalk'> + <code> + walk + <span class='gray'>(callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each node.</p> +<p>Like container.each(), this method is safe to use +if you are mutating arrays during iteration.</p> +<p>If you only need to iterate through the container’s immediate children, +use <a href="#containereach">Container#each</a>.</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>root.walk(<span class="hljs-function"><span class="hljs-params">node</span> =></span> { + <span class="hljs-comment">// Traverses all descendant nodes.</span> +})</code></pre> + + + + + + + + + + +</section> + + + <section id='rulewalkatrules'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#L303-L324'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rulewalkatrules'> + <code> + walkAtRules + <span class='gray'>(name?, callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each at-rule node.</p> +<p>If you pass a filter, iteration will only happen over at-rules +that have matching names.</p> +<p>Like <a href="#containereach">Container#each</a>, this method is safe +to use if you are mutating arrays during iteration.</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>name</code></td> + <td class='col-3 quiet'> + (<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/RegExp">RegExp</a>)? + + </td> + <td class='col-6'>String or regular expression +to filter at-rules by name. +</td> + </tr> + + + <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>root.walkAtRules(<span class="hljs-function"><span class="hljs-params">rule</span> =></span> { + <span class="hljs-keyword">if</span> (isOld(rule.name)) rule.remove() +}) + +<span class="hljs-keyword">let</span> first = <span class="hljs-literal">false</span> +root.walkAtRules(<span class="hljs-string">'charset'</span>, rule => { + <span class="hljs-keyword">if</span> (!first) { + first = <span class="hljs-literal">true</span> + } <span class="hljs-keyword">else</span> { + rule.remove() + } +})</code></pre> + + + + + + + + + + +</section> + + + <section id='rulewalkcomments'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#L342-L348'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rulewalkcomments'> + <code> + walkComments + <span class='gray'>(callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each comment node.</p> +<p>Like <a href="#containereach">Container#each</a>, this method is safe +to use if you are mutating arrays during iteration.</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>root.walkComments(<span class="hljs-function"><span class="hljs-params">comment</span> =></span> { + comment.remove() +})</code></pre> + + + + + + + + + + +</section> + + + <section id='rulewalkdecls'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#L203-L224'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rulewalkdecls'> + <code> + walkDecls + <span class='gray'>(prop?, callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each declaration node.</p> +<p>If you pass a filter, iteration will only happen over declarations +with matching properties.</p> +<p>Like <a href="#containereach">Container#each</a>, this method is safe +to use if you are mutating arrays during iteration.</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>prop</code></td> + <td class='col-3 quiet'> + (<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/RegExp">RegExp</a>)? + + </td> + <td class='col-6'>String or regular expression +to filter declarations by property name. +</td> + </tr> + + + <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>root.walkDecls(<span class="hljs-function"><span class="hljs-params">decl</span> =></span> { + checkPropertySupport(decl.prop) +}) + +root.walkDecls(<span class="hljs-string">'border-radius'</span>, decl => { + decl.remove() +}) + +root.walkDecls(<span class="hljs-regexp">/^background/</span>, decl => { + decl.value = takeFirstColorFromGradient(decl.value) +})</code></pre> + + + + + + + + + + +</section> + + + <section id='rulewalkrules'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#L249-L271'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#rulewalkrules'> + <code> + walkRules + <span class='gray'>(selector?, callback)</span> + </code> + </a> + </h3> + + <p>Traverses the container’s descendant nodes, calling callback +for each rule node.</p> +<p>If you pass a filter, iteration will only happen over rules +with matching selectors.</p> +<p>Like <a href="#containereach">Container#each</a>, this method is safe +to use if you are mutating arrays during iteration.</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>selector</code></td> + <td class='col-3 quiet'> + (<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/RegExp">RegExp</a>)? + + </td> + <td class='col-6'>String or regular expression +to filter rules by selector. +</td> + </tr> + + + <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> selectors = [] +root.walkRules(<span class="hljs-function"><span class="hljs-params">rule</span> =></span> { + selectors.push(rule.selector) +}) +<span class="hljs-built_in">console</span>.log(<span class="hljs-string">`Your CSS uses <span class="hljs-subst">${ selectors.length }</span> selectors`</span>)</code></pre> + + + + + + + + + + +</section> + + +</div> + + + + + + +</section> + + + + + <section id='warning'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/warning.js#L9-L107'> + <span>lib/warning.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#warning'> + <code> + Warning + <span class='gray'>(text, opts = {})</span> + </code> + </a> + </h3> + + <p>Represents a plugin’s warning. It can be created using <a href="#nodewarn">Node#warn</a>.</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>text</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Warning message. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>? + + = <code>{}</code> + </td> + <td class='col-6'>Warning options. +</td> + </tr> + + + </table> + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">if</span> (decl.important) { + decl.warn(result, <span class="hljs-string">'Avoid !important'</span>, { <span class="hljs-attr">word</span>: <span class="hljs-string">'!important'</span> }) +}</code></pre> + + + + + + + <h4 class='caps quiet mb2 mt3'>Instance Members</h4> + <div class="section-indent"> + + <section id='warningtype'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/warning.js#L31-L31'> + <span>lib/warning.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#warningtype'> + <code> + type + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Type to filter warnings from <a href="#resultmessages">Result#messages</a>. +Always equal to <code>"warning"</code>.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> nonWarning = result.messages.filter(<span class="hljs-function"><span class="hljs-params">i</span> =></span> i.type !== <span class="hljs-string">'warning'</span>)</code></pre> + + + + + + + + + + +</section> + + + <section id='warningtext'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/warning.js#L40-L40'> + <span>lib/warning.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#warningtext'> + <code> + text + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>The warning message.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>warning.text <span class="hljs-comment">//=> 'Try to avoid !important'</span></code></pre> + + + + + + + + + + +</section> + + + <section id='warningline'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/warning.js#L51-L51'> + <span>lib/warning.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#warningline'> + <code> + line + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Line in the input file with this warning’s source.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>warning.line <span class="hljs-comment">//=> 5</span></code></pre> + + + + + + + + + + +</section> + + + <section id='warningcolumn'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/warning.js#L60-L60'> + <span>lib/warning.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#warningcolumn'> + <code> + column + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Column in the input file with this warning’s source.</p> + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>warning.column <span class="hljs-comment">//=> 6</span></code></pre> + + + + + + + + + + +</section> + + + <section id='warningtostring'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/warning.js#L74-L88'> + <span>lib/warning.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#warningtostring'> + <code> + toString + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Returns a warning position and message.</p> + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code> + : + <span class='force-inline'>Warning position and message. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>warning.toString() <span class="hljs-comment">//=> 'postcss-lint:a.css:10:14: Avoid !important'</span></code></pre> + + + + + + + + + + +</section> + + +</div> + + + + + + +</section> + + + + + <div class='hide'> + <section class='py2 clearfix'> + + <h2 id='namespaces' class='mt0'> + NAMESPACES + </h2> + + + + + + </section> +</div> + + + + <section id='list'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/list.js#L10-L87'> + <span>lib/list.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#list'> + <code> + list + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Contains helpers for safely splitting lists of CSS values, +preserving parentheses and quotes.</p> + + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> list = postcss.list</code></pre> + + + + + <h4 class='caps quiet mb2 mt3'>Static Members</h4> + <div class="section-indent"> + + <section id='listspace'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/list.js#L66-L69'> + <span>lib/list.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#listspace'> + <code> + space + <span class='gray'>(string)</span> + </code> + </a> + </h3> + + <p>Safely splits space-separated values (such as those for <code>background</code>, +<code>border-radius</code>, and other shorthand properties).</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>string</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Space-separated values. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>></code> + : + <span class='force-inline'>Split values. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.list.space(<span class="hljs-string">'1px calc(10% + 1px)'</span>) <span class="hljs-comment">//=> ['1px', 'calc(10% + 1px)']</span></code></pre> + + + + + + + + + + +</section> + + + <section id='listcomma'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/list.js#L83-L85'> + <span>lib/list.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#listcomma'> + <code> + comma + <span class='gray'>(string)</span> + </code> + </a> + </h3> + + <p>Safely splits comma-separated values (such as those for <code>transition-*</code> +and <code>background</code> properties).</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>string</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Comma-separated values. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>></code> + : + <span class='force-inline'>Split values. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.list.comma(<span class="hljs-string">'black, linear-gradient(white, black)'</span>) +<span class="hljs-comment">//=> ['black', 'linear-gradient(white, black)']</span></code></pre> + + + + + + + + + + +</section> + + +</div> + + + + + + + + +</section> + + + + + <section id='postcss'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/postcss.js#L30-L35'> + <span>lib/postcss.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#postcss'> + <code> + postcss + <span class='gray'>(plugins)</span> + </code> + </a> + </h3> + + <p>Create a new <a href="#processor">Processor</a> instance that will apply <code>plugins</code> +as CSS processors.</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>plugins</code></td> + <td class='col-3 quiet'> + (<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><(<a href="#plugin">Plugin</a> | <a href="#pluginfunction">pluginFunction</a>)> | <a href="#processor">Processor</a>) + + </td> + <td class='col-6'>PostCSS plugins. +See +<a href="#processoruse">Processor#use</a> + for plugin format. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#processor">Processor</a></code> + : + <span class='force-inline'>Processor to process multiple CSS. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">let</span> postcss = <span class="hljs-built_in">require</span>(<span class="hljs-string">'postcss'</span>) + +postcss(plugins).process(css, { <span class="hljs-keyword">from</span>, to }).then(<span class="hljs-function"><span class="hljs-params">result</span> =></span> { + <span class="hljs-built_in">console</span>.log(result.css) +})</code></pre> + + + + + <h4 class='caps quiet mb2 mt3'>Static Members</h4> + <div class="section-indent"> + + <section id='postcssplugin'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/postcss.js#L109-L130'> + <span>lib/postcss.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#postcssplugin'> + <code> + plugin + <span class='gray'>(name, initializer)</span> + </code> + </a> + </h3> + + <p>Creates a PostCSS plugin with a standard API.</p> +<p>The newly-wrapped function will provide both the name and PostCSS +version of the plugin.</p> +<pre class='hljs'><span class="hljs-keyword">const</span> processor = postcss([replace]) +processor.plugins[<span class="hljs-number">0</span>].postcssPlugin <span class="hljs-comment">//=> 'postcss-replace'</span> +processor.plugins[<span class="hljs-number">0</span>].postcssVersion <span class="hljs-comment">//=> '6.0.0'</span></pre> +<p>The plugin function receives 2 arguments: <a href="#root">Root</a> +and <a href="#result">Result</a> instance. The function should mutate the provided +<code>Root</code> node. Alternatively, you can create a new <code>Root</code> node +and override the <code>result.root</code> property.</p> +<pre class='hljs'><span class="hljs-keyword">const</span> cleaner = postcss.plugin(<span class="hljs-string">'postcss-cleaner'</span>, () => { + <span class="hljs-keyword">return</span> <span class="hljs-function">(<span class="hljs-params">root, result</span>) =></span> { + result.root = postcss.root() + } +})</pre> +<p>As a convenience, plugins also expose a <code>process</code> method so that you can use +them as standalone tools.</p> +<pre class='hljs'>cleaner.process(css, processOpts, pluginOpts) +<span class="hljs-comment">// This is equivalent to:</span> +postcss([ cleaner(pluginOpts) ]).process(css, processOpts)</pre> +<p>Asynchronous plugins should return a <code>Promise</code> instance.</p> +<pre class='hljs'>postcss.plugin(<span class="hljs-string">'postcss-import'</span>, () => { + <span class="hljs-keyword">return</span> <span class="hljs-function">(<span class="hljs-params">root, result</span>) =></span> { + <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>( <span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> { + fs.readFile(<span class="hljs-string">'base.css'</span>, (base) => { + root.prepend(base) + resolve() + }) + }) + } +})</pre> +<p>Add warnings using the <a href="#nodewarn">Node#warn</a> method. +Send data to other plugins using the <a href="#resultmessages">Result#messages</a> array.</p> +<pre class='hljs'>postcss.plugin(<span class="hljs-string">'postcss-caniuse-test'</span>, () => { + <span class="hljs-keyword">return</span> <span class="hljs-function">(<span class="hljs-params">root, result</span>) =></span> { + root.walkDecls(<span class="hljs-function"><span class="hljs-params">decl</span> =></span> { + <span class="hljs-keyword">if</span> (!caniuse.support(decl.prop)) { + decl.warn(result, <span class="hljs-string">'Some browsers do not support '</span> + decl.prop) + } + }) + } +})</pre> + + + + + + + + + + + + <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>name</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>PostCSS plugin name. Same as in +<code>name</code> + +property in +<code>package.json</code> +. It will be saved +in +<code>plugin.postcssPlugin</code> + property. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>initializer</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a> + + </td> + <td class='col-6'>Will receive plugin options +and should return +<a href="#pluginfunction">pluginFunction</a> +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#plugin">Plugin</a></code> + : + <span class='force-inline'>PostCSS plugin. +</span> + + + + + + + + + + + + + + + +</section> + + + <section id='postcssstringify'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/postcss.js#L143-L143'> + <span>lib/postcss.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#postcssstringify'> + <code> + stringify + <span class='gray'>(node, builder)</span> + </code> + </a> + </h3> + + <p>Default function to convert a node tree into a CSS string.</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>node</code></td> + <td class='col-3 quiet'> + <a href="#node">Node</a> + + </td> + <td class='col-6'>Start node for stringifing. Usually +<a href="#root">Root</a> +. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>builder</code></td> + <td class='col-3 quiet'> + <a href="#builder">builder</a> + + </td> + <td class='col-6'>Function to concatenate CSS from node’s parts +or generate string and source map. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code>void</code> + : + <span class='force-inline'> +</span> + + + + + + + + + + + + + + + +</section> + + + <section id='postcssparse'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/postcss.js#L163-L163'> + <span>lib/postcss.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#postcssparse'> + <code> + parse + <span class='gray'>(css, opts?)</span> + </code> + </a> + </h3> + + <p>Parses source css and returns a new <a href="#root">Root</a> node, +which contains the source CSS nodes.</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>css</code></td> + <td class='col-3 quiet'> + (<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> | <a href="#tostring">toString</a>) + + </td> + <td class='col-6'>String with input CSS or any object +with toString() method, like a Buffer +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="#processoptions">processOptions</a>? + + </td> + <td class='col-6'>Options with only +<code>from</code> + and +<code>map</code> + keys. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#root">Root</a></code> + : + <span class='force-inline'>PostCSS AST. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-comment">// Simple CSS concatenation with source map support</span> +<span class="hljs-keyword">const</span> root1 = postcss.parse(css1, { <span class="hljs-attr">from</span>: file1 }) +<span class="hljs-keyword">const</span> root2 = postcss.parse(css2, { <span class="hljs-attr">from</span>: file2 }) +root1.append(root2).toResult().css</code></pre> + + + + + + + + + + +</section> + + + <section id='postcssvendor'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/postcss.js#L173-L173'> + <span>lib/postcss.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#postcssvendor'> + <code> + vendor + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Contains the <a href="#vendor">vendor</a> module.</p> + + + <p> + Type: + <a href="#vendor">vendor</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.vendor.unprefixed(<span class="hljs-string">'-moz-tab'</span>) <span class="hljs-comment">//=> ['tab']</span></code></pre> + + + + + + + + + + +</section> + + + <section id='postcsslist'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/postcss.js#L183-L183'> + <span>lib/postcss.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#postcsslist'> + <code> + list + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Contains the <a href="#list">list</a> module.</p> + + + <p> + Type: + <a href="#list">list</a> + </p> + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.list.space(<span class="hljs-string">'5px calc(10% + 5px)'</span>) <span class="hljs-comment">//=> ['5px', 'calc(10% + 5px)']</span></code></pre> + + + + + + + + + + +</section> + + + <section id='postcsscomment'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/postcss.js#L195-L195'> + <span>lib/postcss.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#postcsscomment'> + <code> + comment + <span class='gray'>(defaults?)</span> + </code> + </a> + </h3> + + <p>Creates a new <a href="#comment">Comment</a> node.</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'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + </td> + <td class='col-6'>Properties for the new node. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#comment">Comment</a></code> + : + <span class='force-inline'>New comment node +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.comment({ <span class="hljs-attr">text</span>: <span class="hljs-string">'test'</span> })</code></pre> + + + + + + + + + + +</section> + + + <section id='postcssatrule'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/postcss.js#L207-L207'> + <span>lib/postcss.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#postcssatrule'> + <code> + atRule + <span class='gray'>(defaults?)</span> + </code> + </a> + </h3> + + <p>Creates a new <a href="#atrule">AtRule</a> node.</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'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + </td> + <td class='col-6'>Properties for the new node. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#atrule">AtRule</a></code> + : + <span class='force-inline'>new at-rule node +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.atRule({ <span class="hljs-attr">name</span>: <span class="hljs-string">'charset'</span> }).toString() <span class="hljs-comment">//=> "@charset"</span></code></pre> + + + + + + + + + + +</section> + + + <section id='postcssdecl'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/postcss.js#L219-L219'> + <span>lib/postcss.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#postcssdecl'> + <code> + decl + <span class='gray'>(defaults?)</span> + </code> + </a> + </h3> + + <p>Creates a new <a href="#declaration">Declaration</a> node.</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'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + </td> + <td class='col-6'>Properties for the new node. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#declaration">Declaration</a></code> + : + <span class='force-inline'>new declaration node +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.decl({ <span class="hljs-attr">prop</span>: <span class="hljs-string">'color'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'red'</span> }).toString() <span class="hljs-comment">//=> "color: red"</span></code></pre> + + + + + + + + + + +</section> + + + <section id='postcssrule'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/postcss.js#L231-L231'> + <span>lib/postcss.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#postcssrule'> + <code> + rule + <span class='gray'>(defaults?)</span> + </code> + </a> + </h3> + + <p>Creates a new <a href="#rule">Rule</a> node.</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'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + </td> + <td class='col-6'>Properties for the new node. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#rule">Rule</a></code> + : + <span class='force-inline'>new rule node +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.rule({ <span class="hljs-attr">selector</span>: <span class="hljs-string">'a'</span> }).toString() <span class="hljs-comment">//=> "a {\n}"</span></code></pre> + + + + + + + + + + +</section> + + + <section id='postcssroot'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/postcss.js#L243-L243'> + <span>lib/postcss.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#postcssroot'> + <code> + root + <span class='gray'>(defaults?)</span> + </code> + </a> + </h3> + + <p>Creates a new <a href="#root">Root</a> node.</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'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a>? + + </td> + <td class='col-6'>Properties for the new node. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#root">Root</a></code> + : + <span class='force-inline'>new root node. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.root({ <span class="hljs-attr">after</span>: <span class="hljs-string">'\n'</span> }).toString() <span class="hljs-comment">//=> "\n"</span></code></pre> + + + + + + + + + + +</section> + + +</div> + + + + + + + + +</section> + + + + + <section id='vendor'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/vendor.js#L9-L45'> + <span>lib/vendor.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#vendor'> + <code> + vendor + <span class='gray'>()</span> + </code> + </a> + </h3> + + <p>Contains helpers for working with vendor prefixes.</p> + + + + + + + + + + + + + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code><span class="hljs-keyword">const</span> vendor = postcss.vendor</code></pre> + + + + + <h4 class='caps quiet mb2 mt3'>Static Members</h4> + <div class="section-indent"> + + <section id='vendorprefix'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/vendor.js#L22-L29'> + <span>lib/vendor.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#vendorprefix'> + <code> + prefix + <span class='gray'>(prop)</span> + </code> + </a> + </h3> + + <p>Returns the vendor prefix extracted from an input string.</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>prop</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>String with or without vendor prefix. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code> + : + <span class='force-inline'>vendor prefix or empty string +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.vendor.prefix(<span class="hljs-string">'-moz-tab-size'</span>) <span class="hljs-comment">//=> '-moz-'</span> +postcss.vendor.prefix(<span class="hljs-string">'tab-size'</span>) <span class="hljs-comment">//=> ''</span></code></pre> + + + + + + + + + + +</section> + + + <section id='vendorunprefixed'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/vendor.js#L41-L43'> + <span>lib/vendor.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#vendorunprefixed'> + <code> + unprefixed + <span class='gray'>(prop)</span> + </code> + </a> + </h3> + + <p>Returns the input string stripped of its vendor prefix.</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>prop</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>String with or without vendor prefix. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code> + : + <span class='force-inline'>String name without vendor prefixes. +</span> + + + + + + + + <h4 class='caps quiet mb1 mt3'>Examples</h4> + + + <pre class='p1 overflow-auto round fill-light'><code>postcss.vendor.unprefixed(<span class="hljs-string">'-moz-tab-size'</span>) <span class="hljs-comment">//=> 'tab-size'</span></code></pre> + + + + + + + + + + +</section> + + +</div> + + + + + + + + +</section> + + + + + <div class='hide'> + <section class='py2 clearfix'> + + <h2 id='global' class='mt0'> + GLOBAL + </h2> + + + + + + </section> +</div> + + + + <section id='message'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/result.js#L174-L178'> + <span>lib/result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#message'> + <code> + Message + <span class='gray'>()</span> + </code> + </a> + </h3> + + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> + </p> + + + + + + + + + + + + + <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'> + <thead class='fill-light'> + <th class='col-2 small caps quiet'>property</th> + <th class='col-2 small caps quiet'>type</th> + <th class='col-8 small caps quiet'>description</th> + </thead> + + <tr> + <td class='col-2 strong'>type</td> + <td class='col-2 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>: Message type. +</td> + </tr> + + + + <tr> + <td class='col-2 strong'>plugin</td> + <td class='col-2 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>: Source PostCSS plugin name. +</td> + </tr> + + + + </table> + + + + + + + + + + + + + + + +</section> + + + + + <section id='plugin'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/processor.js#L183-L186'> + <span>lib/processor.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#plugin'> + <code> + Plugin + <span class='gray'>()</span> + </code> + </a> + </h3> + + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> + </p> + + + + + + + + + + + + + <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'> + <thead class='fill-light'> + <th class='col-2 small caps quiet'>property</th> + <th class='col-2 small caps quiet'>type</th> + <th class='col-8 small caps quiet'>description</th> + </thead> + + <tr> + <td class='col-2 strong'>postcss</td> + <td class='col-2 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a> + + </td> + <td class='col-8'>: PostCSS plugin function. +</td> + </tr> + + + + </table> + + + + + + + + + + + + + + + +</section> + + + + + <section id='builder'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/processor.js#L139-L144'> + <span>lib/processor.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#builder'> + <code> + builder + <span class='gray'>(part, node, type?)</span> + </code> + </a> + </h3> + + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a> + </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>part</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-6'>Part of generated CSS connected to this node. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>node</code></td> + <td class='col-3 quiet'> + <a href="#node">Node</a> + + </td> + <td class='col-6'>AST node. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>type</code></td> + <td class='col-3 quiet'> + (<code>"start"</code> | <code>"end"</code>)? + + </td> + <td class='col-6'>Node’s part type. +</td> + </tr> + + + </table> + + + + + + + + + + + + + + + + + +</section> + + + + + <section id='childcondition'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#L712-L718'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#childcondition'> + <code> + childCondition + <span class='gray'>(node, index, nodes)</span> + </code> + </a> + </h3> + + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a> + </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>node</code></td> + <td class='col-3 quiet'> + <a href="#node">Node</a> + + </td> + <td class='col-6'>Container child. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>index</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-6'>Child index. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>nodes</code></td> + <td class='col-3 quiet'> + <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'>All container children. +</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'> +</span> + + + + + + + + + + + + + + + +</section> + + + + + <section id='childiterator'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#L720-L725'> + <span>lib/container.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#childiterator'> + <code> + childIterator + <span class='gray'>(node, index)</span> + </code> + </a> + </h3> + + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a> + </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>node</code></td> + <td class='col-3 quiet'> + <a href="#node">Node</a> + + </td> + <td class='col-6'>Container child. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>index</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-6'>Child 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'>Returning +<code>false</code> + will break iteration. +</span> + + + + + + + + + + + + + + + +</section> + + + + + <section id='fileposition'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/input.js#L173-L178'> + <span>lib/input.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#fileposition'> + <code> + filePosition + <span class='gray'>()</span> + </code> + </a> + </h3> + + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> + </p> + + + + + + + + + + + + + <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'> + <thead class='fill-light'> + <th class='col-2 small caps quiet'>property</th> + <th class='col-2 small caps quiet'>type</th> + <th class='col-8 small caps quiet'>description</th> + </thead> + + <tr> + <td class='col-2 strong'>file</td> + <td class='col-2 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>: Path to file. +</td> + </tr> + + + + <tr> + <td class='col-2 strong'>line</td> + <td class='col-2 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-8'>: Source line in file. +</td> + </tr> + + + + <tr> + <td class='col-2 strong'>column</td> + <td class='col-2 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-8'>: Source column in file. +</td> + </tr> + + + + </table> + + + + + + + + + + + + + + + +</section> + + + + + <section id='onfulfilled'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/lazy-result.js#L421-L424'> + <span>lib/lazy-result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#onfulfilled'> + <code> + onFulfilled + <span class='gray'>(result)</span> + </code> + </a> + </h3> + + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a> + </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>result</code></td> + <td class='col-3 quiet'> + <a href="#result">Result</a> + + </td> + <td class='col-6'></td> + </tr> + + + </table> + + + + + + + + + + + + + + + + + +</section> + + + + + <section id='onrejected'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/lazy-result.js#L426-L429'> + <span>lib/lazy-result.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#onrejected'> + <code> + onRejected + <span class='gray'>(error)</span> + </code> + </a> + </h3> + + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a> + </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>error</code></td> + <td class='col-3 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Error">Error</a> + + </td> + <td class='col-6'></td> + </tr> + + + </table> + + + + + + + + + + + + + + + + + +</section> + + + + + <section id='parser'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/processor.js#L146-L154'> + <span>lib/processor.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#parser'> + <code> + parser + <span class='gray'>(css, opts?)</span> + </code> + </a> + </h3> + + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a> + </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>css</code></td> + <td class='col-3 quiet'> + (<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> | <a href="#tostring">toString</a>) + + </td> + <td class='col-6'>String with input CSS or any object +with toString() method, like a Buffer. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>opts</code></td> + <td class='col-3 quiet'> + <a href="#processoptions">processOptions</a>? + + </td> + <td class='col-6'>Options with only +<code>from</code> + and +<code>map</code> + keys. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code><a href="#root">Root</a></code> + : + <span class='force-inline'>PostCSS AST +</span> + + + + + + + + + + + + + + + +</section> + + + + + <section id='pluginfunction'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/processor.js#L177-L181'> + <span>lib/processor.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#pluginfunction'> + <code> + pluginFunction + <span class='gray'>(root, result)</span> + </code> + </a> + </h3> + + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a> + </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>root</code></td> + <td class='col-3 quiet'> + <a href="#root">Root</a> + + </td> + <td class='col-6'>Parsed input CSS. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>result</code></td> + <td class='col-3 quiet'> + <a href="#result">Result</a> + + </td> + <td class='col-6'>Result to set warnings or check other plugins. +</td> + </tr> + + + </table> + + + + + + + + + + + + + + + + + +</section> + + + + + <section id='position'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/node.js#L518-L522'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#position'> + <code> + position + <span class='gray'>()</span> + </code> + </a> + </h3> + + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> + </p> + + + + + + + + + + + + + <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'> + <thead class='fill-light'> + <th class='col-2 small caps quiet'>property</th> + <th class='col-2 small caps quiet'>type</th> + <th class='col-8 small caps quiet'>description</th> + </thead> + + <tr> + <td class='col-2 strong'>line</td> + <td class='col-2 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-8'>: Source line in file. +</td> + </tr> + + + + <tr> + <td class='col-2 strong'>column</td> + <td class='col-2 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a> + + </td> + <td class='col-8'>: Source column in file. +</td> + </tr> + + + + </table> + + + + + + + + + + + + + + + +</section> + + + + + <section id='processoptions'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/processor.js#L188-L219'> + <span>lib/processor.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#processoptions'> + <code> + processOptions + <span class='gray'>()</span> + </code> + </a> + </h3> + + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> + </p> + + + + + + + + + + + + + <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'> + <thead class='fill-light'> + <th class='col-2 small caps quiet'>property</th> + <th class='col-2 small caps quiet'>type</th> + <th class='col-8 small caps quiet'>description</th> + </thead> + + <tr> + <td class='col-2 strong'>from</td> + <td class='col-2 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>: The path of the CSS source file. +You should always set +<code>from</code> +, +because it is used in source map +generation and syntax error messages. +</td> + </tr> + + + + <tr> + <td class='col-2 strong'>to</td> + <td class='col-2 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> + + </td> + <td class='col-8'>: The path where you’ll put the output +CSS file. You should always set +<code>to</code> + +to generate correct source maps. +</td> + </tr> + + + + <tr> + <td class='col-2 strong'>parser</td> + <td class='col-2 quiet'> + <a href="#parser">parser</a> + + </td> + <td class='col-8'>: Function to generate AST by string. +</td> + </tr> + + + + <tr> + <td class='col-2 strong'>stringifier</td> + <td class='col-2 quiet'> + <a href="#stringifier">stringifier</a> + + </td> + <td class='col-8'>: Class to generate string by AST. +</td> + </tr> + + + + <tr> + <td class='col-2 strong'>syntax</td> + <td class='col-2 quiet'> + <a href="#syntax">syntax</a> + + </td> + <td class='col-8'>: Object with +<code>parse</code> + and +<code>stringify</code> +. +</td> + </tr> + + + + <tr> + <td class='col-2 strong'>map</td> + <td class='col-2 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> + + </td> + <td class='col-8'>: Source map options. +</td> + </tr> + + + <tr> + <td class='col-2 strong'>map</td> + <td class='col-2 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> + + </td> + <td class='col-8'>: Source map options. +</td> + </tr> + + + </table> + + + + + + + + + + + + + + + +</section> + + + + + <section id='source'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/node.js#L524-L529'> + <span>lib/node.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#source'> + <code> + source + <span class='gray'>()</span> + </code> + </a> + </h3> + + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> + </p> + + + + + + + + + + + + + <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'> + <thead class='fill-light'> + <th class='col-2 small caps quiet'>property</th> + <th class='col-2 small caps quiet'>type</th> + <th class='col-8 small caps quiet'>description</th> + </thead> + + <tr> + <td class='col-2 strong'>input</td> + <td class='col-2 quiet'> + <a href="#input">Input</a> + + </td> + <td class='col-8'>: <a href="#input">Input</a> + with input file +</td> + </tr> + + + + <tr> + <td class='col-2 strong'>start</td> + <td class='col-2 quiet'> + <a href="#position">position</a> + + </td> + <td class='col-8'>: The starting position of the node’s source. +</td> + </tr> + + + + <tr> + <td class='col-2 strong'>end</td> + <td class='col-2 quiet'> + <a href="#position">position</a> + + </td> + <td class='col-8'>: The ending position of the node’s source. +</td> + </tr> + + + + </table> + + + + + + + + + + + + + + + +</section> + + + + + <section id='stringifier'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/processor.js#L156-L164'> + <span>lib/processor.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#stringifier'> + <code> + stringifier + <span class='gray'>(node, builder)</span> + </code> + </a> + </h3> + + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a> + </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>node</code></td> + <td class='col-3 quiet'> + <a href="#node">Node</a> + + </td> + <td class='col-6'>Start node for stringifing. Usually +<a href="#root">Root</a> +. +</td> + </tr> + + + <tr> + <td class='col-3 strong'><code>builder</code></td> + <td class='col-3 quiet'> + <a href="#builder">builder</a> + + </td> + <td class='col-6'>Function to concatenate CSS from node’s parts +or generate string and source map. +</td> + </tr> + + + </table> + + + + + + + <h4 class='caps quiet mb1 mt3'>Returns</h4> + <code>void</code> + : + <span class='force-inline'> +</span> + + + + + + + + + + + + + + + +</section> + + + + + <section id='syntax'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/processor.js#L166-L170'> + <span>lib/processor.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#syntax'> + <code> + syntax + <span class='gray'>()</span> + </code> + </a> + </h3> + + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> + </p> + + + + + + + + + + + + + <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'> + <thead class='fill-light'> + <th class='col-2 small caps quiet'>property</th> + <th class='col-2 small caps quiet'>type</th> + <th class='col-8 small caps quiet'>description</th> + </thead> + + <tr> + <td class='col-2 strong'>parse</td> + <td class='col-2 quiet'> + <a href="#parser">parser</a> + + </td> + <td class='col-8'>: Function to generate AST by string. +</td> + </tr> + + + + <tr> + <td class='col-2 strong'>stringify</td> + <td class='col-2 quiet'> + <a href="#stringifier">stringifier</a> + + </td> + <td class='col-8'>: Function to generate string by AST. +</td> + </tr> + + + + </table> + + + + + + + + + + + + + + + +</section> + + + + + <section id='tostring'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/processor.js#L172-L175'> + <span>lib/processor.js</span> + </a> + + </div> + + <h3 class='regular'> + <a class='black' href='#tostring'> + <code> + toString + <span class='gray'>()</span> + </code> + </a> + </h3> + + + + <p> + Type: + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a> + </p> + + + + + + + + + + + + + <table class='table-light mt3 rounded keyline-all keyline-light overflow-hidden bg-cloudy-light'> + <thead class='fill-light'> + <th class='col-2 small caps quiet'>property</th> + <th class='col-2 small caps quiet'>type</th> + <th class='col-8 small caps quiet'>description</th> + </thead> + + <tr> + <td class='col-2 strong'>toString</td> + <td class='col-2 quiet'> + <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a> + + </td> + <td class='col-8'></td> + </tr> + + + + </table> + + + + + + + + + + + + + + + +</section> + + + + </div> + </div> + </div> +</div> +<script src='assets/scripts.min.js'></script> +</body> +</html> |