AMP validator issues warning for `@media` User Preference features.

[milindmore22]

Description

The AMP validator is flagging a warning for a CSS media query using the not (prefers-reduced-motion: reduce) syntax. While this syntax is valid in modern browsers, the AMP validator seems to have stricter parsing rules that cause it to be misinterpreted.

This issue impacts accessibility features, as the styles intended for users without a preference for reduced motion are not being applied correctly in the validated AMP version.

@media not (prefers-reduced-motion: reduce) {
  .wp-block-image amp-img.hide {
    visibility: hidden;
  }
}

Reproduction Steps

1. Add the problematic CSS code to the
2. Run the page through the official AMP validator (e.g., validator.ampproject.org).
3. Observe the "malformed media query" warning in the validation results.

You can find warnning on

1. https://beebom.com/nyt-strands-today-hints-answers-spangram-august-5-2024/amp/
2. https://wordpress.org/support/topic/gsc-reports-a-warning-for-style-amp-custom/

Relevant Logs

CSS syntax error in tag 'style amp-custom' - malformed media query.

Browser(s) Affected

No response

OS(s) Affected

all

Device(s) Affected

all

AMP Version Affected

2507172035000

[SinghCod3r]

@milindmore22 , please assign this task to me. I want to work on this project.

[milindmore22]

@SinghCod3r I just reported an issue; I can't assign a task. You can start working on it and create a PR and refer to this issue in the PR description. Here is AMP's official contribution guide.

[erwinmombay]

thanks for the report. i think it makes sense to fix this and add support to this, but let me talk with the team first.

[youssefbouraoui1]

Is this issue solved because i cannot find a warning in https://beebom.com/nyt-strands-today-hints-answers-spangram-august-5-2024/amp/

[erwinmombay]

We haven't tackled this issue yet @youssefbouraoui1 , currently in our backlog

[dhawalepranav]

@erwinmombay We are still seeing the AMP validator issue and the affected page in GSC on our end. Could you please look into resolving this at the earliest convenience? TIA!

[dhawalepranav]

Hi team, Gently checking in on the above.

[erwinmombay]

@banaag im going to try and implement this in the following weeks. do you have any thoughts or pushback against this?

[dhawalepranav]

@erwinmombay Gently checking in on the above 🙇🏻

[dhawalepranav]

@erwinmombay Gently following up on this. Can we please expedite the fix/change as early as possible? This is affecting one of our client's website.