diff options
Diffstat (limited to 'node_modules/autoprefixer/node_modules/postcss/docs')
8 files changed, 23339 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> diff --git a/node_modules/autoprefixer/node_modules/postcss/docs/architecture.md b/node_modules/autoprefixer/node_modules/postcss/docs/architecture.md new file mode 100644 index 0000000..266cd39 --- /dev/null +++ b/node_modules/autoprefixer/node_modules/postcss/docs/architecture.md @@ -0,0 +1,156 @@ +## PostCSS Architecture + +General overview of the PostCSS architecture. +It can be useful for everyone who wishes to contribute to the core or develop a better understanding of the tool. + +**Table of Contents** + +- [Overview](#overview) +- [Workflow](#workflow) +- [Core Structures](#core-structures) + * [Tokenizer](#tokenizer--libtokenizees6-) + * [Parser](#parser--libparsees6-libparseres6-) + * [Processor](#processor--libprocessores6-) + * [Stringifier](#stringifier--libstringifyes6-libstringifieres6-) +- [API](#api-reference) + +### Overview + +> This section describes ideas lying behind PostCSS + +Before diving deeper into the development of PostCSS let's briefly describe what is PostCSS and what is not. + +**PostCSS** + +- *is **NOT** a style preprocessor like `Sass` or `Less`.* + + It does not define a custom syntax and semantics, it's not actually a language. + PostCSS works with CSS and can be easily integrated with the tools described above. That being said any valid CSS can be processed by PostCSS. + +- *is a tool for CSS syntax transformations* + + It allows you to define custom CSS like syntax that could be understandable and transformed by plugins. That being said PostCSS is not strictly about CSS spec but about syntax definition manner of CSS. In such a way you can define custom syntax constructs like at-rule, that could be very helpful for tools build around PostCSS. PostCSS plays the role of a framework for building outstanding tools for CSS manipulations. + +- *is a big player in CSS ecosystem* + + A Large amount of lovely tools like `Autoprefixer`, `Stylelint`, `CSSnano` were built on PostCSS ecosystem. There is a big chance that you already use it implicitly, just check your `node_modules` :smiley: + +### Workflow + +This is a high-level overview of the whole PostCSS workflow + +<img width="300" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/PostCSS_scheme.svg/512px-PostCSS_scheme.svg.png" alt="workflow"> + +As you can see from the diagram above, PostCSS architecture is pretty straightforward but some parts of it could be misunderstood. + +You can see a part called *Parser*, this construct will be described in details later on, just for now think about it as a structure that can understand your CSS like syntax and create an object representation of it. + +That being said, there are few ways to write a parser. + + - *Write a single file with string to AST transformation* + + This method is quite popular, for example, the [Rework analyzer](https://github.com/reworkcss/css/blob/master/lib/parse/index.js) was written in this style. But with a large code base, the code becomes hard to read and pretty slow. + + - *Split it into lexical analysis/parsing steps (source string → tokens → AST)* + + This is the way of how we do it in PostCSS and also the most popular one. + A lot of parsers like [`@babel/parser` (parser behind Babel)](https://github.com/babel/babel/tree/master/packages/babel-parser), [`CSSTree`](https://github.com/csstree/csstree) were written in such way. + The main reasons to separate tokenization from parsing steps are performance and abstracting complexity. + +Let think about why the second way is better for our needs. + +First of all, because string to tokens step takes more time than parsing step. We operate on large source string and process it char by char, this is why it is very inefficient operation in terms of performance and we should perform it only once. + +But from other side tokens to AST transformation is logically more complex so with such separation we could write very fast tokenizer (but from this comes sometimes hard to read code) and easy to read (but slow) parser. + +Summing it up splitting into two steps improve performance and code readability. + +So now let's look more closely on structures that play the main role in PostCSS workflow. + +### Core Structures + + - #### Tokenizer ( [lib/tokenize.es6](https://github.com/postcss/postcss/blob/master/lib/tokenize.es6) ) + + Tokenizer (aka Lexer) plays important role in syntax analysis. + + It accepts CSS string and returns a list of tokens. + + Token is a simple structure that describes some part of syntax like `at-rule`, `comment` or `word`. It can also contain positional information for more descriptive errors. + + For example, if we consider following CSS + + ```css + .className { color: #FFF; } + ``` + + corresponding tokens from PostCSS will be + ```js + [ + ["word", ".className", 1, 1, 1, 10] + ["space", " "] + ["{", "{", 1, 12] + ["space", " "] + ["word", "color", 1, 14, 1, 18] + [":", ":", 1, 19] + ["space", " "] + ["word", "#FFF" , 1, 21, 1, 23] + [";", ";", 1, 24] + ["space", " "] + ["}", "}", 1, 26] + ] + ``` + + As you can see from the example above a single token represented as a list and also `space` token doesn't have positional information. + + Let's look more closely on single token like `word`. As it was said each token represented as a list and follow such pattern. + + ```js + const token = [ + // represents token type + 'word', + + // represents matched word + '.className', + + // This two numbers represent start position of token. + // It is optional value as we saw in the example above, + // tokens like `space` don't have such information. + + // Here the first number is line number and the second one is corresponding column. + 1, 1, + + // Next two numbers also optional and represent end position for multichar tokens like this one. Numbers follow same rule as was described above + 1, 10 + ] + ``` + There are many patterns how tokenization could be done, PostCSS motto is performance and simplicity. Tokenization is a complex computing operation and takes a large amount of syntax analysis time ( ~90% ), that why PostCSS' Tokenizer looks dirty but it was optimized for speed. Any high-level constructs like classes could dramatically slow down tokenizer. + + PostCSS' Tokenizer uses some sort of streaming/chaining API where you expose [`nextToken()`](https://github.com/postcss/postcss/blob/master/lib/tokenize.es6#L48-L308) method to Parser. In this manner, we provide a clean interface for Parser and reduce memory usage by storing only a few tokens and not the whole list of tokens. + +- #### Parser ( [lib/parse.es6](https://github.com/postcss/postcss/blob/master/lib/parse.es6), [lib/parser.es6](https://github.com/postcss/postcss/blob/master/lib/parser.es6) ) + + Parser is the main structure responsible for [syntax analysis](https://en.wikipedia.org/wiki/Parsing) of incoming CSS. Parser produces a structure called [Abstract Syntax Tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree) that could then be transformed by plugins later on. + + Parser works in common with Tokenizer and operates over tokens, not source string, as it would be a very inefficient operation. + + It uses mostly `nextToken` and `back` methods provided by Tokenizer for obtaining single or multiple tokens and then construct part of AST called `Node`. + + There are multiple Node types that PostCSS could produce but all of them inherit from base Node [class](https://github.com/postcss/postcss/blob/master/lib/node.es6#L34). + +- #### Processor ( [lib/processor.es6](https://github.com/postcss/postcss/blob/master/lib/processor.es6) ) + + Processor is a very plain structure that initializes plugins and runs syntax transformations. Plugin is just a function registered with [postcss.plugin](https://github.com/postcss/postcss/blob/master/lib/postcss.es6#L109) call. + + It exposes only a few public API methods. Description of them could be found on [api.postcss.org/Processor](http://api.postcss.org/Processor.html) + +- #### Stringifier ( [lib/stringify.es6](https://github.com/postcss/postcss/blob/master/lib/stringify.es6), [lib/stringifier.es6](https://github.com/postcss/postcss/blob/master/lib/stringifier.es6) ) + + Stringifier is a base class that translates modified AST to pure CSS string. Stringifier traverses AST starting from provided Node and generates a raw string representation of it calling corresponding methods. + + The most essential method is [`Stringifier.stringify`](https://github.com/postcss/postcss/blob/master/lib/stringifier.es6#L25-L27) + that accepts initial Node and semicolon indicator. + You can learn more by checking [stringifier.es6](https://github.com/postcss/postcss/blob/master/lib/stringifier.es6) + +### API Reference + +More descriptive API documentation could be found [here](http://api.postcss.org/) diff --git a/node_modules/autoprefixer/node_modules/postcss/docs/guidelines/plugin.md b/node_modules/autoprefixer/node_modules/postcss/docs/guidelines/plugin.md new file mode 100644 index 0000000..52fdcf3 --- /dev/null +++ b/node_modules/autoprefixer/node_modules/postcss/docs/guidelines/plugin.md @@ -0,0 +1,195 @@ +# PostCSS Plugin Guidelines + +A PostCSS plugin is a function that receives and, usually, +transforms a CSS AST from the PostCSS parser. + +The rules below are *mandatory* for all PostCSS plugins. + +See also [ClojureWerkz’s recommendations] for open source projects. + +[ClojureWerkz’s recommendations]: http://blog.clojurewerkz.org/blog/2013/04/20/how-to-make-your-open-source-project-really-awesome/ + +## 1. API + +### 1.1 Clear name with `postcss-` prefix + +The plugin’s purpose should be clear just by reading its name. +If you wrote a transpiler for CSS 4 Custom Media, `postcss-custom-media` +would be a good name. If you wrote a plugin to support mixins, +`postcss-mixins` would be a good name. + +The prefix `postcss-` shows that the plugin is part of the PostCSS ecosystem. + +This rule is not mandatory for plugins that can run as independent tools, +without the user necessarily knowing that it is powered by +PostCSS — for example, [RTLCSS] and [Autoprefixer]. + +[Autoprefixer]: https://github.com/postcss/autoprefixer +[RTLCSS]: https://rtlcss.com/ + +### 1.2. Do one thing, and do it well + +Do not create multitool plugins. Several small, one-purpose plugins bundled into +a plugin pack is usually a better solution. + +For example, [`postcss-preset-env`] contains many small plugins, +one for each W3C specification. And [`cssnano`] contains a separate plugin +for each of its optimization. + +[`postcss-preset-env`]: https://preset-env.cssdb.org/ +[`cssnano`]: https://github.com/ben-eb/cssnano + +### 1.3. Do not use mixins + +Preprocessors libraries like Compass provide an API with mixins. + +PostCSS plugins are different. +A plugin cannot be just a set of mixins for [`postcss-mixins`]. + +To achieve your goal, consider transforming valid CSS +or using custom at-rules and custom properties. + +[`postcss-mixins`]: https://github.com/postcss/postcss-mixins + +### 1.4. Create plugin by `postcss.plugin` + +By wrapping your function in this method, +you are hooking into a common plugin API: + +```js +module.exports = postcss.plugin('plugin-name', opts => { + return (root, result) => { + // Plugin code + } +}) +``` + +## 2. Processing + +### 2.1. Plugin must be tested + +A CI service like [Travis] is also recommended for testing code in +different environments. You should test in (at least) Node.js [active LTS](https://github.com/nodejs/LTS) and current stable version. + +[Travis]: https://travis-ci.org/ + +### 2.2. Use asynchronous methods whenever possible + +For example, use `fs.writeFile` instead of `fs.writeFileSync`: + +```js +postcss.plugin('plugin-sprite', opts => { + return (root, result) => { + + return new Promise((resolve, reject) => { + const sprite = makeSprite() + fs.writeFile(opts.file, sprite, err => { + if (err) return reject(err) + resolve() + }) + }) + + } +}) +``` + +### 2.3. Set `node.source` for new nodes + +Every node must have a relevant `source` so PostCSS can generate +an accurate source map. + +So if you add a new declaration based on some existing declaration, you should +clone the existing declaration in order to save that original `source`. + +```js +if (needPrefix(decl.prop)) { + decl.cloneBefore({ prop: '-webkit-' + decl.prop }) +} +``` + +You can also set `source` directly, copying from some existing node: + +```js +if (decl.prop === 'animation') { + const keyframe = createAnimationByName(decl.value) + keyframes.source = decl.source + decl.root().append(keyframes) +} +``` + +### 2.4. Use only the public PostCSS API + +PostCSS plugins must not rely on undocumented properties or methods, +which may be subject to change in any minor release. The public API +is described in [API docs]. + +[API docs]: http://api.postcss.org/ + +## 3. Errors + +### 3.1. Use `node.error` on CSS relevant errors + +If you have an error because of input CSS (like an unknown name +in a mixin plugin) you should use `node.error` to create an error +that includes source position: + +```js +if (typeof mixins[name] === 'undefined') { + throw decl.error('Unknown mixin ' + name, { plugin: 'postcss-mixins' }) +} +``` + +### 3.2. Use `result.warn` for warnings + +Do not print warnings with `console.log` or `console.warn`, +because some PostCSS runner may not allow console output. + +```js +if (outdated(decl.prop)) { + result.warn(decl.prop + ' is outdated', { node: decl }) +} +``` + +If CSS input is a source of the warning, the plugin must set the `node` option. + +## 4. Documentation + +### 4.1. Document your plugin in English + +PostCSS plugins must have their `README.md` wrote in English. Do not be afraid +of your English skills, as the open source community will fix your errors. + +Of course, you are welcome to write documentation in other languages; +just name them appropriately (e.g. `README.ja.md`). + +### 4.2. Include input and output examples + +The plugin's `README.md` must contain example input and output CSS. +A clear example is the best way to describe how your plugin works. + +The first section of the `README.md` is a good place to put examples. +See [postcss-opacity](https://github.com/iamvdo/postcss-opacity) for an example. + +Of course, this guideline does not apply if your plugin does not +transform the CSS. + +### 4.3. Maintain a changelog + +PostCSS plugins must describe the changes of all their releases +in a separate file, such as `CHANGELOG.md`, `History.md`, or [GitHub Releases]. +Visit [Keep A Changelog] for more information about how to write one of these. + +Of course, you should be using [SemVer]. + +[Keep A Changelog]: http://keepachangelog.com/ +[GitHub Releases]: https://help.github.com/articles/creating-releases/ +[SemVer]: http://semver.org/ + +### 4.4. Include `postcss-plugin` keyword in `package.json` + +PostCSS plugins written for npm must have the `postcss-plugin` keyword +in their `package.json`. This special keyword will be useful for feedback about +the PostCSS ecosystem. + +For packages not published to npm, this is not mandatory, but is recommended +if the package format can contain keywords. diff --git a/node_modules/autoprefixer/node_modules/postcss/docs/guidelines/runner.md b/node_modules/autoprefixer/node_modules/postcss/docs/guidelines/runner.md new file mode 100644 index 0000000..24de712 --- /dev/null +++ b/node_modules/autoprefixer/node_modules/postcss/docs/guidelines/runner.md @@ -0,0 +1,143 @@ +# PostCSS Runner Guidelines + +A PostCSS runner is a tool that processes CSS through a user-defined list +of plugins; for example, [`postcss-cli`] or [`gulp‑postcss`]. +These rules are mandatory for any such runners. + +For single-plugin tools, like [`gulp-autoprefixer`], +these rules are not mandatory but are highly recommended. + +See also [ClojureWerkz’s recommendations] for open source projects. + +[ClojureWerkz’s recommendations]: http://blog.clojurewerkz.org/blog/2013/04/20/how-to-make-your-open-source-project-really-awesome/ +[`gulp-autoprefixer`]: https://github.com/sindresorhus/gulp-autoprefixer +[`gulp‑postcss`]: https://github.com/w0rm/gulp-postcss +[`postcss-cli`]: https://github.com/postcss/postcss-cli + +## 1. API + +### 1.1. Accept functions in plugin parameters + +If your runner uses a config file, it must be written in JavaScript, so that +it can support plugins which accept a function, such as [`postcss-assets`]: + +```js +module.exports = [ + require('postcss-assets')({ + cachebuster: function (file) { + return fs.statSync(file).mtime.getTime().toString(16) + } + }) +] +``` + +[`postcss-assets`]: https://github.com/borodean/postcss-assets + +## 2. Processing + +### 2.1. Set `from` and `to` processing options + +To ensure that PostCSS generates source maps and displays better syntax errors, +runners must specify the `from` and `to` options. If your runner does not handle +writing to disk (for example, a gulp transform), you should set both options +to point to the same file: + +```js +processor.process({ from: file.path, to: file.path }) +``` + +### 2.2. Use only the asynchronous API + +PostCSS runners must use only the asynchronous API. +The synchronous API is provided only for debugging, is slower, +and can’t work with asynchronous plugins. + +```js +processor.process(opts).then(result => { + // processing is finished +}); +``` + +### 2.3. Use only the public PostCSS API + +PostCSS runners must not rely on undocumented properties or methods, +which may be subject to change in any minor release. The public API +is described in [API docs]. + +[API docs]: http://api.postcss.org/ + +## 3. Output + +### 3.1. Don’t show JS stack for `CssSyntaxError` + +PostCSS runners must not show a stack trace for CSS syntax errors, +as the runner can be used by developers who are not familiar with JavaScript. +Instead, handle such errors gracefully: + +```js +processor.process(opts).catch(error => { + if (error.name === 'CssSyntaxError') { + process.stderr.write(error.message + error.showSourceCode()) + } else { + throw error + } +}) +``` + +### 3.2. Display `result.warnings()` + +PostCSS runners must output warnings from `result.warnings()`: + +```js +result.warnings().forEach(warn => { + process.stderr.write(warn.toString()) +}) +``` + +See also [postcss-log-warnings] and [postcss-messages] plugins. + +[postcss-log-warnings]: https://github.com/davidtheclark/postcss-log-warnings +[postcss-messages]: https://github.com/postcss/postcss-messages + +### 3.3. Allow the user to write source maps to different files + +PostCSS by default will inline source maps in the generated file; however, +PostCSS runners must provide an option to save the source map in a different +file: + +```js +if (result.map) { + fs.writeFile(opts.to + '.map', result.map.toString()) +} +``` + +## 4. Documentation + +### 4.1. Document your runner in English + +PostCSS runners must have their `README.md` wrote in English. Do not be afraid +of your English skills, as the open source community will fix your errors. + +Of course, you are welcome to write documentation in other languages; +just name them appropriately (e.g. `README.ja.md`). + +### 4.2. Maintain a changelog + +PostCSS runners must describe changes of all releases in a separate file, +such as `ChangeLog.md`, `History.md`, or with [GitHub Releases]. +Visit [Keep A Changelog] for more information on how to write one of these. + +Of course, you should use [SemVer]. + +[Keep A Changelog]: http://keepachangelog.com/ +[GitHub Releases]: https://help.github.com/articles/creating-releases/ +[SemVer]: http://semver.org/ + +### 4.3. `postcss-runner` keyword in `package.json` + +PostCSS runners written for npm must have the `postcss-runner` keyword +in their `package.json`. This special keyword will be useful for feedback about +the PostCSS ecosystem. + +For packages not published to npm, this is not mandatory, but recommended +if the package format is allowed to contain keywords. diff --git a/node_modules/autoprefixer/node_modules/postcss/docs/source-maps.md b/node_modules/autoprefixer/node_modules/postcss/docs/source-maps.md new file mode 100644 index 0000000..ce29755 --- /dev/null +++ b/node_modules/autoprefixer/node_modules/postcss/docs/source-maps.md @@ -0,0 +1,74 @@ +# PostCSS and Source Maps + +PostCSS has great [source maps] support. It can read and interpret maps +from previous transformation steps, autodetect the format that you expect, +and output both external and inline maps. + +To ensure that you generate an accurate source map, you must indicate the input +and output CSS file paths — using the options `from` and `to`, respectively. + +To generate a new source map with the default options, simply set `map: true`. +This will generate an inline source map that contains the source content. +If you don’t want the map inlined, you can set `map.inline: false`. + +```js +processor + .process(css, { + from: 'app.sass.css', + to: 'app.css', + map: { inline: false } + }) + .then(result => { + result.map //=> '{ "version":3, + // "file":"app.css", + // "sources":["app.sass"], + // "mappings":"AAAA,KAAI" }' + }) +``` + +If PostCSS finds source maps from a previous transformation, +it will automatically update that source map with the same options. + +## Options + +If you want more control over source map generation, you can define the `map` +option as an object with the following parameters: + +* `inline` boolean: indicates that the source map should be embedded + in the output CSS as a Base64-encoded comment. By default, it is `true`. + But if all previous maps are external, not inline, PostCSS will not embed + the map even if you do not set this option. + + If you have an inline source map, the `result.map` property will be empty, + as the source map will be contained within the text of `result.css`. + +* `prev` string, object, boolean or function: source map content from + a previous processing step (for example, Sass compilation). + PostCSS will try to read the previous source map automatically + (based on comments within the source CSS), but you can use this option + to identify it manually. If desired, you can omit the previous map + with `prev: false`. + +* `sourcesContent` boolean: indicates that PostCSS should set the origin + content (for example, Sass source) of the source map. By default, + it is `true`. But if all previous maps do not contain sources content, + PostCSS will also leave it out even if you do not set this option. + +* `annotation` boolean or string: indicates that PostCSS should add annotation + comments to the CSS. By default, PostCSS will always add a comment with a path + to the source map. PostCSS will not add annotations to CSS files that + do not contain any comments. + + By default, PostCSS presumes that you want to save the source map as + `opts.to + '.map'` and will use this path in the annotation comment. + A different path can be set by providing a string value for `annotation`. + + If you have set `inline: true`, annotation cannot be disabled. + +* `from` string: by default, PostCSS will set the `sources` property of the map + to the value of the `from` option. If you want to override this behaviour, you + can use `map.from` to explicitly set the source map's `sources` property. + Path should be absolute or relative from generated file + (`to` option in `process()` method). + +[source maps]: http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ diff --git a/node_modules/autoprefixer/node_modules/postcss/docs/syntax.md b/node_modules/autoprefixer/node_modules/postcss/docs/syntax.md new file mode 100644 index 0000000..b0e1a60 --- /dev/null +++ b/node_modules/autoprefixer/node_modules/postcss/docs/syntax.md @@ -0,0 +1,231 @@ +# How to Write Custom Syntax + +PostCSS can transform styles in any syntax, and is not limited to just CSS. +By writing a custom syntax, you can transform styles in any desired format. + +Writing a custom syntax is much harder than writing a PostCSS plugin, but +it is an awesome adventure. + +There are 3 types of PostCSS syntax packages: + +* **Parser** to parse input string to node’s tree. +* **Stringifier** to generate output string by node’s tree. +* **Syntax** contains both parser and stringifier. + +## Syntax + +A good example of a custom syntax is [SCSS]. Some users may want to transform +SCSS sources with PostCSS plugins, for example if they need to add vendor +prefixes or change the property order. So this syntax should output SCSS from +an SCSS input. + +The syntax API is a very simple plain object, with `parse` & `stringify` +functions: + +```js +module.exports = { + parse: require('./parse'), + stringify: require('./stringify') +} +``` + +[SCSS]: https://github.com/postcss/postcss-scss + +## Parser + +A good example of a parser is [Safe Parser], which parses malformed/broken CSS. +Because there is no point to generate broken output, this package only provides +a parser. + +The parser API is a function which receives a string & returns a [`Root`] node. +The second argument is a function which receives an object with PostCSS options. + +```js +const postcss = require('postcss') + +module.exports = function parse (css, opts) { + const root = postcss.root() + // Add other nodes to root + return root +} +``` + +[Safe Parser]: https://github.com/postcss/postcss-safe-parser +[`Root`]: http://api.postcss.org/Root.html + +### Main Theory + +There are many books about parsers; but do not worry because CSS syntax is +very easy, and so the parser will be much simpler than a programming language +parser. + +The default PostCSS parser contains two steps: + +1. [Tokenizer] which reads input string character by character and builds a + tokens array. For example, it joins space symbols to a `['space', '\n ']` + token, and detects strings to a `['string', '"\"{"']` token. +2. [Parser] which reads the tokens array, creates node instances and + builds a tree. + +[Tokenizer]: https://github.com/postcss/postcss/blob/master/lib/tokenize.es6 +[Parser]: https://github.com/postcss/postcss/blob/master/lib/parser.es6 + +### Performance + +Parsing input is often the most time consuming task in CSS processors. So it +is very important to have a fast parser. + +The main rule of optimization is that there is no performance without a +benchmark. You can look at [PostCSS benchmarks] to build your own. + +Of parsing tasks, the tokenize step will often take the most time, so its +performance should be prioritized. Unfortunately, classes, functions and +high level structures can slow down your tokenizer. Be ready to write dirty +code with repeated statements. This is why it is difficult to extend the +default [PostCSS tokenizer]; copy & paste will be a necessary evil. + +Second optimization is using character codes instead of strings. + +```js +// Slow +string[i] === '{' + +// Fast +const OPEN_CURLY = 123 // `{' +string.charCodeAt(i) === OPEN_CURLY +``` + +Third optimization is “fast jumps”. If you find open quotes, you can find +next closing quote much faster by `indexOf`: + +```js +// Simple jump +next = string.indexOf('"', currentPosition + 1) + +// Jump by RegExp +regexp.lastIndex = currentPosion + 1 +regexp.test(string) +next = regexp.lastIndex +``` + +The parser can be a well written class. There is no need in copy-paste and +hardcore optimization there. You can extend the default [PostCSS parser]. + +[PostCSS benchmarks]: https://github.com/postcss/benchmark +[PostCSS tokenizer]: https://github.com/postcss/postcss/blob/master/lib/tokenize.es6 +[PostCSS parser]: https://github.com/postcss/postcss/blob/master/lib/parser.es6 + +### Node Source + +Every node should have `source` property to generate correct source map. +This property contains `start` and `end` properties with `{ line, column }`, +and `input` property with an [`Input`] instance. + +Your tokenizer should save the original position so that you can propagate +the values to the parser, to ensure that the source map is correctly updated. + +[`Input`]: https://github.com/postcss/postcss/blob/master/lib/input.es6 + +### Raw Values + +A good PostCSS parser should provide all information (including spaces symbols) +to generate byte-to-byte equal output. It is not so difficult, but respectful +for user input and allow integration smoke tests. + +A parser should save all additional symbols to `node.raws` object. +It is an open structure for you, you can add additional keys. +For example, [SCSS parser] saves comment types (`/* */` or `//`) +in `node.raws.inline`. + +The default parser cleans CSS values from comments and spaces. +It saves the original value with comments to `node.raws.value.raw` and uses it, +if the node value was not changed. + +[SCSS parser]: https://github.com/postcss/postcss-scss + +### Tests + +Of course, all parsers in the PostCSS ecosystem must have tests. + +If your parser just extends CSS syntax (like [SCSS] or [Safe Parser]), +you can use the [PostCSS Parser Tests]. It contains unit & integration tests. + +[PostCSS Parser Tests]: https://github.com/postcss/postcss-parser-tests + +## Stringifier + +A style guide generator is a good example of a stringifier. It generates output +HTML which contains CSS components. For this use case, a parser isn't necessary, +so the package should just contain a stringifier. + +The Stringifier API is little bit more complicated, than the parser API. +PostCSS generates a source map, so a stringifier can’t just return a string. +It must link every substring with its source node. + +A Stringifier is a function which receives [`Root`] node and builder callback. +Then it calls builder with every node’s string and node instance. + +```js +module.exports = function stringify (root, builder) { + // Some magic + const string = decl.prop + ':' + decl.value + ';' + builder(string, decl) + // Some science +}; +``` + +### Main Theory + +PostCSS [default stringifier] is just a class with a method for each node type +and many methods to detect raw properties. + +In most cases it will be enough just to extend this class, +like in [SCSS stringifier]. + +[default stringifier]: https://github.com/postcss/postcss/blob/master/lib/stringifier.es6 +[SCSS stringifier]: https://github.com/postcss/postcss-scss/blob/master/lib/scss-stringifier.es6 + +### Builder Function + +A builder function will be passed to `stringify` function as second argument. +For example, the default PostCSS stringifier class saves it +to `this.builder` property. + +Builder receives output substring and source node to append this substring +to the final output. + +Some nodes contain other nodes in the middle. For example, a rule has a `{` +at the beginning, many declarations inside and a closing `}`. + +For these cases, you should pass a third argument to builder function: +`'start'` or `'end'` string: + +```js +this.builder(rule.selector + '{', rule, 'start') +// Stringify declarations inside +this.builder('}', rule, 'end') +``` + +### Raw Values + +A good PostCSS custom syntax saves all symbols and provide byte-to-byte equal +output if there were no changes. + +This is why every node has `node.raws` object to store space symbol, etc. + +Be careful, because sometimes these raw properties will not be present; some +nodes may be built manually, or may lose their indentation when they are moved +to another parent node. + +This is why the default stringifier has a `raw()` method to autodetect raw +properties by other nodes. For example, it will look at other nodes to detect +indent size and them multiply it with the current node depth. + +### Tests + +A stringifier must have tests too. + +You can use unit and integration test cases from [PostCSS Parser Tests]. +Just compare input CSS with CSS after your parser and stringifier. + +[PostCSS Parser Tests]: https://github.com/postcss/postcss-parser-tests |