Use More Specific `h-${prop}` matching

[jalcine]

I use a CSS framework that makes use of the h- prefix for heights. Currently, this is breaking my use of this library when attempting to look for h-entry or h-cite information on a page.

<div class="w-100 mt1 mt3-l cb pv2 flex flex-grow flex-auto flex-column content-stretch">
  <article class="w-100 h-entry mt1 mt3-l pa2 flex flex-grow flex-auto flex-column content-stretch justify-center items-center">
<div class="flex flex-column flex-auto flex-grow w-100">
  <div class="mw7 w-100 center">
    <h2 class="navy f2 lh-title p-summary p-name mb1">
      <i class="br-100 pa1 fw1 h2 w2 v-mid" data-feather="heart">Liked</i>
      <span class="v-mid">Liked</span>
      <a target="_new" class="u-like-of h-cite v-mid fw5 underline link navy" href="http://67efebc0.ngrok.io/post/b5a600c5-98a0-4112-b2d5-9df7c600f5e2">
67efebc0.ngrok.io      </a>
    </h2>
    <h5 class="f5 code gray lh-solid fw1 ttu">67efebc0.ngrok.io</h5>

  </div>
<div class="mw8 center w-100 order-2 items-end flex flex-wrap justify-around-m justify-between mt4-l mt2">
<div class="db bg-near-black mt4-s ma3-l self-start order-1 w-100 w-auto-ns self-stretch items-center sans-serif">
  <ul class="flex flex-column w-100 h-100 justify-center w-auto-l ba b--near-black relative-l left-1-l bottom-1-l self-end-l self-center ma0 pa3 f6 gray list lh-copy bg-dark-gray moon-gray">
    <li class="lh-copy">
      <a href="#mentions-reposts" class="link color-inherit dim">
        <i class="v-mid ph1 w1 h1" data-feather="repeat"></i>
        <span class="v-mid"><strong>0</strong> Reposts</span>
      </a>
    </li>
    <li class="lh-copy mt1">
      <a href="#mentions-replies" class="link color-inherit dim">
        <i class="v-mid ph1 w1 h1" data-feather="corner-up-right"></i>
        <span class="v-mid"><strong>0</strong> Replies</span>
      </a>
    </li>
    <li class="lh-copy mt1">
      <a href="#mentions-likes" class="link color-inherit dim">
        <i class="v-mid ph1 w1 h1" data-feather="heart"></i>
        <span class="v-mid"><strong>0</strong> Likes</span>
      </a>
    </li>
    <li class="lh-copy mt1">
      <a href="#mentions-mentions" class="link color-inherit dim">
        <i class="v-mid ph1 w1 h1" data-feather="at-sign"></i>
        <span class="v-mid"><strong>0</strong> Mentions</span>
      </a>
    </li>
    <li class="lh-copy mt1">
      <a href="#mentions-syndication" class="link color-inherit dim">
        <i class="v-mid ph1 w1 h1" data-feather="upload-cloud"></i>
        <span class="v-mid"><strong>8</strong> Syndications</span>
      </a>
    </li>
  </ul>
</div>
  <div class="w-100 w-auto-l order-3 order-2-l self-center mv3 mv4-m">
  <p class="dn-l lh-copy pa0 ma0 f6 gray">An uncategorized post.</p>
</div>

<div class="db bg-near-black mt3 mt0-m ma3-l self-start w-100 w-auto-ns order-2 order-3-l self-stretch items-center sans-serif">
  <ul class="flex flex-column w-100 h-100 justify-center w-auto-l relative-l left--1-l top--1-l self-end-l self-center ma0 pa2 f6 dark-gray list lh-copy bg-lightest-blue near-black ba b--mid-gray">
    <li class="lh-copy">
      published
      <time class="fw5 dt-published" title="2018-12-19T00:19:04.410503Z" datetime="2018-12-19T00:19:04.410503Z">
