Add mask-* utilities for mask-image, mask-composite, etc…

[thecrypticace]

This PR adds mask-* utilities for mask-image, mask-composite, mask-mode, and other related CSS properties. Note that it does NOT add support for mask-border-* properties.

This is very much a work in progress.

Here's an example of using these utilities:

<div class="flex h-dvh w-dvw items-center justify-center gap-4">
  <div class="relative rounded bg-orange-50 p-12">
    <div class="rounded shadow-lg ring-1 shadow-rose-700/25 ring-orange-600/15">
      <div class="size-32 rounded bg-linear-to-b from-orange-300 from-33% to-rose-600 mask-conic-60 mask-from-black/100 mask-to-black/0 mask-to-75% mask-alpha inset-ring-1 inset-ring-orange-100/50"></div>
    </div>
  </div>

  <div class="relative rounded bg-orange-50 p-12">
    <div class="size-32 rounded bg-linear-to-b from-orange-300 from-33% to-rose-600 mask-[url(#heart)] mask-luminance mask-[size:100%] mask-no-repeat text-white inset-ring-1 inset-ring-orange-100/50">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut temporibus adipisci impedit assumenda! Natus facere iste alias necessitatibus quos blanditiis, minima quidem repellat porro voluptatum provident et eius. Nobis, error?</div>
  </div>

  <div class="relative rounded bg-orange-50 p-12">
    <div class="size-32 rounded bg-linear-to-b from-orange-300 from-33% to-rose-600 mask-[url(https://mdn.github.io/shared-assets/images/examples/mask-star.svg)] mask-[size:100%] mask-no-repeat text-white inset-ring-1 inset-ring-orange-100/50">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut temporibus adipisci impedit assumenda! Natus facere iste alias necessitatibus quos blanditiis, minima quidem repellat porro voluptatum provident et eius. Nobis, error?</div>
  </div>
</div>

<svg viewBox="0 0 100 100">
  <mask id="heart" width="100" height="100">
    <!-- Make everything visible by default -->
    <rect x="0" y="0" width="100" height="100" fill="white" />
    <!-- Cut out a heart-shaped path in the lement -->
    <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" />
  </mask>
</svg>

and what it looks like in the browser:

Here you can clearly see the background color bleeds through the element, content inside is cut out, etc…