The complex CSS is removed

[rafaucau]

Bug Description

I have such CSS and it works fine on the standard version of the site:

:where(.container) {
   width: min(var(--container-max-width), 100% - calc(var(--container-padding) * 2));
   margin-inline: auto;
}

However, when I display the AMP version of the page, it is broken because there is only such CSS left in the .container class:

:where(.container) {
   margin-inline: auto;
}

I don't even see in the file preview that it was removed, so it's probably some kind of bug:

Expected Behaviour

It shouldn't be removed.

Screenshots

No response

PHP Version

8.1

Plugin Version

2.3.0

AMP plugin template mode

Transitional

WordPress Version

6.0.2

Site Health

No response

Gutenberg Version

No response

OS(s) Affected

All

Browser(s) Affected

All

Device(s) Affected

All

Acceptance Criteria

No response

Implementation Brief

No response

QA Testing Instructions

No response

Demo

No response

Changelog Entry

No response

[thelovekesh]

I believe the problem arises from 100% - calc(var(—container-padding)* 2) which the parser is unsure how to handle, but browsers are fairly intelligent and automatically display the desired results.

It should be possible for the parser to parse it as intended if you make it a little more precise.

:where(.container) {
-  width: min(var(--container-max-width), 100% - calc(var(--container-padding) * 2));
+  width: min(var(--container-max-width), calc(100% - calc(var(--container-padding) * 2)));
   margin-inline: auto;
}

[rafaucau]

Thanks, it helped! I'm using SCSS and had to additionally wrap it in #{' '} because the Sass compiler simplifies some things.

:where(.container) {
   width: #{'min(var(--container-max-width), calc(100% - calc(var(--container-padding) * 2)))'};
   margin-inline: auto;
}

I think this should be fixed in this plugin anyway, since the Sass compiler turns it into a shorter version by default and this is valid CSS.

[westonruter]

@rafaucau This would be something needing to be fixed in the underlying PHP-CSS-Parser package. Could you report the issue there instead?

[rafaucau]

It appears that it is already reported there: MyIntervals/PHP-CSS-Parser#388

[westonruter]

Also just raised again in the support forum. I think we'll have to work up a workaround to get around this limitation of php-css-parser.

[westonruter]

Before:

After:

In terms of the CSS change before/after, the following complex CSS values are preserved:

669a670,672
>     --wp--preset--font-size--small: clamp(.875rem, .875rem + ((1vw - .48rem) * .24), 1rem);
>     --wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - .48rem) * .24), 1.125rem);
>     --wp--preset--font-size--large: clamp(1.75rem, 1.75rem + ((1vw - .48rem) * .24), 1.875rem);
670a674
>     --wp--preset--font-size--xx-large: clamp(4rem, 4rem + ((1vw - .48rem) * 11.538), 10rem);
676a681
>     --wp--preset--spacing--40: clamp(1.8rem, 1.8rem + ((1vw - .48rem) * 2.885), 3rem);
678a684
>     --wp--preset--spacing--70: clamp(5rem, 5.25rem + ((1vw - .48rem) * 9.096), 8rem);
801a808
>     font-size: clamp(2.719rem, 2.719rem + ((1vw - .48rem) * 1.742), 3.625rem);

[westonruter]

This is now released on the WordPress.org Plugin Directory.