We renamed a set of CSS classes with a clearly stated scope: only the handful starting with a certain prefix.
Afterward, three components had lost their styles. They weren’t on the rename list.
Why
The name we changed happened to be the beginning of three other names.
Batch replace recognizes characters, not meaning. To it, .mz-card-meta is just .mz-card with a few extra letters on the end. It has no idea they’re two different things.
Why every check passed
Because what came out was valid.
The stylesheet’s syntax was fine. It parsed, loaded and applied. It just applied to a different element, or to nothing.
The compiler, the linter, the syntax check: none of them has anything to say about this. Only your eyes can catch it, and you have to know which page to look at first.
What we do now
Every replacement is anchored. The class name has to be followed by a quote, a space or a curly brace, not just any character.
We do a dry run first. Print every match with the lines around it, read through it, then write the change for real. That takes about 30 seconds.
We also think a little longer when naming. If a name could end up as the start of another name, we change it right then. A name can look hierarchical without a machine being able to tell.
