tkh44

import '../lib/hydrate'
import React from 'react'

import Box from '../components/box'
import Input from '../components/input'
import Card from '../components/card'
import LeafletMap from '../components/map'
import theme from '../lib/theme'
import images from '../lib/images'
import data from '../boulder.json'

tkh44

import React from 'react'
import styled from 'emotion/react'
import { omit } from 'emotion/lib/utils'
import { space, width, fontSize, color, responsiveStyle } from 'styled-system'

import { baseCss } from './ui'

const defaultExcludedProps = [
  'm',
  'mt',

tkh44

Results:

sorted by rerender time

Solution	Use CSS	Use Inline-Styles	Mount Time (ms)	Rerender time (ms)
react (without styles)	-	-	21.53	49.52
styled-jsx	+	+	37.8	54.77
glam-inline-style	+	+	37.44	56.39
react-css	+	+	33.17	60.98
aphrodite	+	+	42.76	63.24

tkh44

// original code
styled.h1`color:${myColor};`

// Step 1
// emotion creates a function call from
// the tagged template literal
styled('h1', css`color:${myColor};`)

// Step 2
// glam converts the tagged template literal to a

tkh44

// original code
styled.h1`color:${myColor};`

// Step 1
// emotion creates a function call from
// tagged template expression
styled('h1', css`color:${myColor};`)

// Step 2
// glam converts the tagged template expression to a

tkh44

### Keybase proof

I hereby claim:

  * I am tkh44 on github.
  * I am tkh44 (https://keybase.io/tkh44) on keybase.
  * I have a public key ASA_ma7oCXf48V7fiCcoL9YDUaJd5k_Ivzw1tpu9ERkeiAo

To claim this, I am signing this object:

tkh44

// eslint-disable-next-line no-unused-vars
import React from 'react'
import { render } from 'react-dom'

import crate from '../../src'

const pp = obj => JSON.stringify(obj, null, 2)

function Stateless (props) {
  return (

tkh44

import React from 'react'
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'
import { Motion } from 'data-driven-motion'


const STIFF_SPRING = { stiffness: 420, damping: 42, precision: 0.1 }
const BOUNCY_SPRING = { stiffness: 180, damping: 21, precision: 0.1 }
const IMAGES = [
  { id: 0, title: 'Dark Orchid', color: 'DarkOrchid' },
  { id: 1, title: 'Lime Green', color: 'LimeGreen' },

tkh44

// tl;dr ...set the duration of a spring animation
export const configw = (sec, overdamping) => {
  const s = overdamping <= 0
    ? 1 - overdamping
    : 1 / Math.sqrt(1 + Math.pow(2 * Math.PI / Math.log(1 / (overdamping * overdamping)), 2))

  const ks = (2 * Math.PI / sec) / Math.max(Math.sqrt(1 - s * s), 0.5)
  const c = 2 * ks * s

  return [ks * ks, c]

tkh44

import React from 'react'
import { BrowserRouter as Router, Route, Link, Redirect, matchPath } from 'react-router-dom'
import { Motion } from 'data-driven-motion' // https://github.com/tkh44/data-driven-motion

const WOBBLY_SPRING = { stiffness: 200, damping: 15, precision: 0.1 }

const AnimationExample = () => (
  <Router>
    <div>
      <ul>