[RFC] Add Optional Base Style Inheritance

[omarluq]

Hello! Following up on the resolved inheritance issue (#48), I'd like to propose adding optional inheritance specifically for base styles. This would complement the existing variant inheritance functionality.

The Problem

Currently, when a component inherits from another component, the base styles don't get inherited. This makes it challenging when you want to build on top of a parent component's base styles rather than completely replacing them.

For example:

class Button::Component < ViewComponent::Base
  style do
    base { %w(px-4 py-2 rounded-lg) }
    variants do
      color {
        primary { %w(bg-blue-500 text-white) }
      }
    end
  end
end

class IconButton::Component < Button::Component
  style do
    # Currently overwrites parent's base styles completely
    base { %w(inline-flex items-center) }
    variants do
      color {
        primary { %w(bg-blue-500 text-white) }
      }
    end
  end
end

In this case, IconButton loses the padding and rounded corners from Button when it might want to keep them while adding flexbox utilities.

Proposed Solution

I'd like to propose adding optional base style inheritance that works similarly to how variant inheritance already works. Here's how it could work:

1. By default, child components would inherit parent base styles
2. Child components could:
   • Add to parent base styles using base { } (styles get concatenated)
   • Override parent base styles using base(inherit: false) { }
   • Access parent base styles within their own base block for custom merging

Example usage:

class IconButton::Component < Button::Component
  style do
    # Adds to parent's base styles
    base { %w(inline-flex items-center) }
    
    # Or explicitly override
    base(inherit: false) { %w(inline-flex items-center) }
    
    # Or custom merge
    base do |parent_base|
      parent_base.reject { |c| c.start_with?('p-') } + %w(inline-flex items-center p-2)
    end
  end
end

Implementation Approach

I've tested this with a monkey patch that shows the basic concept. The official implementation could follow a similar pattern but with proper integration into the existing inheritance system:

module StyleSetExtension
  def initialize(*args, &init_block)
    super.tap do
      superclass = init_block.binding.receiver.superclass
      return unless superclass.respond_to?(:style_config)
      parent_config = superclass.style_config
      parent_set = parent_config.instance_variable_get(:@styles)[:component]
      return unless parent_set
      @base_block = parent_set.instance_variable_get(:@base_block)
    end
  end

  def base(&block)
    return unless block_given?
    original_base = @base_block
    @base_block = -> {
      Array(original_base&.call).concat(Array(block.call))
    }
  end
end

Benefits

1. More intuitive component inheritance - base styles work like you'd expect
2. DRYer component hierarchies - no need to repeat common base styles
3. Flexible override options - can add to, replace, or custom merge parent styles
4. Consistent with existing variant inheritance patterns

Questions for Discussion

1. Should base style inheritance be opt-in or opt-out?
2. What's the best API for controlling inheritance behavior?
3. How should conflicts between parent and child base styles be handled?

Related Issues

• Resolved variant inheritance issue: Allow style blocks to inherit/honor parent components style blocks unless explicitly overriden #48

---

/cc @palkan

[palkan]

Sounds good to me! Thanks for the detailed proposal.

I'd only suggest to change the naming to base(extend: true) { } (or append: true — sounds more natural).