Overrides Styles - Specifying multiple of the same css selector

[jonnyelliot]

overrideStyles specifies its styles using an Object, which can be an issue when we need to repeat the same css selector, as is the case with @font-face, as JS object must have unique keys.

In this example, only the last @font-face will actually be applies, due to duplicate keys:

 overrideStyles: ({ adjustFontSizeTo, rhythm }, options, styles) => ({
    '@font-face': {
      fontFamily: 'FreeSans',
      src: `url(...) format('woff')`,
      fontStyle: 'normal',
    },
    '@font-face': {
      fontFamily: 'FreeSans',
      src: `url(...) format('woff')`,
      fontStyle: 'bold',
    },
    '@font-face': {
      fontFamily: 'Arciform',
      src: `url(...) format('woff')`,
      fontStyle: 'normal',
    }
}))

I am appending varying amounts of spaces to the end of keys to workaround this issue, but is (or could) there be a better solution?