From e99753bc33513fae1f3dbd1c2dadabfcbd67f738 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 28 Feb 2019 14:53:55 -0500
Subject: [PATCH] Update plugins to source their config themselves

Instead of plugins being configured directly, they grab their configuration from the Tailwind config passed to them. This makes core plugins consistent with how we will recommend third-party plugins be authored so that the configuration for everything in the system is readable through the theme.
---
 __tests__/configurePlugins.test.js | 175 +----------------------------
 src/corePlugins.js                 |  19 +---
 src/util/configurePlugins.js       |   6 +-
 3 files changed, 10 insertions(+), 190 deletions(-)

diff --git a/__tests__/configurePlugins.test.js b/__tests__/configurePlugins.test.js
index a06ea79d6..69c341a09 100644
--- a/__tests__/configurePlugins.test.js
+++ b/__tests__/configurePlugins.test.js
@@ -2,180 +2,17 @@ import configurePlugins from '../src/util/configurePlugins'
 
 test('setting a plugin to false removes it', () => {
   const plugins = {
-    fontSize: options => {
-      return {
-        plugin: 'fontSize',
-        options,
-      }
-    },
-    display: options => {
-      return {
-        plugin: 'display',
-        options,
-      }
-    },
-    backgroundPosition: options => {
-      return {
-        plugin: 'backgroundPosition',
-        options,
-      }
-    },
-  }
-
-  const configuredPlugins = configurePlugins(plugins, {
-    fontSize: {},
-    display: false,
-    backgroundPosition: {},
-  })
-
-  expect(configuredPlugins).toEqual([
-    { plugin: 'fontSize', options: {} },
-    { plugin: 'backgroundPosition', options: {} },
-  ])
-})
-
-test('setting a plugin to an object configures that plugin', () => {
-  const plugins = {
-    fontSize: options => {
-      return {
-        plugin: 'fontSize',
-        options,
-      }
-    },
-    display: options => {
-      return {
-        plugin: 'display',
-        options,
-      }
-    },
-    backgroundPosition: options => {
-      return {
-        plugin: 'backgroundPosition',
-        options,
-      }
-    },
-  }
-
-  const configuredPlugins = configurePlugins(plugins, {
-    fontSize: {
-      variants: ['responsive', 'hover'],
-      values: { '12': '12px', '14': '14px', '16': '16px' },
-    },
-    display: { variants: ['responsive'] },
-    backgroundPosition: {},
-  })
-
-  expect(configuredPlugins).toEqual([
-    {
-      plugin: 'fontSize',
-      options: {
-        variants: ['responsive', 'hover'],
-        values: { '12': '12px', '14': '14px', '16': '16px' },
-      },
-    },
-    { plugin: 'display', options: { variants: ['responsive'] } },
-    { plugin: 'backgroundPosition', options: {} },
-  ])
-})
-
-test('plugins are configured with their default configuration if no custom config is provided', () => {
-  const plugins = {
-    fontSize: options => {
-      return {
-        plugin: 'fontSize',
-        options,
-      }
-    },
-    display: options => {
-      return {
-        plugin: 'display',
-        options,
-      }
-    },
-    backgroundPosition: options => {
-      return {
-        plugin: 'backgroundPosition',
-        options,
-      }
-    },
+    fontSize: () => 'fontSize',
+    display: () => 'display',
+    backgroundPosition: () => 'backgroundPosition',
   }
 
   const configuredPlugins = configurePlugins(
-    plugins,
     {
-      fontSize: {
-        variants: ['responsive', 'hover'],
-        values: { '12': '12px', '14': '14px', '16': '16px' },
-      },
-      backgroundPosition: {},
+      display: false,
     },
-    {
-      display: { variants: ['responsive'] },
-    }
+    plugins
   )
 
-  expect(configuredPlugins).toEqual([
-    {
-      plugin: 'fontSize',
-      options: {
-        variants: ['responsive', 'hover'],
-        values: { '12': '12px', '14': '14px', '16': '16px' },
-      },
-    },
-    { plugin: 'display', options: { variants: ['responsive'] } },
-    { plugin: 'backgroundPosition', options: {} },
-  ])
-})
-
-test('custom plugin configuration overrides default plugin configuration', () => {
-  const plugins = {
-    fontSize: options => {
-      return {
-        plugin: 'fontSize',
-        options,
-      }
-    },
-    display: options => {
-      return {
-        plugin: 'display',
-        options,
-      }
-    },
-    backgroundPosition: options => {
-      return {
-        plugin: 'backgroundPosition',
-        options,
-      }
-    },
-  }
-
-  const configuredPlugins = configurePlugins(
-    plugins,
-    {
-      fontSize: {
-        variants: ['responsive', 'hover'],
-        values: { '12': '12px', '14': '14px', '16': '16px' },
-      },
-      display: { variants: ['responsive'] },
-      backgroundPosition: {},
-    },
-    {
-      fontSize: {
-        variants: ['focus', 'active'],
-        values: { sm: '.75rem', md: '1rem', lg: '1.5rem' },
-      },
-    }
-  )
-
-  expect(configuredPlugins).toEqual([
-    {
-      plugin: 'fontSize',
-      options: {
-        variants: ['responsive', 'hover'],
-        values: { '12': '12px', '14': '14px', '16': '16px' },
-      },
-    },
-    { plugin: 'display', options: { variants: ['responsive'] } },
-    { plugin: 'backgroundPosition', options: {} },
-  ])
+  expect(configuredPlugins).toEqual(['fontSize', 'backgroundPosition'])
 })
diff --git a/src/corePlugins.js b/src/corePlugins.js
index a1a586194..7711076af 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -61,25 +61,10 @@ import whitespace from './plugins/whitespace'
 import width from './plugins/width'
 import zIndex from './plugins/zIndex'
 
-import _ from 'lodash'
 import configurePlugins from './util/configurePlugins'
 
-function loadPlugins({ theme, variants, corePlugins }, plugins) {
-  const defaultCorePluginConfig = _.fromPairs(
-    Object.keys(plugins).map(plugin => [
-      plugin,
-      {
-        values: theme[plugin],
-        variants: variants[plugin],
-      },
-    ])
-  )
-
-  return configurePlugins(plugins, corePlugins, defaultCorePluginConfig)
-}
-
-export default function(config) {
-  return loadPlugins(config, {
+export default function({ corePlugins: corePluginConfig }) {
+  return configurePlugins(corePluginConfig, {
     preflight,
     listStyle,
     appearance,
diff --git a/src/util/configurePlugins.js b/src/util/configurePlugins.js
index 0d9e1d225..8cda0a189 100644
--- a/src/util/configurePlugins.js
+++ b/src/util/configurePlugins.js
@@ -1,11 +1,9 @@
-import _ from 'lodash'
-
-export default function(plugins, pluginConfig, defaultPluginConfig = {}) {
+export default function(pluginConfig, plugins) {
   return Object.keys(plugins)
     .filter(pluginName => {
       return pluginConfig[pluginName] !== false
     })
     .map(pluginName => {
-      return plugins[pluginName](_.get(pluginConfig, pluginName, defaultPluginConfig[pluginName]))
+      return plugins[pluginName]()
     })
 }