chakra-ui/panda @pandacss/generator@0.21.0

on GitHub

Minor Changes

• 26e6051: Add an escape-hatch for arbitrary values when using config.strictTokens, by prefixing the value with [
  and suffixing with ], e.g. writing [123px] as a value will bypass the token validation.

  import { css } from '../styled-system/css'
  
  css({
    // @ts-expect-error TS will throw when using from strictTokens: true
    color: '#fff',
    // @ts-expect-error TS will throw when using from strictTokens: true
    width: '100px',
  
    // ✅ but this is now allowed:
    bgColor: '[rgb(51 155 240)]',
    fontSize: '[12px]',
  })

Patch Changes

• 5b06161: Add a shortcut for the config.importMap option

  You can now also use a string to customize the base import path and keep the default entrypoints:

  {
    "importMap": "@scope/styled-system"
  }

  is the equivalent of:

  {
    "importMap": {
      "css": "@scope/styled-system/css",
      "recipes": "@scope/styled-system/recipes",
      "patterns": "@scope/styled-system/patterns",
      "jsx": "@scope/styled-system/jsx"
    }
  }

• d81dcbe: - Fix an issue where recipe variants that clash with utility shorthand don't get generated due to the
  normalization that happens internally.

  • Fix issue where Preact JSX types are not merging recipes correctly

• 105f74c: Add a way to specify a recipe's staticCss options from inside a recipe config, e.g.:

  import { defineRecipe } from '@pandacss/dev'
  
  const card = defineRecipe({
    className: 'card',
    base: { color: 'white' },
    variants: {
      size: {
        small: { fontSize: '14px' },
        large: { fontSize: '18px' },
      },
    },
    staticCss: [{ size: ['*'] }],
  })

  would be the equivalent of defining it inside the main config:

  import { defineConfig } from '@pandacss/dev'
  
  export default defineConfig({
    // ...
    staticCss: {
      recipes: {
        card: {
          size: ['*'],
        },
      },
    },
  })

• 052283c: Fix vue styled factory internal class merging, for example:

  <script setup>
  import { styled } from '../styled-system/jsx'
  
  const StyledButton = styled('button', {
    base: {
      bgColor: 'red.300',
    },
  })
  </script>
  <template>
    <StyledButton id="test" class="test">
      <slot></slot>
    </StyledButton>
  </template>

  Will now correctly include the test class in the final output.

• Updated dependencies [788aaba]

• Updated dependencies [26e6051]

• Updated dependencies [5b06161]

• Updated dependencies [d81dcbe]

• Updated dependencies [105f74c]

  • @pandacss/core@0.21.0
  • @pandacss/shared@0.21.0
  • @pandacss/types@0.21.0
  • @pandacss/token-dictionary@0.21.0
  • @pandacss/is-valid-prop@0.21.0
  • @pandacss/logger@0.21.0