chain.js

const chain = rules => {
  class ChainLink {
    constructor(rules) {
      this.rules = rules;
    }

    toString() {
      return this.rules
    }
  }

  Object.keys(rules).forEach(option => {
    Object.defineProperty(ChainLink.prototype, option, {
      get() {
        return new ChainLink(this.rules.concat(rules[option]));
      }
    });
  });

  return new ChainLink([rules.default]);
};

traits.js

import chain from './chain.js'
import { css } from 'styled-components'

export const flex = chain({
  default: css`display: flex;`,
  inline: css`display: inline-flex;`,
  vertical: css`flex-direction: column;`,
  align_center: css`align-items: center;`,
  align_start: css`align-items: flex-start;`,
  align_end: css`align-items: flex-end;`,
  align_stretch: css`align-items: stretch;`,
  center: css`justify-content: center;`,
  center_both: css`justify-content: center; align-items: center;`,
  justify_start: css`justify-content: flex-start;`,
  justify_end: css`justify-content: flex-end;`,
  wrap: css`flex-wrap: wrap;`,
})

export const typography = chain({
  xxxl: css`font-size: 1.75rem;
    ${breakpoints.phone`
      font-size: 1.5rem;
    `}
  `,
  xxl: css`font-size: 1.5rem;
    ${breakpoints.phone`
      font-size: 1.25rem;
    `}
  `,
  xl: css`font-size: 1.25rem;
    ${breakpoints.phone`
      font-size: 1.125rem;
    `}
  `,
  l: css`font-size: 1.125rem;
    ${breakpoints.phone`
      font-size: 1rem;
    `}
  `,
  m: css`font-size: 1rem;`,
  s: css`font-size: 0.875rem`,
  xs: css`font-size: 0.8125rem`,
  light: css`
    font-weight: 400;
    ${breakpoints.retina`
      -webkit-font-smoothing: antialiased;
    `}
  `,
  medium: css`font-weight: 500;`,
  bold: css`
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
  `,
  center: css`text-align: center;`,
  right: css`text-align: right;`,
  left: css`text-align: left;`,
  no_decoration: css`text-decoration: none;`,
  underline: css`text-decoration: underline;`,
  underline_on_hover: css`&:hover { text-decoration: underline; }`,
  lh14: css`line-height: 1.4;`,
  lh15: css`line-height: 1.5;`,
  nowrap: css`white-space: nowrap;`,
  uppercase: css`text-transform: uppercase;`,
  inherit: css`font-family: inherit; font-size: inherit;`,
  ellipsis: css`
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  `,
})

usage.js

import { flex, typography } from './traits.js'

const Outer = styled.div`
  ${ flex.vertical.align_both };
`

const Header = styled.h1`
  ${ typography.xl.bold.uppercase };
`

/* etc etc */