faint text feature causes text to be unreadable

[dylang]

Before Faint

After Faint

Source

    <pre class="console">Error: 
        <span style="filter:brightness(0.7)">expect(<span style="color:#A00">value<span style="color:#FFF"><span style="filter:brightness(0.7)">).toMatchSnapshot(<span style="filter:brightness(0.7)">)
        <br>
        <br>
        <span style="color:#A00">Received value<span style="color:#FFF"> does not match <span style="color:#0A0">stored snapshot "Functional tests for reporting-score-by-segments-over-time Renders all the views 1"<span style="color:#FFF">.
        <br>
        <br>
        <span style="color:#0A0">- Snapshot<span style="color:#FFF">
            <br>
            <span style="color:#A00">+ Received<span style="color:#FFF">
                <br>
                <br>
                <span style="color:#A50">@@ -20,10 +20,11 @@<span style="color:#FFF">
                    <br>
                    <span style="filter:brightness(0.7)">  0.0Total Calculation
                    <br>
                    <span style="filter:brightness(0.7)">  All Properties<br><span style="filter:brightness(0.7)">  No - Inquiry Unresolved
                    <br>
                    <span style="filter:brightness(0.7)">  34.3Total Calculation
                    <br>
                    <span style="filter:brightness(0.7)">  All Properties<br><span style="color:#A00">+ Arrow Right IconArrow without a line pointing right.<span style="color:#FFF"><br><span style="filter:brightness(0.7)">  -100
                    <br>
                    <span style="filter:brightness(0.7)">  -50
                    <br>
                    <span style="filter:brightness(0.7)">  0
                    <br>
                    <span style="filter:brightness(0.7)">  50
                    <br>
                    <span style="filter:brightness(0.7)">  100<br>    at toMatchSnapshot (./web/modules/score-by-segments-over-time/demo/functional.test.js:26:38)<br>    at Generator.next (&lt;anonymous&gt;)
                    <br>
                    at step (./web/modules/score-by-segments-over-time/demo/functional.test.js:3:351)
                    <br>
                    at ./web/modules/score-by-segments-over-time/demo/functional.test.js:3:511
                    <br>
                    at process._tickCallback (internal/process/next_tick.js:68:7)
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </pre>

It looks like all the <span style="filter:brightness(0.7)"> tags are getting closed at the end instead of after where they are needed.

[rburns]

Thanks for the report. I published a new version (0.6.8) with faint support reverted.

I would guess that there aren't other styles in use which are additive in the way filter is. Have to think of a different way to implement it.

Did you have the stream option enabled in both cases? or disabled?

[dylang]

Thanks for the quick turnaround!

Your project has been has been an extremely simple solution to the complex problem of showing our Jest error messages in a web page with color.

const ansiToHtml = new AnsiToHtml();
...
`<td data-value="${failureMessages.length + consoleMessages.length}">
${isPassed ? '' : `<div class="red">${status}</div>`} 
${[ ...consoleMessages, ...failureMessages ].map((message) => `
    <pre class="console">${ansiToHtml.toHtml(escapeHtml(message))}</pre>
`).join('\n')}
</td>
...

[rburns]

Thanks, glad that it's useful. I'm going to close this issue. I've reopened the faint issue here: #41