anderser/abovefold.scss

## abovefold.scss
body {
    background-color: red;
}

## abovefoldentry.js
require('./styles/abovefold.scss');

export default true

## main.html
<!DOCTYPE html>
<html>
    <head>
        <style>
          {{ custom.aboveFoldCSS }}
         </style>
    </head>
    <body>
      Hello World
    </body>
</html>

## roc.config.js
module.exports = {
  webpack: {
    entry: {
      abovefold: './src/abovefoldentry',
    }
  },
}

## routes.js
// this content should be in the client entry file

__DEV__? require('./styles/abovefold.scss'): {}

## template.js
import { appConfig } from 'roc-package-web-app-react/app/shared';
import path from 'path';
import fs from 'fs';

import { getAbsolutePath } from 'roc';

// get chunks by name and extensions
const getChunks = (stats, name, ext = 'js') => {
  let chunk = stats.assetsByChunkName[name];

  // a chunk could be a string or an array, so make sure it is an array
  if (!(Array.isArray(chunk))) {
    chunk = [chunk];
  }

  return chunk
    .filter((chunkName) => path.extname(chunkName) === `.${ext}`)
};

let preloadContent;

const getAboveFoldCSS = (settings) => {
  if (!preloadContent) {
    const assetsDirectory = getAbsolutePath(settings.build.output.web);
    const stats = JSON.parse(fs.readFileSync(path.join(assetsDirectory, 'webpack-analysis.json'), 'utf8'));
    const preloadFilename = getChunks(stats, 'abovefold', 'css')[0];
    preloadContent = fs.readFileSync(path.join(assetsDirectory, preloadFilename), 'utf8');
  }

  return preloadContent;
};

export default function getTemplateValues({ reduxState, settings }) {
  return {
    bodyClass: 'main',
    publication: appConfig.publication,
    device: reduxState.contents.device.device,
    aboveFoldCSS: __DIST__? getAboveFoldCSS(settings): '',
  };
}
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	{{ custom.aboveFoldCSS }}
	</style>
	</head>
	<body>
	Hello World
	</body>
	</html>
	module.exports = {
	webpack: {
	entry: {
	abovefold: './src/abovefoldentry',
	}
	},
	}
	// this content should be in the client entry file

	__DEV__? require('./styles/abovefold.scss'): {}
	import { appConfig } from 'roc-package-web-app-react/app/shared';
	import path from 'path';
	import fs from 'fs';

	import { getAbsolutePath } from 'roc';

	// get chunks by name and extensions
	const getChunks = (stats, name, ext = 'js') => {
	let chunk = stats.assetsByChunkName[name];

	// a chunk could be a string or an array, so make sure it is an array
	if (!(Array.isArray(chunk))) {
	chunk = [chunk];
	}

	return chunk
	.filter((chunkName) => path.extname(chunkName) === `.${ext}`)
	};

	let preloadContent;

	const getAboveFoldCSS = (settings) => {
	if (!preloadContent) {
	const assetsDirectory = getAbsolutePath(settings.build.output.web);
	const stats = JSON.parse(fs.readFileSync(path.join(assetsDirectory, 'webpack-analysis.json'), 'utf8'));
	const preloadFilename = getChunks(stats, 'abovefold', 'css')[0];
	preloadContent = fs.readFileSync(path.join(assetsDirectory, preloadFilename), 'utf8');
	}

	return preloadContent;
	};

	export default function getTemplateValues({ reduxState, settings }) {
	return {
	bodyClass: 'main',
	publication: appConfig.publication,
	device: reduxState.contents.device.device,
	aboveFoldCSS: __DIST__? getAboveFoldCSS(settings): '',
	};
	}