Stitches migration questions

[jamie-l-robertson]

Hi all,

im looking to migrate to Panda from Stitches, overall the documentation is great but im having an issue with generic styles.

For context, this will be a component library consumed by other applications that wont use Panda, every component has a css prop that can be used to override with custom styles.

Currently with Stitches i can pass in overriding styles via the css prop where needed, for example: padding: 15px;. However when i try to do this in Panda i can see a class gets added, but no style has been generated, is this possible or do i need to define allowed padding sizes in the config(staticCss)?

Also, within Storybook some props are not being picked up, for example:

<Flex padding="5" borderWidth="1" borderStyle="solid" borderColor="pink">

border width and style, again i see the class is created but not styled are generated, borderColor works as expected. any ideas?

this is my panda config:

import { defineConfig } from '@pandacss/dev'
import colors from './src/styles/colors'
import spacing from './src/styles/spacing'
import fonts from './src/styles/fonts'
import modifiers from './src/styles/modifiers'
import { PandaGlobalStyles } from './src/styles/globalStyles'
import media from './src/styles/mediaQueries'
import * as animations from './src/styles/animations'

export default defineConfig({
  preflight: true, // css reset
  minify: true,

  // Where to look for your css declarations
  include: [
    './src/**/*panda.{js,jsx,ts,tsx}',
    './pages/**/*.panda.{js,jsx,ts,tsx}',
    './src/**/stories/**/*.panda.stories.{js,jsx,ts,tsx}',
  ],
  jsxFramework: 'react',

  // Files to exclude
  exclude: [],
  globalCss: PandaGlobalStyles,

  staticCss: {
    css: [
      {
        properties: {
          padding: ['*'],
          margin: ['*'],
          backgroundColor: ['*'],
          color: ['*'],
          height: ['*'],
          width: ['*'],
          display: ['*'],
          border: ['*'],
          borderWidth: ['*'],
          borderStyle: ['*'],
          borderColor: ['*'],
        },
      },
    ],
  },

  // Useful for theme customization
  theme: {
    tokens: {
      colors,
      spacing,
      fonts: fonts.family,
      fontSizes: fonts.fontSizes,
      fontWeights: fonts.fontWeights,
      letterSpacings: fonts.letterSpacing,
      lineHeights: fonts.lineHeights,
      radii: modifiers.radii,
      shadows: modifiers.shadows,
    },
    extend: {
      breakpoints: media,
      keyframes: {
        ...animations,
      },
    },
  },
  utilities: {
    extend: {
      size: {
        className: 'size',
        values: 'spacing',
        transform: (value: string) => {
          return {
            width: value,
            height: value,
          }
        },
      },
    },
  },
  // The output directory for your css system
  outdir: 'styled-system',
})