Guide request for breaking longer theme files into separate components

Hello!

Amazing to see the docs expand and all the content you have created for this since it launched! Thank-you for the hard work on this - it makes using theme-ui so much better. As my theme-ui index.js file gets longer and more complicated with variants and styles I have tried a few times to split it into separate files using deepmerge. I keep hitting errors when I do this and just revert back to my big index.js file as this works fine for me with no problems. My hope in breaking it into smaller pieces is to make it easier to shadow in gatsby themes and also just to make it simpler for editing/management going forward…ignore the fact that I haven’t setup typography.js yet, I really should be using that instead of a bunch of fontSizes, fontWeights, etc.

My index.js file when broken down looks something like this:

import merge from "deepmerge"
import colors from "./colors"
import fonts from "./fonts"
import fontSizes from "./fontSizes"
import fontWeights from "./fontWeights"
import lineHeights from "./lineHeights"
import spaces from "./spaces"
import sizes from "./sizes"
import breakpoints from "./breakpoints"
import styles from "./styles"
import variants from "./variants"

export default merge(
  colors,
  fonts,
  fontSizes,
  fontWeights,
  lineHeights,
  spaces,
  sizes,
  breakpoints,
  styles,
  variants
)

This seems to work with deepmerge but then the following code, which was working fine before with one big index.js starts failing…using the sx={{}} object.

gridTemplateRows: [
          theme => theme.sizes.headerHeight,
          theme => theme.sizes.headerHeightTablet,
          theme => theme.sizes.headerHeightLaptop,
        ],

It no longer seems to be able to reader those values which is odd to me. I am sure there is a reasonably easy way to do this and I imagine other gatsby theme others are thinking similar things as their variants usage starts to expand and grow leading to big index.js files.

[cobraz]

Should I add a PR for it?

[ehowey]

Thanks - I was looking at gatsby-theme-blog and they were using deepmerge so I assumed I needed that as well. The work on this is amazing keep it up!