Register dark mode plugin outside of resolveConfig code path (#2368)

Author: adamwathan

resolveConfig.js

@@ -2,10 +2,7 @@ const resolveConfigObjects = require('./lib/util/resolveConfig').default
 const getAllConfigs = require('./lib/util/getAllConfigs').default
 
 module.exports = function resolveConfig(...configs) {
-  // Make sure the correct config object is mutated to include flagged config plugins.
-  // This sucks, refactor soon.
-  const firstConfigWithPlugins = configs.find(c => Array.isArray(c.plugins)) || configs[0]
-  const [, ...defaultConfigs] = getAllConfigs(firstConfigWithPlugins)
+  const [, ...defaultConfigs] = getAllConfigs(configs[0])
 
   return resolveConfigObjects([...configs, ...defaultConfigs])
 }

src/flagged/darkModeVariant.js

@@ -1,4 +1,3 @@
-import buildSelectorVariant from '../util/buildSelectorVariant'
 import defaultConfig from '../../defaultConfig'
 
 export default {
@@ -11,42 +10,4 @@ export default {
     placeholderColor: [...defaultConfig.variants.placeholderColor, 'dark'],
     textColor: [...defaultConfig.variants.textColor, 'dark'],
   },
-  plugins: [
-    function({ addVariant, config, postcss, prefix }) {
-      addVariant('dark', ({ container, separator, modifySelectors }) => {
-        if (config('dark') === 'media') {
-          const modified = modifySelectors(({ selector }) => {
-            return buildSelectorVariant(selector, 'dark', separator, message => {
-              throw container.error(message)
-            })
-          })
-          const mediaQuery = postcss.atRule({
-            name: 'media',
-            params: '(prefers-color-scheme: dark)',
-          })
-          mediaQuery.append(modified)
-          container.append(mediaQuery)
-          return container
-        }
-
-        if (config('dark') === 'class') {
-          const modified = modifySelectors(({ selector }) => {
-            return buildSelectorVariant(selector, 'dark', separator, message => {
-              throw container.error(message)
-            })
-          })
-
-          modified.walkRules(rule => {
-            rule.selectors = rule.selectors.map(selector => {
-              return `${prefix('.dark')} ${selector}`
-            })
-          })
-
-          return modified
-        }
-
-        throw new Error("The `dark` config option must be either 'media' or 'class'.")
-      })
-    },
-  ],
 }

src/flagged/darkModeVariantPlugin.js

@@ -0,0 +1,38 @@
+import buildSelectorVariant from '../util/buildSelectorVariant'
+
+export default function({ addVariant, config, postcss, prefix }) {
+  addVariant('dark', ({ container, separator, modifySelectors }) => {
+    if (config('dark') === 'media') {
+      const modified = modifySelectors(({ selector }) => {
+        return buildSelectorVariant(selector, 'dark', separator, message => {
+          throw container.error(message)
+        })
+      })
+      const mediaQuery = postcss.atRule({
+        name: 'media',
+        params: '(prefers-color-scheme: dark)',
+      })
+      mediaQuery.append(modified)
+      container.append(mediaQuery)
+      return container
+    }
+
+    if (config('dark') === 'class') {
+      const modified = modifySelectors(({ selector }) => {
+        return buildSelectorVariant(selector, 'dark', separator, message => {
+          throw container.error(message)
+        })
+      })
+
+      modified.walkRules(rule => {
+        rule.selectors = rule.selectors.map(selector => {
+          return `${prefix('.dark')} ${selector}`
+        })
+      })
+
+      return modified
+    }
+
+    throw new Error("The `dark` config option must be either 'media' or 'class'.")
+  })
+}

src/processTailwindFeatures.js

@@ -14,7 +14,9 @@ import purgeUnusedStyles from './lib/purgeUnusedStyles'
 import corePlugins from './corePlugins'
 import processPlugins from './util/processPlugins'
 import cloneNodes from './util/cloneNodes'
-import { issueFlagNotices } from './featureFlags.js'
+import { issueFlagNotices, flagEnabled } from './featureFlags.js'
+
+import darkModeVariantPlugin from './flagged/darkModeVariantPlugin'
 
 import hash from 'object-hash'
 
@@ -31,7 +33,15 @@ export default function(getConfig) {
     if (configChanged) {
       issueFlagNotices(config)
 
-      processedPlugins = processPlugins([...corePlugins(config), ...config.plugins], config)
+      processedPlugins = processPlugins(
+        [
+          ...corePlugins(config),
+          ...[flagEnabled(config, 'darkModeVariant') ? darkModeVariantPlugin : () => {}],
+          ...config.plugins,
+        ],
+        config
+      )
+
       getProcessedPlugins = function() {
         return {
           ...processedPlugins,

src/util/getAllConfigs.js

@@ -32,9 +32,6 @@ export default function getAllConfigs(config) {
 
   if (flagEnabled(config, 'darkModeVariant')) {
     configs.unshift(darkModeVariant)
-    if (Array.isArray(config.plugins)) {
-      config.plugins = [...darkModeVariant.plugins, ...config.plugins]
-    }
   }
 
   return [config, ...configs]