prevent css variables for constants
jantimon opened this issue · 0 comments
jantimon commented
right now constants in the same file are converted to css variables.
this is not ideal because it creates more runtime code and the additional html attributes decrease the code readability.
possible solutions:
- show an error if a constant is used as a dynamic property
- use the babel plugin to replaces the constants with the values
possibly blocked by: #51
an edge case are nested literals, where it becomes hard to distinguish constants from runtime values
const red = '#ff0000';
const Button = styled.button`
${({ $primary, $digits }) => {
const indent = $digits * 10 + "px";
return $primary && css`
background-color: #4CAF50;
text-indent: ${indent};
color: ${red};
`}}
`