storybook-addon-css-properties/dist/preview.js

Edit CSS properties defined in your component to see how stories react

import {useChannel}from'storybook/preview-api';var h="storybook-addon-css-properties",b="cssVars",S={REQUEST:`${h}/request`};function M(e){return e.startsWith("--")}function v(e){let o={};return Object.entries(e).forEach(([r,s])=>{M(r)?o[r]=s:Object.entries(s).forEach(([t,l])=>{M(t)&&(o[t]=l);});}),o}var i=new Map,d=null,f=null,E=null,T=null,L=(e,o)=>{let r=o.id;E&&E!==r&&T&&F(E,T),E=r,T=d,d=o,A();let s=e();return o?.parameters?.cssVars&&Object.keys(o.parameters.cssVars).length>0&&(i.set(r,{}),w(r),useChannel({[S.REQUEST]:t=>{let c={...i.get(r)||{},...t};i.set(r,c),m(r,c),f||P();}})),s};function V(){new MutationObserver(o=>{let r=false;o.forEach(s=>{if(s.type==="childList"&&s.addedNodes.length>0){for(let n of s.addedNodes)if(n.nodeType===Node.ELEMENT_NODE){let t=n;if(t.matches?.("[data-docs-story], .sb-story")||t.querySelector?.("[data-docs-story], .sb-story")){r=true;break}}}}),r&&i.forEach((s,n)=>{m(n,s);});}).observe(document.body,{childList:true,subtree:true});}function w(e){let o=d?.parameters?.cssVars;if(!o)return;let r=v(o),s={};Object.entries(r).forEach(([t,l])=>{s[t]=l.value||"";});let n=i.get(e)||{};i.set(e,{...n,...s}),m(e,i.get(e)),d?.viewMode==="docs"&&(setTimeout(()=>m(e,i.get(e)),100),setTimeout(()=>m(e,i.get(e)),300)),f||P(),d?.viewMode==="docs"&&V();}function m(e,o){let r=d?.viewMode==="docs",s=d?.parameters?.cssVarsTarget;if(Object.keys(o).length===0)return;let n=[];if(r)if(s){let t=document.querySelectorAll(`[data-docs-story="${e}"], [id="story--${e}"]`);t.length===0?document.querySelectorAll("[data-docs-story], .sb-story").forEach(c=>{c.querySelectorAll(s).forEach(u=>{let p=window.getComputedStyle(u);Object.keys(o).some(y=>p.getPropertyValue(y)||["background","backgroundColor","color"].some(O=>p.getPropertyValue(O).includes(`var(${y})`)))&&n.push(u);});}):t.forEach(l=>{let c=l.querySelectorAll(s);n.push(...Array.from(c));});}else {let t=document.querySelectorAll(`[data-docs-story="${e}"], [id="story--${e}"]`);t.length===0?document.querySelectorAll("[data-docs-story], .sb-story").forEach(c=>{let a=C(c);if(a){let u=window.getComputedStyle(a);Object.keys(o).some(g=>u.getPropertyValue(g)||["background","backgroundColor","color"].some(y=>u.getPropertyValue(y).includes(`var(${g})`)))&&n.push(a);}}):t.forEach(l=>{let c=C(l);c&&n.push(c);});}else if(s){let t=document.querySelector(`#storybook-root ${s}`);t&&(n=[t]);}else {let t=N();t&&(n=[t]);}n.forEach(t=>{Object.entries(o).forEach(([l,c])=>{c?t.style.setProperty(l,c,r?"important":""):t.style.removeProperty(l);});});}function P(){let e=document.getElementById("storybook-root");e&&(f=new MutationObserver(o=>{let r=false;o.forEach(s=>{if(s.type==="childList"&&s.addedNodes.length>0){for(let n of s.addedNodes)if(n.nodeType===Node.ELEMENT_NODE){r=true;break}}}),r&&i.forEach((s,n)=>{m(n,s);});}),f.observe(e,{childList:true,subtree:true}));}function A(){f&&(f.disconnect(),f=null);}function F(e,o){let r=i.get(e);if(!r||!o)return;let s=o?.viewMode==="docs",n=o?.parameters?.cssVarsTarget,t=[];if(s)n?document.querySelectorAll(`[data-docs-story="${e}"], [id="story--${e}"]`).forEach(c=>{let a=c.querySelectorAll(n);t.push(...Array.from(a));}):document.querySelectorAll(`[data-docs-story="${e}"], [id="story--${e}"]`).forEach(c=>{let a=C(c);a&&t.push(a);});else if(n){let l=document.querySelector(`#storybook-root ${n}`);l&&(t=[l]);}else {let l=N();l&&(t=[l]);}t.forEach(l=>{Object.keys(r).forEach(c=>{l.style.removeProperty(c);});}),s||i.delete(e);}function N(){let e=document.getElementById("storybook-root");if(!e)return null;let o=H(e);if(o)return o;let r=R(e);return r||e.firstElementChild}function C(e){let o=H(e);if(o)return o;let r=R(e);return r||e.firstElementChild}function H(e){return document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:r=>{if(r===e)return NodeFilter.FILTER_SKIP;let s=r,n=window.getComputedStyle(s);for(let l=0;l<n.length;l++){let c=n[l];if(c&&c.startsWith("--"))return NodeFilter.FILTER_ACCEPT}let t=["background","backgroundColor","color","border","borderColor"];for(let l of t){let c=n.getPropertyValue(l);if(c&&c.includes("var(--"))return NodeFilter.FILTER_ACCEPT}return NodeFilter.FILTER_SKIP}}).nextNode()}function R(e){let o=null,r=0,s=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:n=>{if(n===e)return NodeFilter.FILTER_SKIP;let t=n,l=typeof t.className=="string"&&t.className.trim()!=="",c=typeof t.id=="string"&&t.id!=="";if(l||c){let a=0,u=t.parentElement;for(;u&&u!==e;)a++,u=u.parentElement;return a>r&&(r=a,o=t),NodeFilter.FILTER_ACCEPT}return NodeFilter.FILTER_SKIP}});for(;s.nextNode(););return o}var $={decorators:[L],initialGlobals:{[b]:{}}},K=$;export{K as default};//# sourceMappingURL=preview.js.map
//# sourceMappingURL=preview.js.map