tailwindlabs/tailwindcss-typography

0.5.10 causes '[class~=not-prose] *)):before' is not a valid selector

Petercopter opened this issue · 5 comments

Petercopter commented

What version of @tailwindcss/typography are you using?

0.5.10

What version of Node.js are you using?

20.8.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

cdn test, code provided in issue

Describe your issue

We are using Tailwind Typography in conjunction with https://pagedjs.org/ to generate PDFs. After upgrading to Typography 0.5.10, we are getting this error:

paged.polyfill.js:30815 Uncaught (in promise) DOMException: Failed to execute 'querySelectorAll' on 'DocumentFragment': '[class~=not-prose] *)):before' is not a valid selector.
    at NthOfType.processSelectors (https://unpkg.com/pagedjs/dist/paged.polyfill.js:30815:27)
    at NthOfType.afterParsed (https://unpkg.com/pagedjs/dist/paged.polyfill.js:30809:9)
    at https://unpkg.com/pagedjs/dist/paged.polyfill.js:424:26
    at Array.forEach (<anonymous>)
    at Hook.trigger (https://unpkg.com/pagedjs/dist/paged.polyfill.js:423:15)
    at Chunker.flow (https://unpkg.com/pagedjs/dist/paged.polyfill.js:2916:33)
    at async Previewer.preview (https://unpkg.com/pagedjs/dist/paged.polyfill.js:33178:15)
    at async https://unpkg.com/pagedjs/dist/paged.polyfill.js:33240:11

I'm guessing this change may be the culprit:

Remove typography styles from not-prose elements in addition to their children (#301)

I don't actually have a "working" example repo, because 0.5.10 is not on the Tailwind Play CDN yet, so I'm jumping the gun a little bit, but this code here will work once the new version is available:

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdn.tailwindcss.com?plugins=typography@0.5.10"></script>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet ultricies massa. Morbi tempor sodales
    hendrerit. Vestibulum at gravida est. Nulla ullamcorper purus vel mauris interdum scelerisque. Duis a vestibulum
    velit. Morbi luctus quam at mauris porta eleifend.</p>
</body>
</html>
thecrypticace commented

Hey, this is a problem with the selector parsing in pagedjs and not the typography plugin. I would suggest opening an issue with them about this on their gitlab.

From what I can tell, their selector parser does not like multiple classes inside the :where inside the :not. But this only happens in select cases where there are selectors with certain combinations of combinators and elements or pseudo classes.

This example reproduces the issue without the typography plugin (or Tailwind CSS) at all.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
    <style>
      /* Broken 1 */
      :where(div div:first-of-type):not(:where([class~="some-class"],[class~="some-class"] *)) {
        color: red;
      }

      /* Broken 2 (likely the same bug as 1 but still good to test explicitly) */
      :where(div div:first-of-type):not(:where([class~="some-class"],[class~="some-class"] *))::before {
        color: red;
      }

      /* Broken 3 */
      :where(div + *):not(:where([class~="some-class"],[class~="some-class"] *)) {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet
      ultricies massa. Morbi tempor sodales hendrerit. Vestibulum at gravida
      est. Nulla ullamcorper purus vel mauris interdum scelerisque. Duis a
      vestibulum velit. Morbi luctus quam at mauris porta eleifend.
    </p>
  </body>
</html>

Gonna close as this isn't an issue that ee can fix. Let me know if you need anything.

Petercopter commented

@thecrypticace Thanks!

Sorry for barking up the wrong tree, I thought it was Javascript having trouble parsing a new selector or something. I will check in with the paged.js repo 👍 🎉

thecrypticace commented

No worries!

eread commented

@thecrypticace Thanks!

Sorry for barking up the wrong tree, I thought it was Javascript having trouble parsing a new selector or something. I will check in with the paged.js repo 👍 🎉

@Petercopter Did you have any luck? I raised a similar issue at: nunocoracao/blowfish#1014.

eread commented

@thecrypticace Thanks!
Sorry for barking up the wrong tree, I thought it was Javascript having trouble parsing a new selector or something. I will check in with the paged.js repo 👍 🎉

@Petercopter Did you have any luck? I raised a similar issue at: nunocoracao/blowfish#1014.

Ah, I see you've raised: pagedjs/pagedjs#166.

I was looking for something at: https://gitlab.coko.foundation/pagedjs/pagedjs/-/issues.