ampproject
CSS Nesting selectors inside <style amp-custom> are not validating in AMP Validator but work in Browser
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
Hi! I would like to work on this issue.
AMP uses a restricted CSS parser inside
.io-flag-img { &.en_US { background: red; } }
The browser applies this correctly, but AMP rejects it because the nested syntax is outside the subset of CSS that AMP allows.
So the invalidation is expected behavior under AMP’s current CSS constraints.
To make the page AMP-compliant while preserving the intended styles, the nested rules should be statically flattened into non-nested selectors before being included in
Should be transformed into:
.io-flag-img { width: 30px; height: 30px; }
.io-flag-img.en_US { background: red; }
I’d be happy to implement the fix properly and create a clean PR
Please assign me this issue so I can start working on the solution.
Thanks!
It would be awesome if it could be fixed as it will allow us to use much more compact styles over the same limit of characters and allow us to write more structured code before minifying the CSS