AMP Issue, CSS syntax error “style amp-custom”

  • Resolved LesGrosSacs

    (@lesrossacs)


    7 years, 3 months ago

    Hello guys,

    The Google Search Console raised me an error on ALL my AMP pages.
    This is a CSS syntax error in the tag “style amp-custom”.

    The code highlighted in the search console is the following (and seems to be linked to Mailpoet plugin) :

    <![CDATA[.mailpoet_hp_email_label{display:none}#mailpoet_form_1 .mailpoet_paragraph{display:inline-block;width:45%}#mailpoet_form_1 .mailpoet_text_label/*AMP_WP_BETWEEN_SELECTORS*/,#mailpoet_form_1 .mailpoet_textarea_label/*AMP_WP_BETWEEN_SELECTORS*/,#mailpoet_form_1 .mailpoet_select_label/*AMP_WP_BETWEEN_SELECTORS*/,#mailpoet_form_1 .mailpoet_radio_label/*AMP_WP_BETWEEN_SELECTORS*/,#mailpoet_form_1 .mailpoet_checkbox_label/*AMP_WP_BETWEEN_SELECTORS*/,#mailpoet_form_1 .mailpoet_list_label/*AMP_WP_BETWEEN_SELECTORS*/,#mailpoet_form_1 .mailpoet_date_label{display:block}#mailpoet_form_1 .mailpoet_text/*AMP_WP_BETWEEN_SELECTORS*/,#mailpoet_form_1 .mailpoet_textarea/*AMP_WP_BETWEEN_SELECTORS*/,#mailpoet_form_1 .mailpoet_select/*AMP_WP_BETWEEN_SELECTORS*/,#mailpoet_form_1 .mailpoet_date{display:block}#mailpoet_form_1 .mailpoet_validate_success{color:#468847}#mailpoet_form_1 .mailpoet_validate_error{color:#b94a48}#mailpoet_form_1 .mailpoet_submit{background-color:#a3a375;color:#fff}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-7865d8c{font-family:moon-flower-bold;font-size:36pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-7d27179{text-align:justify}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-d994343{max-width:500px}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-93b8ea5{display:none}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-e6a44be{display:inline-block}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-2f58115{width:0%} </style>

    And when I go the AMP plugin settings, I have an error message saying : “A conflicting version of PHP-CSS-Parser appears to be installed by another plugin/theme (located in ‘plugins/mailpoet’). Because of this CSS processing will be limited, and tree shaking will not be available.”

    So it seems there is a conflict between AMP and Mailpoet but I have no idea what to do to solve it.
    Could you guys tell me if this is something to fix on your side ? Or should I do something (and what if it’s the case) ?

    Thanks in advance

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • Plugin Author Weston Ruter

    (@westonruter)

    7 years, 3 months ago

    If Mailpoet updates its copy of PHP-CSS-Parser to the latest development version at https://github.com/sabberworm/PHP-CSS-Parser then the conflict message should go away.

    That being said, the <![CDATA[ in the CSS here seems to be a separate problem.

    I’m also confused as to why /*AMP_WP_BETWEEN_SELECTORS*/ is showing up in the CSS when \AMP_Style_Sanitizer::has_required_php_css_parser() presumably would have returned false.

    Plugin Author Weston Ruter

    (@westonruter)

    7 years, 3 months ago

    @lesrossacs The first thing I suggest you do is contact Mailpoet to make sure that whenever they use <![CDATA[ that they wrap it in CSS comments like /*<![CDATA[*/. Same goes for ]]> at the end. In fact, it can be removed altogether, as the use of CDATA is obsolete, being only relevant for XHTML which is dead.

    Plugin Author Weston Ruter

    (@westonruter)

    7 years, 3 months ago

    I’ve also opened an issue to strip CDATA sections from the AMP plugin in the next release: https://github.com/ampproject/amp-wp/pull/1844

    Thread Starter LesGrosSacs

    (@lesrossacs)

    7 years, 3 months ago

    All right, thanks a lot @westonruter
    I’ve notify Mailpoet team, they’re also on it and should fix it in the next release.
    I’ll make them aware of your comments so that they have a look at it.
    Thanks again, I’ll let you know when it’s fixed.

    Plugin Author Weston Ruter

    (@westonruter)

    7 years, 3 months ago

    @lesrossacs Here also is an alpha build of the AMP plugin with that PR merge which you can try: https://github.com/ampproject/amp-wp/pull/1844#issuecomment-459034299

    Plugin Author Weston Ruter

    (@westonruter)

    7 years, 3 months ago

    It should fix the CDATA problem, although it won’t eliminate the PHP-CSS-Parser compatibility warning.

    Thread Starter LesGrosSacs

    (@lesrossacs)

    7 years, 3 months ago

    Thanks @westonruter , didn’t had the time yet to test it but will let you know as soon as I can 🙂

    Thread Starter LesGrosSacs

    (@lesrossacs)

    7 years, 2 months ago

    Hello @westonruter and sorry for the delay, I am still struggling with this issue but completely forgot to test your alpha build.
    So I just did and unfortunately it doesn’t solve the issue.
    I installed your package (deactivated the current version meanwhile) and I launched a new validation of a page in the search console. And I still have the CDATA error that pops and prevent me from validating the AMP page :/

    The issue :

    <![CDATA[.mailpoet_hp_email_label{display:none}#mailpoet_form_1 .mailpoet_paragraph{line-height:20px}#mailpoet_form_1 .mailpoet_segment_label,#mailpoet_form_1 .mailpoet_text_label,#mailpoet_form_1 .mailpoet_textarea_label,#mailpoet_form_1 .mailpoet_select_label,#mailpoet_form_1 .mailpoet_radio_label,#mailpoet_form_1 .mailpoet_checkbox_label,#mailpoet_form_1 .mailpoet_list_label,#mailpoet_form_1 .mailpoet_date_label{display:block;font-weight:bold}#mailpoet_form_1 .mailpoet_text,#mailpoet_form_1 .mailpoet_textarea,#mailpoet_form_1 .mailpoet_select,#mailpoet_form_1 .mailpoet_date_month,#mailpoet_form_1 .mailpoet_date_day,#mailpoet_form_1 .mailpoet_date_year,#mailpoet_form_1 .mailpoet_date{display:block}#mailpoet_form_1 .mailpoet_text,#mailpoet_form_1 .mailpoet_textarea{width:200px}#mailpoet_form_1 .mailpoet_validate_success{font-weight:600;color:#468847}#mailpoet_form_1 .mailpoet_validate_error{color:#b94a48}#mailpoet_form_1 .mailpoet_form_loading{width:30px;text-align:center;line-height:normal}#mailpoet_form_1 .mailpoet_form_loading > span{width:5px;height:5px;background-color:#5b5b5b}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-7d27179{text-align:justify}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-e3120c2{font-size:36pt;font-family:moon-flower-bold}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-7865d8c{font-family:moon-flower-bold;font-size:36pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-e6a44be{display:inline-block}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-2f58115{width:0%}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-93b8ea5{display:none} </style>

    • This reply was modified 7 years, 2 months ago by LesGrosSacs.
    Thread Starter LesGrosSacs

    (@lesrossacs)

    7 years, 2 months ago

    And here are some screenshots :

    Capture-d-e-cran-2019-03-12-a-16-39-06
    Capture-d-e-cran-2019-03-12-a-16-39-43<br />upload pictures<br />

    Plugin Author Weston Ruter

    (@westonruter)

    7 years, 2 months ago

    @lesrossacs I don’t see you using the amp.zip I provided. Your AMP Page at https://lesgrossacs.com/la-serena-vicuna-valle-elqui/amp/ has:

    <meta name="generator" content="AMP Plugin v1.0.2; mode=classic">

    It should rather say:

    <meta name="generator" content="AMP Plugin v1.1-alpha-20190130T172913Z-39b15688; mode=classic">

    Make sure you deactivate and uninstall v1.0.2 and then install and activate the new amp.zip linked to from https://github.com/ampproject/amp-wp/pull/1844#issuecomment-459034299

    Then check the validity via the AMP validator: https://validator.ampproject.org/#url=https%3A%2F%2Flesgrossacs.com%2Fla-serena-vicuna-valle-elqui%2Famp%2F

    Thread Starter LesGrosSacs

    (@lesrossacs)

    7 years, 2 months ago

    @westonruter that’s what I did 🙂 I just came back to the initial state after.
    But I re-did it, as you can see now, the version alpha is installed and I still have the same issue in the validator :/

    Plugin Author Weston Ruter

    (@westonruter)

    7 years, 2 months ago

    ok, looks like there is some caching in place.

    I see the validation error at https://validator.ampproject.org/#url=https%3A%2F%2Flesgrossacs.com%2Fla-serena-vicuna-valle-elqui%2Famp%2F%3Fweston-cache-bust

    Thread Starter LesGrosSacs

    (@lesrossacs)

    7 years, 2 months ago

    I just emptied the cache of the website (I have WP Fastest Cache plugin running) but still the same error :/

    Plugin Author Weston Ruter

    (@westonruter)

    7 years, 2 months ago

    @lesrossacs Looks like the problem is that the underlying transient that cached the parsed CSS is persisting. So either you can run wp transient delete --all or you can use the latest build of develop which I’ve linked to here: https://github.com/ampproject/amp-wp/pull/1844#issuecomment-472135091

    Thread Starter LesGrosSacs

    (@lesrossacs)

    7 years, 2 months ago

    @westonruter just installed the latest build and it seems like to fix it (I tried on 3 different URLs), thanks so much !
    I am now launching a global validation of all my AMP pages 🙂
    Can you confirm that this fix will be included in the next update ?
    Thanks again so much !

Viewing 15 replies - 1 through 15 (of 17 total)
1 2

The topic ‘AMP Issue, CSS syntax error “style amp-custom”’ is closed to new replies.