Improve dynamic value error message (#212)

.changeset/cyan-camels-flash.md

@@ -0,0 +1,5 @@
+---
+"yak-swc": patch
+---
+
+Better error message for wrong usage of dynamic properties in nested template

packages/yak-swc/yak_swc/src/lib.rs

@@ -336,9 +336,9 @@ where
               });
             }
           }
-          // A property with a dynamic value
-          // e.g. styled.button`${({$color}) => css`color: ${$color}`};`
-          else {
+          // A property with a dynamic value in the top scope
+          // e.g. styled.button`color: ${myColor};`
+          else if is_top_level {
             HANDLER.with(|handler| {
               handler
                 .struct_span_err(
@@ -350,6 +350,23 @@ where
                 )
                 .emit();
             });
+          // A property with a dynamic value
+          // e.g. styled.button`${({$color}) => css`color: ${$color}`};`
+          } else {
+            HANDLER.with(|handler| {
+                          handler
+                            .struct_span_err(
+                              expr.span(),
+                              &format!(
+                                "The shorthand access to the variable \"{var}\" 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:
+
+${{() => {var}}};\n",
+                                var=scoped_name.id.0
+                              ),
+                            )
+                            .emit();
+                        });
           }
         }
         // Handle inline css literals

packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/input.tsx

@@ -0,0 +1,21 @@
+import { styled, css } from "next-yak";
+
+// example taken from https://github.com/jantimon/next-yak/issues/208 
+
+const spacing = "20px";
+
+const ContainerFluid = styled.div`
+  position: relative;
+  margin: 0 auto;
+  padding-top: ${spacing};
+  max-width: 100%;
+
+  ${({ $isApp, $pageHeaderHeight }) => 
+    $isApp ? css`
+      margin-top: unset;
+    ` : css`
+      margin-top: ${$pageHeaderHeight}px;
+    `};
+
+  margin-top: ${({ $pageHeaderHeight }) => $pageHeaderHeight}px;
+`;

packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.stderr

@@ -0,0 +1,11 @@
+  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 |     `};
+    `----

packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.tsx

@@ -0,0 +1,25 @@
+import { styled, css, __yak_unitPostFix } from "next-yak/internal";
+import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css";
+// example taken from https://github.com/jantimon/next-yak/issues/208 
+const spacing = "20px";
+const ContainerFluid = /*YAK Extracted CSS:
+.ContainerFluid {
+  position: relative;
+  margin: 0 auto;
+  padding-top: 20px;
+  max-width: 100%;
+}
+.ContainerFluid__$isApp {
+  margin-top: unset;
+}
+.ContainerFluid__not_$isApp {
+  margin-top: px;
+}
+.ContainerFluid {
+  margin-top: var(--ContainerFluid__margin-top_m7uBBu);
+}
+*/ /*#__PURE__*/ styled.div(__styleYak.ContainerFluid, ({ $isApp, $pageHeaderHeight })=>$isApp ? /*#__PURE__*/ css(__styleYak.ContainerFluid__$isApp) : /*#__PURE__*/ css(__styleYak.ContainerFluid__not_$isApp), {
+    "style": {
+        "--ContainerFluid__margin-top_m7uBBu": __yak_unitPostFix(({ $pageHeaderHeight })=>$pageHeaderHeight, "px")
+    }
+});