// Remember jQuery plugins?
$('select').select2()

// SPA frameworks via template engines
var TitleView = Backbone.View.extend({
  template: _.template('<h1><%=text%></h1>')
  // Or Pug, Mustache, Handlebars, etc
})

// Modern components
function Title({ text, className, }){
  return (
    <h1 { ...{ className } }>{ text }</h1>
  )
}

/* toast.css */
.message { font-weight: bold; }
.success { color: green; }
.fail    { color: red; }

import {
  message, success, fail,
} from './toast.css'

function Toast({ isSuccess, text }){
  const statusClass = isSuccess ? success : fail
  const className = `${message} ${statusClass}`
  return <div { ...{ className } }>{text}</div>
}
// usage
<Toast { ...{isSuccess: true, text: 'WIN' } } />
<Toast { ...{isSuccess: false, text: 'FAIL'} } />

import jss from 'jss'
import preset from 'jss-preset-default'
import color from 'color'

// One time setup with plugins and settings
jss.setup(preset())

// Create or compose your CSS
const styles = {
  button: {
    fontSize: 12,
    '&:hover': { // CSS pseudo-classes
      background: 'blue'
    }
  },
  ctaButton: {
    extend: 'button', // mixins
    '&:hover': {
      background: // Runtime JS colors
        color('blue').darken(0.3).hex()
    }
  },
  '@media (min-width: 1024px)': {
    // CSS media queries
    button: {
      width: 200
    }
  }
}

// Attach stylesheet to DOM (or SSR)
const {classes} =
  jss.createStyleSheet(styles).attach()

// Render your HTML with generated classes
document.body.innerHTML = `
  <button class="${classes.button}">
    Button
  </button>
  <button class="${classes.ctaButton}">
    CTA Button
  </button>
`

import React from 'react'
import injectSheet from 'react-jss'

const styles = {
  button: {
    background(props){ return props.color }
  }
}

function Button({ classes, children }){
  const buttonProps = {
    className: classes.button,
    children
  }
  return <button { ...buttonProps } />
}

export default injectSheet(styles)(Button)

import React, { Component } from 'react'
import injectSheet from 'react-jss'

const styles = {
  button: {
    background({ color }){ return color }
  }
}

@injectSheet(styles)
export default class Button extends Component {
  render(){
    const { classes, children } = this.props
    const buttonProps = {
      className: classes.button,
      children
    }
    return <button { ...buttonProps } />
  }
}

import {h1} from 'styled-components'

const Title = h1`
  font-family: Comic Sans MS;
  color: blue;
`
// Usage
<Title>Hello World!</Title>

import styled from 'styled-jss'

const Title = styled('h1')({
  fontFamily: 'Comic Sans MS',
  color(props){ return props.theme.textColor }
})
// Composition
const ScaryTitle = styled(Title)({
  color: 'red'
})
// Usage
<Title>OHAI!</Title>
<ScaryTitle>FAIL</ScaryTitle>

// a styled component
import { StyleSheet, css } from 'aphrodite'

const styles = StyleSheet.create({
  title: { color: 'green' }
})

function Heading(props){
  const headingProps = {
    ...props,
    className: css(styles.title)
  }
  return <h1 { ...headingProps } />
)

// SSR with critical CSS inlined
import { StyleSheetServer } from 'aphrodite'

const { html, css } = StyleSheetServer.renderStatic(
  () => ReactDOMServer.renderToString(<App/>)
)

// Send in response body
const criticalCss = `
  <style data-aphrodite>
    ${css.content}
  </style>
`

import { styled } from 'styletron-react'

const Title = styled('h1', {
  fontFamily: 'Comic Sans MS',
  color(props){ return props.theme.textColor }
})

// Composition
const ScaryTitle = styled(Title)({
  color: 'red'
})

// Usage
<Title>OHAI!</Title>
<ScaryTitle>FAIL</ScaryTitle>

import Styletron from 'styletron-client'
import {StyletronProvider} from 'styletron-react'

// SSR rehydration
const styleElements = document
  .getElementsByClassName('_styletron_hydrate_')

ReactDOM.render(
  <StyletronProvider
    styletron={ new Styletron(styleElements) }
    >
    <App/>
  </StyletronProvider>,
  document.getElementById('app')
)

import Styletron from 'styletron-server'
import {StyletronProvider} from 'styletron-react'

export default function render(){
  const styletron = new Styletron()
  const appMarkup = ReactDOM.renderToString(
    <StyletronProvider { ...{ styletron } }>
      <App/>
    </StyletronProvider>
  )
  const stylesForHead = styletron
    .getStylesheetsHtml()
  return `<html><head>${ stylesForHead }</head>
    <body>${ appMarkup }</body></html>`
}