Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style engine: pass CSS formatting options from global functions #43886

Merged
merged 1 commit into from
Sep 6, 2022
Merged

Style engine: pass CSS formatting options from global functions #43886

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions packages/style-engine/class-wp-style-engine.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -505,13 +505,17 @@ public static function compile_css( $css_declarations, $css_selector ) {
* Returns a compiled stylesheet from stored CSS rules.
*
* @param WP_Style_Engine_CSS_Rule[] $css_rules An array of WP_Style_Engine_CSS_Rule objects from a store or otherwise.
* @param array $options array(
* 'optimize' => (boolean) Whether to optimize the CSS output, e.g., combine rules.
* 'prettify' => (boolean) Whether to add new lines to output.
* );.
*
* @return string A compiled stylesheet from stored CSS rules.
*/
public static function compile_stylesheet_from_css_rules( $css_rules ) {
public static function compile_stylesheet_from_css_rules( $css_rules, $options = array() ) {
$processor = new WP_Style_Engine_Processor();
$processor->add_rules( $css_rules );
return $processor->get_css();
return $processor->get_css( $options );
}
}

Expand Down Expand Up @@ -591,6 +595,8 @@ function wp_style_engine_get_styles( $block_styles, $options = array() ) {
* @param array<string> $options array(
* 'context' => (string|null) An identifier describing the origin of the style object, e.g., 'block-supports' or 'global-styles'. Default is 'block-supports'.
* When set, the style engine will attempt to store the CSS rules.
* 'optimize' => (boolean) Whether to optimize the CSS output, e.g., combine rules.
* 'prettify' => (boolean) Whether to add new lines to output.
* );.
*
* @return string A compiled CSS string.
Expand Down Expand Up @@ -624,7 +630,7 @@ function wp_style_engine_get_stylesheet_from_css_rules( $css_rules, $options = a
return '';
}

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

/**
Expand All @@ -633,13 +639,16 @@ function wp_style_engine_get_stylesheet_from_css_rules( $css_rules, $options = a
* @access public
*
* @param string $store_name A valid store name.
*
* @param array $options array(
* 'optimize' => (boolean) Whether to optimize the CSS output, e.g., combine rules.
* 'prettify' => (boolean) Whether to add new lines to output.
* );.
* @return string A compiled CSS string.
*/
function wp_style_engine_get_stylesheet_from_context( $store_name ) {
function wp_style_engine_get_stylesheet_from_context( $store_name, $options = array() ) {
if ( ! class_exists( 'WP_Style_Engine' ) || empty( $store_name ) ) {
return '';
}

return WP_Style_Engine::compile_stylesheet_from_css_rules( WP_Style_Engine::get_store( $store_name )->get_all_rules() );
return WP_Style_Engine::compile_stylesheet_from_css_rules( WP_Style_Engine::get_store( $store_name )->get_all_rules(), $options );
}
21 changes: 13 additions & 8 deletions packages/style-engine/phpunit/class-wp-style-engine-processor-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ public function test_return_rules_as_css() {
$a_nice_processor->add_rules( array( $a_nice_css_rule, $a_nicer_css_rule ) );
$this->assertEquals(
'.a-nice-rule{color:var(--nice-color);background-color:purple;}.a-nicer-rule{font-family:Nice sans;font-size:1em;background-color:purple;}',
$a_nice_processor->get_css()
$a_nice_processor->get_css( array( 'prettify' => false ) )
);
}

Expand Down Expand Up @@ -109,7 +109,7 @@ public function test_return_store_rules_as_css() {
$a_nice_renderer->add_store( $a_nice_store );
$this->assertEquals(
'.a-nice-rule{color:var(--nice-color);background-color:purple;}.a-nicer-rule{font-family:Nice sans;font-size:1em;background-color:purple;}',
$a_nice_renderer->get_css()
$a_nice_renderer->get_css( array( 'prettify' => false ) )
);
}

Expand Down Expand Up @@ -138,7 +138,7 @@ public function test_dedupe_and_merge_css_declarations() {
$an_excellent_processor->add_rules( $another_excellent_rule );
$this->assertEquals(
'.an-excellent-rule{color:var(--excellent-color);border-style:dotted;border-color:brown;}',
$an_excellent_processor->get_css()
$an_excellent_processor->get_css( array( 'prettify' => false ) )
);

$yet_another_excellent_rule = new WP_Style_Engine_CSS_Rule( '.an-excellent-rule' );
Expand All @@ -152,7 +152,7 @@ public function test_dedupe_and_merge_css_declarations() {
$an_excellent_processor->add_rules( $yet_another_excellent_rule );
$this->assertEquals(
'.an-excellent-rule{color:var(--excellent-color);border-style:dashed;border-color:brown;border-width:2px;}',
$an_excellent_processor->get_css()
$an_excellent_processor->get_css( array( 'prettify' => false ) )
);
}

Expand Down Expand Up @@ -189,7 +189,12 @@ public function test_output_verbose_css_rules() {

$this->assertEquals(
'.a-sweet-rule{color:var(--sweet-color);background-color:purple;}#an-even-sweeter-rule > marquee{color:var(--sweet-color);background-color:purple;}.the-sweetest-rule-of-all a{color:var(--sweet-color);background-color:purple;}',
$a_sweet_processor->get_css( array( 'optimize' => false ) )
$a_sweet_processor->get_css(
array(
'optimize' => false,
'prettify' => false,
)
)
);
}

Expand Down Expand Up @@ -218,7 +223,7 @@ public function test_combine_css_rules() {

$this->assertEquals(
'.a-sweet-rule,#an-even-sweeter-rule > marquee{color:var(--sweet-color);background-color:purple;}',
$a_sweet_processor->get_css()
$a_sweet_processor->get_css( array( 'prettify' => false ) )
);
}
/**
Expand All @@ -240,7 +245,7 @@ public function test_combine_previously_added_css_rules() {
)
);
$a_lovely_processor->add_rules( $a_lovelier_rule );
$this->assertEquals( '.a-lovely-rule,.a-lovelier-rule{border-color:purple;}', $a_lovely_processor->get_css() );
$this->assertEquals( '.a-lovely-rule,.a-lovelier-rule{border-color:purple;}', $a_lovely_processor->get_css( array( 'prettify' => false ) ) );

$a_most_lovely_rule = new WP_Style_Engine_CSS_Rule(
'.a-most-lovely-rule',
Expand All @@ -260,7 +265,7 @@ public function test_combine_previously_added_css_rules() {

$this->assertEquals(
'.a-lovely-rule,.a-lovelier-rule,.a-most-lovely-rule,.a-perfectly-lovely-rule{border-color:purple;}',
$a_lovely_processor->get_css()
$a_lovely_processor->get_css( array( 'prettify' => false ) )
);
}
}
4 changes: 2 additions & 2 deletions packages/style-engine/phpunit/class-wp-style-engine-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -612,7 +612,7 @@ public function test_get_stylesheet_from_css_rules() {
),
);

$compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules( $css_rules );
$compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules( $css_rules, array( 'prettify' => false ) );
$this->assertSame( '.saruman{color:white;height:100px;border-style:solid;align-self:unset;}.gandalf{color:grey;height:90px;border-style:dotted;align-self:safe center;}.radagast{color:brown;height:60px;border-style:dashed;align-self:stretch;}', $compiled_stylesheet );
}

Expand Down Expand Up @@ -656,7 +656,7 @@ public function test_get_deduped_and_merged_stylesheet() {
),
);

$compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules( $css_rules );
$compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules( $css_rules, array( 'prettify' => false ) );
$this->assertSame( '.gandalf{color:white;height:190px;border-style:dotted;padding:10px;margin-bottom:100px;}.dumbledore,.rincewind{color:grey;height:90px;border-style:dotted;}', $compiled_stylesheet );
}
}