fix(codegen): global var key

Author: segunadebayo

.changeset/selfish-emus-own.md

@@ -0,0 +1,5 @@
+---
+'@pandacss/generator': patch
+---
+
+Fix issue where generated type for `CssVarKeys` was incorrect resulting in partial autocompletion

packages/generator/__tests__/generate-style-props.test.ts

@@ -14,8 +14,7 @@ describe('generate property types', () => {
       type CssVars = \`var(--\${string})\`
       type CssVarValue = ConditionalValue<Token | AnyString | (number & {})>
 
-      type CssVarName =  | AnyString
-      type CssVarKeys = \`--\${CssVarName}\`
+      type CssVarKeys = \`--\${string}\` & {}
 
       export type CssVarProperties = {
         [key in CssVarKeys]?: CssVarValue
@@ -7510,8 +7509,7 @@ describe('generate property types', () => {
       type CssVars = \`var(--\${string})\`
       type CssVarValue = ConditionalValue<Token | AnyString | (number & {})>
 
-      type CssVarName =  | AnyString
-      type CssVarKeys = \`--\${CssVarName}\`
+      type CssVarKeys = \`--\${string}\` & {}
 
       export type CssVarProperties = {
         [key in CssVarKeys]?: CssVarValue
@@ -15024,8 +15022,7 @@ describe('generate property types', () => {
       type CssVars = "var(--random-color)" | "var(--button-color)"
       type CssVarValue = ConditionalValue<Token | CssVars | AnyString | (number & {})>
 
-      type CssVarName = "random-color" | "button-color" | AnyString
-      type CssVarKeys = \`--\${CssVarName}\`
+      type CssVarKeys = "--random-color" | "--button-color" | \`--\${string}\` & {}
 
       export type CssVarProperties = {
         [key in CssVarKeys]?: CssVarValue

packages/generator/src/artifacts/types/style-props.ts

@@ -22,8 +22,7 @@ export function generateStyleProps(ctx: Context) {
     type CssVars = ${[cssVars || '`var(--${string})`'].filter(Boolean).join(' | ')}
     type CssVarValue = ConditionalValue<Token${ctx.globalVars.isEmpty() ? '' : ' | CssVars'} | AnyString | (number & {})>
 
-    type CssVarName = ${unionType(ctx.globalVars.names)} | AnyString
-    type CssVarKeys = \`--\${CssVarName}\`
+    type CssVarKeys = ${[...ctx.globalVars.names.map((name) => `"--${name}"`), '`--${string}` & {}'].filter(Boolean).join(' | ')}
 
     export type CssVarProperties = {
       [key in CssVarKeys]?: CssVarValue

packages/studio/styled-system/types/style-props.d.ts

@@ -8,8 +8,7 @@ type AnyString = (string & {})
 type CssVars = `var(--${string})`
 type CssVarValue = ConditionalValue<Token | AnyString | (number & {})>
 
-type CssVarName =  | AnyString
-type CssVarKeys = `--${CssVarName}`
+type CssVarKeys = `--${string}` & {}
 
 export type CssVarProperties = {
   [key in CssVarKeys]?: CssVarValue