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

Use the Style Engine for global-styles #42592

Closed
wants to merge 31 commits into from
Closed

Use the Style Engine for global-styles #42592

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
6ea61f8
WIP
aristath Jul 21, 2022
de75e31
Allow CSS variables in the Declarations class
aristath Jul 21, 2022
d725835
Don't print CSS if styles are empty
aristath Jul 21, 2022
fed8866
more WIP
aristath Jul 21, 2022
c28c576
more fixes
aristath Jul 21, 2022
55788ff
Allow using display when value is not "none"
aristath Jul 22, 2022
677a37d
This comment was removed by mistake
aristath Jul 22, 2022
4f0f411
Fix a failing test - These blocks of styles are identical.
aristath Jul 22, 2022
00e6e0f
Add a get_stores method
aristath Jul 22, 2022
de2a954
reset style-engine stores between tests
aristath Jul 22, 2022
256b795
Add a method to sanitize values
aristath Jul 22, 2022
be57c32
manually confirmed each instance of these tests & their consistency
aristath Jul 22, 2022
b7a862f
fix test: if there are no styles, no CSS gets printed
aristath Jul 22, 2022
9d3a9b8
minor tweak
aristath Jul 22, 2022
b26cb66
another tweak for values sanitizing
aristath Jul 22, 2022
e76d9e8
more value sanitization fixes for quotes
aristath Jul 22, 2022
a081f0e
better testing some style-engine improvements
aristath Jul 22, 2022
e47331d
add space for consistency with the lines below
aristath Jul 22, 2022
2f4cb76
only add whitespace if SCRIPT_DEBUG is enabled
aristath Jul 22, 2022
7fb3f2c
remove whitespace in styles
aristath Jul 22, 2022
22f5321
update some tests
aristath Jul 22, 2022
c43921a
fix usage of trim() functions in the style engine
aristath Jul 22, 2022
6680933
whitespace fixes in tests
aristath Jul 22, 2022
2980533
rename var
aristath Jul 22, 2022
9da7b8f
more tests fixes
aristath Jul 22, 2022
a777954
remove whitespace for consistency
aristath Jul 22, 2022
326aca1
Add add_store() method
aristath Jul 25, 2022
a88316b
cleanup incoming store
aristath Jul 25, 2022
443f1b8
Merge branch 'trunk' into try/global-styles-use-style-engine
aristath Aug 2, 2022
c4b85d7
remove cleanup param
aristath Aug 2, 2022
84483ce
fixing return issue after merge
aristath Aug 2, 2022
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
387 changes: 316 additions & 71 deletions lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
View file
Open in desktop

Large diffs are not rendered by default.

29 changes: 25 additions & 4 deletions packages/style-engine/class-wp-style-engine-css-declarations.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ public function add_declaration( $property, $value ) {
}

