Some TailwindCSS class names are being removed

[JuanJavier1979]

Bug Description

Some TailwindCSS class names such as .w-1/3 are being removed.

Expected Behaviour

Classes with / should be kept.

Additional context

This is happening since the update on composer.lock here
ab513d4#diff-1da2c7edc898c70e5a79a9997c98cecc

[westonruter]

Humm. That doesn't seem to be valid CSS. Consider:

.w-1/3 {
  width: 33.333333%
}

I can see in tailwind.min.css the selector is indeed being escaped:

.w-1\/3 {
  width: 33.333333%
}

So given a Custom HTML block that contains:

<style>
.w-1\/3 {
  outline: solid 3px lime;
}
</style>
<div class="w-1/3">one third width</div>

The result in AMP and non-AMP is:

So indeed, the selector is getting tree-shaken.

[westonruter]

The problem seems to be with PHP-CSS-Parser. I've opened #4610 to test this case. But it currently handles selectors like .lg\:w-full:hover as expected. There's just something about the selector parsing in PHP-CSS-Parser that does not like .w-1\/3.

[westonruter]

It appears specifically that \Sabberworm\CSS\Property\Selector::isValid() is failing to return true for w-1\/3:

wp> \Sabberworm\CSS\Property\Selector::isValid('lg\:w-full:hover')
=> int(1)
wp> \Sabberworm\CSS\Property\Selector::isValid('w-1\/3')
=> int(0)

It looks like this was fixed in MyIntervals/PHP-CSS-Parser#162 so we may just need to update PHP-CSS-Parser to fix the problem.

[westonruter]

@JuanJavier1979 build with a fix for testing: #4610 (comment)

[JuanJavier1979]

Thanks @westonruter, that is working now as expected.

[pierlon]

QA Testing instructions:

1. Add a Custom HTML block with the following content:

   <style>
   .w-1\/3 {
     outline: solid 3px lime;
   }
   </style>
   <div class="w-1/3">one third width</div>
   

2. On the AMP page, verify that the following CSS rule exists in the page source:

   .w-1\/3{outline:solid 3px lime}
   

3. Verify that the non-AMP and AMP page are the same :
   

[schlessera]

QA Passed

The class can be found in the source of the AMP page:

Both non-AMP and AMP page look identical:

[schlessera]

This also works correctly with the type of notation used in Atomic CSS (acss.io):

In the above screenshot, the second green box uses the following:

<style>
.w\(50\%\) {
  width: 50%;
  outline: solid 3px lime;
}
</style>
<div class="w(50%)">width 50%</div>