Merge pull request #696 from tailwindcss/source-options-from-config

Update plugins to source their config themselves

__tests__/applyAtRule.test.js

@@ -5,12 +5,14 @@ import resolveConfig from '../src/util/resolveConfig'
 import corePlugins from '../src/corePlugins'
 import defaultConfig from '../defaultConfig.stub.js'
 
+const resolvedDefaultConfig = resolveConfig([defaultConfig])
+
 const { utilities: defaultUtilities } = processPlugins(
-  corePlugins(resolveConfig([defaultConfig])),
-  defaultConfig
+  corePlugins(resolvedDefaultConfig),
+  resolvedDefaultConfig
 )
 
-function run(input, config = defaultConfig, utilities = defaultUtilities) {
+function run(input, config = resolvedDefaultConfig, utilities = defaultUtilities) {
   return postcss([substituteClassApplyAtRules(config, utilities)]).process(input, {
     from: undefined,
   })

__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/plugins/alignContent.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.content-center': {
@@ -18,7 +18,7 @@ export default function({ variants }) {
           'align-content': 'space-around',
         },
       },
-      variants
+      config('variants.alignContent')
     )
   }
 }

src/plugins/alignItems.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.items-start': {
@@ -18,7 +18,7 @@ export default function({ variants }) {
           'align-items': 'stretch',
         },
       },
-      variants
+      config('variants.alignItems')
     )
   }
 }

src/plugins/alignSelf.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.self-auto': {
@@ -18,7 +18,7 @@ export default function({ variants }) {
           'align-self': 'stretch',
         },
       },
-      variants
+      config('variants.alignSelf')
     )
   }
 }

src/plugins/appearance.js

@@ -1,10 +1,10 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.appearance-none': { appearance: 'none' },
       },
-      variants
+      config('variants.appearance')
     )
   }
 }

src/plugins/backgroundAttachment.js

@@ -1,12 +1,12 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.bg-fixed': { 'background-attachment': 'fixed' },
         '.bg-local': { 'background-attachment': 'local' },
         '.bg-scroll': { 'background-attachment': 'scroll' },
       },
-      variants
+      config('variants.backgroundAttachment')
     )
   }
 }

src/plugins/backgroundColor.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.backgroundColor'), (value, modifier) => {
         return [
           `.${e(`bg-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.backgroundColor'))
   }
 }

src/plugins/backgroundPosition.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.backgroundPosition'), (value, modifier) => {
         return [
           `.${e(`bg-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.backgroundPosition'))
   }
 }

src/plugins/backgroundRepeat.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.bg-repeat': { 'background-repeat': 'repeat' },
@@ -7,7 +7,7 @@ export default function({ variants }) {
         '.bg-repeat-x': { 'background-repeat': 'repeat-x' },
         '.bg-repeat-y': { 'background-repeat': 'repeat-y' },
       },
-      variants
+      config('variants.backgroundRepeat')
     )
   }
 }

src/plugins/backgroundSize.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.backgroundSize'), (value, modifier) => {
         return [
           `.${e(`bg-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.backgroundSize'))
   }
 }

src/plugins/borderCollapse.js

@@ -1,11 +1,11 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.border-collapse': { 'border-collapse': 'collapse' },
         '.border-separate': { 'border-collapse': 'separate' },
       },
-      variants
+      config('variants.borderCollapse')
     )
   }
 }

