jantimon/next-yak

prevent css variables for constants

jantimon opened this issue · 0 comments

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:

  1. show an error if a constant is used as a dynamic property
  2. 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};
    `}}
`