README

A tiny HTML attribute generator written in PHP. Great for projects using tailwindcss and Alpine.js 🎡

Installation

composer require hirasso/attr

Usage

attr()

Define your attributes in an associative way:

<?php /** Example: render a button with custom classes and styles */  ?>
<button <?= attr([
            'type' => 'button',
            'class' => [
                'border border-current p-3',
                'bg-white text-black' => !$isActive,
                'bg-blue-600 text-white' => $isActive
            ],
            'style' => [
                '--active-color' => 'red'
            ],
            'data-toggle' => true
        ]) ?>>
    Click Me!
</button>

...and the attr function transforms them into normal HTML:

<button type="button" class="border border-current p-3 bg-white text-black" style="--active-color: red;" data-toggle>
  Click Me!
</button>

jsonAttr()

Render JSON so that it is safe to be used inside an HTMLElement attribute:

<?php /** Example: render an x-data attribute for Alpine.js */  ?>
<div <?= attr([
  'x-data' => jsonAttr([
      'open' => true,
      "message" => "This 'quote' contains <b>bold text</b>"
  ])
]) ?>>
</div>

..the output will look like this and can be consumed by JavaScript:

<div x-data="{&quot;open&quot;:true,&quot;message&quot;:&quot;This &#039;quote&#039; contains &lt;b&gt;bold text&lt;\/b&gt;&quot;}"></div>

Tailwind CSS IntelliSense

To get Tailwind CSS IntelliSense in VS Code working with attr(), add the following to your user settings or .vscode/settings.json:

{
  "tailwindCSS.includeLanguages": {
    "php": "html"
  },
  "tailwindCSS.experimental.classRegex": [
    "/\\*tw\\*/\\s*'([^']*)'", // /*tw*/ hint, single-quoted
    "/\\*tw\\*/\\s*\"([^\"]*)\"", // /*tw*/ hint, double-quoted
    "->class\\(\\s*'([^']*)'", // fluent API, single-quoted
    "->class\\(\\s*\"([^\"]*)\"", // fluent API, double-quoted
    "'class'\\s*=>\\s*'([^']*)'", // plain string, single-quoted
    "'class'\\s*=>\\s*\"([^\"]*)\"", // plain string, double-quoted
    ["'class'\\s*=>\\s*\\[((?:[^\\[\\]]|\\[[^\\]]*\\])*)\\]", "'([^']*)'"], // conditional array, single-quoted
    ["'class'\\s*=>\\s*\\[((?:[^\\[\\]]|\\[[^\\]]*\\])*)\\]", "\"([^\"]*)\""], // conditional array, double-quoted
  ],
}

This enables completions for all supported class syntaxes:

// Fluent API
->class('block p-3')
->class('bg-blue-600 text-white', $isActive)

// Array class syntax (plain string)
'class' => 'block p-3'

// Array class syntax (conditional)
'class' => [
    'block p-3',
    'bg-blue-600 text-white' => $isActive,
]

// Anywhere else, use the /*tw*/ hint comment
$class = /*tw*/ 'text-white bg-blue-600';

Fluent API

For more expressive attribute building, use the fluent interface:

<button <?= attr()
    ->set('type', 'button')
    ->set('disabled', $isDisabled)
    ->class('border p-3')
    ->class('bg-blue-600 text-white', $isActive)
    ->class('bg-white text-black', !$isActive)
    ->style('--highlight', 'red')
    ->style('display', 'none', $isHidden)
    ->aria('expanded', 'false') ?>>
    Click Me!
</button>

Available Methods

The builder implements Stringable, so you can echo it directly or call ->toString().

Tip

More examples can be seen by browsing the test files. Also, it's worth noting that both attr() as well as jsonAttr() escape all attributes for you. No need to do it yourself 🦦