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

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

Merged
merged 17 commits into from
May 31, 2018
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e530045
Initial take on CSS selector conversions according to AMP.
miina May 25, 2018
f2395ee
Add @todo note.
miina May 25, 2018
958fd48
Add @todo note.
miina May 25, 2018
488ebd2
Merge remote-tracking branch 'origin/develop' into add/1094-convert_c…
miina May 28, 2018
077a094
Add additional mappings.
miina May 28, 2018
ed1cc03
Merge branch 'develop' of https://github.com/Automattic/amp-wp into a…
westonruter May 31, 2018
6091533
Merge remote-tracking branch 'origin/develop' into add/1094-convert_c…
miina May 31, 2018
7a218aa
Add get_selector_conversion_mapping method to all sanitizers and util…
westonruter May 31, 2018
fcc0b44
Merge branch 'add/1094-convert_css_selectors' of github.com:Automatti…
miina May 31, 2018
d815891
Refactor code.
miina May 31, 2018
12c9ff8
Use tree-shaking in test_amp_selector_conversion
westonruter May 31, 2018
91e3eef
Include selector mappings in dynamic_element_selectors to preserve se…
westonruter May 31, 2018
04f6b85
Preserve original pb_feed class on translated amp-playbuzz elements
westonruter May 31, 2018
19db2c1
Allow tree shaking on selectors with dynamic elements when non-dynami…
westonruter May 31, 2018
1b8405a
Stop replacing CSS selectors which are addressing AMP components dire…
miina May 31, 2018
592aca7
Merge branch 'add/1094-convert_css_selectors' of github.com:Automatti…
miina May 31, 2018
a564410
Fix tests.
miina May 31, 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 assets/css/amp-default.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.amp-wp-unknown-size img {
.amp-wp-unknown-size .i-amphtml-replaced-content {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

/** Worst case scenario when we can't figure out dimensions for an image. **/
/** Force the image into a box of fixed dimensions and use object-fit to scale. **/
object-fit: contain;
Expand Down
35 changes: 35 additions & 0 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 @@ -942,6 +942,12 @@ private function real_path_urls( $urls, $stylesheet_url ) {
private function process_css_declaration_block( RuleSet $ruleset, CSSList $css_list, $options ) {
$validation_errors = array();

if ( method_exists( $ruleset, 'getSelectors' ) ) {
foreach ( $ruleset->getSelectors() as $selector ) {
$this->ampify_selector( $selector );
}
}

// Remove disallowed properties.
if ( ! empty( $options['property_whitelist'] ) ) {
$properties = $ruleset->getRules();
Expand Down Expand Up @@ -1435,6 +1441,35 @@ private function finalize_styles() {
}
}

/**
* Ampify CSS selectors.
*
* @param Selector $selector CSS Selector.
*/
private function ampify_selector( $selector ) {
Copy link
Contributor Author

@miina miina May 28, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

// @todo What about amp-anim, amp-playbuzz?
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

$mappings = array(
'audio' => 'amp-audio',
'iframe' => 'amp-iframe',
'img' => 'amp-img',
'video' => 'amp-video',
);

$new_selector = $selector->getSelector();
foreach ( $mappings as $tag => $amp_tag ) {
if ( 0 === strpos( $selector->getSelector(), $tag ) ) {
$new_selector = substr_replace( $new_selector, $amp_tag, 0, strlen( $tag ) );
}
if ( false !== strpos( $selector->getSelector(), ' ' . $tag ) ) {
$new_selector = str_replace( ' ' . $tag, ' ' . $amp_tag, $new_selector );
}
}

if ( $selector->getSelector() !== $new_selector ) {
$selector->setSelector( $new_selector );
}
}

/**
* Finalize a stylesheet set (amp-custom or amp-keyframes).
*
Expand Down