@soyleninjs/postcss-flow/postcss-flow.min.js

PostCSS plugin for creating fluid and responsive CSS values with granular breakpoint control using the flow() function

function flow(s,e){const t=e.split(",").map((s=>{const[e,t,l]=s.trim().split("-").map(Number);return{value:e,vw:t,isFluid:void 0===l}})).sort(((s,e)=>e.vw-s.vw)),l=s.prop,o=s.parent.selector;let c="",i="";const p=s=>{c+=`${l}: ${s}\n`},n=(s,e)=>{i+=`@media (width <= ${e}px) { ${o} {\n`,i+=`${l}: ${s}\n`,i+="}}\n"};return t.length>1?t.forEach(((s,e)=>{if(e===t.length-1&&t[e-1].isFluid)return;if(e>0&&t[e-1].isFluid&&!s.isFluid)return;const l=t[e+1];if(l){const t=l.value,o=s.value,c=l.vw,i=s.vw;if(s.isFluid)if(t>o){const l=`clamp(${o}px, calc(${o}px + (${t} - ${o}) * ((100vw - ${i}px) / ${c-i})), ${t}px);`;e>0?n(l,s.vw):p(l)}else{const l=`clamp(${t}px, calc(${t}px + (${o} - ${t}) * ((100vw - ${c}px) / ${i-c})), ${o}px);`;e>0?n(l,s.vw):p(l)}else{const t=`${s.value}px;`;e>0?n(t,s.vw):p(t)}}else{const t=`${s.value}px;`;e>0?n(t,s.vw):p(t)}})):p(`${t[0].value}px;`),{cssProperty:c,cssMediaQueries:i}}module.exports=(s={})=>({postcssPlugin:"postcss-flow",Declaration(s){const e=s.value.match(/^flow\((.+)\)$/);if(e){const{cssProperty:t,cssMediaQueries:l}=flow(s,e[1]);s.parent.after(l),s.replaceWith(t)}}}),module.exports.postcss=!0;