@pandacss/error - npm Package Versions

[0.24.0] - 2024-01-02

Fixed

• Fix regression in previous implementation that increased memory usage per extraction, leading to slower performance over time

Added

Add patterns to config.staticCss

Changed

• Boost style extraction performance by moving more work away from postcss
• Using a hashing strategy, the compiler only computes styles/classname once per style object and prop-value-condition pair
• Fix the special [*] rule which used to generate the same rule for every breakpoints, which is not what most people need (it's still possible by explicitly using responsive: true).

const card = defineRecipe({
  className: 'card',
  base: { color: 'white' },
  variants: {
    size: {
      small: { fontSize: '14px' },
      large: { fontSize: '18px' },
    },
    visual: {
      primary: { backgroundColor: 'blue' },
      secondary: { backgroundColor: 'gray' },
    },
  },
})

export default defineConfig({
  // ...
  staticCss: {
    recipes: {
      card: ['*'], // this

      // was equivalent to:
      card: [
        // notice how `responsive: true` was implicitly added
        { size: ['*'], responsive: true },
        { visual: ['*'], responsive: true },
      ],

      //   will now correctly be equivalent to:
      card: [{ size: ['*'] }, { visual: ['*'] }],
    },
  },
})

Here's the diff in the generated CSS:

@layer recipes {
  .card--size_small {
    font-size: 14px;
  }

  .card--size_large {
    font-size: 18px;
  }

  .card--visual_primary {
    background-color: blue;
  }

  .card--visual_secondary {
    background-color: gray;
  }

  @layer _base {
    .card {
      color: var(--colors-white);
    }
  }

-  @media screen and (min-width: 40em) {
-    -.sm\:card--size_small {
-      -font-size: 14px;
-    -}
-    -.sm\:card--size_large {
-      -font-size: 18px;
-    -}
-    -.sm\:card--visual_primary {
-      -background-color: blue;
-    -}
-    -.sm\:card--visual_secondary {
-      -background-color: gray;
-    -}
-  }

-  @media screen and (min-width: 48em) {
-    -.md\:card--size_small {
-      -font-size: 14px;
-    -}
-    -.md\:card--size_large {
-      -font-size: 18px;
-    -}
-    -.md\:card--visual_primary {
-      -background-color: blue;
-    -}
-    -.md\:card--visual_secondary {
-      -background-color: gray;
-    -}
-  }

-  @media screen and (min-width: 64em) {
-    -.lg\:card--size_small {
-      -font-size: 14px;
-    -}
-    -.lg\:card--size_large {
-      -font-size: 18px;
-    -}
-    -.lg\:card--visual_primary {
-      -background-color: blue;
-    -}
-    -.lg\:card--visual_secondary {
-      -background-color: gray;
-    -}
-  }

-  @media screen and (min-width: 80em) {
-    -.xl\:card--size_small {
-      -font-size: 14px;
-    -}
-    -.xl\:card--size_large {
-      -font-size: 18px;
-    -}
-    -.xl\:card--visual_primary {
-      -background-color: blue;
-    -}
-    -.xl\:card--visual_secondary {
-      -background-color: gray;
-    -}
-  }

-  @media screen and (min-width: 96em) {
-    -.\32xl\:card--size_small {
-      -font-size: 14px;
-    -}
-    -.\32xl\:card--size_large {
-      -font-size: 18px;
-    -}
-    -.\32xl\:card--visual_primary {
-      -background-color: blue;
-    -}
-    -.\32xl\:card--visual_secondary {
-      -background-color: gray;
-    -}
-  }
}

[0.23.0] - 2023-12-15

Fixed

• Fix issue where style props wouldn't be properly passed when using config.jsxStyleProps set to minimal or none with JSX patterns (Box, Stack, Flex, etc.)
• Fix an issue with config change detection when using a custom config.slotRecipes[xxx].jsx array
• Fix performance issue where process could get slower due to postcss rules held in memory.
• Fix an issue with the postcss plugin when a config change sometimes didn't trigger files extraction
• Fix & perf improvement: skip JSX parsing when not using config.jsxFramework / skip tagged template literal parsing when not using config.syntax set to "template-literal"
• Fix a parser issue where we didn't handle import aliases when using a {xxx}.raw() function.

ex:

// button.stories.ts
import { button as buttonRecipe } from '@ui/styled-system/recipes'

export const Primary: Story = {
  // ❌ this wouldn't be parsed as a recipe because of the alias + .raw()
  //  -> ✅ it's now fixed
  args: buttonRecipe.raw({
    color: 'primary',
  }),
}

Added

• Add support for emit-pkg command to emit just the package.json file with the required entrypoints. If an existing package.json file is present, the exports field will be updated.

When setting up Panda in a monorepo, this command is useful in monorepo setups where you want the codegen to run only in a dedicated workspace package.

• Automatically extract/generate CSS for sva even if slots are not statically extractable, since it will only produce atomic styles, we don't care much about slots for sva specifically

Currently the CSS won't be generated if the slots are missing which can be problematic when getting them from another file, such as when using Ark-UI like import { comboboxAnatomy } from '@ark-ui/anatomy'

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

const card = sva({
  slots, // ❌ did NOT work -> ✅ will now work as expected
  base: {
    root: {
      p: '6',
      m: '4',
      w: 'md',
      boxShadow: 'md',
      borderRadius: 'md',
      _dark: { bg: '#262626', color: 'white' },
    },
    content: {
      textStyle: 'lg',
    },
    title: {
      textStyle: 'xl',
      fontWeight: 'semibold',
      pb: '2',
    },
  },
})

Changed

• Log stacktrace on error instead of only logging the message