The home hero has an aurora background with a noise overlay that sits in .hero-v5::after as an inline data URI. The about page wanted the same overlay. The lazy option was to copy and paste the data URI into AboutPhotoHero.astro. That works exactly once. The next time I tweak the noise on the home, the about page drifts.
The shipped solution is a placeholder. AboutPhotoHero.astro ships with the literal string NOISE_URL_PLACEHOLDER inside its CSS. ship.sh runs a small Python step that opens src/styles/hero.css, regexes out the background-image value from .hero-v5::after, and substitutes it into the component before writing the file. The replacement is byte-for-byte. If the regex fails to match, the script exits with a clear error and the branch never gets cut.
This is one of those choices that looks like over-engineering until you imagine the alternative. Without the extraction, the data URI lives twice. Twice is the number that creates inconsistency. The next person to touch the hero file (probably me, three months later) will update one and not the other.
There’s a related decision tucked inside: the extraction happens at install time, not at runtime. I could have made hero-v5-aurora a shared component and imported it in both places. I chose not to, because the about hero is one-of-one. It will never need to vary. A runtime abstraction would have been weight for a single caller.
The principle: when two surfaces need to look identical, pick one as the source. Extract from it. Never paste.