Support kebab-style attributes

[aaronbrethorst]

I am building a form component library with Cotton and Tailwind. All of my Tailwind UI components look like this:

<c-vars type="text" name label class />

<div class="gap-x-0.5">
    {% if label %}
        <c-forms.label for="{{id}}">{{label}}</c-forms.label>
    {% endif %}

    <div>
        <input
            type="{{type}}"
            name="{{name}}"
            id="{% if id %}{{id}}{% else %}{{name}}{% endif %}"
            class="block w-full rounded-md border-0 py-1 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 {{class}}"
            {{attrs}}>
        <c-forms.hint-text hint="{{hint}}" />
    </div>
</div>

I want to be able to add classes to the outer wrapper <div> like this:

<c-forms.text-field wrapper-class="mb-4" />

and consume that value like this:

<c-vars type="text" name label class wrapper_class />

<div class="gap-x-0.5 {{wrapper_class}}">

but this doesn't seem to be possible today.

Workaround:

Use snake case or pascal case.

[wrabit]

Hi @aaronbrethorst, if you use kebab case in the cvars instead, it should work, because we're looking for matches of the same attribute in the parent view on the component.

<c-vars ... wrapper-class />