Remove variant dark mode strategy

tailwindlabs · Jan 5, 2024 · 1852504 · 1852504
1 parent 2433d99
commit 1852504
Show file tree

Hide file tree

Showing 2 changed files with 0 additions and 97 deletions.
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -227,45 +227,10 @@ export let variantPlugins = {
       ])
     }
 
-    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', [
-              '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 === 'selector') {
       addVariant('dark', `&:where(${className}, ${className} *)`)
     } else if (mode === 'media') {
       addVariant('dark', '@media (prefers-color-scheme: dark)')
-    } else if (mode === 'variant') {
-      addVariant('dark', className)
     } else if (mode === 'class') {
       // Exists for pre v3.4 compatibility
       addVariant('dark', `:is(${className} &)`)

diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js
@@ -229,65 +229,3 @@ it('should use modern sorting otherwise', () => {
     `)
   })
 })
-
-it('should allow customization of the dark mode variant', () => {
-  let config = {
-    darkMode: ['variant', '&:not(.light *)'],
-    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 *) {
-        font-weight: 700;
-      }
-    `)
-  })
-})
-
-it('should support parallel 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;
-      }
-    `)
-  })
-})
-
-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;
-      }
-    `)
-  })
-})