De-duplicate media queries in Embed Optimizer by merging style rules and inserting after optimizing the document

[westonruter]

Depends on #1919

This delays inserting the style rules until after the document has been processed, at the proposed od_finish_template_optimization action. Using this action allows for the style rules to be better deduplicated which cannot be done if the insertions are done during the tag visitor callbacks.

Before:

<style>
@media (width <= 480px) { #embed-optimizer-6040306707fb51ccaafa915c2da8f412 { min-height: 500px; } }
@media (480px < width <= 600px) { #embed-optimizer-6040306707fb51ccaafa915c2da8f412 { min-height: 500px; } }
@media (600px < width <= 782px) { #embed-optimizer-6040306707fb51ccaafa915c2da8f412 { min-height: 500px; } }
@media (782px < width) { #embed-optimizer-6040306707fb51ccaafa915c2da8f412 { min-height: 500px; } }
</style>
<style>
@media (width <= 480px) { #embed-optimizer-96ffd32b51748c70b288af1ef0c14c01 { min-height: 500px; } }
@media (480px < width <= 600px) { #embed-optimizer-96ffd32b51748c70b288af1ef0c14c01 { min-height: 500px; } }
@media (600px < width <= 782px) { #embed-optimizer-96ffd32b51748c70b288af1ef0c14c01 { min-height: 500px; } }
@media (782px < width) { #embed-optimizer-96ffd32b51748c70b288af1ef0c14c01 { min-height: 500px; } }
</style>
<style>
@media (width <= 480px) { #embed-optimizer-f9ff6c9a914366ac3c1aab1994dd8a69 { min-height: 500px; } }
@media (480px < width <= 600px) { #embed-optimizer-f9ff6c9a914366ac3c1aab1994dd8a69 { min-height: 500px; } }
@media (600px < width <= 782px) { #embed-optimizer-f9ff6c9a914366ac3c1aab1994dd8a69 { min-height: 500px; } }
@media (782px < width) { #embed-optimizer-f9ff6c9a914366ac3c1aab1994dd8a69 { min-height: 500px; } }
</style>
<style>
@media (width <= 480px) { #embed-optimizer-14e09ecf70c046be7be89081cd5177e5 { min-height: 500px; } }
@media (480px < width <= 600px) { #embed-optimizer-14e09ecf70c046be7be89081cd5177e5 { min-height: 500px; } }
@media (600px < width <= 782px) { #embed-optimizer-14e09ecf70c046be7be89081cd5177e5 { min-height: 500px; } }
@media (782px < width) { #embed-optimizer-14e09ecf70c046be7be89081cd5177e5 { min-height: 500px; } }
</style>
<style>
@media (width <= 480px) { #embed-optimizer-e806a5174c675c9bfa23015ea21b1634 { min-height: 500px; } }
@media (480px < width <= 600px) { #embed-optimizer-e806a5174c675c9bfa23015ea21b1634 { min-height: 500px; } }
@media (600px < width <= 782px) { #embed-optimizer-e806a5174c675c9bfa23015ea21b1634 { min-height: 500px; } }
@media (782px < width) { #embed-optimizer-e806a5174c675c9bfa23015ea21b1634 { min-height: 500px; } }
</style>
<style>
@media (width <= 480px) { #embed-optimizer-b996918045897470f070f069e28d49b3 { min-height: 500px; } }
@media (480px < width <= 600px) { #embed-optimizer-b996918045897470f070f069e28d49b3 { min-height: 500px; } }
@media (600px < width <= 782px) { #embed-optimizer-b996918045897470f070f069e28d49b3 { min-height: 500px; } }
@media (782px < width) { #embed-optimizer-b996918045897470f070f069e28d49b3 { min-height: 500px; } }
</style>
<style>
@media (width <= 480px) { #embed-optimizer-d94899c490156eced0b281941b6b9d2a { min-height: 500px; } }
@media (480px < width <= 600px) { #embed-optimizer-d94899c490156eced0b281941b6b9d2a { min-height: 500px; } }
@media (600px < width <= 782px) { #embed-optimizer-d94899c490156eced0b281941b6b9d2a { min-height: 500px; } }
@media (782px < width) { #embed-optimizer-d94899c490156eced0b281941b6b9d2a { min-height: 500px; } }
</style>
<style>
@media (width <= 480px) { #embed-optimizer-1638684041243c11efb4fd600a2f43a0 { min-height: 500px; } }
@media (480px < width <= 600px) { #embed-optimizer-1638684041243c11efb4fd600a2f43a0 { min-height: 500px; } }
@media (600px < width <= 782px) { #embed-optimizer-1638684041243c11efb4fd600a2f43a0 { min-height: 500px; } }
@media (782px < width) { #embed-optimizer-1638684041243c11efb4fd600a2f43a0 { min-height: 500px; } }
</style>
<style>
@media (width <= 480px) { #embed-optimizer-2991a426fba8bcbb357e597bb75f154a { min-height: 500px; } }
@media (480px < width <= 600px) { #embed-optimizer-2991a426fba8bcbb357e597bb75f154a { min-height: 500px; } }
@media (600px < width <= 782px) { #embed-optimizer-2991a426fba8bcbb357e597bb75f154a { min-height: 500px; } }
@media (782px < width) { #embed-optimizer-2991a426fba8bcbb357e597bb75f154a { min-height: 500px; } }
</style>

After:

<style>
@media (width <= 480px) {
	#embed-optimizer-6040306707fb51ccaafa915c2da8f412 { min-height: 500px; }
	#embed-optimizer-96ffd32b51748c70b288af1ef0c14c01 { min-height: 500px; }
	#embed-optimizer-f9ff6c9a914366ac3c1aab1994dd8a69 { min-height: 500px; }
	#embed-optimizer-14e09ecf70c046be7be89081cd5177e5 { min-height: 500px; }
	#embed-optimizer-e806a5174c675c9bfa23015ea21b1634 { min-height: 500px; }
	#embed-optimizer-b996918045897470f070f069e28d49b3 { min-height: 500px; }
	#embed-optimizer-d94899c490156eced0b281941b6b9d2a { min-height: 500px; }
	#embed-optimizer-1638684041243c11efb4fd600a2f43a0 { min-height: 500px; }
	#embed-optimizer-2991a426fba8bcbb357e597bb75f154a { min-height: 500px; }
}
@media (480px < width <= 600px) {
	#embed-optimizer-6040306707fb51ccaafa915c2da8f412 { min-height: 500px; }
	#embed-optimizer-96ffd32b51748c70b288af1ef0c14c01 { min-height: 500px; }
	#embed-optimizer-f9ff6c9a914366ac3c1aab1994dd8a69 { min-height: 500px; }
	#embed-optimizer-14e09ecf70c046be7be89081cd5177e5 { min-height: 500px; }
	#embed-optimizer-e806a5174c675c9bfa23015ea21b1634 { min-height: 500px; }
	#embed-optimizer-b996918045897470f070f069e28d49b3 { min-height: 500px; }
	#embed-optimizer-d94899c490156eced0b281941b6b9d2a { min-height: 500px; }
	#embed-optimizer-1638684041243c11efb4fd600a2f43a0 { min-height: 500px; }
	#embed-optimizer-2991a426fba8bcbb357e597bb75f154a { min-height: 500px; }
}
@media (600px < width <= 782px) {
	#embed-optimizer-6040306707fb51ccaafa915c2da8f412 { min-height: 500px; }
	#embed-optimizer-96ffd32b51748c70b288af1ef0c14c01 { min-height: 500px; }
	#embed-optimizer-f9ff6c9a914366ac3c1aab1994dd8a69 { min-height: 500px; }
	#embed-optimizer-14e09ecf70c046be7be89081cd5177e5 { min-height: 500px; }
	#embed-optimizer-e806a5174c675c9bfa23015ea21b1634 { min-height: 500px; }
	#embed-optimizer-b996918045897470f070f069e28d49b3 { min-height: 500px; }
	#embed-optimizer-d94899c490156eced0b281941b6b9d2a { min-height: 500px; }
	#embed-optimizer-1638684041243c11efb4fd600a2f43a0 { min-height: 500px; }
	#embed-optimizer-2991a426fba8bcbb357e597bb75f154a { min-height: 500px; }
}
@media (782px < width) {
	#embed-optimizer-6040306707fb51ccaafa915c2da8f412 { min-height: 500px; }
	#embed-optimizer-96ffd32b51748c70b288af1ef0c14c01 { min-height: 500px; }
	#embed-optimizer-f9ff6c9a914366ac3c1aab1994dd8a69 { min-height: 500px; }
	#embed-optimizer-14e09ecf70c046be7be89081cd5177e5 { min-height: 500px; }
	#embed-optimizer-e806a5174c675c9bfa23015ea21b1634 { min-height: 500px; }
	#embed-optimizer-b996918045897470f070f069e28d49b3 { min-height: 500px; }
	#embed-optimizer-d94899c490156eced0b281941b6b9d2a { min-height: 500px; }
	#embed-optimizer-1638684041243c11efb4fd600a2f43a0 { min-height: 500px; }
	#embed-optimizer-2991a426fba8bcbb357e597bb75f154a { min-height: 500px; }
}
</style>

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 71.37%. Comparing base (5da134c) to head (bb5bd6d).
Report is 60 commits behind head on trunk.

Additional details and impacted files

@@            Coverage Diff             @@
##            trunk    #1923      +/-   ##
==========================================
+ Coverage   71.34%   71.37%   +0.03%     
==========================================
  Files          86       86              
  Lines        7043     7051       +8     
==========================================
+ Hits         5025     5033       +8     
  Misses       2018     2018              

Flag	Coverage Δ
multisite	71.37% <100.00%> (+0.03%)	⬆️
single	40.39% <0.00%> (-0.05%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.