New AMP issues detected: CSS syntax error

  • Resolved AntaresMHD

    (@antaresmhd)


    6 years, 6 months ago

    Greetings. Yesterday a new Accelerated Mobile Pages issue was detected on my site, related to an unclosed comment in the Inline Styles generated by the plugin. This is the sort of code it’s currently outputting:

    /* Inline styles */
.amp-wp-inline-0f1bf07c72fdf1784fff2e164d9dca98{display:none;}.amp-wp-inline-138d714e6265bd8f1acd98fc68074908{clear:both;}.amp-wp-inline-8f1ebaee1ba2658e1373aeb6b86d1f6b{max-width:603px;}.amp-wp-inline-263b2aaa1a0ac2299e7eaf6bf3e331cd{display:block;}.amp-wp-inline-1ec320e69d7ff6114347fb43500ceaa7{float:left;overflow:hidden;max-width:155.25px;}.amp-wp-inline-e12275ce836cccc73cc708580d7a2dab{/*width:155.25px;height:108px;}.amp-wp-inline-9c93073ff59c40c84da52de52d2d8fbd{ ...

    And there’s at least 4 more “amp-wp-inline-etc” classes like this after that line.
    I narrowed down the generation of this statement (.amp-wp-inline-e12275ce836cccc73cc708580d7a2dab) to the class class-amp-style-sanitizer.php, in the private function therein collect_inline_styles(); the problem is that somehow while doing the clean-up later in the process_style() function call, it leaves that comment mark open but doesn’t close it afterwards. I don’t even know where it’s coming from since I don’t have any css statements of this sort, these must come from the plugin somehow. Most likely it doesn’t the statement parse correctly because it’s too close to the attribute or something.

    I’d appreciate any assistance with this issue.

    • This topic was modified 6 years, 6 months ago by AntaresMHD.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    @antaresmhd Please share the URL to the post that has this problem.

    Those style rules that have selectors like .amp-wp-inline-e12275ce836cccc73cc708580d7a2dab are being extracted from inline style attributes.

    Thread Starter AntaresMHD

    (@antaresmhd)

    Here’s one of the URL’s: https://shrewsbury.comunicas.org/2018/05/06/may-2018-activities-in-the-shrewsbury-public-library/amp/, but it’s all across the network and it began recently (every post has it now). I haven’t made any radical changes to the CSS and none of these involved commenting part of the code.

    Plugin Author Weston Ruter

    (@westonruter)

    @antaresmhd The reason for this is you have a div in your post that looks like this:

    <div class="yuzo-img-wrap " style="/*width: 155.25px;height:108px;*/">

    The CSS sanitizer clearly is breaking on the comments. This will be fixed in v1.0 of the plugin, since a full CSS parser will be included.

    In the mean time, I suggest removing this style attribute from your content since it serves no purpose. Otherwise, you could include a the_content filter to remove it entirely before it gets passed to the AMP plugin.

    Thread Starter AntaresMHD

    (@antaresmhd)

    Very informative, thank you. I might have to wait for the update, since this comes from a plugin and it seems hardcoded from what I could glance, but I’ll dig further and see if it can be overridden in the meantime.
    Or I could try a filter like you suggest there, providing I find the right action used by AMP before it gets processed. Thanks again for your assistance.

    Plugin Author Weston Ruter

    (@westonruter)

    AMP gets processed at the very end, so as long as you’re the_content filter runs after the plugin adds the style attribute, you should be able to remove it there.

    Plugin Author Weston Ruter

    (@westonruter)

    It looks like you can do so by adding a snippet like this to your plugin or theme:

    add_action( 'template_redirect', function() {
    global $YUZO_CORE;
    if ( isset( $YUZO_CORE ) && function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
        remove_filter( 'the_content', array( $YUZO_CORE, 'create_post_related' ) );
    }
}, 9 );
    • This reply was modified 6 years, 6 months ago by Weston Ruter.
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘New AMP issues detected: CSS syntax error’ is closed to new replies.