fix: make css variable autocomplete work

Author: hyp3rflow

Diff for: .changeset/funny-plums-brake.md

@@ -0,0 +1,5 @@
+---
+'@pandacss/generator': patch
+---
+
+Fix issue where generated `CssVarKeys` type cannot provide autocomplete correctly

Diff for: packages/generator/__tests__/generate-style-props.test.ts

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

Diff for: packages/generator/src/artifacts/types/style-props.ts

@@ -22,8 +22,8 @@ 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 CssVarName = ${unionType(ctx.globalVars.names)}
+    type CssVarKeys = \`--\${CssVarName}\` | \`--\${string}\` & {}
 
     export type CssVarProperties = {
       [key in CssVarKeys]?: CssVarValue

Diff for: packages/studio/styled-system/types/conditions.d.ts

@@ -146,7 +146,7 @@ export interface Conditions {
 	"_open": string
 	/** `&:is([closed], [data-closed], [data-state="closed"])` */
 	"_closed": string
-	/** `&is(:fullscreen, [data-fullscreen])` */
+	/** `&:is(:fullscreen, [data-fullscreen])` */
 	"_fullscreen": string
 	/** `&:is([data-loading], [aria-busy=true])` */
 	"_loading": string

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

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