Repository: tailwindlabs/tailwindcss (ts)

Issue:
Tailwindcss v1.8 dark mode (experimental) issue
### Describe the problem:
🚫 Error: Your config mentions the "dark" variant, but "dark" doesn't appear to be a variant. Did you forget or misconfigure a plugin that supplies that variant?
<!--

  Explain the behavior you're seeing that you think is a bug, and explain how you
  think things should behave instead.

-->

### Link to a minimal reproduction:
```javascript
// tailwind.config.js
'use strict';

module.exports = {
  dark: 'class',
  experimental: 'all',
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
  purge: {
    content: [
      './public/**/*.html',
      './src/**/*.js',
    ],
  },
  theme: {
    extend: {
      colors: {
        'dark-gray': '#121212',
        gray: {
          '100': '#f5f5f5',
          '200': '#eeeeee',
          '300': '#e0e0e0',
          '400': '#bdbdbd',
          '500': '#9e9e9e',
          '600': '#757575',
          '700': '#616161',
          '800': '#424242',
          '900': '#212121',
        },
      },
      cursor: {
        'zoom-in': 'zoom-in',
        'zoom-out': 'zoom-out',
      },
    },
  },
  variants: {},
  plugins: [],
};

```
When run build command `npx tailwindcss build -o src/index.css`, getting the above error.
<!--

  Please provide a link to a GitHub repository that reliably reproduces the issue
  with the least amount of extraneous code possible.

-->


Pull request description:
Fix issue where dark mode experiment won't work if user has plugins array in config
Fixes #2319.

Patch:
diff --git a/src/index.js b/src/index.js
index 4b4df6d2..18f7ae04 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,9 +17,9 @@ import uniformColorPalette from './flagged/uniformColorPalette.js'
 import extendedSpacingScale from './flagged/extendedSpacingScale.js'
 import defaultLineHeights from './flagged/defaultLineHeights.js'
 import extendedFontSizeScale from './flagged/extendedFontSizeScale.js'
-import darkModeVariant from './flagged/darkModeVariant'
+import darkModeVariant from './flagged/darkModeVariant.js'
 
-function getDefaultConfigs(config) {
+function getAllConfigs(config) {
   const configs = [defaultConfig]
 
   if (flagEnabled(config, 'uniformColorPalette')) {
@@ -40,9 +40,12 @@ function getDefaultConfigs(config) {
 
   if (flagEnabled(config, 'darkModeVariant')) {
     configs.unshift(darkModeVariant)
+    if (Array.isArray(config.plugins)) {
+      config.plugins = [...darkModeVariant.plugins, ...config.plugins]
+    }
   }
 
-  return configs
+  return [config, ...configs]
 }
 
 function resolveConfigPath(filePath) {
@@ -78,7 +81,7 @@ function resolveConfigPath(filePath) {
 
 const getConfigFunction = config => () => {
   if (_.isUndefined(config) && !_.isObject(config)) {
-    return resolveConfig([...getDefaultConfigs(defaultConfig)])
+    return resolveConfig([...getAllConfigs(defaultConfig)])
   }
 
   // Skip this if Jest is running: https://github.com/facebook/jest/pull/9841#issuecomment-621417584
@@ -92,7 +95,7 @@ const getConfigFunction = config => () => {
 
   const configObject = _.isObject(config) ? _.get(config, 'config', config) : require(config)
 
-  return resolveConfig([configObject, ...getDefaultConfigs(configObject)])
+  return resolveConfig([...getAllConfigs(configObject)])
 }
 
 const plugin = postcss.plugin('tailwind', config => {


Test patch:
diff --git a/__tests__/darkMode.test.js b/__tests__/darkMode.test.js
index 5c3555ae..f96b9035 100644
--- a/__tests__/darkMode.test.js
+++ b/__tests__/darkMode.test.js
@@ -49,6 +49,34 @@ test('generating dark mode variants uses the media strategy by default', () => {
   })
 })
 
+test('dark mode variants can be generated even when the user has their own plugins array', () => {
+  const input = `
+    @variants dark {
+      .text-red {
+        color: red;
+      }
+    }
+  `
+
+  const expected = `
+    .text-red {
+      color: red;
+    }
+    @media (prefers-color-scheme: dark) {
+      .dark\\:text-red {
+        color: red;
+      }
+    }
+  `
+
+  expect.assertions(2)
+
+  return run(input, { plugins: [] }).then(result => {
+    expect(result.css).toMatchCss(expected)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('dark mode variants can be generated using the class strategy', () => {
   const input = `
     @variants dark {