What if you could pass a function that return multiple styles react-fela?

Future.js

import { connect } from 'react-fela'
import React from 'react'

const App = ({ styles }) => (
  <div>
    <h1 className={styles.heading}>Sorry</h1>
    <h2 className={styles.ingress}>All your base are belong to us</h2>
    <p className={styles.paragraph}>We know it's not nice, but you don't need it anyway.</p>
  </div>
)

const styles = props => ({
  heading: {
    fontSize: props.size || '20px',
    color: 'green',
    '@media(max-width: 700px)': {
      fontSize: '18px',
    },
  },
  ingress: {
    fontSize: '16px',
    lineHeight: 1.5,
  },
  paragraph: {
    lineHeight: 1.4,
    fontSize: props.size || '14px',
    color: '#131313',
  },
})

export default connect(styles)(App)

polyfill.js

const connect = styles => felaConnect(props => renderer => {
  const computed = styles(props)
  return Object.keys(computed).reduce((renderedStyles, property) => {
    renderedStyles[property] = renderer.renderRule(() => computed[property], props)
    return renderedStyles
  }, {})
})

Today.js

import { connect } from 'react-fela'
import React from 'react'

const App = ({ styles }) => (
  <div>
    <h1 className={styles.heading}>Sorry</h1>
    <h2 className={styles.ingress}>All your base are belong to us</h2>
    <p className={styles.paragraph}>We know it's not nice, but you don't need it anyway.</p>
  </div>
)

const heading = props => ({
  fontSize: props.size || '20px',
  color: 'green',
  '@media(max-width: 700px)': {
    fontSize: '18px',
  },
})

const ingress = () => ({
  fontSize: '16px',
  lineHeight: 1.5,
})

const paragraph = props => ({
  lineHeight: 1.4,
  fontSize: props.size || '14px',
  color: '#131313',
})

export default connect(props => renderer => ({
  heading: renderer.renderRule(heading, props),
  ingress: renderer.renderRule(ingress, props),
  paragraph: renderer.renderRule(paragraph, props),
}))(App)