DOMException for trailing whitespace in x-bind:class

[felixsc]

Hi,
I'm not sure if this is an issue of Alpine itself or just something JS specific.

Alpine version: latest 2.x.x (CDN)

The following error appears when a whitespace is added after the last class declaration:

Uncaught (in promise) DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty. at https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js:7:8076 at Array.forEach (<anonymous>) at https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js:7:8053 at Array.forEach (<anonymous>) at x (https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js:7:8023) at https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js:7:18631 at Array.forEach (<anonymous>) at ie.resolveBoundAttributes (https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js:7:18456) at ie.initializeElement (https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js:7:17197) at https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js:7:16908

Code to reproduce

html (error):

<div x-data="{color: 'green'}">
    <h1 x-bind:class="{'green-text ': color === 'green'}">Does my color change</h1>
</div>

html (working)

<div x-data="{color: 'green'}">
    <h1 x-bind:class="{'green-text': color === 'green'}">Does my color change</h1>
</div>

styles:

.green-text {
  color: green;
}

Notice the whitespace in 'green-text '. Removing the whitespace fixes it.

I ran into this today and it wasn't immediately obvious to me why it broke. Especially using tailwind makes it hard to spot this, when the class declarations get longer.

[HugoDF]

To me this looks like a bug where Alpine isn't trimming whitespace when applying classes but would need to have a look to be sure.

[SimoTod]

We probably just need to filter the list here - > https://github.com/alpinejs/alpine/blob/master/src/directives/bind.js#L75
to make sure that all the elements are not empty string.
It's a good first PR if you want to have a go @felixsc

[felixsc]

Yes, I see what the issue is.
Okay I'll do my best 👍

[SimoTod]

Great, make sure you add a unit test if you can. Ideally you could write the test first, make sure it fails as it should, then apply your fix and verify that the test passes.
In that way, if someone refactors that code in the future and remove your fix by mistake, the test will highlight the regression straight before it slips into a release. 👍