babel-fela.js

// before
const rule = ({ fontSize, color }) => ({
  fontSize: fontSize,
  color: color,
  backgroundColor: 'black',
  lineHeight: 1.0,
  ':hover': {
    color: 'red'
  },
  '@media (min-width: 300px)' {
    backgroundColor: 'yellow',
    color: 'green'
  }
})

// after
const rule = ({ fontSize, color }, renderer) => {
  // some one time condition
  if (!renderer.precompiled[UNIQUE_ID]) {
    renderer.precompiled[UNIQUE_ID] = // render rules etc.
  }
  
  return {
    _className: renderer.precompiled[UNIQUE_ID],
    fontSize: fontSize,
    color: color
  }
}