Implement the supports variant

[RobinMalfait]

This PR adds a new supports variant.

It allows you to check if a certain css property / value is supported or not so that you can apply certain utilities or not.

This variant doesn't ship with any named variants, but you can use arbitrary variants which gives you the full flexibility of this variant plugin.

E.g.:

<div class="supports-[display:grid]:grid"></div>

Which results in the following css:

@supports (display: grid) {
  /* ... */
}

If you require spaces in your supports check, then you can use the _ similar to how we handle that in arbitrary values already.

<div class="supports-[transform-origin:5%_5%]:grid"></div>

Which results in the following css:

@supports (transform-origin: 5% 5%) {
  /* ... */
}

If you are just interested in checking wether the propery is supported regardless of the value, then you can just provide the property name and we will fill in a value for you:

<div class="supports-[container-type]:grid"></div>

Which results in the following css:

@supports (container-type: var(--tw)) {
  /* ... */
}

We also read from your config file if you want named supports variants if there is a check you are repeating all over the place.

module.exports = {
  theme: {
    // ...
    supports: {
      grid: 'display: grid'
    }
  }
}

<div class="supports-grid:grid"></div>