7 minutes      </time>
    </li>
    <li class="lh-copy mt1">
      updated
      <time class="fw5 dt-updated" title="2018-12-19 00:19:04.406330" datetime="2018-12-19 00:19:04.406330">
7 minutes      </time>
    </li>
    <li class="lh-copy mt1">
      <a class="link dim fw5 color-inherit" href="/post/of-type/like">
        a
        <i class="v-mid pv1 h1 w1" data-feather="message-square"></i>
like        post
      </a>
    </li>
    <li class="lh-copy mt1">
      <a class="link navy fw5 u-url u-uid" href="/post/a4ab5c98-c476-4800-9f09-2f7f5a337f32">Permalink</a>
    </li>
    <li class="lh-copy mt1">
      <span class="v-mid">by</span>
      <a class="ml1 u-author h-card v-mid link fw5 navy" rel="me" href="/">
        <img class="v-mid u-photo br-100 h1 w1 b--near-black" src="http://localhost:9000/koype-dev/photos/floating/original_self-portrait.jpg" />
        <span class="v-mid">Jacky Alciné</span>
      </a>
    </li>
  </ul>
</div>
  <div class="w-100 order-4 self-end bt b--moon-gray">
  <h3 class="f3 ttu fw3 tracked lh-title">
    <i class="v-mid w2 h2" data-feather="message-circle"></i>
    <span class="v-mid">Responses</span>
  </h3>
  <p class="f5 lh-copy measure">
    Here's what people had to say about this like. Want to join in?
    <a target="_new" href="https://indieweb.org/reply#How_To" class="link underline navy fw7">Learn how</a>.
  </p>
</div>

</div>
</div>
  </article>
</div>

The output (in JSON):

