docs: customized `steps` broken with v5.3.0

[kenn]

On which page do you see this issue?

No response

Describe the issue

Just flagging the breaking change with v5.3.0, or potentially a feature request for steps because our customization is only needed because daisyUI doesn't natively support the 3rd "current" state.

Before the upgrade, it used to look like this.

After upgrading to v5.3.x, the number in the circle was gone, and the connecting line appeared before the first element.

Code that's broken:

<ul className="steps steps-vertical md:steps-horizontal">
  {SESSIONS.map((session, idx) => {
    let session_num = idx + 1
    return (
      <li
        key={session_num}
        className={cn(
          // Customize line (before) and circle (after)
          'step min-h-12! lg:before:h-1.5!',
          'after:size-7! after:text-sm! after:text-gray-400!',
          session_num < progress && [
            'step-primary',
            'after:text-primary-content!',
          ],
          session_num === progress && [
            'before:bg-primary! after:bg-primary-content!',
            'after:text-primary! after:font-semibold!',
            'after:border-primary! after:border-2!',
          ],
        )}
      >
        {session_num <= progress ? (
          <Link>{session}</Link>
        ) : (
          <span className="text-sm text-gray-500">{session}</span>
        )}
      </li>
    )
  })}
</ul>

Fixed for v5.3.x: auto-number no longer works, I had to resort to step-icon

<ul className="steps steps-vertical md:steps-horizontal">
  {SESSIONS.map((session, idx) => {
    let session_num = idx + 1
    let isDone = session_num < progress
    let isCurrent = session_num === progress
    let isActive = session_num <= progress
    let iconClass = cn(
      'step-icon size-7 rounded-full border text-sm font-medium',
      'bg-base-300! border-base-300! text-base-content!',
      isDone && 'bg-primary! text-primary-content! border-primary!',
      isCurrent &&
        'bg-primary-content! text-primary! border-primary! border-2! font-semibold!',
    )
    return (
      <li
        key={idx}
        className={cn(
          // Customize line (before) and circle (after)
          'step min-h-12!',
          'lg:[&:not(:first-child)::before]:h-1.5!',
          'lg:[&:first-child::before]:hidden',
          isActive && 'step-primary',
          isDone && 'before:border-primary!',
          isCurrent && ['before:bg-primary!', 'before:border-primary!'],
        )}
      >
        <span className={iconClass}>{session_num}</span>
        {isActive ? (
          <Link>{session}</Link>
        ) : (
          <span className="text-sm text-gray-500">{session}</span>
        )}
      </li>
    )
  })}
</ul>

What browsers are you seeing the problem on?

No response

[github-actions]

Thank you @kenn for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[pdanpdan]

Hello

1. Now you don't need to add important(!) to every class
2. Indeed tailwind now overrides the content (--tw-content) when you apply classes on :before/:after
3. Until it is solved you can add after:content-[counter(step)] (see example https://play.tailwindcss.com/JfZjfp56eH)

@saadeghi I think we need to set --tw-content when we set content for :before/:after

[kenn]

Hello

1. Now you don't need to add important(!) to every class
2. Indeed tailwind now overrides the content (--tw-content) when you apply classes on :before/:after
3. Until it is solved you can add after:content-[counter(step)] (see example https://play.tailwindcss.com/JfZjfp56eH)

@saadeghi I think we need to set --tw-content when we set content for :before/:after

Thanks! It looks much better with your suggested changes.

<ul className="steps steps-vertical md:steps-horizontal">
  {SESSIONS.map((session, idx) => {
    let session_num = idx + 1
    let isActive = session_num <= progress
    return (
      <li
        key={idx}
        className={cn(
          // Customize line (before) and circle (after)
          'step after:content-[counter(step)] [&:first-child::before]:hidden',
          'min-h-12 md:min-h-auto md:before:h-1.5',
          'before:w-1.5 md:before:w-full',
          isActive && 'step-primary',
          session_num === progress && [
            'before:bg-primary',
            'after:bg-primary-content after:text-primary after:border-primary after:border-2 after:font-semibold',
          ],
        )}
      >
        {isActive ? (
          <Link>{session}</Link>
        ) : (
          <span>{session}</span>
        )}
      </li>
    )
  })}
</ul>