Support reverse order for space and divide utilities

[adamwathan]

This PR uses CSS Custom Properties to add support for reversing the direction of items in a spaced or divided stack.

Prior to this, you'd get margin in the wrong place if you had a simple reversed set of items like this:

<div class="flex flex-row-reverse space-x-4">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

...because the space-x utilities use margin-left, and when reversing the order the margin is added to the wrong side.

This PR adds new stack-x-reverse, stack-y-reverse, divide-x-reverse, and divide-y-reverse modifier utilities that you can add to an element to tell it to add the margin or border to the opposite side:

<div class="flex flex-row-reverse space-x-4 space-x-reverse">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

This is achieved using custom --space-x-reverse, --space-y-reverse, --divide-x-reverse, and --divide-y-reverse variables that are used to essentially perform a logical operation and apply the correct margin/border.

This makes these new features incompatible with IE11, but I'm personally completely fine with that. Using postcss-custom-properties would at least make the non-reversed versions work, so it's not even that bad really.

Why not set the variables in flex-row/col-reverse?

I considered updating the relevant flex utilities to have them set this variable, but decided against it because then users couldn't opt-in to reversed spacing when combining these features with their own custom CSS that changed the flex-direction. By making it a separate class, you can change the direction of the spacing/borders explicitly, separate from whether you are even using utilities to control the flex direction.

Why not use a compound selector like .space-x-reverse.space-x-4 > * + *?

I decided against this because it increases the specificity of the selector even more, and also increases the number of generated CSS rules.