Use :where to reduce specificity (#203)

* Use :where to reduce specificity

* Update index.js

* Handle before/after with :where

This is a fairly naive solution and could/should be made more robust to handle other pseudo-elements like ::first-letter, ::first-line, etc. but I'm inclined to just roll with this until someone actually opens an issue because they needed support for those.

* Only wrap selectors with :where(), not property names

* Add new `target` plugin option to enable/disable the use of `:where()` selectors

Co-Authored-By: Adam Wathan <[email protected]>
Co-authored-by: Jonathan Reinink <[email protected]>

src/index.js

@@ -10,18 +10,44 @@ const computed = {
   // bulletColor: (color) => ({ 'ul > li::before': { backgroundColor: color } }),
 }
 
-function configToCss(config = {}) {
-  return merge(
-    {},
-    ...Object.keys(config)
-      .filter((key) => computed[key])
-      .map((key) => computed[key](config[key])),
-    ...castArray(config.css || {})
+function inWhere(selector) {
+  if (selector.endsWith('::before')) {
+    return `:where(${selector.slice(0, -8)})::before`
+  }
+
+  if (selector.endsWith('::after')) {
+    return `:where(${selector.slice(0, -7)})::after`
+  }
+
+  return `:where(${selector})`
+}
+
+function configToCss(config = {}, target) {
+  return Object.fromEntries(
+    Object.entries(
+      merge(
+        {},
+        ...Object.keys(config)
+          .filter((key) => computed[key])
+          .map((key) => computed[key](config[key])),
+        ...castArray(config.css || {})
+      )
+    ).map(([k, v]) => {
+      if (target === 'legacy') {
+        return [k, v]
+      }
+
+      if (typeof v == 'object' && v.constructor == Object) {
+        return [inWhere(k), v]
+      }
+
+      return [k, v]
+    })
   )
 }
 
 module.exports = plugin.withOptions(
-  ({ modifiers, className = 'prose' } = {}) => {
+  ({ modifiers, className = 'prose', target = 'modern' } = {}) => {
     return function ({ addComponents, theme, variants }) {
       const DEFAULT_MODIFIERS = [
         'DEFAULT',
@@ -47,7 +73,8 @@ module.exports = plugin.withOptions(
       addComponents(
         all.map((modifier) => ({
           [modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`]: configToCss(
-            config[modifier]
+            config[modifier],
+            target,
           ),
         })),
         variants('typography')