@pandacss/error - npm Package Versions

[0.25.0] - 2024-01-06

Fixed

• Fix config dependencies detection by re-introducing the file tracing utility
• Fix issue where base doesn't work within css function

css({
  // This didn't work, but now it does
  base: { color: 'blue' },
})

Added

• Add a way to generate the staticCss for all recipes (and all variants of each recipe)

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // ...
  staticCss: {
    recipes: '*', // ✅ will generate the staticCss for all recipes
  },
})

• Support token reference syntax when authoring styles object, text styles and layer styles.

import { css } from '../styled-system/css'

const styles = css({
  border: '2px solid {colors.primary}',
})

This will resolve the token reference and convert it to css variables.

.border_2px_solid_\{colors\.primary\} {
  border: 2px solid var(--colors-primary);
}

The alternative to this was to use the token(...) css function which will be resolved.

token(...) vs {...}

Both approaches return the css variable

const styles = css({
  // token reference syntax
  border: '2px solid {colors.primary}',
  // token function syntax
  border: '2px solid token(colors.primary)',
})

However, The token(...) syntax allows you to set a fallback value.

const styles = css({
  border: '2px solid token(colors.primary, red)',
})