Allow controlling if/how compound variants are merged with @csa_class

[thiagomajesk]

Imagine the given scenario: You have an icon button component with two sizes, for each size you want not only to change the button classes but also the icon classes (so it resizes appropriately with the button):

variant :size, [sm: "text-sm px-2 py-1", lg: "text-lg px-4 py-2"]
slot :inner_block, required: true
def icon_button(assigns) do
   ~H"""
   <button class={@cva_class}>
     <.icon name="award" class="h-2 w-2 mr-2" />
     <%= render_slot(@inner_block) %>
   </button>
   """
end

It seems to me that this would be a good job for compound_variant if we had a way to split the classes instead of merging with @cva_class. Would you be interested in supporting something like this?

compound_variant :icon_class, "h-2 w-2 mr-2", size: :sm
compound_variant :icon_class, "h-4 w-4 mr-4", size: :lg

[benvp]

I'm not sure if I can follow properly. The compound_variant is to be used to add classes if a combination of variants is present (e.g. add class h-4 if the variant size == :xl and color == :primary).

How would you want to split / extract the classes from @cva_class?

I think I'd create a separate icon component for it.

variant :size, [sm: "h-2 w-2 mr-2", lg: "h-4 w-4 mr-4"]
attr :class, :string
attr :rest, :global

def my_icon(assigns) do
  ~H"""
  <.icon class={[@cva_class, @class]} {...rest} />
  """
end

variant :size, [sm: "text-sm px-2 py-1", lg: "text-lg px-4 py-2"]
slot :inner_block, required: true
def icon_button(assigns) do
   ~H"""
   <button class={@cva_class}>
     <.my_icon name="award" size={@size} />
     <%= render_slot(@inner_block) %>
   </button>
   """
end