Amp-wp: PHP CSS Parser fails to parse turn CSS unit

[westonruter]

Bug Description

~The PHP CSS Parser is failing to parse the CSS units vmin and vmax, inserting spaces so they become vm in and vm ax.~

Similarly, the turn unit is also corrupted but in a different way: 1turn gets serialized out as 1 turn which is a syntax error.

Originally reported in the support forum.

Expected Behaviour

All CSS units should be preserved.

Steps to reproduce

Add this HTML to a Custom HTML block:

<div id="box">
I should be 20vmin×20vmax in size (and be spinning)!
</div>
<style>
#box {
  width: 20vmin;
  height: 20vmax;
  border: solid 1px red;
  background-color: gray;
  animation: spin 12s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
</style>

Compare the AMP with the non-AMP version. The non-AMP version appears as a box _and spins_:

Whereas the AMP does not (and no animation appears):

_Update: In develop it the element now appears as a box. The vmax and vmin units were fixed with https://github.com/ampproject/amp-wp/pull/4610._

The PHP CSS Parser incorrectly is injecting spaces into the units:

@keyframes spin{
  to {
    transform: rotate(1 turn)
  }
}

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance criteria

Implementation brief

• Submitting a patch to fix the PHP-CSS-Parser will likely be required.
• Extend any regexes used for units, or rather put vmin and vmax first before vm.
• Add support for turn unit.
• See https://github.com/sabberworm/PHP-CSS-Parser/blob/841f69742e23eceff24a4d55f3d9d8a63e753eac/lib/Sabberworm/CSS/Value/Size.php#L9

QA testing instructions

Demo

Changelog entry

[raxbg]

Hey @westonruter

The issue is already resolved in master - https://github.com/sabberworm/PHP-CSS-Parser/commit/c4509f5eae72f7d658870f19565216350c0f1543

In fact many issues have been resolved since the last release and master can be considered stable.

Hope this helps.

[westonruter]

@raxbg Thanks for the note.

For reference, in 1.5 branch it is broken:

We did actually update to master in https://github.com/ampproject/amp-wp/pull/4610 and you can see this is now working for the vmax and vmin units in the develop branch:

_However_ the turn unit is still not working. The example is not spinning. The @keyframes is still coming through as:

@keyframes spin{to{transform:rotate(1 turn)}}

It should rather be 1turn.

[pierlon]

Filed https://github.com/sabberworm/PHP-CSS-Parser/pull/193 to fix this.

[westonruter]

QA Passed

The turn unit is preserved:

Also in a Web Story context: