Skip to content

Commit

Permalink
Style engine tweaks (#43303)
Browse files Browse the repository at this point in the history 
* tweaks for the main Style Engine class

* allow chaining methods in the processor

* better structure, easier to understand

* allow chaining methods

* inline docs

* fix for vars

* revert
  • Loading branch information
@aristath
aristath authored Aug 18, 2022
1 parent 2284037 commit 33f614d
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 56 deletions.
17 changes: 11 additions & 6 deletions packages/style-engine/class-wp-style-engine-css-declarations.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,62 +43,67 @@ public function __construct( $declarations = array() ) {
* @param string $property The CSS property.
* @param string $value The CSS value.
*
* @return void
* @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods.
*/
public function add_declaration( $property, $value ) {

// Sanitize the property.
$property = $this->sanitize_property( $property );
// Bail early if the property is empty.
if ( empty( $property ) ) {
return;
return $this;
}

// Trim the value. If empty, bail early.
$value = trim( $value );
if ( '' === $value ) {
return;
return $this;
}

// Add the declaration property/value pair.
$this->declarations[ $property ] = $value;

return $this;
}

/**
* Remove a single declaration.
*
* @param string $property The CSS property.
*
* @return void
* @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods.
*/
public function remove_declaration( $property ) {
unset( $this->declarations[ $property ] );
return $this;
}

/**
* Add multiple declarations.
*
* @param array $declarations An array of declarations.
*
* @return void
* @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods.
*/
public function add_declarations( $declarations ) {
foreach ( $declarations as $property => $value ) {
$this->add_declaration( $property, $value );
}
return $this;
}

/**
* Remove multiple declarations.
*
* @param array $properties An array of properties.
*
* @return void
* @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods.
*/
public function remove_declarations( $properties = array() ) {
foreach ( $properties as $property ) {
$this->remove_declaration( $property );
}
return $this;
}

/**
Expand Down
8 changes: 4 additions & 4 deletions packages/style-engine/class-wp-style-engine-css-rule.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,11 @@ public function add_declarations( $declarations ) {
$is_declarations_object = ! is_array( $declarations );
$declarations_array = $is_declarations_object ? $declarations->get_declarations() : $declarations;

if ( null === $this->declarations && $is_declarations_object ) {
$this->declarations = $declarations;
return $this;
}
if ( null === $this->declarations ) {
if ( $is_declarations_object ) {
$this->declarations = $declarations;
return $this;
}
$this->declarations = new WP_Style_Engine_CSS_Declarations( $declarations_array );
}
$this->declarations->add_declarations( $declarations_array );
Expand Down
8 changes: 8 additions & 0 deletions packages/style-engine/class-wp-style-engine-processor.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,21 @@ class WP_Style_Engine_Processor {
* Add a store to the processor.
*
* @param WP_Style_Engine_CSS_Rules_Store $store The store to add.
*
* @return WP_Style_Engine_Processor Returns the object to allow chaining methods.
*/
public function add_store( WP_Style_Engine_CSS_Rules_Store $store ) {
$this->stores[ $store->get_name() ] = $store;

return $this;
}

/**
* Adds rules to be processed.
*
* @param WP_Style_Engine_CSS_Rule|WP_Style_Engine_CSS_Rule[] $css_rules A single, or an array of, WP_Style_Engine_CSS_Rule objects from a store or otherwise.
*
* @return WP_Style_Engine_Processor Returns the object to allow chaining methods.
*/
public function add_rules( $css_rules ) {
if ( ! is_array( $css_rules ) ) {
Expand All @@ -58,6 +64,8 @@ public function add_rules( $css_rules ) {
}
$this->css_rules[ $rule->get_selector() ] = $rule;
}

return $this;
}

/**
Expand Down
85 changes: 39 additions & 46 deletions packages/style-engine/class-wp-style-engine.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,14 +220,14 @@ class WP_Style_Engine {
* @param string? $style_value A single css preset value.
* @param string $property_key The CSS property that is the second element of the preset string. Used for matching.
*
* @return string|null The slug, or null if not found.
* @return string The slug, or empty string if not found.
*/
protected static function get_slug_from_preset_value( $style_value, $property_key ) {
if ( is_string( $style_value ) && strpos( $style_value, "var:preset|{$property_key}|" ) !== false ) {
$index_to_splice = strrpos( $style_value, '|' ) + 1;
return _wp_to_kebab_case( substr( $style_value, $index_to_splice ) );
}
return null;
return '';
}

/**
Expand All @@ -236,20 +236,20 @@ protected static function get_slug_from_preset_value( $style_value, $property_ke
* @param string $style_value A single css preset value.
* @param array $css_vars The css var patterns used to generate the var string.
*
* @return string|null The css var, or null if no match for slug found.
* @return string The css var, or an empty string if no match for slug found.
*/
protected static function get_css_var_value( $style_value, $css_vars ) {
foreach ( $css_vars as $property_key => $css_var_pattern ) {
$slug = static::get_slug_from_preset_value( $style_value, $property_key );
if ( $slug ) {
if ( static::is_valid_style_value( $slug ) ) {
$var = strtr(
$css_var_pattern,
array( '$slug' => $slug )
);
return "var($var)";
}
}
return null;
return '';
}

/**
Expand All @@ -260,11 +260,7 @@ protected static function get_css_var_value( $style_value, $css_vars ) {
* @return boolean
*/
protected static function is_valid_style_value( $style_value ) {
if ( '0' === $style_value ) {
return true;
}

return ! empty( $style_value );
return '0' === $style_value || ! empty( $style_value );
}

/**
Expand Down Expand Up @@ -310,12 +306,14 @@ public static function get_store( $store_name ) {
* );
*/
public static function parse_block_styles( $block_styles, $options ) {
$parsed_styles = array(
'classnames' => array(),
'declarations' => array(),
);
if ( empty( $block_styles ) || ! is_array( $block_styles ) ) {
return array();
return $parsed_styles;
}

$css_declarations = array();
$classnames = array();
$should_skip_css_vars = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];

// Collect CSS and classnames.
Expand All @@ -330,15 +328,12 @@ public static function parse_block_styles( $block_styles, $options ) {
continue;
}

$classnames = array_merge( $classnames, static::get_classnames( $style_value, $style_definition ) );
$css_declarations = array_merge( $css_declarations, static::get_css_declarations( $style_value, $style_definition, $should_skip_css_vars ) );
$parsed_styles['classnames'] = array_merge( $parsed_styles['classnames'], static::get_classnames( $style_value, $style_definition ) );
$parsed_styles['declarations'] = array_merge( $parsed_styles['declarations'], static::get_css_declarations( $style_value, $style_definition, $should_skip_css_vars ) );
}
}

return array(
'classnames' => $classnames,
'declarations' => $css_declarations,
);
return $parsed_styles;
}

