Support for CSS variable declarations with dynamic property names and values

[jantimon]

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

[nightpool]

I'd love to see a PR with implementation for this, I get this error a lot in my code.