Munter · January 24, 2025 07:17 · Munter · Oct 29, 2016
diff --git a/inlineCriticalCss.js b/inlineCriticalCss.js
 /*
 * This transform works on an assumption about browser loading and rendering behavior of CSS:
 * When a browser loads CSS in <head> it render blocks untill all CSS in <head> has loaded.
 *
 * That might be slow.
 *
 * To appear faster, browsers will render what they have in buffer already if they meet a style <link> in <body>
 * before they dive into the render blocking load.
 * This lets you potentially inline critical css in <head> and put the bulk of your CSS "below the fold".
 * The effect will be a quick render with critical styles applied, just before the render blockign starts.
 *
 * We can leverage this behavior by letting the developer declaratively define their critical CSS if we
 * treat <body> <link> ad "the fold", assuming that everything above it is critical and should have styling applied
 * for the render flush that happens just before the <link> starts loading.
 *
 * Assetgraph can figure out what CSS to extract from the bundle and inline in <head> before the render blocking load starts.
 * This way the developer will only have to place the <link> at the relevant place in the DOM and not think any more about
 * builds and optimization.
 */

 module.exports = function (options) {
    options = options || {};

    return function (assetGraph) {
        // For each html page
        // Find the first external HtmlStyle relation inside <body>
        // Traverse back up the DOM to find all elements to check critical CSS for
        // Find all CSS included on the page
        // For each critical DOM-node, check if each style rule applies
        // Collect all matching style rules that match critical DOM-nodes
        // Create a new stylesheet with critical CSS rules
        // Inline critical stylesheet in <head>
    };
 };
	/*
	* This transform works on an assumption about browser loading and rendering behavior of CSS:
	* When a browser loads CSS in <head> it render blocks untill all CSS in <head> has loaded.
	*
	* That might be slow.
	*
	* To appear faster, browsers will render what they have in buffer already if they meet a style <link> in <body>
	* before they dive into the render blocking load.
	* This lets you potentially inline critical css in <head> and put the bulk of your CSS "below the fold".
	* The effect will be a quick render with critical styles applied, just before the render blockign starts.
	*
	* We can leverage this behavior by letting the developer declaratively define their critical CSS if we
	* treat <body> <link> ad "the fold", assuming that everything above it is critical and should have styling applied
	* for the render flush that happens just before the <link> starts loading.
	*
	* Assetgraph can figure out what CSS to extract from the bundle and inline in <head> before the render blocking load starts.
	* This way the developer will only have to place the <link> at the relevant place in the DOM and not think any more about
	* builds and optimization.
	*/

	module.exports = function (options) {
	options = options \|\| {};

	return function (assetGraph) {
	// For each html page
	// Find the first external HtmlStyle relation inside <body>
	// Traverse back up the DOM to find all elements to check critical CSS for
	// Find all CSS included on the page
	// For each critical DOM-node, check if each style rule applies
	// Collect all matching style rules that match critical DOM-nodes
	// Create a new stylesheet with critical CSS rules
	// Inline critical stylesheet in <head>
	};
	};