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

@@ -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'])
 })

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,

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]()
     })
 }