Skip to content

Commit

Permalink
Remove trailing semicolons after last rules to save additional bytes
Browse files Browse the repository at this point in the history
  • Loading branch information
@westonruter
westonruter committed May 11, 2018
1 parent 08f991b commit 231de19
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 53 deletions.
2 changes: 1 addition & 1 deletion includes/sanitizers/class-amp-style-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -639,8 +639,8 @@ function ( $value ) {

$validation_errors = $this->process_css_list( $css_document, $options );

// @todo Remove trailing semicolons.
$output_format = Sabberworm\CSS\OutputFormat::createCompact();
$output_format->setSemicolonAfterLastRule( false );

$before_declaration_block = '/*AMP_WP_BEFORE_DECLARATION_BLOCK*/';
$between_selectors = '/*AMP_WP_BETWEEN_SELECTORS*/';
Expand Down
102 changes: 51 additions & 51 deletions tests/test-amp-style-sanitizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,88 +29,88 @@ public function get_body_style_attribute_data() {
'<span style="color: #00ff00;">This is green.</span>',
'<span class="amp-wp-bb01159">This is green.</span>',
array(
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-bb01159{color:#0f0;}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-bb01159{color:#0f0}',
),
),

'span_one_style_bad_format' => array(
'<span style="color : #00ff00">This is green.</span>',
'<span class="amp-wp-0837823">This is green.</span>',
array(
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-0837823{color:#0f0;}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-0837823{color:#0f0}',
),
),

'span_two_styles_reversed' => array(
'<span style="color: #00ff00; background-color: #000; ">This is green.</span>',
'<span class="amp-wp-c71affe">This is green.</span>',
array(
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-c71affe{color:#0f0;background-color:#000;}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-c71affe{color:#0f0;background-color:#000}',
),
),

'span_display_none' => array(
'<span style="display: none;">Kses-banned properties are allowed since Kses will have already applied if user does not have unfiltered_html.</span>',
'<span class="amp-wp-224b51a">Kses-banned properties are allowed since Kses will have already applied if user does not have unfiltered_html.</span>',
array(
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-224b51a{display:none;}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-224b51a{display:none}',
),
),

'!important_is_ok' => array(
'<span style="padding:1px; margin: 2px !important; outline: 3px;">!important is converted.</span>',
'<span class="amp-wp-6a75598">!important is converted.</span>',
array(
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-6a75598{padding:1px;outline:3px;}:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-6a75598{margin:2px;}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-6a75598{padding:1px;outline:3px}:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-6a75598{margin:2px}',
),
),

'!important_with_spaces_also_converted' => array(
'<span style="color: red ! important;">!important is converted.</span>',
'<span class="amp-wp-952600b">!important is converted.</span>',
array(
':root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-952600b{color:red;}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-952600b{color:red}',
),
),

'!important_multiple_is_converted' => array(
'<span style="color: red !important; background: blue!important;">!important is converted.</span>',
'<span class="amp-wp-1e2bfaa">!important is converted.</span>',
array(
':root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-1e2bfaa{color:red;background:blue;}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-1e2bfaa{color:red;background:blue}',
),
),

'two_nodes' => array(
'<span style="color: #00ff00;"><span style="color: #ff0000;">This is red.</span></span>',
'<span class="amp-wp-bb01159"><span class="amp-wp-cc68ddc">This is red.</span></span>',
array(
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-bb01159{color:#0f0;}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-cc68ddc{color:#f00;}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-bb01159{color:#0f0}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-cc68ddc{color:#f00}',
),
),

'existing_class_attribute' => array(
'<figure class="alignleft" style="background: #000"></figure>',
'<figure class="alignleft amp-wp-2864855"></figure>',
array(
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-2864855{background:#000;}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-2864855{background:#000}',
),
),

'inline_style_element_with_multiple_rules_containing_selectors_is_removed' => array(
'<style>div > span { font-weight:bold !important; font-style: italic; } @media screen and ( max-width: 640px ) { div > span { font-weight:normal !important; font-style: normal; } }</style><div><span>bold!</span></div>',
'<div><span>bold!</span></div>',
array(
'div > span{font-style:italic;}@media screen and ( max-width: 640px ){div > span{font-style:normal;}:root:not(#_):not(#_) div > span{font-weight:normal;}}:root:not(#_):not(#_) div > span{font-weight:bold;}',
'div > span{font-style:italic}@media screen and ( max-width: 640px ){div > span{font-style:normal}:root:not(#_):not(#_) div > span{font-weight:normal}}:root:not(#_):not(#_) div > span{font-weight:bold}',
),
),

'illegal_unsafe_properties' => array(
'<style>button { behavior: url(hilite.htc) /* IE only */; font-weight:bold; -moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox); /*XBL*/ } @media screen { button { behavior: url(hilite.htc) /* IE only */; font-weight:bold; -moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox); /*XBL*/ } }</style><button>Click</button>',
'<button>Click</button>',
array(
'button{font-weight:bold;}@media screen{button{font-weight:bold;}}',
'button{font-weight:bold}@media screen{button{font-weight:bold}}',
),
array( 'illegal_css_property', 'illegal_css_property', 'illegal_css_property', 'illegal_css_property' ),
),
Expand All @@ -126,7 +126,7 @@ public function get_body_style_attribute_data() {
'<style>@charset "utf-8"; @namespace svg url(http://www.w3.org/2000/svg); @page { margin: 1cm; } @viewport { width: device-width; } @counter-style thumbs { system: cyclic; symbols: "\1F44D"; suffix: " "; } body { color: black; }</style>',
'',
array(
'body{color:black;}',
'body{color:black}',
),
array( 'illegal_css_at_rule', 'illegal_css_at_rule', 'illegal_css_at_rule', 'illegal_css_at_rule', 'illegal_css_at_rule' ),
),
Expand All @@ -135,33 +135,33 @@ public function get_body_style_attribute_data() {
'<style>@media screen and ( max-width: 640px ) { body { font-size: small; } } @font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"); } @supports (display: grid) { div { display: grid; } } @-moz-keyframes appear { from { opacity: 0.0; } to { opacity: 1.0; } } @keyframes appear { from { opacity: 0.0; } to { opacity: 1.0; } }</style>',
'',
array(
'@media screen and ( max-width: 640px ){body{font-size:small;}}@font-face{font-family:"Open Sans";src:url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");}@supports (display: grid){div{display:grid;}}@-moz-keyframes appear{from{opacity:0;}to{opacity:1;}}@keyframes appear{from{opacity:0;}to{opacity:1;}}',
'@media screen and ( max-width: 640px ){body{font-size:small}}@font-face{font-family:"Open Sans";src:url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2")}@supports (display: grid){div{display:grid}}@-moz-keyframes appear{from{opacity:0}to{opacity:1}}@keyframes appear{from{opacity:0}to{opacity:1}}',
),
),

'selector_specificity' => array(
'<style>#child {color:red !important;} #parent #child {color:pink !important;} .foo { color:blue !important; } #me .foo { color: green !important; }</style><div id="parent"><span id="child" class="foo bar baz">one</span><span style="color: yellow;">two</span><span style="color: purple !important;">three</span></div>',
'<style>#child {color:red !important} #parent #child {color:pink !important} .foo { color:blue !important; } #me .foo { color: green !important; }</style><div id="parent"><span id="child" class="foo bar baz">one</span><span style="color: yellow;">two</span><span style="color: purple !important;">three</span></div>',
'<div id="parent"><span id="child" class="foo bar baz">one</span><span class="amp-wp-64b4fd4">two</span><span class="amp-wp-ab79d9e">three</span></div>',
array(
':root:not(#_) #child{color:red;}:root:not(#_):not(#_) #parent #child{color:pink;}:root:not(#_) .foo{color:blue;}:root:not(#_):not(#_) #me .foo{color:green;}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-64b4fd4{color:yellow;}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-ab79d9e{color:purple;}',
':root:not(#_) #child{color:red}:root:not(#_):not(#_) #parent #child{color:pink}:root:not(#_) .foo{color:blue}:root:not(#_):not(#_) #me .foo{color:green}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-64b4fd4{color:yellow}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-ab79d9e{color:purple}',
),
),

'col_with_width_attribute' => array(
'<table><colgroup><col width="253"/></colgroup></table>',
'<table><colgroup><col class="amp-wp-cbcb5c2"></colgroup></table>',
array(
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-cbcb5c2{width:253px;}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-cbcb5c2{width:253px}',
),
),

'col_with_percent_width_attribute' => array(
'<table><colgroup><col width="50%"/></colgroup></table>',
'<table><colgroup><col class="amp-wp-cd7753e"></colgroup></table>',
array(
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-cd7753e{width:50%;}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-cd7753e{width:50%}',
),
),

Expand All @@ -175,7 +175,7 @@ public function get_body_style_attribute_data() {
'<table><colgroup><col width="50" style="background-color: red; width: 60px"/></colgroup></table>',
'<table><colgroup><col class="amp-wp-c8aa9e9"></colgroup></table>',
array(
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-c8aa9e9{width:50px;width:60px;background-color:red;}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-c8aa9e9{width:50px;width:60px;background-color:red}',
),
),
);
Expand Down Expand Up @@ -222,12 +222,12 @@ public function test_body_style_attribute_sanitizer( $source, $expected_content,
public function get_link_and_style_test_data() {
return array(
'multiple_amp_custom_and_other_styles' => array(
'<html amp><head><meta charset="utf-8"><style amp-custom>b {color:red !important}</style><style amp-custom>i {color:blue}</style><style type="text/css">u {color:green; text-decoration: underline !important;}</style></head><body><style>s {color:yellow} /* So !important! */</style><b>1</b><i>i</i><u>u</u><s>s</s></body></html>',
'<html amp><head><meta charset="utf-8"><style amp-custom>b {color:red !important}</style><style amp-custom>i {color:blue}</style><style type="text/css">u {color:green; text-decoration: underline !important}</style></head><body><style>s {color:yellow} /* So !important! */</style><b>1</b><i>i</i><u>u</u><s>s</s></body></html>',
array(
':root:not(#_):not(#_) b{color:red;}',
'i{color:blue;}',
'u{color:green;}:root:not(#_):not(#_) u{text-decoration:underline;}',
's{color:yellow;}',
':root:not(#_):not(#_) b{color:red}',
'i{color:blue}',
'u{color:green}:root:not(#_):not(#_) u{text-decoration:underline}',
's{color:yellow}',
),
array(),
),
Expand All @@ -240,36 +240,36 @@ public function get_link_and_style_test_data() {
'strong.before-dashicon',
'.dashicons-dashboard:before',
'strong.after-dashicon',
':root:not(#_):not(#_) s{color:yellow;}',
':root:not(#_):not(#_) s{color:yellow}',
),
array(),
),
'style_with_no_head' => array(
'<html amp><body>Not good!<style>body{color:red;}</style></body></html>',
'<html amp><body>Not good!<style>body{color:red}</style></body></html>',
array(
'body{color:red;}',
'body{color:red}',
),
array(),
),
'style_with_not_selectors' => array(
'<html amp><head><meta charset="utf-8"><style amp-custom>body.bar > p:not(.baz) { color:red; } body.foo:not(.bar) > p { color:blue; } body.foo:not(.bar) p:not(.baz) { color:green; } body.foo p { color:yellow; }</style></head><body class="foo"><p>Hello</p></body></html>',
array(
'body.foo:not(.bar) > p{color:blue;}body.foo:not(.bar) p:not(.baz){color:green;}body.foo p{color:yellow;}',
'body.foo:not(.bar) > p{color:blue}body.foo:not(.bar) p:not(.baz){color:green}body.foo p{color:yellow}',
),
array(),
),
'style_with_attribute_selectors' => array(
'<html amp><head><meta charset="utf-8"><style amp-custom>.social-navigation a[href*="example.com"] { color:red; } .social-navigation a.examplecom { color:blue; }</style></head><body class="foo"><nav class="social-navigation"><a href="https://example.com/">Example</a></nav></body></html>',
array(
'.social-navigation a[href*="example.com"]{color:red;}',
'.social-navigation a[href*="example.com"]{color:red}',
),
array(),
),
'style_on_root_element' => array(
'<html amp style="color:red;"><head><meta charset="utf-8"><style amp-custom>html { background-color: blue !important; }</style></head><body>Hi</body></html>',
array(
'html:not(#_):not(#_){background-color:blue;}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-10b06ba{color:red;}',
'html:not(#_):not(#_){background-color:blue}',
':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-10b06ba{color:red}',
),
array(),
),
Expand All @@ -286,9 +286,9 @@ public function get_link_and_style_test_data() {
'</body></html>',
) ),
array(
'form [submit-success] b,div[submit-failure] b{color:green;}',
'amp-live-list li .highlighted{background:yellow;}',
'body amp-list .portland{color:blue;}',
'form [submit-success] b,div[submit-failure] b{color:green}',
'amp-live-list li .highlighted{background:yellow}',
'body amp-list .portland{color:blue}',
),
array(),
),
Expand All @@ -297,13 +297,13 @@ public function get_link_and_style_test_data() {
'<html amp><head>',
'<style amp-custom>body { color: red; width: -webkit-calc( 1px + 2vh * 3pt - ( 4em / 5 ) ); outline: solid 1px blue; }</style>',
'<style amp-custom>.alignwide{ max-width: calc(50% + 22.5rem); border: solid 1px red; }</style>',
'<style amp-custom>.alignwide{ height: calc(10% + ( 1px ); color: red; content: ")";}</style>', // Test unbalanced parentheses.
'<style amp-custom>.alignwide{ height: calc(10% + ( 1px ); color: red; content: ")"}</style>', // Test unbalanced parentheses.
'</head><body><div class="alignwide"></div></body></html>',
) ),
array(
'body{color:red;width:-webkit-calc( 1px + 2vh * 3pt - ( 4em / 5 ) );outline:solid 1px blue;}',
'.alignwide{max-width:calc(50% + 22.5rem);border:solid 1px red;}',
'.alignwide{color:red;content:")";}',
'body{color:red;width:-webkit-calc( 1px + 2vh * 3pt - ( 4em / 5 ) );outline:solid 1px blue}',
'.alignwide{max-width:calc(50% + 22.5rem);border:solid 1px red}',
'.alignwide{color:red;content:")"}',
),
array(),
),
Expand Down Expand Up @@ -448,10 +448,10 @@ public function test_class_amp_bind_preservation() {
$sanitizer->sanitize();
$this->assertEquals( array(), $error_codes );
$actual_stylesheets = array_values( $sanitizer->get_stylesheets() );
$this->assertEquals( '.sidebar1{display:none;}', $actual_stylesheets[0] );
$this->assertEquals( '.sidebar1.expanded{display:block;}', $actual_stylesheets[1] );
$this->assertEquals( '.sidebar2{visibility:hidden;}', $actual_stylesheets[2] );
$this->assertEquals( '.sidebar2.visible{display:block;}', $actual_stylesheets[3] );
$this->assertEquals( '.sidebar1{display:none}', $actual_stylesheets[0] );
$this->assertEquals( '.sidebar1.expanded{display:block}', $actual_stylesheets[1] );
$this->assertEquals( '.sidebar2{visibility:hidden}', $actual_stylesheets[2] );
$this->assertEquals( '.sidebar2.visible{display:block}', $actual_stylesheets[3] );
$this->assertEmpty( $actual_stylesheets[4] );
}

Expand Down Expand Up @@ -489,9 +489,9 @@ public function test_large_custom_css_and_rule_removal() {

$this->assertEquals(
array(
'.b{color:blue;}',
'#exists{color:white;}',
'span{color:white;}',
'.b{color:blue}',
'#exists{color:white}',
'span{color:white}',
),
array_values( $sanitizer->get_stylesheets() )
);
Expand Down Expand Up @@ -521,7 +521,7 @@ public function test_relative_background_url_handling() {
$stylesheet = $actual_stylesheets[0];

$this->assertNotContains( '../images/spinner', $stylesheet );
$this->assertContains( sprintf( '.spinner{background-image:url("%s");', admin_url( 'images/spinner-2x.gif' ) ), $stylesheet );
$this->assertContains( sprintf( '.spinner{background-image:url("%s")', admin_url( 'images/spinner-2x.gif' ) ), $stylesheet );
}

/**
Expand All @@ -542,7 +542,7 @@ public function get_keyframe_data() {
return array(
'style_amp_keyframes' => array(
'<style amp-keyframes>@keyframes anim1 { from { opacity:0.0 } to { opacity:0.5 } } @media (min-width: 600px) {@keyframes anim1 { from { opacity:0.5 } to { opacity:1.0 } } }</style>',
'<style amp-keyframes="">@keyframes anim1{from{opacity:0;}to{opacity:.5;}}@media (min-width: 600px){@keyframes anim1{from{opacity:.5;}to{opacity:1;}}}</style>',
'<style amp-keyframes="">@keyframes anim1{from{opacity:0}to{opacity:.5}}@media (min-width: 600px){@keyframes anim1{from{opacity:.5}to{opacity:1}}}</style>',
array(),
),

Expand All @@ -560,13 +560,13 @@ public function get_keyframe_data() {

'blacklisted_and_whitelisted_keyframe_properties' => array(
'<style amp-keyframes>@keyframes anim1 { 50% { width: 50%; animation-timing-function: ease; opacity: 0.5; height:10%; offset-distance: 50%; visibility: visible; transform: rotate(0.5turn); -webkit-transform: rotate(0.5turn); color:red; } }</style>',
'<style amp-keyframes="">@keyframes anim1{50%{animation-timing-function:ease;opacity:.5;offset-distance:50%;visibility:visible;transform:rotate(.5 turn);-webkit-transform:rotate(.5 turn);}}</style>',
'<style amp-keyframes="">@keyframes anim1{50%{animation-timing-function:ease;opacity:.5;offset-distance:50%;visibility:visible;transform:rotate(.5 turn);-webkit-transform:rotate(.5 turn)}}</style>',
array( 'illegal_css_property', 'illegal_css_property', 'illegal_css_property' ),
),

'style_amp_keyframes_with_disallowed_rules' => array(
'<style amp-keyframes>body { color:red; opacity:1; } @keyframes anim1 { 50% { opacity:0.5 !important; } } @font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"); }</style>',
'<style amp-keyframes="">@keyframes anim1{50%{opacity:.5;}}</style>',
'<style amp-keyframes="">@keyframes anim1{50%{opacity:.5}}</style>',
array( 'unrecognized_css', 'illegal_css_important', 'illegal_css_at_rule' ),
),
);
Expand Down
Loading

0 comments on commit 231de19

Please sign in to comment.