1094: Transform CSS selectors according to sanitizer HTML element to AMP component conversions #1175

miina · 2018-05-25T12:54:34Z

Modify AMP_Style_Sanitizer so that it would convert non-amp CSS selectors to amp component selectors in case it seems to be necessary. Fixes issue with potential broken design, for example with Twenty Ten header.

Fixes #1094.

miina · 2018-05-25T13:07:56Z

includes/sanitizers/class-amp-style-sanitizer.php

+								$selectors[] = $amp_selectors_parsed['selector'];
+							} else {
+								$selectors = array_keys( $selectors_parsed );
+							}


@westonruter Started adding the logic within this method since it seemed to be related with tree shaking in terms of adding/not adding the selector if it's not found after replacing. That's still WIP (e.g. currently works only in case ! $should_tree_shake and is missing most of the mappings) but let me know if there are any concerns with this approach.

Hmm, maybe one potential issue could be that the size of the style could exceed the limit if doing the replacement here.

Moving the logic to process_css_declaration_block to avoid issues with style size changing after the size check.

…ss_selectors

miina · 2018-05-28T11:08:54Z

includes/sanitizers/class-amp-style-sanitizer.php

+	 *
+	 * @param Selector $selector CSS Selector.
+	 */
+	private function ampify_selector( $selector ) {


@westonruter Reworked the logic to replace the components before tree shaking instead (compared to the previous commit). Wondering if it's OK to just replace the selectors or is it possible that this way we'll be replacing a selector that's actually in use.

Also, in case of img it can be replaced with either amp-img or amp-anim, thinking if we should add an additional selector for potential amp-anim, too.

It would be ideal if the selector mappings could be added to each sanitizer. For example, on AMP_Img_Sanitizer there could be a get_selector_mapping() method which returns:

array( 'img' => array( 'amp-img', 'amp-anim' ) )

Whereas on the AMP_Audio_Sanitizer class it would return:

array( 'video' => array( 'amp-video ), )

In other words, there could be multiple AMP components that could be converted so the selector should do replacements for each one, potentially duplicating a selector however many times is needed.

As for how to get the AMP_Style_Sanitizer to be able to invoke such a get_selector_mapping method on the other sanitizers, it could be done similar to as proposed for passing embed handlers to an embed sanitizer: https://github.com/Automattic/amp-wp/pull/1128/files#diff-2585472f207548f626a43a7ff3cab922R150

I have a concern with that approach of passing class instances as sanitizer args, however. It could cause problems with the response caching introduced in #1156, since the cache key is computed by passing the sanitizer args:

https://github.com/Automattic/amp-wp/blob/ab7204af35a8eb68bd8840a2e3531df8ae73c21f/includes/class-amp-theme-support.php#L1073-L1078

/cc @juanchaur1

westonruter · 2018-05-30T07:20:16Z

assets/css/amp-default.css

@@ -1,4 +1,4 @@
-.amp-wp-unknown-size img {
+.amp-wp-unknown-size .i-amphtml-replaced-content {


It is illegal in AMP to use i-amphtml-replaced-content class names. See:

Internal AMP class names prefixed with -amp- and i-amp- are disallowed in AMP HTML.

https://www.ampproject.org/docs/fundamentals/spec#classes

Yes, think I even saw a todo note recently somewhere as well to remove these from CSS within style sanitizer and realized that it's illegal. Will look into which selector to use.

Since tree shaking isn't done for attribute values, I suggest the way to fix this is to use an attribute selector like [src].

DavidCramer · 2018-05-30T10:59:13Z

@miina it's also important to note that <amp-img> wraps a normal <img> tag, however this tag is inserted after the page renders which means that the element didn't exist when the tree shaking takes place. So the style .amp-wp-unknown-size img would have been removed since it was not pointing to an existing element.

A suggestion would be to maybe have a rule that any class starting with amp-wp-* be exempted.

miina · 2018-05-30T11:04:37Z

@DavidCramer Do you mean "exempted" as excluded from sanitizing and never removed from CSS?

DavidCramer · 2018-05-30T11:08:10Z

@miina yes, but only if there is an element with the class.
example:

.amp-wp-unknown-size img {
....
}

if it finds an element with class="amp-wp-unknown-size" it will be left in as it can be assumed that the img will exist but doesn't currently.

…dd/1094-convert_css_selectors

…ss_selectors

westonruter · 2018-05-31T06:12:04Z

includes/sanitizers/class-amp-style-sanitizer.php

+	 * @param Selector $selector CSS Selector.
+	 */
+	private function ampify_selector( $selector ) {
+		// @todo What about amp-anim, amp-playbuzz?


I've got an idea I'm working on for this…

…ize for selector conversion

westonruter · 2018-05-31T07:20:45Z

@miina there, I feel pretty happy with 7a218aa as something to iterate on. I left some todos for some additional changes, other than the ones you already have outstanding.

westonruter · 2018-05-31T07:22:14Z

includes/templates/class-amp-content-sanitizer.php

+		// Let the sanitizers.
+		foreach ( $sanitizers as $sanitizer ) {
+			$sanitizer->after_sanitize( $sanitizers );
+		}


Since we're not using this, I think we should just kill after_sanitize.

westonruter · 2018-05-31T07:22:27Z

includes/templates/class-amp-content-sanitizer.php

+
+		// Let the sanitizers know about each other prior to sanitizing.
+		foreach ( $sanitizers as $sanitizer ) {
+			$sanitizer->before_sanitize( $sanitizers );


I do think we should rename this to init

westonruter · 2018-05-31T07:25:32Z

includes/sanitizers/class-amp-style-sanitizer.php

+		$replacements = 0;
+		foreach ( $ruleset->getSelectors() as $old_selector ) {
+			$edited_selectors = array( $old_selector->getSelector() );
+			foreach ( $this->selector_mappings as $html_selector => $amp_selectors ) { // Note: The $selector_mappings array contains ~6 items.


These notes are here because 4 level of loop nesting is normally something that is a big red flag for performance.

westonruter · 2018-05-31T07:27:48Z

assets/css/amp-default.css

@@ -1,4 +1,4 @@
-.amp-wp-unknown-size img {
+.amp-wp-unknown-size .i-amphtml-replaced-content {


Since tree shaking isn't done for attribute values, I suggest the way to fix this is to use an attribute selector like [src].

…c/amp-wp into add/1094-convert_css_selectors

miina · 2018-05-31T12:23:59Z

includes/sanitizers/class-amp-base-sanitizer.php

@@ -514,6 +524,8 @@ public function filter_attachment_layout_attributes( $node, $new_attributes, $la

 	/**
 	 * Add <amp-image-lightbox> element to body tag if it doesn't exist yet.
+	 *
+	 * @todo Move this to AMP_Img_Sanitizer?
 	 */
 	public function maybe_add_amp_image_lightbox_node() {


Note that this is also used by AMP_Gallery_Block_Sanitizer.

miina · 2018-05-31T12:25:50Z

includes/sanitizers/class-amp-img-sanitizer.php

+
+		if ( isset( $parent_attributes['data-amp-lightbox'] ) && true === filter_var( $parent_attributes['data-amp-lightbox'], FILTER_VALIDATE_BOOLEAN ) ) {
+			$attributes['data-amp-lightbox'] = '';
+			$attributes['on']                = 'tap:' . self::AMP_IMAGE_LIGHTBOX_ID;


Note that self:AMP_IMAGE_LIGHTBOX_ID is also used by AMP_Gallery_Block_Sanitizer, that's why it to AMP_Base_Sanitizer.

…lectors like amp-img>img

…c ancestor is absent

…ctly.

…c/amp-wp into add/1094-convert_css_selectors

miina added 3 commits May 25, 2018 15:49

Initial take on CSS selector conversions according to AMP.

e530045

Add @todo note.

f2395ee

Add @todo note.

958fd48

miina commented May 25, 2018

View reviewed changes

miina added 2 commits May 28, 2018 11:54

Merge remote-tracking branch 'origin/develop' into add/1094-convert_c…

488ebd2

…ss_selectors

Add additional mappings.

077a094

miina commented May 28, 2018

View reviewed changes

westonruter reviewed May 30, 2018

View reviewed changes

DavidCramer mentioned this pull request May 30, 2018

Add sanitizer to fixup issues with core themes #1074

Merged

16 tasks

westonruter and others added 2 commits May 30, 2018 17:45

Merge branch 'develop' of https://github.com/Automattic/amp-wp into a…

ed1cc03

…dd/1094-convert_css_selectors

Merge remote-tracking branch 'origin/develop' into add/1094-convert_c…

6091533

…ss_selectors

westonruter reviewed May 31, 2018

View reviewed changes

Add get_selector_conversion_mapping method to all sanitizers and util…

7a218aa

…ize for selector conversion

westonruter reviewed May 31, 2018

View reviewed changes

miina added 2 commits May 31, 2018 10:37

Merge branch 'add/1094-convert_css_selectors' of github.com:Automatti…

fcc0b44

…c/amp-wp into add/1094-convert_css_selectors

Refactor code.

d815891

miina commented May 31, 2018

View reviewed changes

miina changed the title ~~[WIP] 1094: Transform CSS selectors according to sanitizer HTML element to AMP component conversions~~ 1094: Transform CSS selectors according to sanitizer HTML element to AMP component conversions May 31, 2018

westonruter and others added 7 commits May 31, 2018 10:59

Use tree-shaking in test_amp_selector_conversion

12c9ff8

Include selector mappings in dynamic_element_selectors to preserve se…

91e3eef

…lectors like amp-img>img

Preserve original pb_feed class on translated amp-playbuzz elements

04f6b85

Allow tree shaking on selectors with dynamic elements when non-dynami…

19db2c1

…c ancestor is absent

Stop replacing CSS selectors which are addressing AMP components dire…

1b8405a

…ctly.

Merge branch 'add/1094-convert_css_selectors' of github.com:Automatti…

592aca7

…c/amp-wp into add/1094-convert_css_selectors

Fix tests.

a564410

westonruter approved these changes May 31, 2018

View reviewed changes

westonruter added this to the v1.0 milestone May 31, 2018

westonruter merged commit 70b81ae into develop May 31, 2018

westonruter deleted the add/1094-convert_css_selectors branch May 31, 2018 19:57

westonruter mentioned this pull request Jul 25, 2018

Fix sending sanitizer class name in amp_sanitize Server-Timing headers #1283

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

1094: Transform CSS selectors according to sanitizer HTML element to AMP component conversions #1175

1094: Transform CSS selectors according to sanitizer HTML element to AMP component conversions #1175

miina commented May 25, 2018

miina May 25, 2018 •

edited

miina May 25, 2018

miina May 28, 2018

miina May 28, 2018 •

edited

westonruter May 30, 2018

westonruter May 30, 2018

miina May 30, 2018

westonruter May 31, 2018

DavidCramer commented May 30, 2018

miina commented May 30, 2018

DavidCramer commented May 30, 2018

westonruter May 31, 2018

westonruter commented May 31, 2018

westonruter May 31, 2018

westonruter May 31, 2018

westonruter May 31, 2018

westonruter May 31, 2018

miina May 31, 2018

miina May 31, 2018

		@@ -1,4 +1,4 @@
		.amp-wp-unknown-size img {
		.amp-wp-unknown-size .i-amphtml-replaced-content {

1094: Transform CSS selectors according to sanitizer HTML element to AMP component conversions #1175

1094: Transform CSS selectors according to sanitizer HTML element to AMP component conversions #1175

Conversation

miina commented May 25, 2018

miina May 25, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

miina May 28, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DavidCramer commented May 30, 2018

miina commented May 30, 2018

DavidCramer commented May 30, 2018

Choose a reason for hiding this comment

westonruter commented May 31, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

miina May 25, 2018 •

edited

miina May 28, 2018 •

edited