/*eslint-disable react/no-danger*/
import React from "react";
import serialize from "serialize-javascript";
import path from "path";
import process from "process";

// Make sure path ends in forward slash
let assetPath = require(path.resolve(path.join(process.cwd(), "src", "config", "application"))).default.assetPath;
if (assetPath.substr(-1) !== "/") {
  assetPath = assetPath + "/";
}

const isProduction = process.env.NODE_ENV === "production";

export default (config, entryPoint, assets) => {
  const tags = [];
  let key = 0;

  if (isProduction) {
    tags.push(<link key={key++} rel="stylesheet" type="text/css" href={`${config.assetPath}/${entryPoint}.css`} />);
  }
  else {
    // Resolve style flicker on page load in dev mode
    Object.keys(assets.assets).forEach(assetPath => {
      if (!/\.(css|scss|sass|less)$/.test(assetPath)) { return; }

      // webpack isomorphic tools converts `node_modules` to `~` in these
      // paths. This means any css files imported directly out of a node_module
      // will not be found. Unless we swap `~` back to `node_modules`.
      assetPath = assetPath.replace("~", "node_modules");

      tags.push(<style key={key++} dangerouslySetInnerHTML={{__html: require(path.join(process.cwd(), assetPath))}} />);
    });
  }

  tags.push(
    <script key={key++} type="text/javascript" dangerouslySetInnerHTML={{__html: `window.__GS_PUBLIC_PATH__ = ${serialize(assetPath)}; window.__GS_ENVIRONMENT__ = ${serialize(process.env.NODE_ENV)}`}}></script>
  );

  return tags;
};


/*eslint-disable react/no-danger*/
import React from "react";
import serialize from "serialize-javascript";
import path from "path";
import process from "process";

// Make sure path ends in forward slash
let assetPath = require(path.resolve(path.join(process.cwd(), "src", "config", "application"))).default.assetPath;
if (assetPath.substr(-1) !== "/") {
  assetPath = assetPath + "/";
}

const isProduction = process.env.NODE_ENV === "production";

export default (config, entryPoint, assets) => {
  const tags = [];
  let key = 0;

  if (isProduction) {
    tags.push(<link key={key++} rel="stylesheet" type="text/css" href={`${config.assetPath}/${entryPoint}.css`} />);
  }

  tags.push(
    <script key={key++} type="text/javascript" dangerouslySetInnerHTML={{__html: `window.__GS_PUBLIC_PATH__ = ${serialize(assetPath)}; window.__GS_ENVIRONMENT__ = ${serialize(process.env.NODE_ENV)}`}}></script>
  );

  return tags;
};


Stop loading every single css file into the DOM
Stop loading every single css file into the DOM

We previously loaded every single css file into the DOM in development
mode to resolve the flash of unstyled content (FOUC). This turned out to
be a mistake because when you are dealing with a large app that has
multiple entry points or code splitting every single css file is
included. In one example this resulted in over 400k lines of CSS to be
loaded in the DOM.

We will create another ticket to tackle the FOUC in a better way.
