feat: processing multiple beasties containers

[imslepov]

Beasties previously only looked at a single container. This PR allows marking multiple containers with data-beasties-container.

Motivation

Sites usually build pages from nested components that live in different parts of the template tree:

Here AppHeader sits in the layout and Intro is the first block on the page. Both are above the fold, so both need their critical CSS inlined, but they're in separate parts of the tree.

With a single container the option is to wrap both into one shared element. That means changing the existing markup and putting the header and the page content under a common wrapper, which goes against the normal layout/page split and can break styles or semantics.

One alternative is to keep the header in the critical CSS through allowRules, listing its selectors so they're never pruned. That works when you know the exact selectors, but it falls apart when the header is built with CSS Modules or CSS-in-JS. Since class names are generated during the build process, this approach does not offer a guaranteed solution.

With multiple containers you just mark AppHeader and Intro where they already are.

[codspeed-hq]

Merging this PR will degrade performance by 22.65%

⚠️ Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 1 improved benchmark
❌ 1 regressed benchmark
✅ 7 untouched benchmarks

Warning

Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
❌	basic Usage	2.5 ms	5.6 ms	-55.16%
⚡	skip invalid path	5.9 ms	4.4 ms	+33.42%

Tip

Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing imslepov:feat/multiple-containers (7d1295a) with main (90d23e7)}