bug: timeline can't work with media variants

[withden]

Reproduction URL (Required)

https://play.tailwindcss.com/ffzjEZtHvV

What version of daisyUI are you using?

5.0.28

Which browsers are you seeing the problem on?

No response

Describe your issue

Hey,

When we use any media variants with timeline-start or timeline-end (Ex, md:timeline-start timeline-end), it will not work as expected.

[github-actions[bot]]

Thank you @withden 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.

[crypto7world]

Adding some info here, hope it will help correct the issue faster.

The issue is that timeline rely on CSS selectors to find timeline-middle in its children and take decisions based on that. If we use something like lg:timeline-middle, then it no longer work as the child class no longer has timeline-middle but lg:timeline-middle, which is not matched by the selector.

The problem is a lot worse for when using timeline-compact because not only does it rely on finding timeline-start but it also attempt to re-write it, as well as timeline-end. Again, using any Tailwind modifier completely breaks the behavior.

[saadeghi]

I'm not sure if there's an efficient way to solve this. as @crypto7world mentioned, we need to check for the existence of class name but if the class name is not (for example) timeline-start anymore and instead it's md:timeline-start, it's challenging to identify it.

[saadeghi]

This is not going to work because it would require changing the HTML structure:

• timeline
  • <li>
    • <hr>
    • timeline-start
    • timeline-middle
    • timeline-end
    • <hr>

They are all optional, but we can't swap places of timeline-start and timeline-end parts in DOM with CSS. They are "parts" of the component, not modifier class names, so it is expected for them to be in this order: start, middle, end.

You can hide them conditionally tho. Example: https://play.tailwindcss.com/F6QibDfD2I?size=1074x273