🐼 Panda v0.35.0

[anubra266]

To upgrade to v0.35.0:

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

What's Changed

Fixed

• Fix negative semanticTokens generation

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  tokens: {
    spacing: {
      1: { value: '1rem' },
    },
  },
  semanticTokens: {
    spacing: {
      lg: { value: '{spacing.1}' },
    },
  },
})

Will now correctly generate the negative value:

"spacing.-1" => "calc(var(--spacing-1) * -1)",
- "spacing.-lg" => "{spacing.1}",
+ "spacing.-lg" => "calc(var(--spacing-lg) * -1)",

• Fix extraction of JSX styled factory when using namespace imports

import * as pandaJsx from '../styled-system/jsx'

// ✅ this will work now
pandaJsx.styled('div', { base: { color: 'red' } })
const App = () => <pandaJsx.styled.span color="blue">Hello</pandaJsx.styled.span>

Added

• Allow using ! or !important when using strictTokens: true (without TS throwing an error)
• Add missing reducers to properly return the results of hooks for config:resolved and parser:before
• Add missing methods for ParserResultInterface (which can be used in the parser:after hook to dynamically add
  extraction results from your own logic, like using a custom parser)
• Add allow config option in postcss plugin.
• Add an optional className key in sva config which will can be used to target slots in the DOM.

Each slot will contain a ${className}__${slotName} class in addition to the atomic styles.

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

const button = sva({
  className: 'btn',
  slots: ['root', 'text'],
  base: {
    root: {
      bg: 'blue.500',
      _hover: {
        // v--- 🎯 this will target the `text` slot
        '& .btn__text': {
          color: 'white',
        },
      },
    },
  },
})

export const App = () => {
  const classes = button()
  return (
    <div className={classes.root}>
      <div className={classes.text}>Click me</div>
    </div>
  )
}

The plugin won't parse css files in node modules. This config option lets you opt out of that for some paths.

//postcss.config.cjs

module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {
      allow: [/node_modules\/.embroider/],
    },
  },
}

Changed

• Change the styled-system/token JS token function to use raw value for semanticToken that do not have conditions
  other than base

export default defineConfig({
  semanticTokens: {
    colors: {
      blue: { value: 'blue' },
      green: {
        value: {
          base: 'green',
          _dark: 'white',
        },
      },
      red: {
        value: {
          base: 'red',
        },
      },
    },
  },
})

This is the output of the styled-system/token JS token function:

const tokens = {
    "colors.blue": {
-     "value": "var(--colors-blue)",
+     "value": "blue",
      "variable": "var(--colors-blue)"
    },
    "colors.green": {
      "value": "var(--colors-green)",
      "variable": "var(--colors-green)"
    },
    "colors.red": {
-     "value": "var(--colors-red)",
+     "value": "red",
      "variable": "var(--colors-red)"
    },
}