chakra-ui/panda @pandacss/parser@0.15.4

on GitHub

Patch Changes

• bf0e6a3: Fix issues with class merging in the styled factory fn for Qwik, Solid and Vue.

• 69699ba: Improved styled factory by adding a 3rd (optional) argument:

  interface FactoryOptions<TProps extends Dict> {
    dataAttr?: boolean
    defaultProps?: TProps
    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
  }

  • Setting dataAttr to true will add a data-recipe="{recipeName}" attribute to the element with the recipe name.
    This is useful for testing and debugging.

  import { styled } from '../styled-system/jsx'
  import { button } from '../styled-system/recipes'
  
  const Button = styled('button', button, { dataAttr: true })
  
  const App = () => (
    <Button variant="secondary" mt="10px">
      Button
    </Button>
  )
  // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>

  • defaultProps allows you to skip writing wrapper components just to set a few props. It also allows you to locally
    override the default variants or base styles of a recipe.

  import { styled } from '../styled-system/jsx'
  import { button } from '../styled-system/recipes'
  
  const Button = styled('button', button, {
    defaultProps: {
      variant: 'secondary',
      px: '10px',
    },
  })
  
  const App = () => <Button>Button</Button>
  // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>

  • shouldForwardProp allows you to customize which props are forwarded to the underlying element. By default, all
    props except recipe variants and style props are forwarded.

  import { styled } from '../styled-system/jsx'
  import { button } from '../styled-system/recipes'
  import { isCssProperty } from '../styled-system/jsx'
  import { motion, isValidMotionProp } from 'framer-motion'
  
  const StyledMotion = styled(
    motion.div,
    {},
    {
      shouldForwardProp: (prop, variantKeys) =>
        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
    },
  )

• 3a04a92: Fix static extraction of the
  Array Syntax when used with runtime
  conditions

  Given a component like this:

  function App() {
    return <Box py={[2, verticallyCondensed ? 2 : 3, 4]} />
  }

  the py value was incorrectly extracted like this:

   {
      "py": {
          "1": 2,
      },
  },
  {
      "py": {
          "1": 3,
      },
  },

  which would then generate invalid CSS like:

  .paddingBlock\\\\:1_2 {
    1: 2px;
  }
  
  .paddingBlock\\\\:1_3 {
    1: 3px;
  }

  it's now correctly transformed back to an array:

  {
    "py": {
  -    "1": 2,
  +   [
  +       undefined,
  +       2,
  +   ]
    },
  },
  {
    "py": {
  -    "1": 3,
  +   [
  +       undefined,
  +       3,
  +   ]
    },
  },

  which will generate the correct CSS

  @media screen and (min-width: 40em) {
    .sm\\\\:py_2 {
      padding-block: var(--spacing-2);
    }
  
    .sm\\\\:py_3 {
      padding-block: var(--spacing-3);
    }
  }

• Updated dependencies [abd7c47]

• Updated dependencies [3a04a92]

  • @pandacss/config@0.15.4
  • @pandacss/extractor@0.15.4
  • @pandacss/types@0.15.4
  • @pandacss/is-valid-prop@0.15.4
  • @pandacss/logger@0.15.4
  • @pandacss/shared@0.15.4