[Panda] Typescript issues

[JanStevens]

Hi,

Using the following panda config with:

• typescript 5.2.2 (or 5.3.3 doesnt matter)
• @pandacss/dev 0.22.1
• @park-ui/panda-preset 0.26.1
• next 14.0.4

export default defineConfig({
  // Whether to use css reset
  preflight: true,
  presets: [
    '@pandacss/preset-panda',
    createPreset({
      accentColor: 'amber',
      grayColor: 'sand',
      borderRadius: 'md',
    }),
  ],

  // Where to look for your css declarations
  include: [
    './src/components/**/*.{ts,tsx,js,jsx}',
    './src/app/**/*.{ts,tsx,js,jsx}',
  ],

  // Files to exclude
  exclude: [],

  theme: {
    extend: {
      tokens: {
        fonts: {
          philosopher: { value: 'var(--font-philosopher), sans-serif' },
          pirataOne: { value: 'var(--font-pirate-one)' },
        },
      },
      recipes: {
        heading: {
          base: {
            letterSpacing: '0 !important',
          },
        },
      },
    },
  },
  // some global styles, not really relevant
  globalCss,
  jsxFramework: 'react',
  // The output directory for your css system
  outdir: 'styled-system',
});

tsconfig for reference

{
  "compilerOptions": {
    "target": "ESNEXT",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      },
    ],
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "sourceMap": true,
    "forceConsistentCasingInFileNames": true,
    "paths": {
      "@style/*": ["../styled-system/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "styled-system"],
  "exclude": ["node_modules"]
}

I receive 2 typescript issues:

Expression produces a union type that is too complex to represent.

 56 export default defineConfig({
                   ~~~~~~~~~~~~~~
 57   // Whether to use css reset
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
... 
 98   outdir: 'styled-system',
    ~~~~~~~~~~~~~~~~~~~~~~~~~~
 99 });
    ~~

And second one specifically on the createPreset from @park-ui/panda-preset

error TS2322: Type 'Preset' is not assignable to type 'string | Preset | Promise<Preset>'.
  Type 'import("node_modules/@park-ui/panda-preset/node_modules/@pandacss/types/dist/config").Preset' is not assignable to type 'import("node_modules/@pandacss/types/dist/config").Preset'.
    Types of property 'utilities' are incompatible.
      Type 'import("node_modules/@park-ui/panda-preset/node_modules/@pandacss/types/dist/utility").ExtendableUtilityConfig | undefined' is not assignable to type 'import("node_modules/@pandacss/types/dist/utility").ExtendableUtilityConfig | undefined'.
        Type 'ExtendableUtilityConfig' is not assignable to type 'ExtendableUtilityConfig | undefined'.

 61     createPreset({
        ~~~~~~~~~~~~~~
 62       accentColor: 'amber',
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~
... 
 64       borderRadius: 'md',
    ~~~~~~~~~~~~~~~~~~~~~~~~~
 65     }),

Not sure how I can resolve this or if I did something wrong 🤔

Regards,

[cschroeter]

@JanStevens

thanks for taking your time to create this issue. I could manage to reproduce this under some conditions.

For now please use

    createPreset({
      accentColor: 'teal',
      grayColor: 'sage',
      borderRadius: 'sm',
    }) as any

This will not harm your expericne using Panda CSS since all the auto completion is still available.

[cschroeter]

@JanStevens

I declared @pandacss/dev and @pandacss/types as peer dependencies. This should avoid a version missmatch and this error you described. Please use 0.26.2