Utility API: improve class generation

[alizedebray]

With the current utility API you need one entry per class.
For example:

 'margin-top': (
    responsive: true,
    property: margin-top,
    class: mt,
    values: from-tokens('spacing', 'margin'),
  ),
 'margin-bottom': (
    responsive: true,
    property: margin-bottom,
    class: mb,
    values: from-tokens('spacing', 'margin'),
  ),
 'margin-y': (
    responsive: true,
    property: margin-top margin-bottom,
    class: my,
    values: from-tokens('spacing', 'margin'),
  ),

generates classes like:

.mt-1 { margin-top: 1px; }
.mt-2 { margin-top: 2px; }
.mt-3 { margin-top: 3px; }
.mb-1 { margin-bottom: 1px; }
.mb-2 { margin-bottom: 2px; }
.mb-3 { margin-bottom: 3px; }
.my-1 { margin-top: 1px; margin-bottom: 1px; }
.my-2 { margin-top: 2px; margin-bottom: 2px; }
.my-3 {margin-top: 3px;  margin-bottom: 3px; }

To reduce the CSS output we could improve the API to allow for multiple classes to be set at the same time like so:

 'margin-top': (
    responsive: true,
    property: margin-top,
    class: mt, my,
    values: from-tokens('spacing', 'margin'),
  ),
 'margin-bottom': (
    responsive: true,
    property: margin-bottom,
    class: mb, my,
    values: from-tokens('spacing', 'margin'),
  ),

and generate classes like:

.mt-1, .my-1 { margin-top: 1px; }
.mt-2, .my-2 { margin-top: 2px; }
.mt-3, .my-3 { margin-top: 3px; }
.mb-1, .my-1 { margin-bottom: 1px; }
.mb-2, .my-2 { margin-bottom: 2px; }
.mb-3, .my-3 { margin-bottom: 3px; }