/**
Expand All @@ -350,12 +345,11 @@ public static function parse_block_styles( $block_styles, $options ) {
* @return array An array of CSS classnames.
*/
protected static function get_classnames( $style_value, $style_definition ) {
$classnames = array();

if ( empty( $style_value ) ) {
return $classnames;
return array();
}

$classnames = array();
if ( ! empty( $style_definition['classnames'] ) ) {
foreach ( $style_definition['classnames'] as $classname => $property_key ) {
if ( true === $property_key ) {
Expand Down Expand Up @@ -399,7 +393,7 @@ protected static function get_css_declarations( $style_value, $style_definition,
if ( is_string( $style_value ) && strpos( $style_value, 'var:' ) !== false ) {
if ( ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) {
$css_var = static::get_css_var_value( $style_value, $style_definition['css_vars'] );
if ( $css_var ) {
if ( static::is_valid_style_value( $css_var ) ) {
$css_declarations[ $style_property_keys['default'] ] = $css_var;
}
}
Expand All @@ -426,10 +420,11 @@ protected static function get_css_declarations( $style_value, $style_definition,
$css_declarations[ $individual_property ] = $value;
}
}
} else {
$css_declarations[ $style_property_keys['default'] ] = $style_value;

return $css_declarations;
}

$css_declarations[ $style_property_keys['default'] ] = $style_value;
return $css_declarations;
}

Expand All @@ -447,10 +442,8 @@ protected static function get_css_declarations( $style_value, $style_definition,
* @return array An array of CSS definitions, e.g., array( "$property" => "$value" ).
*/
protected static function get_individual_property_css_declarations( $style_value, $individual_property_definition, $should_skip_css_vars ) {
$css_declarations = array();

if ( ! is_array( $style_value ) || empty( $style_value ) || empty( $individual_property_definition['path'] ) ) {
return $css_declarations;
return array();
}

// The first item in $individual_property_definition['path'] array tells us the style property, e.g., "border".
Expand All @@ -459,6 +452,7 @@ protected static function get_individual_property_css_declarations( $style_value
$definition_group_key = $individual_property_definition['path'][0];
$individual_property_key = $individual_property_definition['path'][1];

$css_declarations = array();
foreach ( $style_value as $css_property => $value ) {
if ( empty( $value ) ) {
continue;
Expand Down Expand Up @@ -498,8 +492,8 @@ public static function compile_css( $css_declarations, $css_selector ) {
$css_rule = new WP_Style_Engine_CSS_Rule( $css_selector, $css_declarations );
return $css_rule->get_css();
}
$css_declarations = new WP_Style_Engine_CSS_Declarations( $css_declarations );

$css_declarations = new WP_Style_Engine_CSS_Declarations( $css_declarations );
return $css_declarations->get_declarations_string();
}

Expand Down Expand Up @@ -538,7 +532,7 @@ public static function compile_stylesheet_from_css_rules( $css_rules ) {
* 'selector' => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
* );.
*
* @return array<string|array>|null array(
* @return array<string|array> array(
* 'css' => (string) A CSS ruleset or declarations block formatted to be placed in an HTML `style` attribute or tag.
* 'declarations' => (array) An array of property/value pairs representing parsed CSS declarations.
* 'classnames' => (string) Classnames separated by a space.
Expand All @@ -548,22 +542,21 @@ function wp_style_engine_get_styles( $block_styles, $options = array() ) {
if ( ! class_exists( 'WP_Style_Engine' ) ) {
return array();
}
$defaults = array(
'selector' => null,
'context' => null,
'convert_vars_to_classnames' => false,

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

$options = wp_parse_args( $options, $defaults );
$parsed_styles = WP_Style_Engine::parse_block_styles( $block_styles, $options );

// Output.
$styles_output = array();

if ( ! $parsed_styles ) {
return $styles_output;
}

if ( ! empty( $parsed_styles['declarations'] ) ) {
$styles_output['css'] = WP_Style_Engine::compile_css( $parsed_styles['declarations'], $options['selector'] );
$styles_output['declarations'] = $parsed_styles['declarations'];
Expand Down Expand Up @@ -603,12 +596,14 @@ function wp_style_engine_get_stylesheet_from_css_rules( $css_rules, $options = a
return '';
}

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

$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;
Expand Down Expand Up @@ -642,7 +637,5 @@ function wp_style_engine_get_stylesheet_from_store( $store_name ) {
return '';
}

$store = WP_Style_Engine::get_store( $store_name );

return WP_Style_Engine::compile_stylesheet_from_css_rules( $store->get_all_rules() );
return WP_Style_Engine::compile_stylesheet_from_css_rules( WP_Style_Engine::get_store( $store_name )->get_all_rules() );
}

0 comments on commit 33f614d

Please sign in to comment.