Non-recognized root class aborts element processing

[josineto]

Hi! I'm trying to implement microformats2 in my website, which uses Tailwind as CSS framework. In that framework, there are classes such as h-4, h-12 etc (specifying height CSS property on element).

Problem is: when I try to validate my h-card, the parsing of an element is aborted when those Tailwind classes are present. A small example follows:

<div class="h-card">
  <img class="u-photo w-32 h-32" alt="Jon Doe"
       src="/image.jpg"/>
</div>

The photo property is not recognized; but if one removes h-32 class, photo is recognized. I tried this example on two different pages: Barnaby Walters' and pin13.net, and the results are the same.

It seems php-mf2 (used on those 2 pages) aborts the processing of an element when it finds a non recognized root class (which, in this case, isn't even a microformats2 class). This is problematic, I think, since HTML classes are not used only by microformats2.

[sknebel]

Good catch, I assume this is ironically a bug introduced with changes to improve compatibility with such utility classes.

Maintainers: so #128 / #102 is likely where to start looking.

[kevinmarks]

The python parser ignores bad h- classes (from a microformats point of view) http://www.unmung.com/?html=%3Cdiv+class%3D%22h-card%22%3E%0D%0A++%3Cimg+class%3D%22u-photo+w-32+h-32%22+alt%3D%22Jon+Doe%22%0D%0A+++++++src%3D%22%2Fimage.jpg%22%2F%3E%0D%0A%3C%2Fdiv%3E&pretty=on

…

On Wed, 23 Feb 2022, 9:04 am Sven, ***@***.***> wrote: Good catch, I assume this is ironically a bug introduced with changes to *improve* compatibility with such utility classes. Maintainers: so #128 <#128> / #102 <#102> is likely where to start looking. — Reply to this email directly, view it on GitHub <#230 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAYFQGC4VIKVM73LVYVFRLU4SPLJANCNFSM5PDPUJNQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[barnabywalters]

In this specific case it should be possible to fix this issue, as the utility classes are not valid mf2 root classnames (i.e. they have a number in). Hopefully tailwind and similar libraries don’t introduce any classes which would clash with mf2 classnames (e.g. h-not-numbers) — I wonder if it’d be worth getting in contact with the maintainers and letting them know about the potential issue.

I’ll try to take a look at it over the next few days.

Aside: one could argue that using tailwind in this way is contrary to the ideal of semantic markup which microformats2 builds upon, and that using single-use classnames like this is barely any different from just using inline style elements. It’s not an argument I’m particularly interested in having, but IMO if you want to make use of tailwind’s utility classes like this, the better solution would be to use a CSS preprocessor to collect all the utility classes you want to apply to a particular element as mixins. E.g. if you’re using less, it could look something like this:

.profile-photo {
  .w-32();
  .h-32();
}

<div class="h-card">
  <img class="u-photo profile-photo" alt="Jon Doe"
       src="/image.jpg"/>
</div>

Exactly why even this solution would be preferable to just

.profile-photo { width: 32px; height: 32px; }

eludes me, but I’m not judging ;)

[barnabywalters]

I merged a fix, which will be in the next point release. Thanks for bringing this issue to our attention!

[kevinmarks]

Are there useful test cases here to add to the cross language test suite?

…

On Fri, 25 Feb 2022, 9:04 pm Barnaby Walters, ***@***.***> wrote: I merged a fix, which will be in the next point release. Thanks for bringing this issue to our attention! — Reply to this email directly, view it on GitHub <#230 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAYFQGZKPU7UATQQYOX5R3U47VHJANCNFSM5PDPUJNQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

[barnabywalters]

@kevinmarks could be, yes — for example, checking that

<div class="h-card">
  <img class="u-photo w-32 h-32" alt="Jon Doe"
       src="/image.jpg"/>
</div>

parses correctly to

{
  "items": [
    {
      "type": [
        "h-card"
      ],
      "properties": {
        "name": [
          "Jon Doe"
        ],
        "photo": [
          "/image.jpg"
        ]
      }
    }
  ],
  "rels": {},
  "rel-urls": {}
}

Additionally, tests which ensure valid parsing of property vendor prefixes (which may contain numbers) and property name tail strings (which may not) e.g. p-vendor123 is invalid, p-vendor123-my-weird-property is valid, p-vendor123-property-1 is not.