kidonng / unocss-preset-daisy

UnoCSS preset for daisyUI
https://unocss-preset-daisy.vercel.app
MIT License
220 stars 19 forks source link

Cannot use responsive design of drawer #19

Closed J4gQBqqR closed 1 year ago

J4gQBqqR commented 1 year ago

The Drawer has a drawer-mobile for responsive design. I guess it is using some kind of modifier like md: behind the scene. However, the code directly copied from the doc will not work with this preset: https://daisyui.com/components/drawer/#drawer-for-mobile--fixed-sidebar-for-desktop The drawer will not hide/show itself upon changing screen width.

<div class="drawer drawer-mobile">
  <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content flex flex-col items-center justify-center">
    <!-- Page content here -->
    <label for="my-drawer-2" class="btn btn-primary drawer-button lg:hidden">Open drawer</label>

  </div> 
  <div class="drawer-side">
    <label for="my-drawer-2" class="drawer-overlay"></label> 
    <ul class="menu p-4 w-80 bg-base-100 text-base-content">
      <!-- Sidebar content here -->
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>

  </div>
</div>
J4gQBqqR commented 1 year ago

This bug is related to https://github.com/kidonng/unocss-preset-daisy/issues/18#issuecomment-1492259275

As you can see https://github.com/saadeghi/daisyui/blob/51d669d285ef78b95408156a36b4c70195bb4cb2/src/components/unstyled/drawer.css#L73 drawer-mobile has multiple @apply rules that uses breakpoint prefix. breakpoint prefix is not working, thus any style in daisyUI that uses breakpoint prefix will not work. Is this a bug in this preset or UnoCSS?

kidonng commented 1 year ago

Duplicate of #14