Erroneous ::before selector can be generated with darkMode: 'class'

[wongjn]

What version of @tailwindcss/typography are you using?

3.1.8

What version of Node.js are you using?

16

What browser are you using?

Chrome

What operating system are you using?

WSL

Reproduction repository

https://play.tailwindcss.com/SQ9TLTgQqn

Describe your issue

Discussed in tailwindlabs/tailwindcss#9092

Seems to be a bug in @tailwindcss/typography when the following criteria are met:

• multiple ::before rules in the same selector (in this case, the ol li::before,ul li::before)
• darkMode set to class
• dark:prose class exists

This results in an erroneous rule as the following:

.dark .dark\:prose :where(ol li,ul li):not(:where([class~="not-prose"] *))::before,::before {
  /* … */
}

In particular, the lone ::before selector at the end (minimum reproduction Tailwind Play).

Workaround

As a workaround, one can slightly tweak the config CSS to be like the following:

-  'ol li::before,ul li::before': {
-    // …
+  'ol li, ul li': {
+    '&::before': {
+      // …
+    },
   },

Tailwind Play of it working

Originally posted by @wongjn in tailwindlabs/tailwindcss#9092 (comment)

[thecrypticace]

Hey, thanks for the report (and the workaround!) — this one was an interesting one to figure out. I've merged the fix for this and it'll be in our next tagged release. It should also be in our insiders build in a few minutes if you want to test it out before the next release: npm install @tailwindcss/typography@insiders