@pandacss/logger - npm Package Versions

[0.51.1] - 2025-01-01

Fixed

Redesigned the recipe report to be more readable and easier to understand. We simplified the JSX and Function columns to be more concise.

BEFORE

╔════════════════════════╤══════════════════════╤═════════╤═══════╤════════════╤═══════════════════╤══════════╗
║ Recipe                 │ Variant Combinations │ Usage % │ JSX % │ Function % │ Most Used         │ Found in ║
╟────────────────────────┼──────────────────────┼─────────┼───────┼────────────┼───────────────────┼──────────╢
║ someRecipe (1 variant) │ 1 / 1                │ 100%    │ 100%  │ 0%         │ size.small        │ 1 file   ║
╟────────────────────────┼──────────────────────┼─────────┼───────┼────────────┼───────────────────┼──────────╢
║ button (4 variants)    │ 7 / 9                │ 77.78%  │ 63%   │ 38%        │ size.md, size.sm, │ 2 files  ║
║                        │                      │         │       │            │ state.focused,    │          ║
║                        │                      │         │       │            │ variant.danger,   │          ║
║                        │                      │         │       │            │ variant.primary   │          ║
╚════════════════════════╧══════════════════════╧═════════╧═══════╧════════════╧═══════════════════╧══════════╝

AFTER

╔════════════════════════╤════════════════╤═══════════════════╤═══════════════════╤══════════╤═══════════╗
║ Recipe                 │ Variant values │ Usage %           │ Most used         │ Found in │ Used as   ║
╟────────────────────────┼────────────────┼───────────────────┼───────────────────┼──────────┼───────────╢
║ someRecipe (1 variant) │ 1 value        │ 100% (1 value)    │ size.small        │ 1 file   │ jsx: 100% ║
║                        │                │                   │                   │          │ fn: 0%    ║
╟────────────────────────┼────────────────┼───────────────────┼───────────────────┼──────────┼───────────╢
║ button (4 variants)    │ 9 values       │ 77.78% (7 values) │ size.md, size.sm, │ 2 files  │ jsx: 63%  ║
║                        │                │                   │ state.focused,    │          │ fn: 38%   ║
║                        │                │                   │ variant.danger,   │          │           ║
║                        │                │                   │ variant.primary   │          │           ║
╚════════════════════════╧════════════════╧═══════════════════╧═══════════════════╧══════════╧═══════════╝

Added

• Add support for panda analyze --output <file>.json to output the analysis results to a file.

[0.51.0] - 2024-12-31

[BREAKING]: Fix issue where Next.js build might fail intermittently due to version mismatch between internal ts-morph and userland typescript.

[0.50.0] - 2024-12-27

Added

• Add support for semantic tokens in composite shadow blur, offsetX, offsetY and spread properties.

This enables the use of semantic tokens in composite shadow properties.

// panda.config.ts

export default defineConfig({
  theme: {
    tokens: {
      // ...
      shadows: {
        sm: {
          value: {
            offsetX: '{spacing.3}',
            offsetY: '{spacing.3}',
            blur: '1rem',
            spread: '{spacing.3}',
            color: '{colors.red}',
          },
        },
      },
    },
  },
})

• Adds support for static analysis of used tokens and recipe variants. It helps to get a birds-eye view of how your design system is used and answers the following questions:

• What tokens are most used?

• What recipe variants are most used?

• How many hardcoded values vs tokens do we have?

panda analyze --scope=<token|recipe>

Still work in progress but we're excited to get your feedback!

Changed

Improve inference of slots in slot recipes when spreading and concatenating slot names.

This handles the following case gracefully:

const styles = sva({
  className: 'foo',
  slots: [...componentAnatomy.keys(), 'additional', 'slots', 'here'],
})

Panda will now infer the slots from the anatomy and add them to the recipe.