🐼 Panda v0.15.2

[anubra266]

To upgrade to v0.15.2:

pnpm up "@pandacss/*"
#or
yarn up '@pandacss/*'

What's Changed

Fixed

• Fix issue where studio uses studio config, instead of custom panda config.

Added

• Update supported panda config extensions
• Create custom partial types for each config object property

When bundling the outdir in a library, you usually want to generate type declaration files (d.ts). Sometimes TS will
complain about types not being exported.

• Export all types from {outdir}/types/index.d.ts, this fixes errors looking like this:

src/components/Checkbox/index.tsx(8,7): error TS2742: The inferred type of 'Root' cannot be named without a reference to '../../../node_modules/@acmeorg/styled-system/types/system-types'. This is likely not portable. A type annotation is necessary.
src/components/Checkbox/index.tsx(8,7): error TS2742: The inferred type of 'Root' cannot be named without a reference to '../../../node_modules/@acmeorg/styled-system/types/csstype'. This is likely not portable. A type annotation is necessary.
src/components/Checkbox/index.tsx(8,7): error TS2742: The inferred type of 'Root' cannot be named without a reference to '../../../node_modules/@acmeorg/styled-system/types/conditions'. This is likely not portable. A type annotation is necessary.

• Export generated recipe interfaces from {outdir}/recipes/{recipeFn}.d.ts, this fixes errors looking like this:

src/ui/avatar.tsx (16:318) "AvatarRecipe" is not exported by "styled-system/recipes/index.d.ts", imported by "src/ui/avatar.tsx".
src/ui/card.tsx (2:164) "CardRecipe" is not exported by "styled-system/recipes/index.d.ts", imported by "src/ui/card.tsx".
src/ui/checkbox.tsx (19:310) "CheckboxRecipe" is not exported by "styled-system/recipes/index.d.ts", imported by "src/ui/checkbox.tsx".

• Export type ComponentProps from {outdir}/types/jsx.d.ts, this fixes errors looking like this:

 "ComponentProps" is not exported by "styled-system/types/jsx.d.ts", imported by "src/ui/form-control.tsx".

Changed

• Switch to interface for runtime types
• BREAKING CHANGE: Presets merging order felt wrong (left overriding right presets) and is now more intuitive (right
  overriding left presets)

Note: This is only relevant for users using more than 1 custom defined preset that overlap with each other.

Example:

const firstConfig = definePreset({
  theme: {
    tokens: {
      colors: {
        'first-main': { value: 'override' },
      },
    },
    extend: {
      tokens: {
        colors: {
          orange: { value: 'orange' },
          gray: { value: 'from-first-config' },
        },
      },
    },
  },
})

const secondConfig = definePreset({
  theme: {
    tokens: {
      colors: {
        pink: { value: 'pink' },
      },
    },
    extend: {
      tokens: {
        colors: {
          blue: { value: 'blue' },
          gray: { value: 'gray' },
        },
      },
    },
  },
})

// Final config
export default defineConfig({
  presets: [firstConfig, secondConfig],
})

Here's the difference between the old and new behavior:

{
  "theme": {
    "tokens": {
      "colors": {
        "blue": {
          "value": "blue"
        },
-        "first-main": {
-          "value": "override"
-        },
        "gray": {
-          "value": "from-first-config"
+          "value": "gray"
        },
        "orange": {
          "value": "orange"
        },
+        "pink": {
+            "value": "pink",
+        },
      }
    }
  }
}

[abarani]

After updating to v0.15.2 it seems I can no longer override tokens defined in a preset. Is there something we need to change or is this a regression? It is working well with v0.15.1.

Example:

import { defineConfig, definePreset } from "@pandacss/dev";

const customPreset = definePreset({
  theme: {
    extend: {
      tokens: {
        colors: {
          red: { value: "#ff0000" },
        },
      },
      semanticTokens: {
        colors: {
          accent: { value: "{colors.red}" },
          background: {
            accent: { value: "{colors.accent}" },
          },
        },
      },
    },
  },
});

export default defineConfig({
  presets: ["@pandacss/dev/presets", customPreset],
  theme: {
    extend: {
      tokens: {
        colors: {
          red: { value: "#00ff00" },
        },
      },
    },
  },
});

Results in:

--colors-red: #ff0000;
--colors-accent: var(--colors-red);
--colors-background-accent: var(--colors-accent)

I would expect --colors-red to be #00ff00 instead of #ff0000 or am I missing something? 🤔

[abarani]

I opened issue #1440 to gain more visibility on this.

[astahmer]

yes sorry about that, fixed it here #1442

[abarani]

@astahmer Great, thank you for the quick fix!