Build have all require css compiled, it's a problem when using iframes

[minimit]

Description

I've a setup where I create pages that I use inside the app with iframes. I've not found a way to prevent the 'build' process to inline every css required in every page. Event if using different layouts for the pages loaded by the iframe.

Gatsby 'build' packs inline all css, and it's a problem for 2 reasons:

• the styles inside the iframe page are applied to all pages
• all the iframes have all styles so they're heavy lo load

I know this inline css is needed for SSR, but I've a question: is it possible to have gatsby build not with every required css in every page? maybe keep external css for each page not packed inline?

Steps to reproduce

Inside gatsby create iframes that load some /pages wich has a require .css
Run gatsby build

Expected result

Pages styles should not be included inline in every page, it's a problem when using iframes. A way to have external styles loaded on each page.

Actual result

All styles of every page are inline in each iframe html.

Environment

System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 9.4.0 - /usr/local/bin/node
Yarn: 1.3.2 - /usr/local/bin/yarn
npm: 6.7.0 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/local/bin/python
Browsers:
Chrome: 74.0.3729.131
Firefox: 66.0.5
Safari: 12.1
npmPackages:
gatsby: ^2.3.16 => 2.3.25
gatsby-image: ^2.0.37 => 2.0.39
gatsby-plugin-less: ^2.0.12 => 2.0.12
gatsby-plugin-manifest: ^2.0.28 => 2.0.29
gatsby-plugin-offline: ^2.0.25 => 2.0.25
gatsby-plugin-page-creator: ^2.0.12 => 2.0.12
gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
gatsby-plugin-root-import: ^2.0.5 => 2.0.5
gatsby-remark-component: ^1.1.3 => 1.1.3
gatsby-source-filesystem: ^2.0.29 => 2.0.29
gatsby-transformer-remark: ^2.3.8 => 2.3.8
npmGlobalPackages:
gatsby-cli: 2.5.9

[minimit]

With better understanding how ssr works, i've found a solution to the problem of css inside iframe.

I use the raw css in the layout of the iframes with Helmet:

  render() {
    let css = require("!raw-loader!less-loader!./myfile.less").default : null
    return (
      <Layout>
        {css ?
          <Helmet>
            <style>{css}</style>
          </Helmet>
          : null}
      </Layout>
    )

To have global css not inline but with an external .css I'm using this solution in gatsby-ssr.js #1526 (comment)