chakra-ui/panda @pandacss/generator@0.38.0

on GitHub

Minor Changes

• bc09d89: 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",
        },
      },
    },
  });

  ESLint Plugin

  These deprecation warnings will translated into the ESLint plugin as a no-deprecated rule.

  {
    "rules": {
      "no-deprecated": "warn"
    }
  }

  In the next release of the ESLint plugin, you will get a warning when using deprecated tokens or utilities.

Patch Changes

• 96b47b3: 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>

• 1e50336: Fix type import

• b1e9e36: - Fix css reset regressions where:

  • first letter gets a different color
  • input or select gets a default border

• Updated dependencies [96b47b3]

• Updated dependencies [bc09d89]

• Updated dependencies [7a96298]

• Updated dependencies [2c8b933]

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