CSS Nesting selectors inside <style amp-custom> are not validating in AMP Validator but work in Browser #40435
Description
Description
When using nested selectors inside an AMP page’s <style amp-custom>, the CSS is not applied. AMP validates the page with errors, but the nested selectors are working in all browsers. This occurs even though the CSS Nesting specification is now supported in modern browsers (per MDN).
Specifically, rules like:
.io-flag-img {
&.en_US {
background-image: url('../images/placeholder.svg#en_US');
}
}are not parsed by the AMP runtime but produce the expected output.
Expected Behavior
Nested rules inside <style amp-custom> should:
Parse correctly because the nesting selector is properly applied
Currently, the page does not validate but the CSS is applied.
Actual Behavior
- AMP validation does not pass.
- The browser applies the nested selector.
Additional Notes
MDN reference for CSS nesting support:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector#browser_compatibility
Reproduction Steps
- Create an AMP HTML page with the following minimal example:
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
.io-flag-img {
width: 30px;
height: 30px;
&.en_US {
background:red;
}
}
</style>
</head>
<body>
<span class="io-flag-img en_US"></span>
</body>
</html>- Load the page in any modern browser (Chrome, Firefox, Safari) and see that the css is applied
- Load it in the validator https://validator.ampproject.org/# and check that it reports the error
- AMP runtime:
https://cdn.ampproject.org/v0.js(latest) - Browsers tested: Chrome, Firefox, Safari
- All have native CSS nesting support in latest versions
Relevant Logs
Browser(s) Affected
Chrome
OS(s) Affected
No response
Device(s) Affected
No response
AMP Version Affected
No response