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'
})

const buttonLayout = createLayoutStyles({
  cursor: 'pointer',
  opacity: 0.4,
  display: true / false,
  spacing: {
    top: 0,
    bottom: 0,
    left: 0,
    right,
  },
  size: {
    height: 500,
    width: 300,
  },
  border: {
    left: {
      radius: 5,
      width: 1,
      style: 'solid',
      color: '#FFF'
    },
    right: {
      ...
    }
  },
  position: {
    // inPlace: true,
    top: 100,
    left: 400,
    layerIndex: 2,
  },
  transform: {
    translate: {
      x: 40,
      y: 20,
      z: 203,
    },
    origin: {
      x: 50 / '50%',
      y: 20,
    },
    rotate: 60,
    scale: 50,
    perspective: 400,
    skew: {
      x: 45,
      y: 23,
    }
  },
  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,
    overflow: {
      vertical: 'hidden' / 'visible' / 'scroll',
      horizontal: 'hidden' / 'visible' / 'scroll'
    },
  },
  shadow: {
    color: 'blue',
    offset: {
      x: 4,
      y: 6
    },
    spread: 4
  },
})

const buttonText = createTextStyles({
  cursor: 'pointer',
  family: 'Helvetica',
  size: 16,
  lineHeight: 30,
  weight: 400,
  letterSpacing: 3,
  color: 'red',
  shadow: {
    color: 'blue',
    offset: {
      x: 4,
      y: 6
    },
    spread: 4
  },
  decoration: false / 'underline' / 'overline',
  overflow: 'ellipsis' / 'no-wrap' / 'hidden',
  case: 'upper' / 'lower' / 'capitalize',
  wrap: false,
})

  spacing: {
    inner: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0
    },
    outer: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0
    }
  },

Imagine 2 bordered and backgrounded blocks in a column.

RN styles for Text:

Feels like "browser specific crap", but we might need to support this. Or not?
includeFontPadding – so they basically introduced a lot of new (and actually proprietary) properties instead of old ones. WTF.

const buttonText = createTextStyles({
  ...,
  dangerouslyInjectUnsupportedStyles: {
    includeFontPadding: false,
    weDontCare: 1
  }
})

Or:

const buttonInjects = dangerouslyInjectUnsupportedStyles({
  includeFontPadding: false,
  weDontCare: 1
})

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 $.