However I must admit, the css story within vue is more interesting than React and its collection of CSS-IN-JS libraries.
CSS-in-JS is one of my favorite parts of the React ecosystem. Style as a function of state is such a natural extension to React's programming model that I end up cringing a bit every time I have to go back to writing a bunch of different classes and applying them conditionally. Representing styles as data also means you have the full power of JavaScript at your disposal to compose and manipulate styles (not to mention access to a proper module system), whereas with plain CSS you're limited to a handful of mixins offered by whatever post-processor you choose, and those in turn are generally limited in terms of expressiveness themselves by nature of only being able to perform simple string interpolations, since that's the format they have to deal with.
I think these benefits are analogous to the benefits of HTML-in-JS a la JSX over traditional JS-in-HTML templates. I'm honestly struggling to see why someone would prefer HTML-in-JS but not CSS-in-JS.
That is, all of these frameworks are underpinned by a certain awfulness that is born of the impedance mismatch between applications vs Web. The right framework would abstract away CSS, templating, HTML, and all of the other awful that we've unfortunately come to accept as the cost of doing business when building Webapps.
So far as I know, that framework doesn't exist yet.
Pretty much all of the UI frameworks on any platform that I personally know of use some combination of an XML-based templating system for laying out components and a programming language to implement the logic behind those components, which is fairly analogous to how the web has HTML for templating and JS for implementing logic. Perhaps the impedance mismatch you're talking about lies in how the web handles styling, i.e. CSS itself and how it's not integrated into either the templating or the logic side like certain other frameworks but is rather a separate independent piece altogether?
Just trying to understand where you're coming from, because in my view React itself _is_ already a powerful abstraction over the DOM (in React you write components, and rendering those components to the DOM is an implementation detail involving an entirely separate library, react-dom, which can be seamlessly swapped with libraries dealing with the implementation detail of rendering to other targets like react-native, react-canvas, react-sketchapp, etc), and CSS-in-JS in the React ecosystem is itself a powerful abstraction over CSS for implementing styling as a function of state (though this abstraction hasn't yet been taken advantage of quite as much, the only notable exception I know of being glamorous-native, which implements glamorous's style as a function of state pattern on top of react-native's Stylesheet primitive rather than on top of CSS).
>all of the UI frameworks on any platform that I personally know of use some combination of an XML-based templating system
I also know of no other approaches with significant traction. That's the problem I'm referencing: they all take the approach of starting with technology that was designed for serving static documents then, essentially, layering on some cruft that attempts to adapt it for dynamic environments. This is obviously because the delivery platform (browsers) still rely on the underlying tech. But, there's no reason this can't be completely abstracted away by our tooling/frameworks.
I understand your references to React's abstraction but, in the end, it still comes down to CSS-in-JS, HTML-ish templating, etc. So, React's is not really an abstraction "where it counts". Think about it: why are we writing CSS at all when what we want is an application? In other words, if there were no Web and you wanted to build out a platform and/or development ecosystem for constructing applications from scratch, would CSS or XML-based templates, etc. be a design-choice you'd make? Of course not. They are wonky and inefficient for these purposes. Meanwhile, we're at the point where pre-compiling on these frameworks. So, why isn't there a framework that looks more like what we'd build from scratch that then compiles down to the Web-ish stuff we're working in (i.e. JSX or similar); thus completely abstracting away everything Web?
Because if you step back and look at, say, JSX through this lens, it's slightly insane. Not picking on React here--just following up on your example. This problem is endemic to virtually all frameworks that have gained significant traction.
There's a better way and it's frankly probably more akin to Swing or Visual Basic than it is to anything we've seen thus far.
if (unreadMessages.length > 0) { addComponent(this) }