{"items":[{"children":[{"children":[{"properties":{"name":["0 Reposts0 Replies0 Likes0 Mentions8 Syndications"]},"type":["h-100"]},{"properties":{"author":[{"properties":{"name":["http://localhost:9000/koype-dev/photos/floating/original_self-portrait.jpgJacky Alciné"],"photo":["http://localhost:9000/koype-dev/photos/floating/original_self-portrait.jpg"],"url":["http://67efebc0.ngrok.io/"]},"type":["h-card"],"value":"http://67efebc0.ngrok.io/"}],"name":["published\n      \nhalf a minute      \n      updated\n      \nhalf a minute      \n        a\n        \nlike        post\n      Permalinkbyhttp://localhost:9000/koype-dev/photos/floating/original_self-portrait.jpgJacky Alciné"],"published":["2018-12-19T00:19:04.410503Z"],"uid":["http://67efebc0.ngrok.io/post/a4ab5c98-c476-4800-9f09-2f7f5a337f32"],"updated":["2018-12-19 00:19:04.406330"],"url":["http://67efebc0.ngrok.io/post/a4ab5c98-c476-4800-9f09-2f7f5a337f32"]},"type":["h-100"]}],"properties":{"like_of":[{"properties":{"name":["67efebc0.ngrok.io"],"url":["http://67efebc0.ngrok.io/post/b5a600c5-98a0-4112-b2d5-9df7c600f5e2"]},"type":["h-cite"],"value":"http://67efebc0.ngrok.io/post/b5a600c5-98a0-4112-b2d5-9df7c600f5e2"}],"name":["LikedLiked\n67efebc0.ngrok.io"],"summary":["LikedLiked\n67efebc0.ngrok.io"]},"type":["h-entry"]}],"properties":{"name":["LikedLiked\n67efebc0.ngrok.io      67efebc0.ngrok.io0 Reposts0 Replies0 Likes0 Mentions8 SyndicationsAn uncategorized post.\n      published\n      \nhalf a minute      \n      updated\n      \nhalf a minute      \n        a\n        \nlike        post\n      Permalinkbyhttp://localhost:9000/koype-dev/photos/floating/original_self-portrait.jpgJacky AlcinéResponses\n    Here's what people had to say about this like. Want to join in?\n    Learn how."]},"type":["h-100"]},{"properties":{"name":["Jacky Alciné"],"note":["Ayeeeeeeeeeeeeee"],"photo":["http://localhost:9000/koype-dev/photos/floating/original_self-portrait.jpg"],"url":["http://67efebc0.ngrok.io"]},"type":["h-card"]}],"rel_urls":{"http://67efebc0.ngrok.io":{"rels":["author","me","authn"],"text":"Jacky Alciné"},"http://67efebc0.ngrok.io/":{"rels":["me"],"text":"Jacky Alciné"},"http://67efebc0.ngrok.io/api/indie/micropub":{"rels":["micropub"]},"http://67efebc0.ngrok.io/api/indie/micropub/media":{"rels":["media_endpoint"]},"http://67efebc0.ngrok.io/api/indie/token":{"rels":["token_endpoint"]},"http://67efebc0.ngrok.io/api/indie/webmention":{"rels":["webmention"]},"http://67efebc0.ngrok.io/assets/css/koype.css":{"rels":["stylesheet"]},"http://67efebc0.ngrok.io/assets/css/vendor.css":{"rels":["stylesheet"]},"http://67efebc0.ngrok.io/images/favicon.png":{"rels":["icon"],"type":"image/png"},"http://67efebc0.ngrok.io/indie/auth":{"rels":["authorization_endpoint"]},"http://67efebc0.ngrok.io/post/a4ab5c98-c476-4800-9f09-2f7f5a337f32":{"rels":["bookmark","canonical"]},"https://jacky.wtf":{"rels":["me"]}},"rels":{"authn":["http://67efebc0.ngrok.io"],"author":["http://67efebc0.ngrok.io"],"authorization_endpoint":["http://67efebc0.ngrok.io/indie/auth"],"bookmark":["http://67efebc0.ngrok.io/post/a4ab5c98-c476-4800-9f09-2f7f5a337f32"],"canonical":["http://67efebc0.ngrok.io/post/a4ab5c98-c476-4800-9f09-2f7f5a337f32"],"icon":["http://67efebc0.ngrok.io/images/favicon.png"],"me":["https://jacky.wtf","http://67efebc0.ngrok.io/","http://67efebc0.ngrok.io"],"media_endpoint":["http://67efebc0.ngrok.io/api/indie/micropub/media"],"micropub":["http://67efebc0.ngrok.io/api/indie/micropub"],"stylesheet":["http://67efebc0.ngrok.io/assets/css/vendor.css","http://67efebc0.ngrok.io/assets/css/koype.css"],"token_endpoint":["http://67efebc0.ngrok.io/api/indie/token"],"webmention":["http://67efebc0.ngrok.io/api/indie/webmention"]}}

[jalcine]

A fixed list of known h- types and passively allowin h-x properties could work.

[ckruse]

Hm yeah, I see the problem. I will have a look at this tonight, in Europe the work day just started :-)

[sknebel]

There's specific rules what names are allowed to look like (quoted from end of http://microformats.org/wiki/microformats2-parsing#parse_an_element_for_class_microformats):

The "*" for root (and property) class names consists of an optional vendor prefix (series of 1+ number or lowercase a-z characters i.e. [0-9a-z]+, followed by -), then one or more - separated lowercase a-z words.

Please do not hardcode a list of supported types or property names.

[jalcine]

Ooh didn't know that - thanks for that update @sknebel!

[jalcine]

Well, that specification would still parse h-100 and the likes as microformat information; which it isn't.

[jalcine]

So it'd be up to the user to ignore these things, it seems.

[jalcine]

Ah okay so from IRC: https://chat.indieweb.org/dev/2019-01-03#t1546553927565100

There's a bit of clarification: should be a test something like h(<vendor-prefix>)-(type) such that vendor prefix can be an alphanumeric string but the type can only be letters