Extending the config for modifiers

[IainMcHugh]

Hello, I found out about this library from the Next conf 2022 vid and find it really useful, so thanks.

I have an idea to extend the cva config to accept an optional modifiers object, that for each nested key-value pair, the key corresponds to a modifier and value infers the type of variants.

So for styles generated like this:

const styles = cva(['rounded'], {
  variants: {
    intent: {
      primary: ['bg-white text-black'],
      secondary: ['bg-red-500'],
    }
  },
  modifiers: {
    dark: {
      base: ['border', 'border-solid', 'border-white'],
      config: {
        variants: {
          intent: {
            primary: ['bg-black', 'text-white'],
            secondary: ['bg-blue-500']
          }
        }
      }
    },
  }
};

Invoking would result in:

styles({ intent: 'primary' });
// 'rounded bg-white text-black dark:border dark:border-solid dark:border-white dark:bg-black dark:text-white'

styles({ intent: 'secondary' });
// 'rounded bg-red-500 dark:border dark:border-solid dark:border-white dark:bg-blue-500'

I was initially just thinking of darkMode but could be used for any modifier. I have a branch of this working locally, any thoughts on this approach? Thanks again.

[marklawlor]

Assuming you are using this with Tailwind CSS, it will not work as expected as Tailwind does not allow dynamic classNames. https://tailwindcss.com/docs/content-configuration#dynamic-class-names.

[joe-bell]

Yep, that's absolutely the case unfortunately 😢

[IainMcHugh]

Ah good shout 👍 I was thinking because it is split on the : it would still work but testing locally and className is not being applied.