Ractive reordering CSS class names?

[jmellicker]

Description:

Ractive seems to be reordering class names in the DOM.

Versions affected:

0.8.11 & 0.9.0-build-108

Platforms affected:

Chrome, Firefox, Safari

Reproduction:

http://codepen.io/jmellicker/pen/mWEXMY?editors=1010
(click one of the buttons "three" or "four")

[fskreuz]

Marking this as pending. I'm not sure what's the proper behavior or what the specs have to say with regards to this. A few searches led me to this Stack Overflow answer whose comments mention Semantic UI is depending on this behavior.

Afaik, the only time order matters would be:

• If you use attribute selectors
• If you use node.classList
• Semantic UI (as mentioned in SO answer and the issue demo)

But then from an intuitive point of view, it shouldn't reorder 😄

[jmellicker]

Yeah, in most cases it wouldn't matter, but Semantic UI needs certain things in order.

Ractive 0.7.3 didn't reorder class names, did something fundamental change so fixing this would be hacky? If so, please close and forget this issue! (We don't have to use Ractive to set classes, document.getElementById('grid').className = 'ui three column grid' works fine.)

[evs-chris]

0.8 started not completely trampling the class attribute and instead checks for classes that are added and removed by Ractive to insert or remove from the existing list. I would say we could switch to using classList, but we still support IE9, which apparently doesn't do that. I don't think it would be much trouble to see if there's an anchor point in the existing class list for new classes to insert them in template order. I didn't realize there was anything sensitive to class order. TIL

[evs-chris]

This should now be fixed in edge and v0.8-dev. it'll go out with 0.8.12 as soon as #2899 is resolved.