You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Support for CSS variable declarations with dynamic property names and values #25
When using CSS custom properties (CSS variables) with styled-components, there are cases where we need both the property name and value to be dynamic expressions. Currently, the plugin throws a syntax error for this use case.
Works:
constStyledComponent=styled.div`${prop}: red; // Dynamic property name works color: ${value}; // Dynamic value works${varName}: blue; // Dynamic CSS variable name works color: var(--${name}); // Dynamic CSS variable reference works`
Fails with } expected error:
constStyledComponent=styled.div`${varName}: ${value}; // Error when both property name and value are dynamic`
Could you please add support for cases where both the property name and value are template expressions?
I can submit a PR with the implementation if this helps
Activity
nightpool commentedon Nov 5, 2025
I'd love to see a PR with implementation for this, I get this error a lot in my code.
quantizor commentedon Sep 28, 2026
Closing as fixed by #33 — @usercao confirmed the merged changes cover dynamic CSS variable property names and values.