letsFixCSS.js

const buttonLayout = createLayoutStyles({
  spacing: {
    top: 0,
    bottom: 0,
    left: 0,
    right,
  },
  size: {
    height: 500,
    width: 300,
  },
  border: {
    left: {
      radius: 5,
      width: 1,
      style: 'solid',
      color: '#FFF'
    },
    right: {
      ...
    }
  }, 
  background: {
    color: 'green',
    url: 'http://google.com/'
  },
  content: {
    direction: 'vertical',
    align: {
      horizontal: 'center' / 'top' / 'bottom',
      vertical: 'center' / 'left' / 'right',
    },
    space: 'around' / 'between',
    justify: true ('justifyContent: space-between'),
    wrap: true,
    reverse: true,
    grow: true,
    shrink: true,
  }
})

const buttonText = createTextStyles({
  family: 'Helvetica',
  size: 16,
  lineHeight: 30,
  weight: 400,
  letterSpacing: 3,
  color: 'red'
})

font: {
  family: '',
  size: 16,
  weight: 'normal' / 'bold' / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900
},
italic: true

selection: false

Another idea to discuss: prefix all boolean props with has/is/can, something like canGrow: true or isVisible: false.

dangerouslyInjectUnsupportedStyles: { __: { WebkitFontSmoothing: 20 } }

For server side rendering, we can mark the required keys with $.