Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Petercopter opened this issue Oct 6, 2023 · 5 comments
Closed
Assignees

Comments

@Petercopter
Copy link

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://[email protected]"></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 thecrypticace self-assigned this Oct 6, 2023
@thecrypticace
Copy link
Contributor

thecrypticace commented Oct 6, 2023

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
Copy link
Author

@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
Copy link
Contributor

No worries!

@eread
Copy link

eread commented Nov 21, 2023

@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
Copy link

eread commented Nov 23, 2023

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants