Multple classes aren't allowed in chosenClass

[Tyler-Petrov]

So I'm curious if forcing only one class in the chosenClass property (ie no whitespace) is intended or advantageous for everyone. For those of us who are using tailwind, it would be really nice to have multiple classes be an option.

Here's a codepen just for giggles.

[mrleblanc101]

Same for ghost-class

[jankapunkt]

I can just assume that it was created during a time when manual plain css was the goto way. In days of tailwind etc. this is obviously not desired.

[jankapunkt]

Here is a minimal example that is backward compatible and es5 compatible.

@owen-m1 if you don't see any issues with it I can create a PR what do you think?

function toggleClass(el, name, state) {
    if (el && name) {
      var _toggle = function (_name, _state) {
        if (el.classList) {
          el.classList[_state ? 'add' : 'remove'](_name);
        } else {
          var className = (' ' + el.className + ' ').replace(R_SPACE, ' ').replace(' ' + _name + ' ', ' ');
          el.className = (className + (_state ? ' ' + _name : '')).replace(R_SPACE, ' ');
        } 
      }
      var names = name.split(' ');
      for (var i = 0; i < names.length; i++) {
        _toggle(names[i], state);
      }
    }
}

Usage example:

<div id="moo" class="lol">text</div>
<button onclick="toggleClasses()">toggle</button>

.foo {
  font-weight: bold;
}

.bar {
  color: #f00;
}

let state = false
function toggleClasses () {
  const el = document.querySelector('#moo')
  toggleClass(el, 'foo bar', !state)
  state = !state
}