Support custom class merging logic

[denis-mueller]

The gem https://github.com/avo-hq/class_variants supports custom class merging logic (e.g. using the tailwind_merge gem)

ClassVariants.configure do |config|
  merger = TailwindMerge::Merger.new
  config.process_classes_with do |classes|
    merger.merge(classes)
  end
end

Is there a way to achieve the same with phlex? So that I could run TailwindMerge::Merger.new.merge(classes) on all inputs that get passed to an HTML element with class:?

[jeffperrin]

This is what I'm currently doing...

Simple button component:

class Components::Button < Components::Base
  DISABLED_CLASSES = "opacity-75 hover:opacity-75 cursor-not-allowed pointer-events-none".freeze
  BASE_CLASSES = "flex gap-2 justify-center items-center text-center hover:opacity-90"

  def view_template(&)
    button(**merge_attributes(type: :button), &)
  end

  def all_classes = [
    BASE_CLASSES,
    (DISABLED_CLASSES if @attributes[:disabled] == true)
  ].compact

  # Pull this code up to your base class so other components can use it:
  TAILWIND_MERGER = ::TailwindMerge::Merger.new.freeze unless defined?(TAILWIND_MERGER)
  def merge_attributes(**default_attributes)
    attrs = mix({class: all_classes}.merge(default_attributes), @attributes)
    attrs[:class] = TAILWIND_MERGER.merge(attrs[:class])
    attrs
  end
end

Now you can do

render Components::Button.new { "test" }
# <button class="flex gap-2 justify-center items-center text-center hover:opacity-90" type="button">test</button>

render Components::Button.new(class: "extra-class") { "test" }
# <button class="flex gap-2 justify-center items-center text-center hover:opacity-90 extra-class" type="button">test</button>

render Components::Button.new(class: "hover:opacity-70 gap-3 extra-class") { "test" }
# <button class="flex justify-center items-center text-center hover:opacity-70 gap-3 extra-class" type="button">test</button>

render Components::Button.new(class: "gap-3 extra-class", type: :submit, data_foo: "bar") { "test" }
# <button class="flex justify-center items-center text-center hover:opacity-90 gap-3 extra-class" type="submit" data-foo="bar">test</button>

render Components::Button.new(disabled: true) { "test" }
# <button class="flex gap-2 justify-center items-center text-center opacity-75 hover:opacity-75 cursor-not-allowed pointer-events-none" type="button" disabled>test</button>

Tailwind merge can do its thing, you can pass in default attributes and override them, etc.

[joeldrapper]

Sorry I never replied to the original question. The short answer is yes technically but "not really".

You could technically define each HTML element again and have each of them call super with the class argument modified. But this would have a significant performance cost. It would make the attribute caching less effective and would also render the new compiler entirely useless.

Defining a separate function to transform the attributes before they are passed to Phlex is the best option for now.

If I may, though, I'd like to suggest an alternative to merging CSS classes that I think might serve you better in the long run.

If you define a utility for your button like this.

@utility button {
  :where(&) {
    @apply flex gap-2 justify-center items-center text-center hover:opacity-90;
  }

  :where(&.--disabled) {
    @apply flex gap-2 justify-center items-center text-center hover:opacity-90;
  }
}

You can use it in your HTML like this.

def view_template
  button(class: ["button", ("--disabled" if @disabled), @class])
end

Because it’s a Tailwind utility, the CSS will only be generated if you actually use the button class somewhere. And because we used :where, we've set the precedence of this selector to be very low. That means every other utility that you apply via the @class variable will take precedence over your button utility.

I like to use the -- prefix for variants because it looks like a CSS variable, but you can obviously use whatever style you like.

I like using @utility because of the advantage that Tailwind will shake out the classes that aren’t in active use, but another approach is to define it in a layer.

Tailwind has three layers: base, components, utilities. Selectors defined in components will have lower precedence to selectors defined in utilities so you could do this instead. And because we’re using the layer below utilities, there’s no need to reset the the precedence with where.

@layer components {
  .button {
    @apply flex gap-2 justify-center items-center text-center hover:opacity-90;

    &.--disabled {
      @apply text-red-500;
    }
  }
}

With this approach — especially with the utility — we have all the advantages of Tailwind.

1. Only ship the CSS we actually use.
2. We pick from a small set of tokens, not arbitrary pixel values.
3. We can easily add utilities for one-offs.

But because we gave .button a name, we can now use it in more places outside of this component. For example, you may want to style a <summary> element or a <label> as a button. Labels do things when clicked so this can be a useful pattern.