feat: add space / divide exceptions

[lihbr]

Hi hi, quite hyped about the latest release though I feel the need to discuss about the following, whether it's to rework my mind or perhaps to find a solution about this.

What problem does this feature solve?

As stated in #1584 current implementation doesn't allow exceptions like that:

<ul class="space-y-4">
  <li>One</li>
  <li class="mt-0">Two</li>
  <li>Three</li>
</ul>

And I don't know why (perhaps I'm thinking about stacks wrong) but I almost always have one exception in my stacks that would require the above, which is currently not possible, and preventing me from using this new feature.

What does the proposed changes look like?

What I'm suggesting is to add an exception class on children that require an exception like space-y-exception or space-y-ignore to tell the parent to not apply margins / borders on them, so the implementation can be modified to something like this probably:

.space-y-4 > :not(template):not(.space-y-exception) ~ :not(template):not(.space-y-exception) {
  margin-top: 1rem
}

The downside of this is that specificity increase even more (from 0 1 2 to 0 3 2), though given that current specificity doesn't allow this anyway I don't see it as a problem.

Any thoughts? Perhaps I'm missing some other edge cases, don't know~
Anyway, thanks for any feedback!

[adamwathan]

Can you share a real-world example in case there's a better solution?

[lihbr]

@adamwathan Sure! I've made a small example here about using/migrating to space-y with a card (kept it simple but I'm currently using space-y like technique for handling spacing between richtext content elements for example):

Current design without space-y
Every element are 1rem apart except the anchor tag which need a 3rem margin according to given design. Markup starts to feel clunky.

<div class="p-4 bg-gray-200">
  <div>History - 21/04/2020</div>
  <h2 class="mt-4 text-xl font-bold">
    How Max Bill created a design for Junghans
  </h2>
  <p class="mt-4">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae alias
    illo reprehenderit, incidunt quia ab aliquam eum voluptatibus repellat
    tenetur recusandae totam quibusdam. Ducimus perspiciatis labore sint,
    harum cupiditate tenetur?
  </p>
  <a class="mt-12 block underline" href="#">Read more</a>
</div>

Migration to space-y
space-y-exception could be handy here to allow usage of the new space-y utility and have a cleaner markup.

<div class="space-y-4 p-4 bg-gray-200">
  <div>History - 21/04/2020</div>
  <h2 class="text-xl font-bold">
    How Max Bill created a design for Junghans
  </h2>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae
    alias illo reprehenderit, incidunt quia ab aliquam eum voluptatibus
    repellat tenetur recusandae totam quibusdam. Ducimus perspiciatis
    labore sint, harum cupiditate tenetur?
  </p>
  <a class="space-y-exception mt-12 block underline" href="#">Read more</a>
</div>

[adamwathan]

Great thanks for that! In this case I would recommend structuring the markup like this:

<div class="space-y-12 p-4 bg-gray-200">
  <div class="space-y-4">
    <div>History - 21/04/2020</div>
    <h2 class="text-xl font-bold">
      How Max Bill created a design for Junghans
    </h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae alias illo reprehenderit,
      incidunt quia ab aliquam eum voluptatibus repellat tenetur recusandae totam quibusdam. Ducimus
      perspiciatis labore sint, harum cupiditate tenetur?
    </p>
  </div>
  <a class="block underline" href="#">Read more</a>
</div>

It's one extra div but I think is conceptually a nicer way to think about it. In this situation you may have that extra div anyways, because you might be doing some flex-col trickery to always push the link to the bottom of the card for example.

I did a really great interview with @markdalgleish a couple of months ago where we talked about this idea of using nested Stack components instead of trying to adjust the space for an individual element in the stack, worth a listen if you can make time for it I think 👍

http://www.fullstackradio.com/134

[lihbr]

Thanks for having a look at my case, makes sense regarding that!

I'm somewhat convinced but I'll give a shot for sure at the interview in order to make up my mind about all of this.

Also I think I'll roll a simple plugin that add similar utilities anyway as I need to support IE correctly, that's the power of Tailwind after all~