src/plugins/borderColor.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(_.omit(values, 'default'), (value, modifier) => {
+      _.map(_.omit(config('theme.borderColor'), 'default'), (value, modifier) => {
         return [
           `.${e(`border-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.borderColor'))
   }
 }

src/plugins/borderRadius.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const generators = [
       (value, modifier) => ({
         [`.${e(`rounded${modifier}`)}`]: { borderRadius: `${value}` },
@@ -33,11 +33,11 @@ export default function({ values, variants }) {
     ]
 
     const utilities = _.flatMap(generators, generator => {
-      return _.flatMap(values, (value, modifier) => {
+      return _.flatMap(config('theme.borderRadius'), (value, modifier) => {
         return generator(value, modifier === 'default' ? '' : `-${modifier}`)
       })
     })
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.borderRadius'))
   }
 }

src/plugins/borderStyle.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.border-solid': {
@@ -15,7 +15,7 @@ export default function({ variants }) {
           'border-style': 'none',
         },
       },
-      variants
+      config('variants.borderStyle')
     )
   }
 }

src/plugins/borderWidth.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const generators = [
       (value, modifier) => ({
         [`.${e(`border${modifier}`)}`]: { borderWidth: `${value}` },
@@ -15,11 +15,11 @@ export default function({ values, variants }) {
     ]
 
     const utilities = _.flatMap(generators, generator => {
-      return _.flatMap(values, (value, modifier) => {
+      return _.flatMap(config('theme.borderWidth'), (value, modifier) => {
         return generator(value, modifier === 'default' ? '' : `-${modifier}`)
       })
     })
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.borderWidth'))
   }
 }

src/plugins/boxShadow.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.boxShadow'), (value, modifier) => {
         const className = modifier === 'default' ? 'shadow' : `shadow-${modifier}`
         return [
           `.${e(className)}`,
@@ -14,6 +14,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.boxShadow'))
   }
 }

src/plugins/cursor.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.cursor'), (value, modifier) => {
         return [
           `.${e(`cursor-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.cursor'))
   }
 }

src/plugins/display.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.block': {
@@ -30,7 +30,7 @@ export default function({ variants }) {
           display: 'none',
         },
       },
-      variants
+      config('variants.display')
     )
   }
 }

src/plugins/fill.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.fill'), (value, modifier) => {
         return [
           `.${e(`fill-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.fill'))
   }
 }

src/plugins/flex.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.flex-1': {
@@ -15,7 +15,7 @@ export default function({ variants }) {
           flex: 'none',
         },
       },
-      variants
+      config('variants.flex')
     )
   }
 }

src/plugins/flexDirection.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.flex-row': {
@@ -15,7 +15,7 @@ export default function({ variants }) {
           'flex-direction': 'column-reverse',
         },
       },
-      variants
+      config('variants.flexDirection')
     )
   }
 }

src/plugins/flexGrow.js

@@ -1,10 +1,10 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     addUtilities(
       _.fromPairs(
-        _.map(values, (value, modifier) => {
+        _.map(config('theme.flexGrow'), (value, modifier) => {
           const className = modifier === 'default' ? 'flex-grow' : `flex-grow-${modifier}`
           return [
             `.${e(className)}`,
@@ -14,7 +14,7 @@ export default function({ values, variants }) {
           ]
         })
       ),
-      variants
+      config('variants.flexGrow')
     )
   }
 }

src/plugins/flexShrink.js

@@ -1,10 +1,10 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     addUtilities(
       _.fromPairs(
-        _.map(values, (value, modifier) => {
+        _.map(config('theme.flexShrink'), (value, modifier) => {
           const className = modifier === 'default' ? 'flex-shrink' : `flex-shrink-${modifier}`
           return [
             `.${e(className)}`,
@@ -14,7 +14,7 @@ export default function({ values, variants }) {
           ]
         })
       ),
-      variants
+      config('variants.flexShrink')
     )
   }
 }

src/plugins/flexWrap.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.flex-wrap': {
@@ -12,7 +12,7 @@ export default function({ variants }) {
           'flex-wrap': 'nowrap',
         },
       },
-      variants
+      config('variants.flexWrap')
     )
   }
 }

src/plugins/float.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.float-right': { float: 'right' },
@@ -11,7 +11,7 @@ export default function({ variants }) {
           clear: 'both',
         },
       },
-      variants
+      config('variants.float')
     )
   }
 }

src/plugins/fontFamily.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.fontFamily'), (value, modifier) => {
         return [
           `.${e(`font-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.fontFamily'))
   }
 }

src/plugins/fontSize.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.fontSize'), (value, modifier) => {
         return [
           `.${e(`text-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.fontSize'))
   }
 }

src/plugins/fontSmoothing.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.antialiased': {
@@ -11,7 +11,7 @@ export default function({ variants }) {
           '-moz-osx-font-smoothing': 'auto',
         },
       },
-      variants
+      config('variants.fontSmoothing')
     )
   }
 }

src/plugins/fontStyle.js

@@ -1,11 +1,11 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.italic': { 'font-style': 'italic' },
         '.not-italic': { 'font-style': 'normal' },
       },
-      variants
+      config('variants.fontStyle')
     )
   }
 }

