Properties not parsed when using Tailwind height class

[HyperTesto]

I managed to get a minimal example that happened to me while working with Tailwind CSS, but i guess it's more generic to any class that starts with h- prefix.

If i use Tailwind CSS h-<number> class on some elements that have other microformat classes like in this minimal example with u-logo and u-nickname:

<article class="h-card">
   <h1> TITLE </h1>
   <img class="h-36 photo u-logo" 
          alt="An example alt title"
          src="https://example.com/img.png"
    />
    <p class="h-21 u-nickname"> John Doe </p>
</article>

The parser skips mf properties and produces :

{
    "items": [
        {
            "type": [
                "h-card"
            ],
            "properties": {
                "name": [
                    "TITLE An example alt title\nJohn Doe"
                ]
            }
        }
    ],
    "rels": {},
    "rel-urls": {},
    "debug": {
        "package": "https://packagist.org/packages/mf2/mf2",
        "source": "https://github.com/indieweb/php-mf2",
        "version": "v0.5.0",
        "note": [
            "This output was generated from the php-mf2 library available at https://github.com/indieweb/php-mf2",
            "Please file any issues with the parser at https://github.com/indieweb/php-mf2/issues",
            "Using the Masterminds HTML5 parser"
        ]
    }
}

Instead, if I remove h- classes, it's working as expected:

<article class="h-card">
   <h1> TITLE </h1>
   <img class="photo u-logo" 
          alt="An example alt title"
          src="https://example.com/img.png"
    />
    <p class="u-nickname"> John Doe </p>
</article>

with output:

{
    "items": [
        {
            "type": [
                "h-card"
            ],
            "properties": {
                "logo": [
                    {
                        "value": "https://example.com/img.png",
                        "alt": "An example alt title"
                    }
                ],
                "nickname": [
                    "John Doe"
                ],
                "name": [
                    "TITLE An example alt title\nJohn Doe"
                ]
            }
        }
    ],
    "rels": {},
    "rel-urls": {},
    "debug": {
        "package": "https://packagist.org/packages/mf2/mf2",
        "source": "https://github.com/indieweb/php-mf2",
        "version": "v0.5.0",
        "note": [
            "This output was generated from the php-mf2 library available at https://github.com/indieweb/php-mf2",
            "Please file any issues with the parser at https://github.com/indieweb/php-mf2/issues",
            "Using the Masterminds HTML5 parser"
        ]
    }
}

This scenario seems to work using the Go implementation

[gRegorLove]

Good catch! The specification is to skip classes with numbers, but it shouldn't be skipping the entire element. Will look into it.

[janboddez]

I get a somewhat similar issue with h-auto on an image here (and other StackOverflow sites): https://superuser.com/questions/53957/what-do-alsa-devices-like-hw0-0-mean-how-do-i-figure-out-which-to-use

mf2's output:

{
    "items": [
        {
            "type": [
                "h-auto"
            ],
            "properties": {
                "name": [
                    "Super User"
                ],
                "photo": [
                    {
                        "value": "https://cdn.sstatic.net/Sites/superuser/Img/logo.svg?v=4bc8a703ebac",
                        "alt": "Super User"
                    }
                ]
            },
            "lang": "en"
        },
        {
            "type": [
                "h-auto"
            ],
            "properties": {
                "name": [
                    ""
                ],
                "photo": [
                    {
                        "value": "https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e",
                        "alt": ""
                    }
                ]
            },
            "lang": "en"
        }
    ],
    <and so on>
}

The h-auto is just a utility class, a "shorthand" for height: auto;.

For a brief moment there I thought the page actually supported some microformats (and a somewhat weird name property, because it's obviously the site title and not that of the actual page).