@pandacss/types - npm Package Versions

[0.39.0] - 2024-04-29

Fixed

• Fix issue where mergeCss import in styled-system/jsx/* could be unused.
• Fix issue where float property did not allow inherited values (auto, initial, none, etc.)
• Fix issue where animationName property was not connected to theme.keyframes, as a result, no autocompletion was available.

Added

• Add support for more typography related properties in text styles such as fontFeatureSettings, fontPalette, etc.
• Allow passing arrays of SystemStyleObject to the css(xxx, [aaa, bbb, ccc], yyy) fn

This is useful when you are creating your own styled component and want to benefit from the recent css array property support.

import { css } from 'styled-system/css'
import type { HTMLStyledProps } from 'styled-system/types'

type ButtonProps = HTMLStyledProps<'button'>

export const Button = ({ css: cssProp = {}, children }: ButtonProps) => {
-  const className = css(...(Array.isArray(cssProp) ? cssProp : [cssProp]))
+  const className = css(cssProp)
  return <button className={className}>{children}</button>
}

Changed

• BREAKING 💥

Remove linkBox pattern in favor of using adding position: relative when using the linkOverlay pattern.

Before

import { linkBox, linkOverlay } from 'styled-system/patterns'

const App = () => {
  return (
    <div className={linkBox()}>
      <img src="https://via.placeholder.com/150" alt="placeholder" />
      <a href="#" className={linkOverlay()}>
        Link
      </a>
    </div>
  )
}

After

import { css } from 'styled-system/css'
import { linkOverlay } from 'styled-system/patterns'

const App = () => {
  return (
    <div className={css({ pos: 'relative' })}>
      <img src="https://via.placeholder.com/150" alt="placeholder" />
      <a href="#" className={linkOverlay()}>
        Link
      </a>
    </div>
  )
}

[0.38.0] - 2024-04-29

Fixed

• Fix css reset regressions where:
  • first letter gets a different color
  • input or select gets a default border
• Fix type import
• Fix Panda imports detection when using tsconfig.baseUrl with an outdir that starts with ./.

Added

• Add least resource used (LRU) cache in the hot parts to prevent memory from growing infinitely
• Add support for deprecating tokens, utilities, patterns and config recipes.

Set the deprecated property to true to enable deprecation warnings. Alternatively, you can also set it to a string to provide a custom migration message.

Deprecating a utility

defineConfig({
  utilities: {
    ta: {
      deprecated: true,
      transform(value) {
        return { textAlign: value }
      },
    },
  },
})

Deprecating a token

defineConfig({
  theme: {
    tokens: {
      spacing: {
        lg: { value: '8px', deprecated: 'use `8` instead' },
      },
    },
  },
})

Deprecating a pattern

defineConfig({
  patterns: {
    customStack: {
      deprecated: true,
    },
  },
})

Deprecating a recipe

defineConfig({
  theme: {
    recipes: {
      btn: {
        deprecated: 'will be removed in v2.0',
      },
    },
  },
})

• Add support for array values in the special css property for the JSX factory and JSX patterns

This makes it even easier to merge styles from multiple sources.

import { Stack, styled } from '../styled-system/jsx'

const HeroSection = (props) => {
  return (
    <Stack css={[{ color: 'blue.300', padding: '4' }, props.css]}>
      <styled.div css={[{ fontSize: '2xl' }, props.hero]}>Hero Section</styled.div>
    </Stack>
  )
}

const App = () => {
  return (
    <>
      <HeroSection css={{ backgroundColor: 'yellow.300' }} hero={css.raw({ fontSize: '4xl', color: 'red.300' })} />
    </>
  )
}

should render something like:

<div class="d_flex flex_column gap_10px text_blue.300 p_4 bg_yellow.300">
  <div class="fs_4xl text_red.300">Hero Section</div>
</div>