v0.2.0

Adds support for responsive compound variants

This plugin now supports responsive compound variants, through a new ccv function. Note: this can produce a large amount of compound variants and class names. Make sure your unused CSS is purged properly.

import { ccv, crv, cva } from '@/styled-system/css';

const styles = cva({
  variants: {
    ...crv('variant1', {
      primary: { bg: 'blue.500' },
      secondary: { bg: 'gray.500' },
      destructive: { bg: 'red.500' },
    }),
    ...crv('variant2', {
      true: { opacity: 1 },
      false: { opacity: 0 },
    }),
  },
  compoundVariants: [
    ...ccv(
      {
        variant1: 'primary',
        variant2: true,
      },
      {
        color: 'green.500',
      },
    ),
  ],
});

The above code will render "green.500" if variant1 is "primary" and if variant2 is true

<Component variant1="primary" variant2>
// -> opacity_1 bg_blue.500 text_green.500

<Component
  variant1={{ base: 'secondary', lg: 'primary' }}
  variant2={{ base: false, lg: true }}
/>
// -> opacity_0 lg:opacity_1 lg:bg_blue.500 bg_gray.500 lg:text_green.500

What's Changed

• chore(deps): allow automerge by @jonambas in #11
• chore(deps): update vitest monorepo to v1.5.1 by @renovate in #12
• chore: update readme.md by @jonambas in #13
• chore(deps): remove json5 from vite-react by @jonambas in #14
• feat: support responsive compound variants by @jonambas in #16

Full Changelog: v0.1.2...v0.2.0