@pandacss/config - npm Package Versions

[0.44.0] - 2024-07-22

Fixed

• Ensure globalFontface definitions are merged correctly

Added

• Add a name mandatory key in Preset to make it easy to target one specifically

Changed

• Replace JSX with React.JSX for better React 19 support

[0.43.0] - 2024-07-19

Added

Add support for defining global font face in config and preset

// pandacss.config.js
export default defineConfig({
  globalFontface: {
    Roboto: {
      src: 'url(/fonts/roboto.woff2) format("woff2")',
      fontWeight: '400',
      fontStyle: 'normal',
    },
  },
})

You can also add multiple font src for the same weight

// pandacss.config.js

export default defineConfig({
  globalFontface: {
    Roboto: {
      // multiple src
      src: ['url(/fonts/roboto.woff2) format("woff2")', 'url(/fonts/roboto.woff) format("woff")'],
      fontWeight: '400',
      fontStyle: 'normal',
    },
  },
})

You can also define multiple font weights

// pandacss.config.js

export default defineConfig({
  globalFontface: {
    // multiple font weights
    Roboto: [
      {
        src: 'url(/fonts/roboto.woff2) format("woff2")',
        fontWeight: '400',
        fontStyle: 'normal',
      },
      {
        src: 'url(/fonts/roboto-bold.woff2) format("woff2")',
        fontWeight: '700',
        fontStyle: 'normal',
      },
    ],
  },
})

[0.42.0] - 2024-07-08

Added

• Add support for 4xl border radius token

Changed

• Ensure classnames are unique across utilities to prevent potential clash
• Change recipes className to be optional, both for recipes and slotRecipes, with a fallback to its name.
• Minor changes to the format of the panda analyze --output coverage.json file

import { defineConfig } from '@pandacss/core'

export default defineConfig({
  recipes: {
    button: {
      className: 'button', // 👈 was mandatory, is now optional
      variants: {
        size: {
          sm: { padding: '2', borderRadius: 'sm' },
          md: { padding: '4', borderRadius: 'md' },
        },
      },
    },
  },
})

• [BREAKING] Removed the legacy config.optimize option because it was redundant. Now, we always optimize the generated CSS where possible.

• BREAKING: Remove emitPackage config option,

  tldr: use importMap instead for absolute paths (e.g can be used for component libraries)

  emitPackage is deprecated, it's known for causing several issues:

  • bundlers sometimes eagerly cache the node_modules, leading to panda codegen updates to the styled-system not visible in the browser
  • auto-imports are not suggested in your IDE.
  • in some IDE the typings are not always reflected properly

  As alternatives, you can use:

  • relative paths instead of absolute paths (e.g. ../styled-system/css instead of styled-system/css)
  • use package.json #imports and/or tsconfig path aliases (prefer package.json#imports when possible, TS 5.4 supports them by default) like #styled-system/css instead of styled-system/css https://nodejs.org/api/packages.html#subpath-imports
  • for a component library, use a dedicated workspace package (e.g. @acme/styled-system) and use importMap: "@acme/styled-system" so that Panda knows which entrypoint to extract, e.g. import { css } from '@acme/styled-system/css' https://panda-css.com/docs/guides/component-library