Twind doesn't work well with PrismJs

[srid]

It looks like Twind shim is resetting the syntax highlighting stuff injected by https://prismjs.com/ and I see these warnings in the console:

You can see this in action here: https://ema.srid.ca/start/tutorial

Note that code blocks are syntax highlighted on page load, and then it is undone after a fraction of a second (when twind resets them).

Is there a way avoid this?

I should clarify that this is a statically generated site, so no JS is otherwise involved.

[sastan]

I tried your page without JS (no shim) and I do not see the syntax highlight. The classes are not removed from the elements. Are you sure you are sending the CSS for the highlight?

[sastan]

You can get rid of the warnings with: setup({mode: 'silent'})

[srid]

Well, the static site only injects a pre/code block with "language-haskell" class. https://prismjs.com/ is supposed to take over from that point to actually do the syntax highlighting.

The strange thing is that this issue only exists in the tutorial page. On other pages, it works: for example - https://ema.srid.ca/guide/routes is syntax highlighted (though the warnings -- which appear to come from twind complaining of prismjs's attrs -- remain).

[srid]

I feel like this is tricky to solve using the JS shim approach, so I'm considering doing a compilation on the CLI (during static site generation). I don't think twind supports it, but windicss CLI does.

Compiling CSS also makes the site render correctly with <noscript>.

[sastan]

There is @twind/cli in case you want to try that one.

[lukejacksonn]

Hey I don't know too much about prismjs but I just inspected the source of the site you posted and it seems like the content of the code block is just a string on the Tutorial page whereas on other pages the string is parsed and compiled into the appropriate markup for syntax highlighting.

Tutorial page:

Other Page:

Syntax highlighting seems to work on both the initial and subsequent loads of all other pages other than the Tutorial. Assuming you are using Twind on all pages, my conclusion is that this issue is with that specific page and/or SSR rather than with Twind.

Did you ever find what was up?

[srid]

@lukejacksonn That's just Chrome inspector's visualization. If you "view source" the raw HTML, it is generated correctly (i.e., no wrapping quotes). The HTML is supposed to contain plain text in <code> blocks, and then prismJS is suppose to traverse the DOM and inject all those token-classed <span>'s, as you see in your second screenshot. The problem is, in the tutorial page, something weird happens - presumably because (judging from the "UNKNOWN DIRECTIVE" warnings) twind is traversing the prismJS generated DOM and deleting all those prismJS-generates span's.

[srid]

Turns out this is not Twind's fault (at least on this page). PrismJS fails highlighting the Haskell code blocks if there is a bash code block the same page for some reason.

Result after fixing: https://ema.srid.ca/start/tutorial

Commit fix: srid/ema@8e5bd31

[srid]

As indicated here this appears to be a bug in PrismJS.