Detect ambiguity in arbitrary values

[RobinMalfait]

If you use arbitrary values for the bg utilities, then it could happen that you introduce some ambiguity. When you use arbitrary values, then we can detect the type of the input. For example #ff00ff is a color, 20% is a percentage and so on.

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

The value here would be parsed as length. However, we have 2 plugins (backgroundSize and backgroundPosition) that can handle this plugin. Before this plugin this would have generated:

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

This will also probably be squashed together like this:

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

This will not be the desired result, instead you can use typehints to explicitly tell what the value means. In this case, the backgroundPosition plugin implements a position type. This means that we can explicit here:

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

This will now generate the correct results with a unique selector:

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

---

That said, this PR will be able to detect the very first case bg-[200px_100px] and not generate css for that at all, instead it will show you a warning in the console:

The class "bg-[200px_100px]" is ambiguous and matches multiple utilities. Use a type hint (https://tailwindcss.com/docs/just-in-time-mode#ambiguous-values) to fix this.

  - Replace "bg-[200px_100px]" with "bg-[length:200px_100px]" for:
      background-size: 200px 100px

  - Replace "bg-[200px_100px]" with "bg-[position:200px_100px]" for:
      background-position: 200px 100px

If this is just part of your content and not a class, replace it with "bg-[200px_100px]" to silence this warning.

Note: There is a high chance that the warning will be changed/simplified, but at least we can detect it!