From 3727be0b99a8fa3e6b14e1d8ab8c059206cb79da Mon Sep 17 00:00:00 2001
From: "Alexis H. Munsayac" <alexis.munsayac@gmail.com>
Date: Sat, 25 Nov 2023 00:36:20 +0800
Subject: [PATCH] Fix global and vars interaction

---
 packages/solid-styled/compiler/plugin.ts             | 10 +++++-----
 .../solid-styled/test/__snapshots__/jsx.test.ts.snap | 12 +++++-------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/solid-styled/compiler/plugin.ts b/packages/solid-styled/compiler/plugin.ts
index 1ff1fe7..2fb917e 100644
--- a/packages/solid-styled/compiler/plugin.ts
+++ b/packages/solid-styled/compiler/plugin.ts
@@ -260,10 +260,7 @@ function processJSXTemplate(
           sheet.count = current;
 
           const computedVars = variables.length
-            ? t.callExpression(
-              generateVars(ctx, path, functionParent),
-              [t.arrowFunctionExpression([], t.objectExpression(variables))],
-            )
+            ? t.arrowFunctionExpression([], t.objectExpression(variables))
             : undefined;
           if (isGlobal) {
             const args: t.Expression[] = [
@@ -293,7 +290,10 @@ function processJSXTemplate(
             );
             statement.insertBefore(t.expressionStatement(
               computedVars
-                ? t.sequenceExpression([setup, computedVars])
+                ? t.sequenceExpression([setup, t.callExpression(
+                  generateVars(ctx, path, functionParent),
+                  [computedVars],
+                )])
                 : setup,
             ));
           }
diff --git a/packages/solid-styled/test/__snapshots__/jsx.test.ts.snap b/packages/solid-styled/test/__snapshots__/jsx.test.ts.snap
index 88b9a19..14dd6cc 100644
--- a/packages/solid-styled/test/__snapshots__/jsx.test.ts.snap
+++ b/packages/solid-styled/test/__snapshots__/jsx.test.ts.snap
@@ -14,8 +14,8 @@ export default function Example() {
 `;
 
 exports[`jsx > should transform dynamic templates 1`] = `
-"import { useSolidStyled as _useSolidStyled } from \\"solid-styled\\";
-import { createCSSVars as _createCSSVars } from \\"solid-styled\\";
+"import { createCSSVars as _createCSSVars } from \\"solid-styled\\";
+import { useSolidStyled as _useSolidStyled } from \\"solid-styled\\";
 const _sheet = \\"c-f0b3b6fa-0\\";
 const _css = \\"h1[s\\\\\\\\:c-f0b3b6fa-0]{color:var(--s-v-f0b3b6fa-1)}\\";
 export default function Example() {
@@ -62,17 +62,15 @@ export default function Example() {
 
 exports[`jsx.global > should transform dynamic templates 1`] = `
 "import { useSolidStyledGlobal as _useSolidStyledGlobal } from \\"solid-styled\\";
-import { createCSSVars as _createCSSVars } from \\"solid-styled\\";
 const _sheet = \\"c-f0b3b6fa-0\\";
 const _css = \\"h1{color:var(--s-v-f0b3b6fa-1)}\\";
 export default function Example() {
-  const _vars = _createCSSVars();
-  _useSolidStyledGlobal(_sheet, 1, _css, _vars(() => ({
+  _useSolidStyledGlobal(_sheet, 1, _css, () => ({
     \\"--s-v-f0b3b6fa-1\\": props.color
-  })));
+  }));
   return <>
           
-          <h1 s:c-f0b3b6fa-0 style={_vars()}>Hello World</h1>
+          <h1 s:c-f0b3b6fa-0>Hello World</h1>
         </>;
 }"
 `;