CSS-in-JS
← Animationsyank.design
styled-components Recovery
production · index.html + style tag
<button class="sc-eDIuTw kBhWFq">
Click me
</button>
<style>
.sc-eDIuTw {
display: inline-flex;
padding: 8px 16px;
border-radius: 6px;
font-weight: 600;
}
.kBhWFq {
background: #007aff;
color: white;
}
.kBhWFq:hover {
background: #066ee0;
}
</style>
matching bundle calls
const e = styled("button")`
  display: inline-flex;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
`;
const r = styled(e)`
  background: ${p => p.variant === "primary" ? "#007aff" : "#666"};
  color: white;
  &:hover { background: #066ee0; }
`;
Base class
sc-eDIuTw
Extended class
kBhWFq
Props detectedvariant:"primary"|"secondary"
AST · template literal call match
recovered · components/Button.tsxreadable
2 styled components · variant prop inferred

CSS-in-JS

styled-components and emotion compile to hash class names like .sc-eDIuTw. yank correlates each runtime class to its bundle call signature, infers prop types from conditional expressions, and emits the styled definitions verbatim — variants and all.