00_Aphrodite_Flow_Type_Definition.md

This is a basic example of my attempt to use flow type to be able to do some basic validation on styles defined in a CSS-in-JS manner, as in aphrodite.

An example of a style definition in Aphrodite being:

const styles = StyleSheet({
  myClassName: {
    color: '#000',
    width: '100%'
  }
})

I managed to get a basic flow/type annotation working so that I can validate the style properties. It gives me basic support against typos (e.g. "colour") and invalid style tag usage, however I am struggling with dynamically structure properties, such as media queries:

const styles = StyleSheet({
  myClassName: {
    color: '#000',
    'media (min-width: 500px)': {
      color: '#FFF',
    }
  }
})

aphrodite.flow

declare module 'aphrodite' {
  declare interface StyleClassDefinition {
    color?: string,
    // TODO: All the rest of the valid CSS properties.
    // How do I define dynamic structures such as media queries? :-/
  }

  declare type StyleSheetDefinition = {
    [key : string] : $Shape<StyleClassDefinition>
  };

  declare class StyleSheet {
    create(styleObject : StyleSheetDefinition) : Object
  }

  declare class Aphrodite {
    StyleSheet: StyleSheet
  }

  declare var exports: Aphrodite;
}

foo.js

import { StyleSheet } from 'aphrodite';

const styles = StyleSheet.create({
  icon: {
    color: 'orange',
    'media (min-width: 500px)': {
      color: 'pink',
    }
  },
});