A bug report rolled in late on a Friday. The primary call to action on our checkout page was completely invisible. Someone had deleted a colour token in Figma. Our automated pipeline updated the JSON file in our repository. The global CSS variables updated perfectly. But a React component deeper in the tree still referenced the old variable name. The browser could not find it. It fell back to transparent. We lost real money because of a simple typo in a token name.

CSS variables are brilliant. They make theming so easy. You can swap a whole colour palette just by changing a class on the body tag. But they have a massive flaw. If you reference a variable that does not exist, the browser just ignores it. There is no build error. There is no warning in the console. You just get a silent failure.

In a large codebase, this is terrifying. Designers rename things. Tokens get deprecated. And you have no way of knowing which components are still relying on those dead tokens.…