User-defined breakpoints produce TypeScript error: Object literal may only specify known properties, and 'xxsOnly' does not exist in type 'SystemStyleObject'. ts(2353)

[lolmaus]

Hi! I'm trying to use PandaCSS in a SvelteKit app.

According to the Customising Breakpoints, I have updated my panda.config.js as follows:

import { defineConfig } from '@pandacss/dev';

export default defineConfig({
  // Whether to use css reset
  preflight: true,
  strictTokens: true,
  strictPropertyValues: true,

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

  // Files to exclude
  exclude: [],

  // Useful for theme customization
  theme: {
    extend: {
      breakpoints: {
        xxs: '0',
        xs: '200px',
        sm: '400px',
        md: '600px',
        lg: '800px',
        xl: '1000px',
        '2xl': '1200px',
        '3xl': '1400px',
      },
    },
  },

  // The output directory for your css system
  outdir: 'styled-system',
});

I'm trying to use a breakpoint like this:

  <input
    type="checkbox"

    class={css({
        position: 'fixed',
        clip: 'rect(0,0,0,0)',

        lg: {
          color: 'red',
          width: '64rem',
        },
        mdToXl: {
          color: 'blue',
        },
        xxsOnly: {
          color: 'palegreen',
        },
    })}
  />

Default breakpoints work correctly. The custom breakpoint works in the browser but fails TypeScript check with:

TypeScript error: Object literal may only specify known properties, and 'xxsOnly' does not exist in type 'SystemStyleObject'. ts(2353)

Please help me resolve this.

[anubra266]

@lolmaus An online reproduction on codesandbox or the panda playground would help, there's no way to debug the picture. Thanks

[lolmaus]

@anubra266 Here you are:
https://github.com/lolmaus/pandacss-breakpoint-type-issue/blob/5461568182e5542e1a59fe415ee3bae551c83fe0/src/routes/+page.svelte#L12

I have ensured that it does work in the browser. The issue is with TypeScript only.

[anubra266]

@lolmaus I simply opened your repo as it is in codespaces, and there's no issue

[lolmaus]

Ok, so I ran pnpm prepare locally and the issue got resolved.

The Responsive Design section of the documentation does not mention that panda codegen must be run after adding a breakpoint.

Please consider this a documentation issue.