// Trim the value. If empty, bail early.
$value = trim( $value );
$value = $this->sanitize_value( $value );
if ( '' === $value ) {
return;
}
Expand Down Expand Up @@ -121,13 +121,19 @@ public function get_declarations() {
public function get_declarations_string() {
$declarations_array = $this->get_declarations();
$declarations_output = '';

foreach ( $declarations_array as $property => $value ) {
$filtered_declaration = esc_html( safecss_filter_attr( "{$property}: {$value}" ) );
// Account for CSS variables.
if ( 0 === strpos( $property, '--' ) || ( 'display' === $property && 'none' !== $value ) ) {
$declarations_output .= "{$property}:{$value};";
continue;
}
$filtered_declaration = safecss_filter_attr( "{$property}:{$value}" );
if ( $filtered_declaration ) {
$declarations_output .= $filtered_declaration . '; ';
$declarations_output .= $filtered_declaration . ';';
}
}
return rtrim( $declarations_output );
return $declarations_output;
}

/**
Expand All @@ -140,4 +146,19 @@ public function get_declarations_string() {
protected function sanitize_property( $property ) {
return sanitize_key( $property );
}

/**
* Sanitize values.
*
* @param string $value The CSS value.
*
* @return string The sanitized value.
*/
protected function sanitize_value( $value ) {
// Escape HTML.
$value = esc_html( $value );
// Fix quotes to account for URLs.
$value = str_replace( array( ''', ''', '"', '"', '"', ''' ), array( "'", "'", '"', '"', '"', "'" ), $value );
return trim( $value );
}
}
7 changes: 6 additions & 1 deletion packages/style-engine/class-wp-style-engine-css-rule.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,11 @@ public function get_selector() {
* @return string
*/
public function get_css() {
return $this->get_selector() . ' {' . $this->declarations->get_declarations_string() . '}';
$styles = $this->declarations->get_declarations_string();
if ( empty( $styles ) ) {
return '';
}

return $this->get_selector() . '{' . $styles . '}';
}
}
17 changes: 17 additions & 0 deletions packages/style-engine/class-wp-style-engine-css-rules-store.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,4 +140,21 @@ public function add_rule( $selector ) {
public function remove_rule( $selector ) {
unset( $this->rules[ $selector ] );
}

/**
* Add a store. This method effectively merges the rules of the defined store into the current store,
* and removes them from the original store to avoid duplication.
*
* @param WP_Style_Engine_CSS_Rules_Store $store The store to merge.
*
* @return WP_Style_Engine_CSS_Rules_Store Returns the merged store.
*/
public function add_store( WP_Style_Engine_CSS_Rules_Store $store ) {
$incoming_rules = $store->get_all_rules();
foreach ( $incoming_rules as $rule ) {
$this->add_rule( $rule->get_selector() )->add_declarations( $rule->get_declarations() );
$store->remove_rule( $rule->get_selector() );
}
return $this;
}
}
12 changes: 6 additions & 6 deletions packages/style-engine/phpunit/class-wp-style-engine-css-declarations-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ public function test_generate_css_declarations_string() {
$css_declarations = new WP_Style_Engine_CSS_Declarations( $input_declarations );

$this->assertSame(
'color: red; border-top-left-radius: 99px; text-decoration: underline;',
'color:red;border-top-left-radius:99px;text-decoration:underline;',
$css_declarations->get_declarations_string()
);
}
Expand All @@ -101,7 +101,7 @@ public function test_remove_unsafe_properties_and_values() {
$css_declarations = new WP_Style_Engine_CSS_Declarations( $input_declarations );

$this->assertSame(
'color: <red/>; margin-right: 10em;',
'margin-right:10em;',
$css_declarations->get_declarations_string()
);
}
Expand All @@ -118,13 +118,13 @@ public function test_remove_declaration() {
$css_declarations = new WP_Style_Engine_CSS_Declarations( $input_declarations );

$this->assertSame(
'color: tomato; margin: 10em 10em 20em 1px; font-family: Happy Font serif;',
'color:tomato;margin:10em 10em 20em 1px;font-family:Happy Font serif;',
$css_declarations->get_declarations_string()
);

$css_declarations->remove_declaration( 'color' );
$this->assertSame(
'margin: 10em 10em 20em 1px; font-family: Happy Font serif;',
'margin:10em 10em 20em 1px;font-family:Happy Font serif;',
$css_declarations->get_declarations_string()
);
}
Expand All @@ -141,13 +141,13 @@ public function test_remove_declarations() {
$css_declarations = new WP_Style_Engine_CSS_Declarations( $input_declarations );

$this->assertSame(
'color: cucumber; margin: 10em 10em 20em 1px; font-family: Happy Font serif;',
'color:cucumber;margin:10em 10em 20em 1px;font-family:Happy Font serif;',
$css_declarations->get_declarations_string()
);

$css_declarations->remove_declarations( array( 'color', 'margin' ) );
$this->assertSame(
'font-family: Happy Font serif;',
'font-family:Happy Font serif;',
$css_declarations->get_declarations_string()
);
}
Expand Down
8 changes: 4 additions & 4 deletions packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ public function test_instantiate_with_selector_and_rules() {

$this->assertSame( $selector, $css_rule->get_selector() );

$expected = "$selector {{$css_declarations->get_declarations_string()}}";
$expected = "$selector{{$css_declarations->get_declarations_string()}}";
$this->assertSame( $expected, $css_rule->get_css() );
}

Expand All @@ -45,7 +45,7 @@ public function test_dedupe_properties_in_rules() {
$css_rule = new WP_Style_Engine_CSS_Rule( $selector, $first_declaration );
$css_rule->add_declarations( new WP_Style_Engine_CSS_Declarations( $overwrite_first_declaration ) );

$expected = '.taggart {font-size: 4px;}';
$expected = '.taggart{font-size:4px;}';
$this->assertSame( $expected, $css_rule->get_css() );
}

Expand All @@ -60,7 +60,7 @@ public function test_add_declarations() {
$css_rule = new WP_Style_Engine_CSS_Rule( '.hill-street-blues', $some_css_declarations );
$css_rule->add_declarations( $some_more_css_declarations );

$expected = '.hill-street-blues {margin-top: 10px; font-size: 1rem;}';
$expected = '.hill-street-blues{margin-top:10px;font-size:1rem;}';
$this->assertSame( $expected, $css_rule->get_css() );
}

Expand Down Expand Up @@ -89,7 +89,7 @@ public function test_get_css() {
);
$css_declarations = new WP_Style_Engine_CSS_Declarations( $input_declarations );
$css_rule = new WP_Style_Engine_CSS_Rule( $selector, $css_declarations );
$expected = "$selector {{$css_declarations->get_declarations_string()}}";
$expected = "$selector{{$css_declarations->get_declarations_string()}}";

$this->assertSame( $expected, $css_rule->get_css() );
}
Expand Down
20 changes: 10 additions & 10 deletions packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,19 +85,19 @@ public function test_add_rule() {
$new_pie_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'meat-pie' );
$selector = '.wp-block-sauce a:hover';
$store_rule = $new_pie_store->add_rule( $selector );
$expected = "$selector {}";
$this->assertEquals( $expected, $store_rule->get_css() );
$this->assertEquals( '', $store_rule->get_css() );

$pie_declarations = array(
'color' => 'brown',
'border-color' => 'yellow',
'border-radius' => '10rem',
$css_declarations = new WP_Style_Engine_CSS_Declarations(
array(
'color' => 'brown',
'border-color' => 'yellow',
'border-radius' => '10rem',
)
);
$css_declarations = new WP_Style_Engine_CSS_Declarations( $pie_declarations );
$store_rule->add_declarations( $css_declarations );

$store_rule = $new_pie_store->add_rule( $selector );
$expected = "$selector {{$css_declarations->get_declarations_string()}}";
$new_pie_store->add_rule( $selector )->add_declarations( $css_declarations );
$styles = $css_declarations->get_declarations_string();
$expected = $selector . '{' . $styles . '}';
$this->assertEquals( $expected, $store_rule->get_css() );
}

Expand Down
8 changes: 4 additions & 4 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 @@ -58,7 +58,7 @@ public function test_return_store_rules_as_css() {
);
$a_nice_renderer = new WP_Style_Engine_Processor_Gutenberg();
$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() );
$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() );
}

/**
Expand Down Expand Up @@ -95,7 +95,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() );
$this->assertEquals( '.an-excellent-rule{color:var(--excellent-color);border-style:dashed;border-color:brown;border-width:2px;}', $an_excellent_processor->get_css() );
}

/**
Expand All @@ -121,7 +121,7 @@ public function test_combine_css_rules() {
$a_sweet_processor = new WP_Style_Engine_Processor();
$a_sweet_processor->add_rules( array( $a_sweet_rule, $a_sweeter_rule ) );

$this->assertEquals( '.a-sweet-rule,#an-even-sweeter-rule > marquee {color: var(--sweet-color); background-color: purple;}', $a_sweet_processor->get_css() );
$this->assertEquals( '.a-sweet-rule,#an-even-sweeter-rule > marquee{color:var(--sweet-color);background-color:purple;}', $a_sweet_processor->get_css() );
}
/**
* Should combine and store CSS rules.
Expand Down Expand Up @@ -160,6 +160,6 @@ public function test_combine_previously_added_css_rules() {
);
$a_lovely_processor->add_rules( $a_perfectly_lovely_rule );

$this->assertEquals( '.a-lovely-rule,.a-lovelier-rule,.a-most-lovely-rule,.a-perfectly-lovely-rule {border-color: purple;}', $a_lovely_processor->get_css() );
$this->assertEquals( '.a-lovely-rule,.a-lovelier-rule,.a-most-lovely-rule,.a-perfectly-lovely-rule{border-color:purple;}', $a_lovely_processor->get_css() );
}
}
20 changes: 10 additions & 10 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 @@ -100,7 +100,7 @@ public function data_get_styles_fixtures() {
),
'options' => array( 'convert_vars_to_classnames' => true ),
'expected_output' => array(
'css' => 'border-style: dotted; border-width: 2rem; padding: 0; margin: 111px;',
'css' => 'border-style:dotted;border-width:2rem;padding:0;margin:111px;',
'declarations' => array(
'border-style' => 'dotted',
'border-width' => '2rem',
Expand Down Expand Up @@ -176,7 +176,7 @@ public function data_get_styles_fixtures() {
),
'options' => null,
'expected_output' => array(
'css' => 'border-top-left-radius: 99px; border-top-right-radius: 98px; border-bottom-left-radius: 97px; border-bottom-right-radius: 96px; padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; margin-top: 12rem; margin-left: 2vh; margin-bottom: 2px; margin-right: 10em;',
'css' => 'border-top-left-radius:99px;border-top-right-radius:98px;border-bottom-left-radius:97px;border-bottom-right-radius:96px;padding-top:42px;padding-left:2%;padding-bottom:44px;padding-right:5rem;margin-top:12rem;margin-left:2vh;margin-bottom:2px;margin-right:10em;',
'declarations' => array(
'border-top-left-radius' => '99px',
'border-top-right-radius' => '98px',
Expand Down Expand Up @@ -209,7 +209,7 @@ public function data_get_styles_fixtures() {
),
'options' => null,
'expected_output' => array(
'css' => 'font-family: Roboto,Oxygen-Sans,Ubuntu,sans-serif; font-style: italic; font-weight: 800; line-height: 1.3; text-decoration: underline; text-transform: uppercase; letter-spacing: 2;',
'css' => 'font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;text-decoration:underline;text-transform:uppercase;letter-spacing:2;',
'declarations' => array(
'font-size' => 'clamp(2em, 2vw, 4em)',
'font-family' => 'Roboto,Oxygen-Sans,Ubuntu,sans-serif',
Expand Down Expand Up @@ -302,7 +302,7 @@ public function data_get_styles_fixtures() {
),
'options' => array(),
'expected_output' => array(
'css' => 'color: var(--wp--preset--color--teal-independents);',
'css' => 'color:var(--wp--preset--color--teal-independents);',
'declarations' => array(
'color' => 'var(--wp--preset--color--teal-independents)',
),
Expand All @@ -319,7 +319,7 @@ public function data_get_styles_fixtures() {
),
'options' => array(),
'expected_output' => array(
'css' => 'color: #fff;',
'css' => 'color:#fff;',
'declarations' => array(
'color' => '#fff',
),
Expand Down Expand Up @@ -353,7 +353,7 @@ public function data_get_styles_fixtures() {
),
'options' => array(),
'expected_output' => array(
'css' => 'padding: var(--wp--preset--spacing--20); margin: var(--wp--preset--spacing--10);',
'css' => 'padding:var(--wp--preset--spacing--20);margin:var(--wp--preset--spacing--10);',
'declarations' => array(
'padding' => 'var(--wp--preset--spacing--20)',
'margin' => 'var(--wp--preset--spacing--10)',
Expand All @@ -380,7 +380,7 @@ public function data_get_styles_fixtures() {
),
'options' => array(),
'expected_output' => array(
'css' => 'padding-left: var(--wp--preset--spacing--30); padding-right: var(--wp--preset--spacing--40); padding-top: 14px; padding-bottom: 14px; margin-left: var(--wp--preset--spacing--10); margin-right: var(--wp--preset--spacing--20); margin-top: 1rem; margin-bottom: 1rem;',
'css' => 'padding-left:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-top:14px;padding-bottom:14px;margin-left:var(--wp--preset--spacing--10);margin-right:var(--wp--preset--spacing--20);margin-top:1rem;margin-bottom:1rem;',
'declarations' => array(
'padding-left' => 'var(--wp--preset--spacing--30)',
'padding-right' => 'var(--wp--preset--spacing--40)',
Expand All @@ -407,7 +407,7 @@ public function data_get_styles_fixtures() {
),
'options' => array(),
'expected_output' => array(
'css' => 'margin-top: 1rem; margin-bottom: 0;',
'css' => 'margin-top:1rem;margin-bottom:0;',
'declarations' => array(
'margin-top' => '1rem',
'margin-bottom' => '0',
Expand Down Expand Up @@ -456,7 +456,7 @@ public function data_get_styles_fixtures() {
),
'options' => array(),
'expected_output' => array(
'css' => 'border-top-color: #fe1; border-top-width: 1.5rem; border-top-style: dashed; border-right-color: #fe2; border-right-width: 1.4rem; border-right-style: solid; border-bottom-color: #fe3; border-bottom-width: 1.3rem; border-left-color: var(--wp--preset--color--swampy-yellow); border-left-width: 0.5rem; border-left-style: dotted;',
'css' => 'border-top-color:#fe1;border-top-width:1.5rem;border-top-style:dashed;border-right-color:#fe2;border-right-width:1.4rem;border-right-style:solid;border-bottom-color:#fe3;border-bottom-width:1.3rem;border-left-color:var(--wp--preset--color--swampy-yellow);border-left-width:0.5rem;border-left-style:dotted;',
'declarations' => array(
'border-top-color' => '#fe1',
'border-top-width' => '1.5rem',
Expand Down Expand Up @@ -499,7 +499,7 @@ public function data_get_styles_fixtures() {
),
'options' => array(),
'expected_output' => array(
'css' => 'border-bottom-color: var(--wp--preset--color--terrible-lizard);',
'css' => 'border-bottom-color:var(--wp--preset--color--terrible-lizard);',
'declarations' => array(
'border-bottom-color' => 'var(--wp--preset--color--terrible-lizard)',
),
Expand Down
Loading