Unexpected token

[Piotr Kalota]

This is the content of my test.html file.

<div class="card__inner color-background-2 gradient ratio" style="--ratio-percent: 75.0128270908158%;" data-component="Test">
    <div class="card__media">
        <div class="media media--transparent media--hover-effect">
            <img
            srcset="//cdn.shopify.com/s/files/1/0557/2853/7679/products/20221220_102926.jpg?v=1671528780&amp;width=165 165w,//cdn.shopify.com/s/files/1/0557/2853/7679/products/20221220_102926.jpg?v=1671528780&amp;width=360 360w,//cdn.shopify.com/s/files/1/0557/2853/7679/products/20221220_102926.jpg?v=1671528780&amp;width=533 533w,//cdn.shopify.com/s/files/1/0557/2853/7679/products/20221220_102926.jpg?v=1671528780&amp;width=720 720w,//cdn.shopify.com/s/files/1/0557/2853/7679/products/20221220_102926.jpg?v=1671528780&amp;width=940 940w,//cdn.shopify.com/s/files/1/0557/2853/7679/products/20221220_102926.jpg?v=1671528780&amp;width=1066 1066w,//cdn.shopify.com/s/files/1/0557/2853/7679/products/20221220_102926.jpg?v=1671528780 3898w"
            src="//cdn.shopify.com/s/files/1/0557/2853/7679/products/20221220_102926.jpg?v=1671528780&amp;width=533"
            sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
            alt="Kom bare ind - Dørhænger i træ" class="motion-reduce" loading="lazy" width="3898"
            height="2924">
        </div>
    </div>
    <div class="card__content">
        <div class="card__information">
            <h3 class="card__heading">
            <a href="/products/kom-barr-ind-dorhaenger-i-trae" class="full-unstyled-link">
                Kom bare ind - Dørhænger i træ
            </a>
            </h3>
        </div>
        <div class="card__badge bottom left"></div>
    </div>
</div>

html2react test.html throws an error

C:\Users\Piotrek\AppData\Roaming\npm\node_modules\html-to-react-components\node_modules\babylon\lib\index.js:4457
  throw err;
  ^

SyntaxError: Unexpected token (1:71)
    at Parser.pp$5.raise (C:\Users\Piotrek\AppData\Roaming\npm\node_modules\html-to-react-components\node_modules\babylon\lib\index.js:4454:13)
    at Parser.pp.unexpected (C:\Users\Piotrek\AppData\Roaming\npm\node_modules\html-to-react-components\node_modules\babylon\lib\index.js:1761:8)
    at Parser.pp$3.parseIdentifier (C:\Users\Piotrek\AppData\Roaming\npm\node_modules\html-to-react-components\node_modules\babylon\lib\index.js:4332:10)
    at Parser.pp$3.parsePropertyName (C:\Users\Piotrek\AppData\Roaming\npm\node_modules\html-to-react-components\node_modules\babylon\lib\index.js:4156:96)
    at Parser.pp$3.parseObj (C:\Users\Piotrek\AppData\Roaming\npm\node_modules\html-to-react-components\node_modules\babylon\lib\index.js:4045:12)
    at Parser.pp$3.parseExprAtom (C:\Users\Piotrek\AppData\Roaming\npm\node_modules\html-to-react-components\node_modules\babylon\lib\index.js:3719:19)
    at Parser.parseExprAtom (C:\Users\Piotrek\AppData\Roaming\npm\node_modules\html-to-react-components\node_modules\babylon\lib\index.js:7238:22)
    at Parser.pp$3.parseExprSubscripts (C:\Users\Piotrek\AppData\Roaming\npm\node_modules\html-to-react-components\node_modules\babylon\lib\index.js:3494:19)
    at Parser.pp$3.parseMaybeUnary (C:\Users\Piotrek\AppData\Roaming\npm\node_modules\html-to-react-components\node_modules\babylon\lib\index.js:3474:19)
    at Parser.pp$3.parseExprOps (C:\Users\Piotrek\AppData\Roaming\npm\node_modules\html-to-react-components\node_modules\babylon\lib\index.js:3404:19) {
  pos: 71,
  loc: Position { line: 1, column: 71 }
}

html2react 1.6.6 node v16.15.1

Any idea what's wrong with test.html? Thanks in advance for the answer.

PS:
Instead of marking the same HTML this way:

<div class="card__inner color-background-2 gradient ratio" style="--ratio-percent: 75.0128270908158%;" data-component="Test">
    <div class="card__media">
        ...
    </div>
    <div class="card__content">
        ...
    </div>
</div>

Marking HTML this way works:

<div class="card__inner color-background-2 gradient ratio" style="--ratio-percent: 75.0128270908158%;">
    <div class="card__media" data-component="Test">
        ...
    </div>
    <div class="card__content" data-component="Test2">
        ...
    </div>
</div>

[Roman Liutikov]

no idea, maybe it fails on the CSS Var part?