云策 WordPress 开发者社区

函数文档

wp_style_engine_get_stylesheet_from_css_rules()

查看官方原文 ↗
💡 云策文档标注

概述

wp_style_engine_get_stylesheet_from_css_rules() 函数用于从一组 CSS 选择器和声明中编译生成 CSS 样式表。它支持嵌套 CSS 规则和选项配置，适用于 WordPress 样式引擎的场景。

关键要点

  • 函数接受 $css_rules 参数，包含选择器、声明和可选的 rules_group，用于定义 CSS 规则。
  • 通过 $options 参数可配置上下文、优化和美化输出，例如结合 SCRIPT_DEBUG 常量控制格式。
  • 返回编译后的 CSS 字符串，如果输入为空或无效则返回空字符串。
  • 内部使用 WP_Style_Engine_CSS_Rule 和 WP_Style_Engine 类处理规则存储和编译。

代码示例

$css_rules = array(
    array(
        'selector'     => '.elephant-are-cool',
        'declarations' => array(
            'color' => 'gray',
            'width' => '3em',
        ),
    ),
);
$css = wp_style_engine_get_stylesheet_from_css_rules( $css_rules );

注意事项

  • 在 WordPress 6.6.0 版本中增加了对 $rules_group 的支持，用于处理嵌套 CSS 或 @rule。
  • 如果设置了 $options['context']，样式引擎会尝试存储 CSS 规则，便于后续使用。
  • 函数要求 $css_rules 中的每个规则必须包含有效的 'selector' 和 'declarations' 数组，否则会被跳过。
📄 原文内容

Returns compiled CSS from a collection of selectors and declarations.

Description

Useful for returning a compiled stylesheet from any collection of CSS selector + declarations.

Example usage:

$css_rules = array(
    array(
        'selector'     => '.elephant-are-cool',
        'declarations' => array(
            'color' => 'gray',
            'width' => '3em',
        ),
    ),
);

$css = wp_style_engine_get_stylesheet_from_css_rules( $css_rules );

Returns:

.elephant-are-cool{color:gray;width:3em}

Parameters

$css_rulesarrayrequired
Required. A collection of CSS rules.
  • ...$0 array
    • rules_group string
      A parent CSS selector in the case of nested CSS, or a CSS nested @rule, such as @media (min-width: 80rem) or @layer module.
    • selector string
      A CSS selector.
    • declarations string[]
      An associative array of CSS definitions, e.g. array( "$property" => "$value", "$property" => "$value" ).
$optionsarrayoptional
An array of options.
  • context string|null
    An identifier describing the origin of the style object, e.g. 'block-supports' or 'global-styles'. Default 'block-supports'.
    When set, the style engine will attempt to store the CSS rules.
  • optimize bool
    Whether to optimize the CSS output, e.g. combine rules.
    Default false.
  • prettify bool
    Whether to add new lines and indents to output.
    Defaults to whether the SCRIPT_DEBUG constant is defined.

Default:array()

Return

string A string of compiled CSS declarations, or empty string.

Source

function wp_style_engine_get_stylesheet_from_css_rules( $css_rules, $options = array() ) {
	if ( empty( $css_rules ) ) {
		return '';
	}

	$options = wp_parse_args(
		$options,
		array(
			'context' => null,
		)
	);

	$css_rule_objects = array();
	foreach ( $css_rules as $css_rule ) {
		if ( empty( $css_rule['selector'] ) || empty( $css_rule['declarations'] ) || ! is_array( $css_rule['declarations'] ) ) {
			continue;
		}

		$rules_group = $css_rule['rules_group'] ?? null;
		if ( ! empty( $options['context'] ) ) {
			WP_Style_Engine::store_css_rule( $options['context'], $css_rule['selector'], $css_rule['declarations'], $rules_group );
		}

		$css_rule_objects[] = new WP_Style_Engine_CSS_Rule( $css_rule['selector'], $css_rule['declarations'], $rules_group );
	}

	if ( empty( $css_rule_objects ) ) {
		return '';
	}

	return WP_Style_Engine::compile_stylesheet_from_css_rules( $css_rule_objects, $options );
}

View all references View on Trac View on GitHub

UsesDescription
WP_Style_Engine_CSS_Rule::__construct()wp-includes/style-engine/class-wp-style-engine-css-rule.php

Constructor.

WP_Style_Engine::compile_stylesheet_from_css_rules()wp-includes/style-engine/class-wp-style-engine.php

Returns a compiled stylesheet from stored CSS rules.

WP_Style_Engine::store_css_rule()wp-includes/style-engine/class-wp-style-engine.php

Stores a CSS rule using the provided CSS selector and CSS declarations.

wp_parse_args()wp-includes/functions.php

Merges user defined arguments into defaults array.

Show 1 moreShow less
Used byDescription
WP_Duotone::output_block_styles()wp-includes/class-wp-duotone.php

Appends the used block duotone filter declarations to the inline block supports CSS.

WP_Duotone::output_footer_assets()wp-includes/class-wp-duotone.php

Outputs all necessary SVG for duotone filters, CSS for classic themes.

Changelog

VersionDescription
6.6.0Added support for $rules_group in the $css_rules array.
6.1.0Introduced.

User Contributed Notes

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