Skip to content

Allow spaces in class prop object syntax #317

@brainkim

Description

@brainkim

Crank 0.7 introduced class object syntax:

<div class={{'w-5': true, 'h-5': true, 'text-gray-400': isActive}} />

Recently @claude hallucinated the following extension of the API:

<div class={{
  'w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold': true,
  'bg-green-500 text-white': isMet,
  'bg-gray-200 text-gray-400': !isMet
}}>
  {isMet ? '✓' : ''}
</div>

<span class={{
  'text-sm': true,
  'text-green-600 font-medium': isMet,
  'text-gray-500': !isMet
}}>
  {req.label}
</span>

This is a nice idea. The alternative is verbose:

<div class={{
  'w-5': true,
  'h-5': true,
  'rounded-full': true,
  'flex': true,
  'items-center': true,
  'justify-center': true,
  'text-xs': true,
  'font-bold': true,
  'bg-green-500': isMet,
  'text-white': isMet,
  'bg-gray-200': !isMet,
  'text-gray-400': !isMet
}}>
  {isMet ? '✓' : ''}
</div>

<span class={{
  'text-sm': true,
  'text-green-600': isMet,
  'font-medium': isMet,
  'text-gray-500': !isMet
}}>
  {req.label}
</span>

Should be a simple change.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions