Using properties inside strings should be replaced with the variable value instead of the name

jantimon / next-yak

a streamlined CSS-in-JS solution tailor-made for Next.js, seamlessly combining the expressive power of styled-components syntax with efficient build-time extraction and minimal runtime footprint, ensuring optimal performance and easy integration with existing atomic CSS frameworks like Tailwind CSS

https://yak.js.org

109 stars 3 forks source link

Using properties inside strings should be replaced with the variable value instead of the name #73

Open Mad-Kat opened 6 months ago

Mad-Kat commented 6 months ago

If you use a property inside double quotes, yak should replace the double quotes and the expression with the CSS variable.

So this:

const Input = styled.input<{$placeholder: string}>`
  &::before {
    content: "${p => p.$placeholder}";
  }
`;

should result in:

.Input {
  &::before {
    content: var(--🦬1sstj5p0);
  }
}

but results in:

.Input {
  &::before {
    constent: "var(--🦬1sstj5p0)";
  }
}