A shortcut like:
shortcuts: {
'btn-primary': 'bg-accent text-white hover:bg-accent-2',
}generates only .btn-primary { background-color: var(--accent); color: #fff; } — the hover:bg-accent-2 part produces no CSS at all (expected: a .btn-primary:hover { background-color: var(--accent2) } rule). Same for focus:/active: variants. No warning is emitted, so an entire design system's interactive states can silently not exist — this is exactly what happened in stacksjs/ts-analytics: every shortcut-styled button was hover-dead, and standalone hover:* utilities in markup generate fine, which masks the gap.
Verified by diffing the generated CSS: 9 of 10 shortcut hover variants missing (the one present came from hand-written CSS, not the shortcut).
Workaround shipped in ts-analytics: hand-written :hover/:active rules alongside the shortcuts. Ask: expand variants inside shortcut definitions into pseudo-class rules on the shortcut selector — or warn loudly when dropping them.
A shortcut like:
generates only
.btn-primary { background-color: var(--accent); color: #fff; }— thehover:bg-accent-2part produces no CSS at all (expected: a.btn-primary:hover { background-color: var(--accent2) }rule). Same for focus:/active: variants. No warning is emitted, so an entire design system's interactive states can silently not exist — this is exactly what happened in stacksjs/ts-analytics: every shortcut-styled button was hover-dead, and standalonehover:*utilities in markup generate fine, which masks the gap.Verified by diffing the generated CSS: 9 of 10 shortcut hover variants missing (the one present came from hand-written CSS, not the shortcut).
Workaround shipped in ts-analytics: hand-written
:hover/:activerules alongside the shortcuts. Ask: expand variants inside shortcut definitions into pseudo-class rules on the shortcut selector — or warn loudly when dropping them.