mherchel/html.html.twig

## html.html.twig
{#
/**
 * @file
 * Theme override for the basic structure of a single Drupal page.
 *
 * Variables:
 * - logged_in: A flag indicating if user is logged in.
 * - root_path: The root path of the current page (e.g., node, admin, user).
 * - node_type: The content type for the current node, if the page is a node.
 * - head_title: List of text elements that make up the head_title variable.
 *   May contain or more of the following:
 *   - title: The title of the page.
 *   - name: The name of the site.
 *   - slogan: The slogan of the site.
 * - page_top: Initial rendered markup. This should be printed before 'page'.
 * - page: The rendered page markup.
 * - page_bottom: Closing rendered markup. This variable should be printed after
 *   'page'.
 * - db_offline: A flag indicating if the database is offline.
 * - placeholder_token: The token for generating head, css, js and js-bottom
 *   placeholders.
 *
 * @see template_preprocess_html()
 */
#}

{%
  set body_classes = [
    logged_in ? 'user-logged-in',
    not root_path ? 'path-frontpage' : 'path-' ~ current_path|clean_class,
    node_type ? 'page-node-type-' ~ node_type|clean_class,
    db_offline ? 'db-offline',
  ]
%}

<!DOCTYPE html>
<html{{ html_attributes.addClass('no-js') }}>
  <head>
    <head-placeholder token="{{ placeholder_token|raw }}">
    <meta name="theme-color" content="#ffffff" />
    <title>{{ head_title|safe_join(' | ') }}</title>

    {% if critical_css_file %}
      <style>
        {% include '@lullabotcom/' ~ critical_css_file %}
      </style>
    {% else %}
      <css-placeholder token="{{ placeholder_token|raw }}">
    {% endif %}

    <js-placeholder token="{{ placeholder_token|raw }}">
  </head>
  <body{{ attributes.addClass(body_classes) }}>
    {{ page_top }}

    <div class="body-inner">
      {{ page }}
    </div>

    {{ page_bottom }}

    {% if critical_css_file %}
      <css-placeholder token="{{ placeholder_token|raw }}">
    {% endif %}
    <js-bottom-placeholder token="{{ placeholder_token|raw }}">
  </body>
</html>

## lullabotcom.theme.php
<?php

/**
 * Implements template_preprocess_html().
 * Override or insert variables into the html template.
 *
 * @param array $variables
 *   An array of variables to pass to the theme template.
 * @param string $hook
 *   The name of the template being rendered. This is usually "html," but can
 *   also be "maintenance_page" since lullabotcom_preprocess_maintenance_page()
 *   calls this function to have consistent variables.
 */
function lullabotcom_preprocess_html(&$variables, $hook) {
  // Return early so the maintenance page does not call any code we write below.
  if ($hook != 'html') {
    return;
  }

  //
  // Logic to inline critical CSS into html.html.twig.
  //
  $pages_to_inline = ['home', 'article']; // Valid entries are node types (with hyphens instead of underscores), and section paths (e.g. 'podcasts').
  $twig_template_root = drupal_get_path('theme', 'lullabotcom') . '/templates/';
  $critical_css_dir = 'critical-css/';
  $current_page = trim(\Drupal\Component\Utility\Html::cleanCssIdentifier($variables['current_path']), '-');

  if (!empty($variables['node_type']) && $variables['node_type'] != 'section') {
    $current_page = \Drupal\Component\Utility\Html::cleanCssIdentifier($variables['node_type']);
  }

  // Check if user is logged in, and page is set to have inline CSS.
  if (!$variables["logged_in"] && in_array($current_page, $pages_to_inline)) {
    $critical_css_file = $critical_css_dir . $current_page . '.css';

    // If the file was generated, output a variable so Twig can include it.
    if (file_exists($twig_template_root . $critical_css_file)) {
      $variables['critical_css_file'] = $critical_css_file;
    }
  }
}
	{#
	/**
	* @file
	* Theme override for the basic structure of a single Drupal page.
	*
	* Variables:
	* - logged_in: A flag indicating if user is logged in.
	* - root_path: The root path of the current page (e.g., node, admin, user).
	* - node_type: The content type for the current node, if the page is a node.
	* - head_title: List of text elements that make up the head_title variable.
	* May contain or more of the following:
	* - title: The title of the page.
	* - name: The name of the site.
	* - slogan: The slogan of the site.
	* - page_top: Initial rendered markup. This should be printed before 'page'.
	* - page: The rendered page markup.
	* - page_bottom: Closing rendered markup. This variable should be printed after
	* 'page'.
	* - db_offline: A flag indicating if the database is offline.
	* - placeholder_token: The token for generating head, css, js and js-bottom
	* placeholders.
	*
	* @see template_preprocess_html()
	*/
	#}

	{%
	set body_classes = [
	logged_in ? 'user-logged-in',
	not root_path ? 'path-frontpage' : 'path-' ~ current_path\|clean_class,
	node_type ? 'page-node-type-' ~ node_type\|clean_class,
	db_offline ? 'db-offline',
	]
	%}

	<!DOCTYPE html>
	<html{{ html_attributes.addClass('no-js') }}>
	<head>
	<head-placeholder token="{{ placeholder_token\|raw }}">
	<meta name="theme-color" content="#ffffff" />
	<title>{{ head_title\|safe_join(' \| ') }}</title>

	{% if critical_css_file %}
	<style>
	{% include '@lullabotcom/' ~ critical_css_file %}
	</style>
	{% else %}
	<css-placeholder token="{{ placeholder_token\|raw }}">
	{% endif %}

	<js-placeholder token="{{ placeholder_token\|raw }}">
	</head>
	<body{{ attributes.addClass(body_classes) }}>
	{{ page_top }}

	<div class="body-inner">
	{{ page }}
	</div>

	{{ page_bottom }}

	{% if critical_css_file %}
	<css-placeholder token="{{ placeholder_token\|raw }}">
	{% endif %}
	<js-bottom-placeholder token="{{ placeholder_token\|raw }}">
	</body>
	</html>
	<?php

	/**
	* Implements template_preprocess_html().
	* Override or insert variables into the html template.
	*
	* @param array $variables
	* An array of variables to pass to the theme template.
	* @param string $hook
	* The name of the template being rendered. This is usually "html," but can
	* also be "maintenance_page" since lullabotcom_preprocess_maintenance_page()
	* calls this function to have consistent variables.
	*/
	function lullabotcom_preprocess_html(&$variables, $hook) {
	// Return early so the maintenance page does not call any code we write below.
	if ($hook != 'html') {
	return;
	}

	//
	// Logic to inline critical CSS into html.html.twig.
	//
	$pages_to_inline = ['home', 'article']; // Valid entries are node types (with hyphens instead of underscores), and section paths (e.g. 'podcasts').
	$twig_template_root = drupal_get_path('theme', 'lullabotcom') . '/templates/';
	$critical_css_dir = 'critical-css/';
	$current_page = trim(\Drupal\Component\Utility\Html::cleanCssIdentifier($variables['current_path']), '-');

	if (!empty($variables['node_type']) && $variables['node_type'] != 'section') {
	$current_page = \Drupal\Component\Utility\Html::cleanCssIdentifier($variables['node_type']);
	}

	// Check if user is logged in, and page is set to have inline CSS.
	if (!$variables["logged_in"] && in_array($current_page, $pages_to_inline)) {
	$critical_css_file = $critical_css_dir . $current_page . '.css';

	// If the file was generated, output a variable so Twig can include it.
	if (file_exists($twig_template_root . $critical_css_file)) {
	$variables['critical_css_file'] = $critical_css_file;
	}
	}
	}