petehunt: about react-bootstrap!
First, if you forget everything about passing a transformer through browserify or some "cssx" compilation, the thing's still working great. The bootstrap less code was rather easy to convert into js objects with a few regex replaces.
I was planning to go on until I realized the whole less parsing library was big. But every functionality in that library can be translated into regular js methods.
In fact I think it's a viable idea to have a react companion library (or independent one) that, say, contains css utility methods such as darken(0.2) or hsl(bla). At the same time this avoids the awkwardness of manipulating strings for css props. Mixins are natural: just a merge method. Cascading comes for free like I said, due to the order of merge(require('button'), require('customButton')).
Variables and loops and other "incredible" preprocessors functionalities come for free without any learning curve. Best of all, scoped css since it's just an ordinary object require. No more need for "btn btn-danger"; just: require('btn'), which say returns an object containing btnNormal and btnDanger (which are already merged inside that file with a genericBtnStyle object.
The only non-obvious bit is css pseudo-selectors: most can be ignored except the hover/visited/media query. For hover, switching between objects to pass to style works with onHover although it's a bit much code. visited is undoable. media queries: you could control the display with onResize! And it'll provide true responsive apps, with unique displays, not just some random css that try to correct a few elements (generalization, but I'm not too fond of the way people view responsive design right now). Or you could use a display: windowLimit(100, 500) inside your style object that returns hidden or not.
All of the above is doable right now without any modification to React.
I haven't touched images since bootstraps don't use any. This and the bundling will require transformations through browserify. Just throwing ideas around, don't take them too seriously: there could be one single function in react or other places that registers the css (well, js object) imported, and the required myButton would become a string id that the merge function and the style prop understands, like so:
// dev
var btn = require('btn'); // actual objects
<div style={merge(btn.normal, btn.danger}/> // one object passed
// transformed, bundled, html result:
<div style="react-css-sadflk react-css-fdsaf">
This is super hacky and confusing when people can't modify the btn object anymore since it's just a string. Again I'm really throwing ideas around.
Still, image issues, not sure what to do. And that pseudo-selector issue. If React or a transformer can intervene then I think we'll pretty much set.