fix border box problem on ::before and ::after

[vinliao]

Fix for #11.

Working proof:

It turns out, when box-sizing: border-box; is placed on ::before and ::after, the right and bottom "shrinks" by 5px. Perhaps it's because the ::before and ::after is "pinned" into the top-left by absolute positioning.

[thesephist]

Thanks for looking into this @vinliao! I wasn't looking for a fix since I don't use Tailwind, but it's certainly nice to have it working with Tailwind.

From my digging, it looks like the dimensions should actually be calc(100% + 6px) instead (because each border on each side is 3px, so on both sides it's 6px). Would you mind making that quick change?

I'm a tiny bit worried that this could be a breaking change, but I don't think anyone's overriding styles on block::before or block::after — at least, I don't do that on my projects I think. So we'll merge and just do a point release.

[vinliao]

Yeah, it still leaves the chance of having an unwanted side effect.

From https://css-tricks.com/box-sizing/, they say that using box-sizing: inherit for the pseudo-elements are "better." I'm not quite sure what the precise effect are, but this is something that can be tried in case shit hits the fan.

But I guess, for now, this is enough.

P.S. the 5px -> 6px commit has not appeared yet, is github down or something?

[thesephist]

@vinliao Yeah GitHub seems like they're missing your latest commit :/ But i see it on your fork, so once GitHub picks that up I'll merge.

I don't anticipate regressions since you need to be doing something really weird to be touching box-sizing on the pseudoelements, but I'll keep an eye out.

[vinliao]

Huh, it seems like Github broke...

Anyways, @thesephist, I triggered a commit by adding a newline, and the pull request is all updated now.