ssr css ordering reversed when using splitChunks initial

[cameronbraid]

Description

css chunks are not being rendered in the order the are imported when I configure webpack to split the chunks (and have a layout css that is large enough to make a separate chunk : I use a === padded base64 background image to make the layout css big)

Prior to making this change the layout styles were inlined before the index styles which is what I would expect (that's the import order)

e.g.

<style>
.layout { ... }
.index {...}
</style>

However after making the above split chunks change the html is rendered with the index page styles before layout :

    <style
      data-href="/component---src-pages-index-js.3da71c97292b570fff82.css"
      id="gatsby-global-css"
    >
      .index {...}
    </style>
    <style data-href="/commons.a70068077a39053fd7dd.css" id="gatsby-global-css">
      .layout {...}
     </style>

Steps to reproduce

https://codesandbox.io/s/objective-fog-8z5dh

Run

yarn build
cp public/index.html .

open the index.html file that will appear in the file browser after a few seconds and run format document (also turn off wrapping since there is a lot of === in there)

Steps to reproduce the correct css

Comment out onCreateWebpackConfig in gatsby-node.js and re-do the above build