Open
Description
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:
const StyledComponent = 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:
const StyledComponent = 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
Metadata
Metadata
Assignees
Labels
No labels