From c055aa4017b8ef10759ff508e56be0ed1dec87cf Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 21 Dec 2023 16:38:25 -0500
Subject: [PATCH] wip

---
 src/corePlugins.js      | 47 +++++++++++++++++++++++++++++------------
 tests/dark-mode.test.js | 25 +++++++++++++++++++---
 2 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 9b31afe0e..b88d1a90f 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -225,19 +225,40 @@ export let variantPlugins = {
         'Change `darkMode` to `media` or remove it entirely.',
         'https://tailwindcss.com/docs/upgrade-guide#remove-dark-mode-configuration',
       ])
-    } else if (mode === 'variant' && className === '.dark') {
-      mode = false
-      log.warn('darkmode-variant-without-selector', [
-        'darkMode: "variant" was used without a provided selector.',
-        'When using `variant` for `darkMode`, you must provide a selector.',
-        'Example: `darkMode: ["variant", ".your-selector &"]`',
-      ])
-    } else if (mode === 'variant' && !className.includes('&')) {
-      mode = false
-      log.warn('darkmode-variant-without-ampersand', [
-        'When using `variant` for `darkMode`, your selector must contain `&`.',
-        'Example `darkMode: ["variant", ".your-selector &"]`',
-      ])
+    }
+
+    if (mode === 'variant') {
+      let formats
+      if (Array.isArray(className)) {
+        formats = className
+      } else if (typeof className === 'function') {
+        formats = className
+      } else if (typeof className === 'string') {
+        formats = [className]
+      }
+
+      // TODO: We could also add these warnings if the user passes a function that returns string | string[]
+      // But this is an advanced enough use case that it's probably not necessary
+      if (Array.isArray(formats)) {
+        for (let format of formats) {
+          if (format === '.dark') {
+            mode = false
+            log.warn('darkmode-variant-without-selector', [
+              'darkMode: "variant" was used without a provided selector.',
+              'When using `variant` for `darkMode`, you must provide a selector.',
+              'Example: `darkMode: ["variant", ".your-selector &"]`',
+            ])
+          } else if (!format.includes('&')) {
+            mode = false
+            log.warn('darkmode-variant-without-ampersand', [
+              'When using `variant` for `darkMode`, your selector must contain `&`.',
+              'Example `darkMode: ["variant", ".your-selector &"]`',
+            ])
+          }
+        }
+      }
+
+      className = formats
     }
 
     if (mode === 'class') {
diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js
index 966bd52ad..69ce41fcd 100644
--- a/tests/dark-mode.test.js
+++ b/tests/dark-mode.test.js
@@ -255,9 +255,28 @@ it('should support parallel selectors for the dark mode variant', () => {
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      .dark\:font-bold:not(.light *) {
-        font-weight: 700;
-      }
+      .dark\:font-bold:not(.light *),
+      .dark\:font-bold:not(.extralight *) {
+        font-weight: 700;
+      }
+    `)
+  })
+})
+
+it('should support fn selectors for the dark mode variant', () => {
+  let config = {
+    darkMode: ['variant', () => ['&:not(.light *)', '&:not(.extralight *)']],
+    content: [{ raw: html`<div class="dark:font-bold"></div>` }],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .dark\:font-bold:not(.light *),
       .dark\:font-bold:not(.extralight *) {
         font-weight: 700;
       }