React ScopeSyle InjectStyle

app.js

import React           from 'react'
import { InjectStyle } from 'react-scopestyle'
import Component       from './component'

React.render(
    <div className="app">
        <InjectStyle />
        <Component />
    </div>
, document.body)

component.js

import React      from 'react'
import ScopeStyle from 'react-scopestyle'
 
let css = "div { color:pink; }"
 
export default class MyScopeStyleComponent extends React.Component {
    render() {
        return (
            <ScopeStyle style={css}>
                <div>yolo</div>
            </ScopeStyle>
        )
    }
}

react-scopestyle.js

import React   from 'react'
import uid     from 'uid'
import Emitter from 'nanoemitter'

let emitter = Emitter()
let style   = ""

function mergeStyle(style) {
    // magic merge
    emitter.trigger('style', style)
}

export default class ScopeStyle extends React.Component {
    constructor(props) {
        super(props)
        this.state = { uid : uid() }
    }
    render() {
        return (
            <span className={this.state.uid}>
                {this.props.children}
            </span>
        )
    }
    scopeStyle() {
        // magically scope under .uid
        return this.props.style
    }
    componentDidMount() {
        mergeStyle(this.scopeStyle())
    }
}

export class InjectStyle extends React.Component {
    constructor(props) {
        super(props)
        this.state = { style : "" }
    }
    render() {
        return (
            <style dangerouslySetInnerHTML={{__html: this.state.style}} />
        )
    }
    shouldComponentUpdate(nextProps, nextState) {
        // magic diffing
        return true
    }
    appendStyle(style) {
        this.setState({style:style})
    }
    componentDidMount() {
        emitter.on('style', this.appendStyle.bind(this))
    }
}

Alternative to react-scopestyle that collect styles and injects at the top level (or wherever). Still suffers from some performance issues, however minor.

I'm leaning towards that none of this should happen at runtime. I think we would be better off with just using a basic Style component (below), perhaps with some scoping, and do all these optimizations, merging etc. in a build step.

import React from 'react'

export default class Style extends React.Component {
    render() {
        return <style dangerouslySetInnerHTML={{__html: this.props.style}} />
    }
}

import React from 'react'
import Style  from 'above'

let css = ".MyComp { color : pink; }"

export default class MyComp extends React.Component {
    render() {
        return (
            <div className="MyComp">
                <Style style={css} />
                <div>yolo</div>
            </div>
        )
    }
}

A build step could potentially pluck out all style tags, optimize and stick it in head or somewhere.

We should also think about how this will work with reusable/published components. It is probably a lot easier having people opt-in to a simple style tag than some complicated system.