fix: tweak TOC detection for VFM v2 change

[MurakamiShinyu]

This resolves the problem on VFM v2 change:

• feat: disable attributes copy to parent vfm#157

With the following Markdown,

 # Table of Contents {.toc}

- [One](one.html)
- [Two](two.html)

VFM v1 generates the following HTML:

    <section class="level1 toc" id="table-of-contents">
      <h1 class="toc">Table of Contents</h1>
      <ul>
        <li><a href="one.html">One</a></li>
        <li><a href="two.html">Two</a></li>
      </ul>
    </section>

Vivliostyle.js recognizes the section as TOC because "toc" class is found in the section element.

This is changed in VFM v2. It generates the following HTML:

    <section class="level1" aria-labelledby="table-of-contents">
      <h1 class="toc" id="table-of-contents">Table of Contents</h1>
      <ul>
        <li><a href="one.html">One</a></li>
        <li><a href="two.html">Two</a></li>
      </ul>
    </section>

The "toc" class (or id) is not found on the <section> element, so the TOC detection has to be tweaked using the selector, section:has(>:first-child:is(h1,h2,h3,h4,h5,h6):is(.toc,#toc)).

Note: the stylesheet for TOC that was a part of UserAgentBaseCSS is now a separate stylesheet UserAgentTocCSS. This change is necessary because uaStylesheetBaseFetcher cannot handle the :has() selector.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
vivliostyle	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 27, 2023 at 4:58AM (UTC)