@pandacss/[email protected]

Minor Changes

• 8430490: Improve performance, mostly for the CSS generation by removing a lot of postcss usage (and plugins).

  Public changes:

  • Introduce a new config.lightningcss option to use lightningcss (currently disabled by default) instead of
    postcss.
  • Add a new config.browserslist option to configure the browserslist used by lightningcss.
  • Add a --lightningcss flag to the panda and panda cssgen command to use lightningcss instead of postcss for
    this run.

  Internal changes:

  • markImportant fn from JS instead of walking through postcss AST nodes
  • use a fork of stitches stringify function instead of postcss-css-in-js to write the CSS string from a JS
    object
  • only compute once TokenDictionary properties
  • refactor serializeStyle to use the same code path as the rest of the pipeline with StyleEncoder / StyleDecoder
    and rename it to transformStyles to better convey what it does

• bee3ec8: Add support for aspect ratio tokens in the panda config or preset. Aspect ratio tokens are used to define
  the aspect ratio of an element.

  export default defineConfig({
    // ...
    theme: {
      extend: {
        // add aspect ratio tokens
        tokens: {
          aspectRatios: {
            '1:1': '1',
            '16:9': '16/9',
          },
        },
      },
    },
  })

  Here's what the default aspect ratio tokens in the base preset looks like:

  {
    "square": { "value": "1 / 1" },
    "landscape": { "value": "4 / 3" },
    "portrait": { "value": "3 / 4" },
    "wide": { "value": "16 / 9" },
    "ultrawide": { "value": "18 / 5" },
    "golden": { "value": "1.618 / 1" }
  }

  Breaking Change

  The built-in token values has been removed from the aspectRatio utility to the @pandacss/preset-base as a token.

  For most users, this change should be a drop-in replacement. However, if you used a custom preset in the config, you
  might need to update it to include the new aspect ratio tokens.

Patch Changes

• Updated dependencies [8430490]
  • @pandacss/[email protected]