Add "rich text" and "text style" components

[benface]

Options such as...

componentPrefix: 'c-',
richTextComponent: true,
textStyleComponents: true,
textStyles: {
    richText: {
        fontSize: theme => theme('fontSize.default'),
    },
    richTextChildren: {
        marginTop: '1em',
    },
    richTextFirstChild: {
        marginTop: '0',
    },
    headings: {
        fontFamily: theme => theme('fontFamily.heading'),
        fontWeight: theme => theme('fontWeight.bold'),
        lineHeight: theme => theme('lineHeight.tight'),
    },
    h1: {
        fontSize: theme => theme('fontSize.heading-xl'),
    },
    h2: {
        fontSize: theme => theme('fontSize.heading-lg'),
    },
    h3: {
        fontSize: theme => theme('fontSize.heading'),
    },
    h4: {
        fontSize: theme => theme('fontSize.heading-sm'),
    },
    h5: {
        fontSize: theme => theme('fontSize.heading-xs'),
    },
    h6: {
        fontSize: theme => theme('fontSize.xl'),
        textTransform: 'uppercase',
        color: theme => theme('color.gray'),
    },
    p: {
        lineHeight: theme => theme('lineHeight.relaxed'),
    },
    lists: {
        lineHeight: theme => theme('lineHeight.loose'),
    },
    ul: {
        listStyleType: 'circle',
    },
    link: {
        color: theme => theme('color.blue'),
    },
    linkHover: {
        textDecoration: 'underline',
    },
    'custom-style': {
        fontFamily: theme => theme('fontFamily.funky'),
        fontSize: theme => theme('fontSize.lg'),
        color: theme => theme('color.red'),
    },
}

would generate CSS such as...

.c-rich-text {
    font-size: 16px; // default
}

.c-rich-text > * {
    margin-top: 1em;
}

.c-rich-text > :first-child {
    margin-top: 0;
}

.c-rich-text h1 {
    font-family: heading;
    font-weight: bold;
    line-height: 1.25; // tight
    font-size: 64px; // heading-xl
}

// ...

.c-rich-text ul, .c-rich-text ol {
    line-height: 2; // loose
}

.c-rich-text ul {
    list-style-type: circle;
}

.c-rich-text a {
    color: blue;
}

.c-rich-text a:hover {
    text-decoration: underline;
}

// ...

.c-h1 {
    font-family: heading;
    font-weight: bold;
    line-height: 1.25; // tight
    font-size: 64px; // heading-xl
}

// ...

.c-custom-style {
    font-family: funky;
    font-size: 18px; // lg
    color: red;
}