Do not inline CSS in Gatsby rendered HTML files

gatsby-ssr.js

exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
  if (process.env.NODE_ENV !== 'production') {
    return;
  }

  const headComponents = getHeadComponents();

  replaceHeadComponents(headComponents.map(headComponent => {
    if (headComponent.type !== 'style') {
      return headComponent;
    }

    const {
      props: {
        dangerouslySetInnerHTML,
        'data-href': href,
        ...props
      },
    } = headComponent;

    return {
      ...headComponent,
      type: 'link',
      props: {
        ...props,
        rel: 'stylesheet',
        type: 'text/css',
        href,
      },
    };
  }));
};