bug: Cannot use `@apply` with `join` and `join-item`

[TheHadiAhmadi]

What version of daisyUI are you using?

4.12.2

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://play.tailwindcss.com/8gTvGmHF0y

Describe your issue

I want to create custom class name for my components, and use @apply. combination of join and join-item doesn't work with apply.

I expect this code works:

<div class="my-pagination">
  <button class="my-pagination-item">1</button>
  <button class="my-pagination-item my-pagination-item-active">2</button>
  <button class="my-pagination-item">3</button>
  <button class="my-pagination-item">4</button>
</div>

.my-pagination {
  @apply join;
}

.my-pagination-item {
  @apply join-item btn btn-primary btn-md;
}

.my-pagination-item-active {
  @apply btn-active;
}

but buttons have roundness and styles of join-item are not applied.

above code should be equivalent to below code:

<div class="join">
  <button class="join-item btn btn-primary btn-md">1</button>
  <button class="join-item btn btn-primary btn-md btn-active">2</button>
  <button class="join-item btn btn-primary btn-md">3</button>
  <button class="join-item btn btn-primary btn-md">4</button>
</div>

thanks

[github-actions[bot]]

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

[saadeghi]

That's how @apply works and there's nothing I can do about it.
When you use

.my-pagination {
  @apply join;
}

It copies the CSS rules of .join class to .my-pagination but it doesn't copy a child selector (.join .join-item) to a new class name .my-pagination .my-pagination-item. In other words, with @apply you can use a single CSS rule in a new class name but all the relations between class names will be ignored. This is not a bug, but simply how @apply is intented to work.

May I ask why you need to rename the class names?