Improve arbitrary value support

[RobinMalfait]

Edit: This PR is fairly big and contains multiple scopes, so I will be splitting this PR into multiple PR's!

PR 1: #5585
PR 2: #5587
PR 3: #5590
PR 4: #5588

---

This PR will improve arbitrary value support for various plugins. I had to introduce a few more typehints, the names can still be changed if we want to!

Here are the changes to various plugins:

Background images

Added an url typehint, that checks for the url prefix.

Input:

<div class="bg-[#0088cc]"></div>
<div class="bg-[url('/path-to-image.png')]"></div>
<div class="bg-[url:var(--maybe-a-url-at-runtime)]"></div>

Output:

.bg-\[\#0088cc\] {
    --tw-bg-opacity: 1;
    background-color: rgb(0 136 204 / var(--tw-bg-opacity))
}
.bg-\[url\(\'\/path-to-image\.png\'\)\] {
    background-image: url('/path-to-image.png')
}
.bg-\[url\:var\(--maybe-a-url-at-runtime\)\] {
    background-image: var(--maybe-a-url-at-runtime)
}

---

Background size & background position

Both background-size and background-position can accept length values like 200px 100px. This means that this is ambiguous, for this reason I introduced a size and position typehint.

Input:

<div class="bg-[size:200px_100px]"></div>
<div class="bg-[position:200px_100px]"></div>

Output:

.bg-\[size\:200px_100px\] {
    background-size: 200px 100px
}
.bg-\[position\:200px_100px\] {
    background-position: 200px 100px
}

Font family & font weight

Font families and font weights can be ambiguous but they aren't always. For example, font-[300] is a font-weight because you can't have a font-family of value 300. However font-[black] can both refer to font-family: black; and font-weight: black;

For this reason I introduced family and weight typehints.

Input:

<div class="font-[Georgia]"></div>
<div class="font-['Gill_Sans']"></div>
<div class="font-[300]"></div>
<div class="font-[family:var(--value)]"></div>
<div class="font-[weight:var(--value)]"></div>

Output:

.font-\[Georgia\] {
    font-family: Georgia
}
.font-\[\'Gill_Sans\'\] {
    font-family: 'Gill Sans'
}
.font-\[family\:var\(--value\)\] {
    font-family: var(--value)
}
.font-\[300\] {
    font-weight: 300
}
.font-\[weight\:var\(--value\)\] {
    font-weight: var(--value)
}

---

Outline

The outline plugin can be configured as an array in the config, therefore I mimicked this behaviour in the arbitrary value support for this plugin as well. The first argument will be the outline, the second argument will be the outline-offset which defaults to 0.

Input:

<div class="outline-[2px_solid_black]"></div>
<div class="outline-[2px_solid_black,2px]"></div>

Output:

.outline-\[2px_solid_black\] {
    outline: 2px solid black;
    outline-offset: 0
}
.outline-\[2px_solid_black\2c 2px\] {
    outline: 2px solid black;
    outline-offset: 2px
}

[RobinMalfait]

Changed this a little, because I wanted to get the [typehint, rest] and if there is no typehint, I wanted [undefined, rest]. The previous code would have generated [rest] for the last case.