A component knows which script or stylesheet it needs; the layout knows where those belong. {push 'name'} adds rendered text to a named stack where the component is used, and {stack 'name'} prints the stack - in the <head>, say, far above the components that fill it.

<p>Stylesheets this page needs:</p>
<ul>{stack 'styles'}</ul>

{sequence '1..3', name='n'}
  {push 'styles', once='badge'}<li>badge.css</li>{/push}
  <span class="badge">badge {$n}</span>
{/sequence}

{push 'styles'}<li>footer.css</li>{/push}

Filled in at the end

A page renders from top to bottom, so a {stack} in the head comes out before anything below it has pushed. It prints a marker instead, and the marker is replaced by the stack once the whole page has rendered: it gets every push of the page, made above it or below it, in the order they were made.

once

• once='chart' - the first push of that key is kept and a later one is skipped before its content renders, so a component used fifty times renders its script tag once. Keys are per stack.
• once without a key - a push whose rendered text the stack already holds is dropped.

Where pushes come from

• The content of a push renders where the tag stands, with the variables of that spot - inside a loop, the row's.
• A plain {page} or {code} pass adds to the page's stacks; a sandbox, clean or reset pass keeps its own.
• A push inside a {cache} section is stored with the section and made again on every hit.
• From PHP: padStackPush ( 'scripts', $html, $once ).