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

Remove empty media queries #1423

Merged
merged 14 commits into from
Nov 24, 2018
Merged

Remove empty media queries #1423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
83e4b59
Added functionality to remove empty media queries in CSS
Sep 11, 2018
faf0d37
Added PHP unit tests for method which removes empty media queries
Sep 12, 2018
8862c4c
Improved regular expression which detects media queries to prevent re…
Sep 12, 2018
7ce499c
Added test case for remove_empty_media_queries method where exists mu…
Sep 12, 2018
c5783ba
Detect and remove any white space chars after media query
Sep 12, 2018
1b1ec58
Merge branch 'develop' of https://github.com/Automattic/amp-wp into f…
westonruter Sep 13, 2018
2716390
Update PHP-CSS-Parser to https://github.com/xwp/PHP-CSS-Parser/pull/1
westonruter Sep 13, 2018
b38d891
Split stylesheets before and after CSS at rules
westonruter Sep 13, 2018
7b55304
Remove empty media queries without regular expressions
Sep 17, 2018
56d83bd
Removed method and PHP unit test which used in the first implementati…
Sep 24, 2018
32f6d8d
Move empty rule removal to second pass
westonruter Nov 24, 2018
b02d427
Merge branch '1.0' of https://github.com/Automattic/amp-wp into featu…
westonruter Nov 24, 2018
e7b7dbd
Improve handling of empty rules alongside non-empty ones
westonruter Nov 24, 2018
e250762
Remove completed todo
westonruter Nov 24, 2018
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
2 changes: 1 addition & 1 deletion composer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
],
"require": {
"php": "^5.3.6 || ^7.0",
"sabberworm/php-css-parser": "dev-master"
"sabberworm/php-css-parser": "dev-add/at-rule-before-after"
},
"require-dev": {
"wp-coding-standards/wpcs": "^0.14.0",
Expand Down
14 changes: 7 additions & 7 deletions composer.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

64 changes: 60 additions & 4 deletions includes/sanitizers/class-amp-style-sanitizer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -777,7 +777,7 @@ private function fetch_external_stylesheet( $url ) {
private function process_stylesheet( $stylesheet, $options = array() ) {
$parsed = null;
$cache_key = null;
$cache_group = 'amp-parsed-stylesheet-v12'; // This should be bumped whenever the PHP-CSS-Parser is updated.
$cache_group = 'amp-parsed-stylesheet-v13'; // This should be bumped whenever the PHP-CSS-Parser is updated.

$cache_impacting_options = array_merge(
wp_array_slice_assoc(
Expand Down Expand Up @@ -1062,15 +1062,23 @@ private function prepare_stylesheet( $stylesheet_string, $options = array() ) {
$between_selectors = '/*AMP_WP_BETWEEN_SELECTORS*/';
$after_declaration_block_selectors = '/*AMP_WP_BEFORE_DECLARATION_SELECTORS*/';
$after_declaration_block = '/*AMP_WP_AFTER_DECLARATION*/';
$before_at_rule = '/*AMP_WP_BEFORE_AT_RULE*/';
$after_at_rule = '/*AMP_WP_AFTER_AT_RULE*/';

$output_format->set( 'BeforeDeclarationBlock', $before_declaration_block );
$output_format->set( 'SpaceBeforeSelectorSeparator', $between_selectors );
$output_format->set( 'AfterDeclarationBlockSelectors', $after_declaration_block_selectors );
$output_format->set( 'AfterDeclarationBlock', $after_declaration_block );
$output_format->set( 'BeforeAtRuleBlock', $before_at_rule );
$output_format->set( 'AfterAtRuleBlock', $after_at_rule );

$stylesheet_string = $css_document->render( $output_format );

$pattern = '#';
$pattern .= preg_quote( $before_at_rule, '#' );
$pattern .= '|';
$pattern .= preg_quote( $after_at_rule, '#' );
$pattern .= '|';
$pattern .= '(' . preg_quote( $before_declaration_block, '#' ) . ')';
$pattern .= '(.+?)';
$pattern .= preg_quote( $after_declaration_block_selectors, '#' );
Expand Down Expand Up @@ -2047,10 +2055,10 @@ private function finalize_stylesheet_set( $stylesheet_set ) {
$final_size = 0;
$dom = $this->dom;
foreach ( $stylesheet_set['pending_stylesheets'] as &$pending_stylesheet ) {
$stylesheet = '';
$stylesheet_parts = array();
foreach ( $pending_stylesheet['stylesheet'] as $stylesheet_part ) {
if ( is_string( $stylesheet_part ) ) {
$stylesheet .= $stylesheet_part;
$stylesheet_parts[] = $stylesheet_part;
continue;
}
list( $selectors_parsed, $declaration_block ) = $stylesheet_part;
Expand Down Expand Up @@ -2091,9 +2099,57 @@ private function finalize_stylesheet_set( $stylesheet_set ) {
$selectors = array_keys( $selectors_parsed );
}
if ( ! empty( $selectors ) ) {
$stylesheet .= implode( ',', $selectors ) . $declaration_block;
$stylesheet_parts[] = implode( ',', $selectors ) . $declaration_block;
}
}

// Strip empty at-rules after tree shaking.
$stylesheet_part_count = count( $stylesheet_parts );
for ( $i = 0; $i < $stylesheet_part_count; $i++ ) {
$stylesheet_part = $stylesheet_parts[ $i ];
if ( '@' !== substr( $stylesheet_part, 0, 1 ) ) {
continue;
}

// Delete empty at-rules.
if ( '{}' === substr( $stylesheet_part, -2 ) ) {
$stylesheet_part_count--;
array_splice( $stylesheet_parts, $i, 1 );
$i--;
continue;
}

// Delete at-rules that were emptied due to tree-shaking.
if ( '{' === substr( $stylesheet_part, -1 ) ) {
$open_braces = 1;
for ( $j = $i + 1; $j < $stylesheet_part_count; $j++ ) {
$stylesheet_part = $stylesheet_parts[ $j ];
$is_at_rule = '@' === substr( $stylesheet_part, 0, 1 );
if ( empty( $stylesheet_part ) ) {
continue; // There was a shaken rule.
} elseif ( $is_at_rule && '{}' === substr( $stylesheet_part, -2 ) ) {
continue; // The rule opens is empty from the start.
} elseif ( $is_at_rule && '{' === substr( $stylesheet_part, -1 ) ) {
$open_braces++;
} elseif ( '}' === $stylesheet_part ) {
$open_braces--;
} else {
break;
}

// Splice out the parts that are empty.
if ( 0 === $open_braces ) {
array_splice( $stylesheet_parts, $i, $j - $i + 1 );
$stylesheet_part_count = count( $stylesheet_parts );
$i--;
continue 2;
}
}
}
}

$stylesheet = implode( '', $stylesheet_parts );
unset( $stylesheet_parts );
$sheet_size = strlen( $stylesheet );
$pending_stylesheet['size'] = $sheet_size;

Expand Down
32 changes: 30 additions & 2 deletions tests/test-amp-style-sanitizer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -843,6 +843,31 @@ public function test_large_custom_css_and_rule_removal() {
$html .= '<style>.b[data-value="' . str_repeat( 'c', $custom_max_size ) . '"] { color:green }</style>';
$html .= '<style>#nonexists { color:black; } #exists { color:white; }</style>';
$html .= '<style>div { color:black; } span { color:white; } </style>';
$html .= '<style>@font-face {font-family: "Open Sans";src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");}</style>';
$html .= '<style>@media only screen and (min-width: 1280px) { .not-exists-selector { margin: 0 auto; } } .b { background: lightblue; }</style>';
$html .= '
<style>
@media screen and (max-width: 1000px) {
@supports (display: grid) {
.b::before {
content: "@media screen and (max-width: 1000px) {";
}
.b::after {
content: "}";
}
}
}
@media print { @media print { @media print { #nonexists { color:red; } @media presentation {} #verynotexists { color:blue; } } } }
@media print { @media print { @media print { #nonexists { color:red; } @media presentation {} .b { color:blue; } @media print {} } } }
@media screen and (min-width: 750px) and (max-width: 999px) {
.b::before {
content: "@media screen and (max-width: 1000px) {}";
content: \'@media screen and (max-width: 1000px) {}\';
}
}
@media screen {}
</style>
';
$html .= '</head><body><span class="b">...</span><span id="exists"></span></body></html>';
$dom = AMP_DOM_Utils::get_dom( $html );

Expand All @@ -860,6 +885,9 @@ public function test_large_custom_css_and_rule_removal() {
'.b{color:blue}',
'#exists{color:white}',
'span{color:white}',
'@font-face{font-family:"Open Sans";src:url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2")}',
'.b{background:lightblue}',
'@media screen and (max-width: 1000px){@supports (display: grid){.b::before{content:"@media screen and (max-width: 1000px) {"}.b::after{content:"}"}}}@media print{@media print{@media print{.b{color:blue}}}}@media screen and (min-width: 750px) and (max-width: 999px){.b::before{content:"@media screen and (max-width: 1000px) {}";content:"@media screen and (max-width: 1000px) {}"}}',
),
array_values( $sanitizer->get_stylesheets() )
);
Expand Down Expand Up @@ -981,8 +1009,8 @@ public function get_keyframe_data() {
),

'style_amp_keyframes_last_child' => array(
'<b>before</b> <style amp-keyframes>@keyframes anim1 {}</style> between <style amp-keyframes>@keyframes anim2 {}</style> as <b>after</b>',
'<b>before</b> between as <b>after</b><style amp-keyframes="">@keyframes anim1{}@keyframes anim2{}</style>',
'<b>before</b> <style amp-keyframes>@keyframes anim1 { from { opacity:1; } to { opacity:0.5; } }</style> between <style amp-keyframes>@keyframes anim2 { from { opacity:0.25; } to { opacity:0.75; } }</style> as <b>after</b>',
'<b>before</b> between as <b>after</b><style amp-keyframes="">@keyframes anim1{from{opacity:1}to{opacity:.5}}@keyframes anim2{from{opacity:.25}to{opacity:.75}}</style>',
array(),
),

Expand Down