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 https://github.com/tailwindlabs/tailwindcss/discussions/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 https://github.com/tailwindlabs/tailwindcss/discussions/9092#discussioncomment-3389070