Throw flow error when trying to access a style that is not defined on a stylesheet

[brentvatne]

I thought it would be useful to help clear out references to no longer used styles and also catch typos on style names to have flow error when we try to access a style that isn't defined.

Example:

export default class AuthenticationScreen extends React.Component {
  render() {
    // This throws an error because `continer` is misspelled 
    return (
      <View style={styles.continer} /> 
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
}

export default class AuthenticationScreen extends React.Component {
  render() {
    // This throws an error because no fancyContainer style is defined
    return (
      <View style={[styles.container, styles.fancyContainer]} /> 
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
}

All credit goes to @jeffmo in this tweet: https://twitter.com/lbljeffmo/status/755179096271888385

Also included in the PR is some cleanup on styles that no longer exist, which were caught by this change :)

[ghost]

By analyzing the blame information on this pull request, we identified @andreicoman11 and @nicklockwood to be potential reviewers.

[eslint-bot]

no-unused-vars: 'U' is defined but never used

[vjeux]

remove U?

[jeffmo]

Yay lint! I forgot to delete this extra type param while poking around

[vjeux]

This is so good! I'm curious how many errors it'll generate in fb codebase :)

[vjeux]

@facebook-github-bot shipit

[ghost]

Thanks for importing. If you are an FB employee go to Phabricator to review internal test results.

[vjeux]

107 Flow errors detected in root

Nice!

[skevy]

Super cool. Can't wait to use this technique everywhereeeeeee

[ide]

I think result should be of type {[key: $Keys<T>]: number}, this checks out on the Try Flow website:

function create<T: Object>(obj: T): {[key: $Keys<T>]: number} {
  var result: {[key: $Keys<T>]: number} = {};
  for (var key in obj) {
    StyleSheetValidation.validateStyle(key, obj);
    result[key] = ReactNativePropRegistry.register(obj[key]);
  }
  return result;
}

EDIT: this is a little prettier:

type Styles = {[key: string]: Object};
type StyleSheet<S: Styles> = {[key: $Keys<S>]: number};

function create<S: Styles>(styles: S): StyleSheet<S> {
  var styleSheet: StyleSheet<S> = {};
  for (var key in styles) {
    StyleSheetValidation.validateStyle(key, styles);
    styleSheet[key] = ReactNativePropRegistry.register(styles[key]);
  }
  return styleSheet;
}

https://flowtype.org/try/#0CYUwxgNghgTiAEA3W8DKAXAnhEqAWII6AalBAJbBTrkD2AdgFzwDyARgFbjoDcAUKEiwEyGPABKIKGHQA5auUQgACjFoAHSQHNyAZ3QxMzAN5948ODv0gYAClqduzdlxkBKZvQCuAWzY2AGj4AX34+LHUEDGwQXXgAXnhjAG0AaxAjeH0YcnotAF1nRxlQ8MxItCwcfEJ0AB4AFWZonF0APgSktIzmABIAaQzdRrbC+G8-G1LzPgAzL3oZOnp4MDhqEDrUZqrYttt9GN1mj0qYmqItjtNzUSzdi-Qd84JL1A7E42n4WdoxWzu6Uw8Fy9yObiSZnMZ2qrxIZEoCgYADpkBQqOhcLtbECAmDWm5+ND8bg4d1MPlOpJpHIFEpVBptHoDJhkZZmTYDrtdOT8oSocEoXB0F4YCtDrDavxBXwwAx9BYoAB3FqxTo3VYMdBQXI2ExQ8yzHAAD2YAEYguZgkFSnL6AqJWrEmspJjbDBlardPy+I7dMi7Tr6DZ+FyjgGtUG9fccnlCUA @

[jeffmo]

Good catch

[vjeux]

@yungsters fixed the internal call sites and pulled it in! Thanks