Skip to content

Commit

Permalink
Remove TODOs
Browse files Browse the repository at this point in the history 
Store combines existing rules

Store combines
  • Loading branch information
@ramonjd
ramonjd committed Feb 11, 2024
1 parent 66063d3 commit 081de82
Show file tree
Hide file tree
Showing 8 changed files with 184 additions and 55 deletions.
2 changes: 1 addition & 1 deletion lib/load.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,9 +195,9 @@ function gutenberg_is_experiment_enabled( $name ) {

// Copied package PHP files.
if ( is_dir( __DIR__ . '/../build/style-engine' ) ) {
require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rules-container-gutenberg.php';
require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-declarations-gutenberg.php';
require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rule-gutenberg.php';
require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rules-container-gutenberg.php';
require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rules-store-gutenberg.php';
require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-processor-gutenberg.php';
require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-gutenberg.php';
Expand Down
10 changes: 8 additions & 2 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 @@ -52,7 +52,9 @@ public function __construct( $selector = '', $declarations = array() ) {
* @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
*/
public function set_selector( $selector ) {
$this->selector = $selector;
if ( ! empty( $selector ) ) {
$this->selector = $selector;
}
return $this;
}

Expand All @@ -65,6 +67,9 @@ public function set_selector( $selector ) {
* @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
*/
public function add_declarations( $declarations ) {
if ( empty( $declarations ) ) {
return $this;
}
$is_declarations_object = ! is_array( $declarations );
$declarations_array = $is_declarations_object ? $declarations->get_declarations() : $declarations;

Expand Down Expand Up @@ -114,7 +119,8 @@ public function get_css( $should_prettify = false, $indent_count = 0 ) {
// Trims any multiple selectors strings.
$selector = $should_prettify ? implode( ',', array_map( 'trim', explode( ',', $this->get_selector() ) ) ) : $this->get_selector();
$selector = $should_prettify ? str_replace( array( ',' ), ",\n", $selector ) : $selector;
$css_declarations = $this->declarations->get_declarations_string( $should_prettify, $declarations_indent );
$css_declarations = ! empty( $this->declarations ) ? $this->declarations->get_declarations_string( $should_prettify, $declarations_indent ) : '';

Check failure on line 123 in packages/style-engine/class-wp-style-engine-css-rule.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Functions must not contain multiple empty lines in a row; found 2 empty lines

if ( empty( $css_declarations ) ) {
return '';
Expand Down
39 changes: 12 additions & 27 deletions packages/style-engine/class-wp-style-engine-css-rules-container.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,30 @@
*
* @package Gutenberg
*/
// @TODO add unit tests
// @TODO Should have same/similar interface to WP_Style_Engine_CSS_Rule or maybe inherits from WP_Style_Engine_CSS_Rule?

if ( ! class_exists( 'WP_Style_Engine_CSS_Rules_Container' ) ) {
/**
* Holds, sanitizes, processes and prints nested CSS rules for the Style Engine.
*
* @access private
*/
class WP_Style_Engine_CSS_Rules_Container {
class WP_Style_Engine_CSS_Rules_Container extends WP_Style_Engine_CSS_Rule {
/**
* A parent CSS selector in the case of nested CSS, or a CSS nested @rule, such as `@media (min-width: 80rem)` or `@layer module`
*
* @var string
*/
protected $selector;

/**
* The selector declarations.
*
* Contains a WP_Style_Engine_CSS_Declarations object.
*
* @var WP_Style_Engine_CSS_Declarations
*/
protected $declarations;

/**
* The container declarations.
*
Expand All @@ -43,30 +51,6 @@ public function __construct( $selector = '', $rule = array() ) {
$this->add_rules( $rule );
}

/**
* Sets the selector/container name.
*
* @param string $selector A parent CSS selector in the case of nested CSS, or a CSS nested @rule,
* such as `@media (min-width: 80rem)` or `@layer module`.
*
* @return WP_Style_Engine_CSS_Rules_Container Returns the object to allow chaining of methods.
*/
public function set_selector( $selector ) {
if ( ! empty( $selector ) ) {
$this->selector = $selector;
}
return $this;
}

/**
* Gets the selector/container name.
*
* @return string Container.
*/
public function get_selector() {
return $this->selector;
}

/**
* Gets all nested rules.
*
Expand Down Expand Up @@ -137,6 +121,7 @@ public function get_css( $should_prettify = false, $indent_count = 0 ) {
$indent_count = $should_prettify ? $indent_count + 1 : $indent_count;
$new_line = $should_prettify ? "\n" : '';
$spacer = $should_prettify ? ' ' : '';
$css .= ! empty( $this->declarations ) ? $this->declarations->get_declarations_string( $should_prettify, $indent_count ) : '';

Check failure on line 124 in packages/style-engine/class-wp-style-engine-css-rules-container.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Expected 1 space after ".="; 2 found

Check failure on line 124 in packages/style-engine/class-wp-style-engine-css-rules-container.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Expected 1 space before "!"; 2 found

foreach ( $this->rules as $rule ) {
$css .= $rule->get_css( $should_prettify, $indent_count );
Expand Down
9 changes: 8 additions & 1 deletion packages/style-engine/class-wp-style-engine-css-rules-store.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,14 @@ public function add_rule( $rule ) {
/*
Create a new WP_Style_Engine_CSS_Rule rule by default if it doesn't exist.
*/
if ( empty( $this->rules[ $selector ] ) ) {
if ( isset( $this->rules[ $selector ] ) ) {
if ( $rule instanceof WP_Style_Engine_CSS_Rules_Container ) {
$this->rules[ $selector ]->add_rules( $rule->get_rules() );
}
if ( $is_rules_object ) {
$this->rules[ $selector ]->add_declarations( $rule->get_declarations() );
}
} else {
$this->rules[ $selector ] = $is_rules_object ? $rule : new WP_Style_Engine_CSS_Rule( $selector );
}

Expand Down
17 changes: 9 additions & 8 deletions packages/style-engine/class-wp-style-engine-processor.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,20 +80,21 @@ public function add_rules( $css_rules ) {
continue;
}

if ( $rule instanceof WP_Style_Engine_CSS_Rule ) {
if ( isset( $this->css_rules[ $selector ] ) ) {
$this->css_rules[ $selector ]->add_declarations( $rule->get_declarations() );
if ( $rule instanceof WP_Style_Engine_CSS_Rules_Container ) {
if ( isset( $this->css_containers[ $selector ] ) ) {
$this->css_containers[ $selector ]->add_rules( $rule->get_rules() );
$this->css_containers[ $selector ]->add_declarations( $rule->get_declarations() );
} else {
$this->css_rules[ $selector ] = $rule;
$this->css_containers[ $selector ] = $rule;
}
continue;
}

if ( $rule instanceof WP_Style_Engine_CSS_Rules_Container ) {
if ( isset( $this->css_containers[ $selector ] ) ) {
$this->css_containers[ $selector ]->add_rules( $rule->get_rules() );
if ( $rule instanceof WP_Style_Engine_CSS_Rule ) {
if ( isset( $this->css_rules[ $selector ] ) ) {
$this->css_rules[ $selector ]->add_declarations( $rule->get_declarations() );
} else {
$this->css_containers[ $selector ] = $rule;
$this->css_rules[ $selector ] = $rule;
}
}
}
Expand Down
30 changes: 22 additions & 8 deletions packages/style-engine/style-engine.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,20 @@ function wp_style_engine_get_styles( $block_styles, $options = array() ) {
$css_declarations = new WP_Style_Engine_CSS_Declarations( $parsed_styles['declarations'] );
$new_rule = null;

if ( $selector ) {
$new_rule = new WP_Style_Engine_CSS_Rule( $options['selector'], $css_declarations );
// TODO: Extend WP_Style_Engine::compile_css to do this if block.
if ( $selector || $container ) {
if ( $selector ) {
$new_rule = new WP_Style_Engine_CSS_Rule( $options['selector'], $css_declarations );
}

if ( $container ) {
$css_container = new WP_Style_Engine_CSS_Rules_Container( $container, $new_rule );
$styles_output['css'] = $css_container->get_css();
} else {
$styles_output['css'] = $new_rule->get_css();
$new_rule = new WP_Style_Engine_CSS_Rules_Container( $container, $new_rule );
if ( ! $selector ) {
$new_rule->add_declarations( $css_declarations );
}
}

$styles_output['css'] = $new_rule->get_css();
} else {
$styles_output['css'] = $css_declarations->get_declarations_string();
}
Expand Down Expand Up @@ -133,15 +139,23 @@ function wp_style_engine_get_stylesheet_from_css_rules( $css_rules, $options = a

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

$container = $css_rule['container'] ?? null;
$new_rule = new WP_Style_Engine_CSS_Rule( $css_rule['selector'], $css_rule['declarations'] );
$selector = $css_rule['selector'] ?? null;
$new_rule = null;

if ( $selector ) {
$new_rule = new WP_Style_Engine_CSS_Rule( $css_rule['selector'], $css_rule['declarations'] );

Check warning on line 151 in packages/style-engine/style-engine.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Equals sign not aligned correctly; expected 1 space but found 2 spaces
}

if ( $container ) {
$new_rule = new WP_Style_Engine_CSS_Rules_Container( $container, $new_rule );
if ( ! $selector ) {
$new_rule->add_declarations( $css_rule['declarations'] );
}
}

if ( ! empty( $options['context'] ) ) {
Expand Down
47 changes: 47 additions & 0 deletions phpunit/style-engine/class-wp-style-engine-css-rules-store-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,53 @@ public function test_should_add_rule_to_existing_store() {
$this->assertSame( $expected, $store_rule->get_css(), 'Return value of get_css() does not match expected CSS from existing store rules.' );
}

/**
* Tests adding rules to an existing store.
*
* @covers ::add_rule
*/
public function test_should_combine_existing_rule_objects_to_store() {
$new_hotdog_store = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'hotdog' );

$selector = '.pickle';
$pickle_rule = new WP_Style_Engine_CSS_Rule_Gutenberg(
$selector,
array(
'color' => 'brown',
'border-color' => 'yellow',
'border-radius' => '10rem',
)
);
$pickle_container = new WP_Style_Engine_CSS_Rules_Container_Gutenberg( '.hotdog', $pickle_rule );
$added_rule = $new_hotdog_store->add_rule( $pickle_container );
$expected = '.hotdog{.pickle{color:brown;border-color:yellow;border-radius:10rem;}}';

$this->assertSame( $expected, $added_rule->get_css(), 'Return value of store rule get_css() matches passed rule object get_css().' );

$pickle_container_2 = new WP_Style_Engine_CSS_Rules_Container_Gutenberg( '.hotdog', array(

Check failure on line 166 in phpunit/style-engine/class-wp-style-engine-css-rules-store-test.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Opening parenthesis of a multi-line function call must be the last content on the line

Check failure on line 166 in phpunit/style-engine/class-wp-style-engine-css-rules-store-test.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Only one argument is allowed per line in a multi-line function call
new WP_Style_Engine_CSS_Rule_Gutenberg(

Check failure on line 167 in phpunit/style-engine/class-wp-style-engine-css-rules-store-test.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Array item not aligned correctly; expected 12 spaces but found 16
'.pickle-2',

Check failure on line 168 in phpunit/style-engine/class-wp-style-engine-css-rules-store-test.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Multi-line array item not aligned correctly; expected 16 spaces, but found 20
array(
'color' => 'pink',
'border-color' => 'blue',
'border-radius' => '11rem',
)
),
new WP_Style_Engine_CSS_Rule_Gutenberg(

Check failure on line 175 in phpunit/style-engine/class-wp-style-engine-css-rules-store-test.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Array item not aligned correctly; expected 12 spaces but found 16
$selector,
array(
'border-radius' => '1px',
)
)
)
);
$pickle_container->add_declarations( array( 'padding' => '100px' ) );
$added_rule = $new_hotdog_store->add_rule( $pickle_container_2 );

Check warning on line 184 in phpunit/style-engine/class-wp-style-engine-css-rules-store-test.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Equals sign not aligned with surrounding assignments; expected 1 space but found 7 spaces
$expected = '.hotdog{padding:100px;.pickle{color:brown;border-color:yellow;border-radius:1px;}.pickle-2{color:pink;border-color:blue;border-radius:11rem;}}';

Check warning on line 185 in phpunit/style-engine/class-wp-style-engine-css-rules-store-test.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Equals sign not aligned with surrounding assignments; expected 3 spaces but found 9 spaces
$this->assertSame( $expected, $added_rule->get_css(), 'Return value of store rule get_css() matches passed rule object get_css().' );
}


/**
* Tests adding rules to an existing store.
*
Expand Down
Loading

0 comments on commit 081de82

Please sign in to comment.