Nested template literals with conditional expressions don't work if the CSS property is defined within the expression

[pancaspe87]

An error is thrown when having nested template literals with conditional expressions where the CSS property is defined within the expression

Given

 ${(props) =>
    props.isPrimary
      ? `
         color: green;
         ${({ isBolded }) => (isBolded ? 'font-weight: bold' :'font-weight: thin')};
       `
     : 'color: red'};

This will throw an error.

Given

 ${(props) =>
    props.isPrimary
      ? `
         color: green;
         font-weight: ${({ isBolded }) => (isBolded ? ' bold' :'thin')};
       `
     : 'color: red'};

This works, but it currently generates a CSS variable instead of classes. Having css variables instead of classes is a known issue and currently under investigation.

Expected outcome Both cases should work and should generate CSS classes

Screenshots