Fix vars generation to be lazy

lxsmnsyc · Nov 24, 2023 · c25fc94 · c25fc94
1 parent 85eab2a
commit c25fc94
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 17 deletions.
diff --git a/packages/solid-styled/compiler/plugin.ts b/packages/solid-styled/compiler/plugin.ts
@@ -259,11 +259,9 @@ function processJSXTemplate(
           const current = sheet.count + 1;
           sheet.count = current;
 
-          const vars = generateVars(ctx, path, functionParent);
-
           const computedVars = variables.length
             ? t.callExpression(
-              vars,
+              generateVars(ctx, path, functionParent),
               [t.arrowFunctionExpression([], t.objectExpression(variables))],
             )
             : undefined;

diff --git a/packages/solid-styled/test/__snapshots__/jsx.test.ts.snap b/packages/solid-styled/test/__snapshots__/jsx.test.ts.snap
@@ -2,15 +2,13 @@
 
 exports[`jsx > should transform 1`] = `
 "import { useSolidStyled as _useSolidStyled } from \\"solid-styled\\";
-import { createCSSVars as _createCSSVars } from \\"solid-styled\\";
 const _sheet = \\"c-f0b3b6fa-0\\";
 const _css = \\"h1[s\\\\\\\\:c-f0b3b6fa-0]{color:red}\\";
 export default function Example() {
-  const _vars = _createCSSVars();
   _useSolidStyled(_sheet, 1, _css);
   return <>
       
-      <h1 s:c-f0b3b6fa-0 style={_vars()}>Hello World</h1>
+      <h1 s:c-f0b3b6fa-0>Hello World</h1>
     </>;
 }"
 `;
@@ -34,34 +32,30 @@ export default function Example() {
 
 exports[`jsx > should work with multiple templates 1`] = `
 "import { useSolidStyled as _useSolidStyled } from \\"solid-styled\\";
-import { createCSSVars as _createCSSVars } from \\"solid-styled\\";
 const _sheet = \\"c-f0b3b6fa-0\\";
 const _css = \\"h1[s\\\\\\\\:c-f0b3b6fa-0]{color:red}\\";
 const _css2 = \\"h2[s\\\\\\\\:c-f0b3b6fa-0]{color:#00f}\\";
 export default function Example() {
-  const _vars = _createCSSVars();
   _useSolidStyled(_sheet, 1, _css);
   _useSolidStyled(_sheet, 2, _css2);
   return <>
       
-      <h1 s:c-f0b3b6fa-0 style={_vars()}>Hello World</h1>
+      <h1 s:c-f0b3b6fa-0>Hello World</h1>
       
-      <h2 s:c-f0b3b6fa-0 style={_vars()}>Hello World</h2>
+      <h2 s:c-f0b3b6fa-0>Hello World</h2>
     </>;
 }"
 `;
 
 exports[`jsx.global > should transform 1`] = `
 "import { useSolidStyledGlobal as _useSolidStyledGlobal } from \\"solid-styled\\";
-import { createCSSVars as _createCSSVars } from \\"solid-styled\\";
 const _sheet = \\"c-f0b3b6fa-0\\";
 const _css = \\"h1{color:red}\\";
 export default function Example() {
-  const _vars = _createCSSVars();
   _useSolidStyledGlobal(_sheet, 1, _css);
   return <>
       
-      <h1 s:c-f0b3b6fa-0 style={_vars()}>Hello World</h1>
+      <h1 s:c-f0b3b6fa-0>Hello World</h1>
     </>;
 }"
 `;
@@ -85,19 +79,17 @@ export default function Example() {
 
 exports[`jsx.global > should work with multiple 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:red}\\";
 const _css2 = \\"h2{color:#00f}\\";
 export default function Example() {
-  const _vars = _createCSSVars();
   _useSolidStyledGlobal(_sheet, 1, _css);
   _useSolidStyledGlobal(_sheet, 2, _css2);
   return <>
       
-      <h1 s:c-f0b3b6fa-0 style={_vars()}>Hello World</h1>
+      <h1 s:c-f0b3b6fa-0>Hello World</h1>
       
-      <h2 s:c-f0b3b6fa-0 style={_vars()}>Hello World</h2>
+      <h2 s:c-f0b3b6fa-0>Hello World</h2>
     </>;
 }"
 `;