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