Improve dynamic value error message

[Mad-Kat]

Closes: #208

Error message before:

  x The value for variable "$pageHeaderHeight" could not be found in the top scope
    ,-[input.js:17:1]
 16 |     ` : css`
 17 |       margin-top: ${$pageHeaderHeight}px;
    :                     ^^^^^^^^^^^^^^^^^
 18 |     `};
    `----

Error message afterwards:

  x The shorthand access to the variable "$pageHeaderHeight" is not allowed in a nested expression.
  | To be able to use the property turn it into a CSS variable by wrapping it in a function:
  | 
  | ${() => $pageHeaderHeight};
  | 
    ,-[input.js:17:1]
 16 |     ` : css`
 17 |       margin-top: ${$pageHeaderHeight}px;
    :                     ^^^^^^^^^^^^^^^^^
 18 |     `};
    `----

[changeset-bot]

🦋 Changeset detected

Latest commit: 8781a8c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
yak-swc	Patch
next-yak	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codspeed-hq]

CodSpeed Performance Report

Merging #212 will not alter performance

_{Comparing improve-dynamic-value-error-message (8781a8c) with main (94354f3)}

Summary

✅ 2 untouched benchmarks

[jantimon]

it could have a false positive if there is a typo in a constant name - but I guess that’s handled by typescript anyway