wp_maybe_inline_styles()

Allows small styles to be inlined.

Description

This improves performance and sustainability, and is opt-in. Stylesheets can opt in by adding path data using wp_style_add_data, and defining the file’s absolute path:

wp_style_add_data( $style_handle, 'path', $file_path );

Source

function wp_maybe_inline_styles() {	global $wp_styles;	$total_inline_limit = 20000;	/** * The maximum size of inlined styles in bytes. * * @since 5.8.0 * * @param int $total_inline_limit The file-size threshold, in bytes. Default 20000. */	$total_inline_limit = apply_filters( 'styles_inline_size_limit', $total_inline_limit );	$styles = array();	// Build an array of styles that have a path defined.	foreach ( $wp_styles->queue as $handle ) {	if ( ! isset( $wp_styles->registered[ $handle ] ) ) {	continue;	}	$src = $wp_styles->registered[ $handle ]->src;	$path = $wp_styles->get_data( $handle, 'path' );	if ( $path && $src ) {	$size = wp_filesize( $path );	if ( ! $size ) {	continue;	}	$styles[] = array(	'handle' => $handle,	'src' => $src,	'path' => $path,	'size' => $size,	);	}	}	if ( ! empty( $styles ) ) {	// Reorder styles array based on size.	usort(	$styles,	static function ( $a, $b ) {	return ( $a['size'] <= $b['size'] ) ? -1 : 1;	}	);	/* * The total inlined size. * * On each iteration of the loop, if a style gets added inline the value of this var increases * to reflect the total size of inlined styles. */	$total_inline_size = 0;	// Loop styles.	foreach ( $styles as $style ) {	// Size check. Since styles are ordered by size, we can break the loop.	if ( $total_inline_size + $style['size'] > $total_inline_limit ) {	break;	}	// Get the styles if we don't already have them.	$style['css'] = file_get_contents( $style['path'] );	/* * Check if the style contains relative URLs that need to be modified. * URLs relative to the stylesheet's path should be converted to relative to the site's root. */	$style['css'] = _wp_normalize_relative_css_links( $style['css'], $style['src'] );	// Set `src` to `false` and add styles inline.	$wp_styles->registered[ $style['handle'] ]->src = false;	if ( empty( $wp_styles->registered[ $style['handle'] ]->extra['after'] ) ) {	$wp_styles->registered[ $style['handle'] ]->extra['after'] = array();	}	array_unshift( $wp_styles->registered[ $style['handle'] ]->extra['after'], $style['css'] );	// Add the styles size to the $total_inline_size var.	$total_inline_size += (int) $style['size'];	}	} } 

Hooks

apply_filters( ‘styles_inline_size_limit’, int $total_inline_limit )

The maximum size of inlined styles in bytes.

Changelog

VersionDescription
5.8.0Introduced.

User Contributed Notes

You must log in before being able to contribute a note or feedback.