src/plugins/fontWeight.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.fontWeight'), (value, modifier) => {
         return [
           `.${e(`font-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.fontWeight'))
   }
 }

src/plugins/height.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.height'), (value, modifier) => {
         return [
           `.${e(`h-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.height'))
   }
 }

src/plugins/justifyContent.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.justify-start': {
@@ -18,7 +18,7 @@ export default function({ variants }) {
           'justify-content': 'space-around',
         },
       },
-      variants
+      config('variants.justifyContent')
     )
   }
 }

src/plugins/letterSpacing.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.letterSpacing'), (value, modifier) => {
         return [
           `.tracking-${modifier}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.letterSpacing'))
   }
 }

src/plugins/lineHeight.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.lineHeight'), (value, modifier) => {
         return [
           `.${e(`leading-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.lineHeight'))
   }
 }

src/plugins/listStyle.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.list-reset': {
@@ -7,7 +7,7 @@ export default function({ variants }) {
           padding: '0',
         },
       },
-      variants
+      config('variants.listStyle')
     )
   }
 }

src/plugins/margin.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const generators = [
       (size, modifier) => ({
         [`.${e(`m-${modifier}`)}`]: { margin: `${size}` },
@@ -19,9 +19,9 @@ export default function({ values, variants }) {
     ]
 
     const utilities = _.flatMap(generators, generator => {
-      return _.flatMap(values, generator)
+      return _.flatMap(config('theme.margin'), generator)
     })
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.margin'))
   }
 }

src/plugins/maxHeight.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.maxHeight'), (value, modifier) => {
         return [
           `.${e(`max-h-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.maxHeight'))
   }
 }

src/plugins/maxWidth.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.maxWidth'), (value, modifier) => {
         return [
           `.${e(`max-w-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.maxWidth'))
   }
 }

src/plugins/minHeight.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.minHeight'), (value, modifier) => {
         return [
           `.${e(`min-h-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.minHeight'))
   }
 }

src/plugins/minWidth.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.minWidth'), (value, modifier) => {
         return [
           `.${e(`min-w-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.minWidth'))
   }
 }

src/plugins/negativeMargin.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const generators = [
       (size, modifier) => ({
         [`.${e(`-m-${modifier}`)}`]: { margin: `${size}` },
@@ -19,11 +19,11 @@ export default function({ values, variants }) {
     ]
 
     const utilities = _.flatMap(generators, generator => {
-      return _.flatMap(values, (size, modifier) => {
+      return _.flatMap(config('theme.negativeMargin'), (size, modifier) => {
         return generator(`${size}` === '0' ? `${size}` : `-${size}`, modifier)
       })
     })
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.negativeMargin'))
   }
 }

src/plugins/objectFit.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.object-contain': { 'object-fit': 'contain' },
@@ -8,7 +8,7 @@ export default function({ variants }) {
         '.object-none': { 'object-fit': 'none' },
         '.object-scale-down': { 'object-fit': 'scale-down' },
       },
-      variants
+      config('variants.objectFit')
     )
   }
 }

src/plugins/objectPosition.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.objectPosition'), (value, modifier) => {
         return [
           `.${e(`object-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.objectPosition'))
   }
 }

src/plugins/opacity.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.opacity'), (value, modifier) => {
         return [
           `.${e(`opacity-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.opacity'))
   }
 }

src/plugins/outline.js

@@ -1,10 +1,10 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.outline-none': { outline: '0' },
       },
-      variants
+      config('variants.outline')
     )
   }
 }

src/plugins/overflow.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.overflow-auto': { overflow: 'auto' },
@@ -17,7 +17,7 @@ export default function({ variants }) {
         '.scrolling-touch': { '-webkit-overflow-scrolling': 'touch' },
         '.scrolling-auto': { '-webkit-overflow-scrolling': 'auto' },
       },
-      variants
+      config('variants.overflow')
     )
   }
 }

src/plugins/padding.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const generators = [
       (size, modifier) => ({
         [`.${e(`p-${modifier}`)}`]: { padding: `${size}` },
@@ -19,9 +19,9 @@ export default function({ values, variants }) {
     ]
 
     const utilities = _.flatMap(generators, generator => {
-      return _.flatMap(values, generator)
+      return _.flatMap(config('theme.padding'), generator)
     })
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.padding'))
   }
 }

src/plugins/pointerEvents.js

@@ -1,11 +1,11 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.pointer-events-none': { 'pointer-events': 'none' },
         '.pointer-events-auto': { 'pointer-events': 'auto' },
       },
-      variants
+      config('variants.pointerEvents')
     )
   }
 }

src/plugins/position.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.static': { position: 'static' },
@@ -26,7 +26,7 @@ export default function({ variants }) {
         '.pin-b': { bottom: 0 },
         '.pin-l': { left: 0 },
       },
-      variants
+      config('variants.position')
     )
   }
 }

src/plugins/resize.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.resize-none': { resize: 'none' },
@@ -7,7 +7,7 @@ export default function({ variants }) {
         '.resize-x': { resize: 'horizontal' },
         '.resize': { resize: 'both' },
       },
-      variants
+      config('variants.resize')
     )
   }
 }

src/plugins/stroke.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.stroke'), (value, modifier) => {
         return [
           `.${e(`stroke-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.stroke'))
   }
 }

src/plugins/tableLayout.js

@@ -1,11 +1,11 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.table-auto': { 'table-layout': 'auto' },
         '.table-fixed': { 'table-layout': 'fixed' },
       },
-      variants
+      config('variants.tableLayout')
     )
   }
 }

src/plugins/textAlign.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.text-left': { 'text-align': 'left' },
@@ -7,7 +7,7 @@ export default function({ variants }) {
         '.text-right': { 'text-align': 'right' },
         '.text-justify': { 'text-align': 'justify' },
       },
-      variants
+      config('variants.textAlign')
     )
   }
 }

src/plugins/textColor.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.textColor'), (value, modifier) => {
         return [
           `.${e(`text-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.textColor'))
   }
 }

src/plugins/textDecoration.js

@@ -1,12 +1,12 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.underline': { 'text-decoration': 'underline' },
         '.line-through': { 'text-decoration': 'line-through' },
         '.no-underline': { 'text-decoration': 'none' },
       },
-      variants
+      config('variants.textDecoration')
     )
   }
 }

src/plugins/textTransform.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.uppercase': { 'text-transform': 'uppercase' },
@@ -7,7 +7,7 @@ export default function({ variants }) {
         '.capitalize': { 'text-transform': 'capitalize' },
         '.normal-case': { 'text-transform': 'none' },
       },
-      variants
+      config('variants.textTransform')
     )
   }
 }

src/plugins/userSelect.js

@@ -1,11 +1,11 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.select-none': { 'user-select': 'none' },
         '.select-text': { 'user-select': 'text' },
       },
-      variants
+      config('variants.userSelect')
     )
   }
 }

src/plugins/verticalAlign.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.align-baseline': { 'vertical-align': 'baseline' },
@@ -9,7 +9,7 @@ export default function({ variants }) {
         '.align-text-top': { 'vertical-align': 'text-top' },
         '.align-text-bottom': { 'vertical-align': 'text-bottom' },
       },
-      variants
+      config('variants.verticalAlign')
     )
   }
 }

src/plugins/visibility.js

@@ -1,11 +1,11 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.visible': { visibility: 'visible' },
         '.invisible': { visibility: 'hidden' },
       },
-      variants
+      config('variants.visibility')
     )
   }
 }

src/plugins/whitespace.js

@@ -1,5 +1,5 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     addUtilities(
       {
         '.whitespace-normal': { 'white-space': 'normal' },
@@ -20,7 +20,7 @@ export default function({ variants }) {
           'white-space': 'nowrap',
         },
       },
-      variants
+      config('variants.whitespace')
     )
   }
 }

src/plugins/width.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+export default function() {
+  return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.width'), (value, modifier) => {
         return [
           `.${e(`w-${modifier}`)}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.width'))
   }
 }

src/plugins/zIndex.js

@@ -1,9 +1,9 @@
 import _ from 'lodash'
 
-export default function({ values, variants }) {
-  return function({ addUtilities }) {
+export default function() {
+  return function({ addUtilities, config }) {
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(config('theme.zIndex'), (value, modifier) => {
         return [
           `.z-${modifier}`,
           {
@@ -13,6 +13,6 @@ export default function({ values, variants }) {
       })
     )
 
-    addUtilities(utilities, variants)
+    addUtilities(utilities, config('variants.zIndex'))
   }
 }

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