ideas for v2 and usage with Gatsby Themes & theme-ui

[KyleAMathews]

Hey all, going to finally get my PR merged for v2.

I'm talking to @jxnblk, @johno, and @fk about a possible v2 with better integration with https://github.com/system-ui/theme-ui

Some ideas in no particular order:

• avoid any globals aka setting stuff on html/body — this would mean moving from rem to px which should work but needs tested
• auto-generate the styles object for theme-ui at build-time so don't need to load typography.js client (unless want access to rhythm/scale functions https://github.com/system-ui/theme-ui/#themestyles
• Remove complex selectors e.g. blockquote:last-child and li > p as these are hard to override in css-in-js as those tend to only style elements

[jxnblk]

Very excited about this!

Just expanding on the second and third points for clarity:

Typography.js current generates a style object that is more inline with standard CSS syntax, with nested selectors and media queries. When using a library like Emotion, child selectors, pseudoclasses, and media queries tend to be nested within a single component's style object. I think it would be nice if the styles generated by Typography.js could support both style object shapes for different approaches.

// current, more-CSS like object
styles: {
  'ol, ul': {
    listStylePosition: 'outside',
    listStyleImage: 'none',
  },
  li: {
    marginBottom: `calc(${blockMarginBottom} / 2)`,
  },
  'ol li, ul li': {
    paddingLeft: 0,
  }
}

// style object that's easier to consume with CSS-in-JS components
styles: {
  ol: {
    listStylePosition: 'outside',
    listStyleImage: 'none',
    'li': {
      paddingLeft: 0
    },
  },
  ul: {
    listStylePosition: 'outside',
    listStyleImage: 'none',
    'li': {
      paddingLeft: 0
    },
  },
  li: {
    marginBottom: `calc(${blockMarginBottom} / 2)`,
  }
}

The second style object is a little more verbose but helps with style encapsulation, and would mean that theme-ui can ditch its style object transformation utility