A cleaner way to dynamically style elements in PHP

If you’ve ever found yourself writing nasty inline php if statements in order to dynamically add styles or classes to your HTML, then this package might just be for you. I just released the first version of ComputedStyles php which provides an elegant API for applying styles and classes to HTML.

Imagine turning this code:

<div class="flex justify-left <?= (session()->has('alert') ? 'has-alert' : '' ) . (session()->has('alert') && session()->has('alert.success') ? 'has-alert--success' : '') ?>">

Into something like this:

$classes = ComputedClasses::make(['flex', 'justify-left'])
  ->when(session()->has('alert'), [
    'has-alert',
    'has-alert--success' => session()->has('alert.success')
])->whenNot($user->admin(), ['disabled']);
<div class="<?= $classes ?>">

The library also allows you to dynamically build values to go in a style tag:

$styles = ComputedStyles::make([
  'display' => 'flex',
  'justify-content' => 'center',
])->when($user->prefersLeftAlign(), [
  'justify-content' => 'start'
])->when($user->prefersRightAlign(), [
  'justify-content' => 'end'
])->whenNot($user->email, [
  'background' => 'red'
]);
<div style="<?= $styles ?>">

Dynamically Add Styles to Laravel Livewire components

A great use case for this package is to dynamically build class lists and inline styles for Laravel Livewire components. Imagine you have a form in a Livewire Component that does some data validation with Livewire Attributes:

    #[Rule('required|min:3|max:16', message: 'Please enter your name.')]
    public string $name;

    #[Rule('required|min:3|max:16', message: 'Please enter the best email for you.')]
    public string $email;

    #[Rule('required|min:3|max:16', message: 'A string password is required.')]
    public string $password;

You could use ComputedStyles or ComputedClasses to dynamically add styles to your HTML. Notice here that I’m using the helper function baine_computedStyles() for a cleaner syntax.

<div>
            <form wire:submit="login">
                <p>
                    <input style="{{
                        baine_computedStyles()
                            ->when($errors->has('name'), [
                                'color' => 'red',
                                'border' => 'solid 1px red'
                            ]);
                    }}" type="text" wire:model="name">
                    <div style="color: red;">@error('name') {{ $message }} @enderror</div>
                </p>
                <p>
                    <input style="{{
                        baine_computedStyles()
                            ->when($errors->has('email'), [
                                'color' => 'red',
                                'border' => 'solid 1px red'
                            ]);
                    }}" type="text" wire:model="email">
                    <div style="color: red;">@error('email') {{ $message }} @enderror</div>
                </p>
                <p>
                    <input style="{{
                        baine_computedStyles()
                            ->when($errors->has('password'), [
                                'color' => 'red',
                                'border' => 'solid 1px red'
                            ]);
                    }}" type="text" wire:model="password">
                    <div style="color: red;">@error('password') {{ $message }} @enderror</div>
                </p>
                <button>Log In</button>
            </form>
        </div>

This is a pretty crude example, but hopefully you can see the benefit of something like this for your applications.