New drawer CSS selectors in 3.0.0 are causing issues

[parkercode98]

This is too complex to write a whole issue on, but just thought I'd mention that the new drawer CSS selectors in 3.0.0 are causing a few issues that could be changed. Most of it has to do with removing the .drawer-mobile from v2 and changing the way .drawer-end affects the positioning.

v2

The grid-column-start of the .drawer-content was added via this selector:

.drawer-toggle ~ .drawer-content {
  grid-column-start: 1;
}

And in the case of the .drawer-end class on the parent (root) element, the direction was reversed, so it's positioned correctly:

.drawer.drawer-end > * {
  direction: ltr;
}

Then inside with the .drawer-mobile class, the grid-column-start of the .drawer-content was changed to 2 in every case:

.drawer-mobile > .drawer-toggle ~ .drawer-content {
  grid-column-start: 2;
}

v3

In v3, the grid-column-start of the .drawer-content is added via this selector (taking into account the .drawer-end class):

.drawer-end .drawer-toggle ~ .drawer-content {
  grid-column-start: 1;
}

This is fine because now it doesn't need to use the selector in v2 to reverse the direction in the case of .drawer-end:

.drawer.drawer-end > * {
  direction: ltr;
}

This is great, EXCEPT when you have something like this:

The Problem

In my case, I wanted both a left and right drawer, so I did something like this:

<div id="r1" class="drawer drawer-end">
  ...
  <div id="c1" class="drawer-content">
    ...
    <div id="r2" class="drawer lg:drawer-open">
      ...
      <div id="c2" class="drawer-content"></div>
      <div id="s2" class="drawer-side"></div>
    </div>
  </div>
  <div id="s1" class="drawer-side"></div>
</div>

This worked in v2 because the .drawer-mobile class (that was in the #r2 classList) specifically set the grid-column-start of the .drawer-content to 2 (at #c2).

Now in v3, the .drawer-end class is setting the grid-column-start to 1 for the .drawer-content (#c2), causing it to be positioned on the left side instead of the right like it would be when using .drawer-mobile in v2.

Anyway, I most likely could be structuring or doing this in a better way, but in any case, It might be a good idea to add a pseudo (:not) selector to all the .drawer-end selectors in v3 so that it doesn't affect the positioning of the .drawer-content when it's nested inside another .drawer element.

Something like this might help other people from running into the same issue ⬇️
Changing this:

.drawer-end .drawer-toggle ~ .drawer-content {
  grid-column-start: 1;
}
.drawer-end .drawer-toggle ~ .drawer-side {
  justify-items: end;
}

To this:

.drawer-end *:not(.drawer) > .drawer-toggle ~ .drawer-content {
  grid-column-start: 1;
}
.drawer-end *:not(.drawer) > .drawer-toggle ~ .drawer-side {
  justify-items: end;
}

[saadeghi]

Thanks for the details.
I converted this topic to an issue here: #1951
Please follow the issue.