x-transition breaks with newlines

[mattvague]

I believe there's a bug in the current alpine transition logic regarding newlines. Currently if I have an x-transition:leave value like this in liquid (which renders out to having newlines):

  x-transition:leave="
    ease-out duration-[10000ms]
    pointer-events-none
  "

then an InvalidCharacterError error is thrown from setClassesFromString because Alpine is trying to treat the newlines characters as class names:

HTML5 docs say this for class attribute:

The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.

And then says that:

A set of space-separated tokens is a string containing zero or more words (known as tokens) separated by one or more space characters, where words consist of any string of one or more characters, none of which are space characters.

Where whitespace characters are:

U+0009 TAB, U+000A LF, U+000C FF, U+000D CR, or U+0020 SPACE.

I believe all we have to do to fix this is to change this line as follows:

-    let split = classString => classString.split(' ').filter(Boolean)
+    let split = classString => classString.split(/\s/).filter(Boolean)

Happy to open a PR!

[ekwoka]

Makes sense!

[mattvague]

Sweet, will submit a PR

[mattvague]

Done! #4419