Make theme config directly accessible in the plugins

__tests__/plugins/backgroundColor.test.js

@@ -37,15 +37,17 @@ test('colors can be a nested object', () => {
     },
   }
 
+  const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
   const pluginApi = {
-    config: (key, defaultValue) => _.get(config, key, defaultValue),
+    config: getConfigValue,
     e: escapeClassName,
+    theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
     variants: (path, defaultValue) => {
       if (_.isArray(config.variants)) {
         return config.variants
       }
 
-      return _.get(config.variants, path, defaultValue)
+      return getConfigValue(`variants.${path}`, defaultValue)
     },
     addUtilities(utilities, variants) {
       addedUtilities.push({

__tests__/plugins/borderColor.test.js

@@ -37,15 +37,17 @@ test('colors can be a nested object', () => {
     },
   }
 
+  const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
   const pluginApi = {
-    config: (key, defaultValue) => _.get(config, key, defaultValue),
+    config: getConfigValue,
     e: escapeClassName,
+    theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
     variants: (path, defaultValue) => {
       if (_.isArray(config.variants)) {
         return config.variants
       }
 
-      return _.get(config.variants, path, defaultValue)
+      return getConfigValue(`variants.${path}`, defaultValue)
     },
     addUtilities(utilities, variants) {
       addedUtilities.push({

__tests__/plugins/fill.test.js

@@ -37,15 +37,17 @@ test('colors can be a nested object', () => {
     },
   }
 
+  const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
   const pluginApi = {
-    config: (key, defaultValue) => _.get(config, key, defaultValue),
+    config: getConfigValue,
     e: escapeClassName,
+    theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
     variants: (path, defaultValue) => {
       if (_.isArray(config.variants)) {
         return config.variants
       }
 
-      return _.get(config.variants, path, defaultValue)
+      return getConfigValue(`variants.${path}`, defaultValue)
     },
     addUtilities(utilities, variants) {
       addedUtilities.push({

__tests__/plugins/stroke.test.js

@@ -37,15 +37,17 @@ test('colors can be a nested object', () => {
     },
   }
 
+  const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
   const pluginApi = {
-    config: (key, defaultValue) => _.get(config, key, defaultValue),
+    config: getConfigValue,
     e: escapeClassName,
+    theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
     variants: (path, defaultValue) => {
       if (_.isArray(config.variants)) {
         return config.variants
       }
 
-      return _.get(config.variants, path, defaultValue)
+      return getConfigValue(`variants.${path}`, defaultValue)
     },
     addUtilities(utilities, variants) {
       addedUtilities.push({

__tests__/plugins/textColor.test.js

@@ -37,15 +37,17 @@ test('colors can be a nested object', () => {
     },
   }
 
+  const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
   const pluginApi = {
-    config: (key, defaultValue) => _.get(config, key, defaultValue),
+    config: getConfigValue,
     e: escapeClassName,
+    theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
     variants: (path, defaultValue) => {
       if (_.isArray(config.variants)) {
         return config.variants
       }
 
-      return _.get(config.variants, path, defaultValue)
+      return getConfigValue(`variants.${path}`, defaultValue)
     },
     addUtilities(utilities, variants) {
       addedUtilities.push({

src/plugins/backgroundColor.js

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

src/plugins/backgroundPosition.js

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

src/plugins/backgroundSize.js

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

src/plugins/borderColor.js

@@ -2,8 +2,8 @@ import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
 
 export default function() {
-  return function({ addUtilities, e, config, variants }) {
-    const colors = flattenColorPalette(config('theme.borderColor'))
+  return function({ addUtilities, e, theme, variants }) {
+    const colors = flattenColorPalette(theme('borderColor'))
 
     const utilities = _.fromPairs(
       _.map(_.omit(colors, 'default'), (value, modifier) => {

src/plugins/borderRadius.js

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

src/plugins/borderWidth.js

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

src/plugins/boxShadow.js

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

src/plugins/container.js

@@ -23,8 +23,8 @@ function extractMinWidths(breakpoints) {
 }
 
 module.exports = function() {
-  return function({ addComponents, config }) {
-    const minWidths = extractMinWidths(config('theme.container.screens', config('theme.screens')))
+  return function({ addComponents, theme }) {
+    const minWidths = extractMinWidths(theme('container.screens', theme('screens')))
 
     const atRules = _.map(minWidths, minWidth => {
       return {
@@ -40,13 +40,11 @@ module.exports = function() {
       {
         '.container': Object.assign(
           { width: '100%' },
-          config('theme.container.center', false)
-            ? { marginRight: 'auto', marginLeft: 'auto' }
-            : {},
-          _.has(config('theme.container', {}), 'padding')
+          theme('container.center', false) ? { marginRight: 'auto', marginLeft: 'auto' } : {},
+          _.has(theme('container', {}), 'padding')
             ? {
-                paddingRight: config('theme.container.padding'),
-                paddingLeft: config('theme.container.padding'),
+                paddingRight: theme('container.padding'),
+                paddingLeft: theme('container.padding'),
               }
             : {}
         ),

src/plugins/cursor.js

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

src/plugins/fill.js

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

src/plugins/flex.js

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

src/plugins/flexGrow.js

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

src/plugins/flexShrink.js

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

src/plugins/fontFamily.js

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

src/plugins/fontSize.js

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

src/plugins/fontWeight.js

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

src/plugins/height.js

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

src/plugins/inset.js

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

src/plugins/letterSpacing.js

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

src/plugins/lineHeight.js

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

src/plugins/listStyleType.js

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

src/plugins/margin.js

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

src/plugins/maxHeight.js

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

src/plugins/maxWidth.js

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

src/plugins/minHeight.js

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

src/plugins/minWidth.js

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

src/plugins/negativeMargin.js

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

src/plugins/objectPosition.js

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

src/plugins/opacity.js

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

src/plugins/padding.js

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

src/plugins/stroke.js

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

src/plugins/textColor.js

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

src/plugins/width.js

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

src/plugins/zIndex.js

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

src/util/processPlugins.js

@@ -24,17 +24,19 @@ export default function(plugins, config) {
   const applyConfiguredPrefix = selector => {
     return prefixSelector(config.prefix, selector)
   }
+  const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
 
   plugins.forEach(plugin => {
     plugin({
       postcss,
-      config: (path, defaultValue) => _.get(config, path, defaultValue),
+      config: getConfigValue,
+      theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
       variants: (path, defaultValue) => {
         if (_.isArray(config.variants)) {
           return config.variants
         }
 
-        return _.get(config.variants, path, defaultValue)
+        return getConfigValue(`variants.${path}`, defaultValue)
       },
       e: escapeClassName,
       prefix: applyConfiguredPrefix,