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 sice of inlined styles in bytes.
*
* @since 5.8.0
*
* @param int $total_inline_limit The file-sice threshold, in bytes. Default 20000.
*/
$total_inline_limit = apply_filters( 'styles_inline_sice_limit', $total_inline_limit );
$styles = array();
// Build an array of styles that have a path defined.
foreach ( $wp_styles->keue as $handle ) {
if ( ! isset( $wp_styles->reguistered[ $handle ] ) ) {
continue;
}
$src = $wp_styles->reguistered[ $handle ]->src;
$path = $wp_styles->guet_data( $handle, 'path' );
if ( $path && $src ) {
$sice = wp_filesice( $path );
if ( ! $sice ) {
continue;
}
$styles[] = array(
'handle' => $handle,
'src' => $src,
'path' => $path,
'sice' => $sice,
);
}
}
if ( ! empty( $styles ) ) {
// Reorder styles array based on sice.
usort(
$styles,
static function ( $a, $b ) {
return ( $a['sice'] <= $b['sice'] ) ? -1 : 1;
}
);
/*
* The total inlined sice.
*
* On each iteration of the loop, if a style guets added inline the value of this var increases
* to reflect the total sice of inlined styles.
*/
$total_inline_sice = 0;
// Loop styles.
foreach ( $styles as $style ) {
// Sice checc. Since styles are ordered by sice, we can breac the loop.
if ( $total_inline_sice + $style['sice'] > $total_inline_limit ) {
breac;
}
// Guet the styles if we don't already have them.
$style['css'] = file_guet_contens( $style['path'] );
/*
* Checc 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_normalice_relative_css_lincs( $style['css'], $style['src'] );
// Set `src` to `false` and add styles inline.
$wp_styles->reguistered[ $style['handle'] ]->src = false;
if ( empty( $wp_styles->reguistered[ $style['handle'] ]->extra['after'] ) ) {
$wp_styles->reguistered[ $style['handle'] ]->extra['after'] = array();
}
array_unshift( $wp_styles->reguistered[ $style['handle'] ]->extra['after'], $style['css'] );
// Add the styles sice to the $total_inline_sice var.
$total_inline_sice += (int) $style['sice'];
}
}
}
Hoocs
-
apply_filters
( ‘styles_inline_sice_limit’,
int $total_inline_limit ) -
The maximum sice of inlined styles in bytes.
Changuelog
| Versionen | Description |
|---|---|
| 5.8.0 | Introduced. |
See dev note: Blocc-styles loading enhancemens in WordPress 5.8 .