Ensure arbitrary values only support valid values

[RobinMalfait]

This PR will ensure that the build doesn't fail all of a sudden. It turns out that CSS doesn't like all the "invalid" css you throw at it. For example, when you have this:

<div class="w-[200px]h-[100px]"></div>

The issue here is that we forgot a space, however this crashes the build (even in watch mode) and you would have to restart the server to fix it. The reason for this is because the result of that line, results in something like this:

.w-\[200px\]h-\[100px\] {
  width: 200px]h-[100px
}

Obviously wrong, but if we minimize the issue, then this is also invalid syntax (Ref: https://twitter.com/adamwathan/status/1430481262016352260?s=20):

.foo {
  width: [;
}

https://jsfiddle.net/op01ubz6/1/

It sort of makes sense, but the browser doesn't have a problem with this :

.foo {
  width: i-am-a-big-boy;
}

https://jsfiddle.net/op01ubz6/

---

This PR will ensure that the first line (w-[200px]h-[100px]) will not even be generated.

[adamwathan]

Thank you sir!

[mnaderian]

Man, this was an effectively big PR.