From d4b2b8b755f7393f8989ef574aed5bb45c731d58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Thu, 18 Apr 2019 23:29:07 +0200 Subject: [PATCH] Make theme config directly accessible in the plugins --- __tests__/plugins/backgroundColor.test.js | 6 ++++-- __tests__/plugins/borderColor.test.js | 6 ++++-- __tests__/plugins/fill.test.js | 6 ++++-- __tests__/plugins/stroke.test.js | 6 ++++-- __tests__/plugins/textColor.test.js | 6 ++++-- src/plugins/backgroundColor.js | 4 ++-- src/plugins/backgroundPosition.js | 4 ++-- src/plugins/backgroundSize.js | 4 ++-- src/plugins/borderColor.js | 4 ++-- src/plugins/borderRadius.js | 4 ++-- src/plugins/borderWidth.js | 4 ++-- src/plugins/boxShadow.js | 4 ++-- src/plugins/container.js | 14 ++++++-------- src/plugins/cursor.js | 4 ++-- src/plugins/fill.js | 4 ++-- src/plugins/flex.js | 4 ++-- src/plugins/flexGrow.js | 4 ++-- src/plugins/flexShrink.js | 4 ++-- src/plugins/fontFamily.js | 4 ++-- src/plugins/fontSize.js | 4 ++-- src/plugins/fontWeight.js | 4 ++-- src/plugins/height.js | 4 ++-- src/plugins/inset.js | 4 ++-- src/plugins/letterSpacing.js | 4 ++-- src/plugins/lineHeight.js | 4 ++-- src/plugins/listStyleType.js | 4 ++-- src/plugins/margin.js | 4 ++-- src/plugins/maxHeight.js | 4 ++-- src/plugins/maxWidth.js | 4 ++-- src/plugins/minHeight.js | 4 ++-- src/plugins/minWidth.js | 4 ++-- src/plugins/negativeMargin.js | 4 ++-- src/plugins/objectPosition.js | 4 ++-- src/plugins/opacity.js | 4 ++-- src/plugins/padding.js | 4 ++-- src/plugins/stroke.js | 4 ++-- src/plugins/textColor.js | 4 ++-- src/plugins/width.js | 4 ++-- src/plugins/zIndex.js | 4 ++-- src/util/processPlugins.js | 6 ++++-- 40 files changed, 96 insertions(+), 86 deletions(-) diff --git a/__tests__/plugins/backgroundColor.test.js b/__tests__/plugins/backgroundColor.test.js index d10c0b897..0de33e04c 100644 --- a/__tests__/plugins/backgroundColor.test.js +++ b/__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({ diff --git a/__tests__/plugins/borderColor.test.js b/__tests__/plugins/borderColor.test.js index f5c7e7d82..3c9a47683 100644 --- a/__tests__/plugins/borderColor.test.js +++ b/__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({ diff --git a/__tests__/plugins/fill.test.js b/__tests__/plugins/fill.test.js index 274cf0a13..a2a0c6327 100644 --- a/__tests__/plugins/fill.test.js +++ b/__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({ diff --git a/__tests__/plugins/stroke.test.js b/__tests__/plugins/stroke.test.js index 5df9eb014..047907741 100644 --- a/__tests__/plugins/stroke.test.js +++ b/__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({ diff --git a/__tests__/plugins/textColor.test.js b/__tests__/plugins/textColor.test.js index 709c034c6..078277dcb 100644 --- a/__tests__/plugins/textColor.test.js +++ b/__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({ diff --git a/src/plugins/backgroundColor.js b/src/plugins/backgroundColor.js index 32f19c6ab..f532dfe40 100644 --- a/src/plugins/backgroundColor.js +++ b/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}`)}`, { diff --git a/src/plugins/backgroundPosition.js b/src/plugins/backgroundPosition.js index c39bf439e..88c2e5d8a 100644 --- a/src/plugins/backgroundPosition.js +++ b/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}`)}`, { diff --git a/src/plugins/backgroundSize.js b/src/plugins/backgroundSize.js index c662e8367..a03f90a51 100644 --- a/src/plugins/backgroundSize.js +++ b/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}`)}`, { diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js index d67649753..112e6555c 100644 --- a/src/plugins/borderColor.js +++ b/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) => { diff --git a/src/plugins/borderRadius.js b/src/plugins/borderRadius.js index a06d2c5c3..e491d30f6 100644 --- a/src/plugins/borderRadius.js +++ b/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}`) }) }) diff --git a/src/plugins/borderWidth.js b/src/plugins/borderWidth.js index c56e69586..d84fb440e 100644 --- a/src/plugins/borderWidth.js +++ b/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}`) }) }) diff --git a/src/plugins/boxShadow.js b/src/plugins/boxShadow.js index 92632580b..abfd9097e 100644 --- a/src/plugins/boxShadow.js +++ b/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)}`, diff --git a/src/plugins/container.js b/src/plugins/container.js index 6beb6e50a..33f6e2144 100644 --- a/src/plugins/container.js +++ b/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'), } : {} ), diff --git a/src/plugins/cursor.js b/src/plugins/cursor.js index 2421852a6..a0006dc63 100644 --- a/src/plugins/cursor.js +++ b/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}`)}`, { diff --git a/src/plugins/fill.js b/src/plugins/fill.js index 9c9ed686a..93b6804e3 100644 --- a/src/plugins/fill.js +++ b/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}`)}`, { diff --git a/src/plugins/flex.js b/src/plugins/flex.js index d8c1087a7..0f637dad5 100644 --- a/src/plugins/flex.js +++ b/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}`)}`, { diff --git a/src/plugins/flexGrow.js b/src/plugins/flexGrow.js index f3a004a6a..ae9e04921 100644 --- a/src/plugins/flexGrow.js +++ b/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)}`, diff --git a/src/plugins/flexShrink.js b/src/plugins/flexShrink.js index bf866dfb6..073836d28 100644 --- a/src/plugins/flexShrink.js +++ b/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)}`, diff --git a/src/plugins/fontFamily.js b/src/plugins/fontFamily.js index cf10959d3..8b8b5ebb7 100644 --- a/src/plugins/fontFamily.js +++ b/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}`)}`, { diff --git a/src/plugins/fontSize.js b/src/plugins/fontSize.js index 7a83a554b..709cb0371 100644 --- a/src/plugins/fontSize.js +++ b/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}`)}`, { diff --git a/src/plugins/fontWeight.js b/src/plugins/fontWeight.js index aaf21c134..3cc80ebdc 100644 --- a/src/plugins/fontWeight.js +++ b/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}`)}`, { diff --git a/src/plugins/height.js b/src/plugins/height.js index 6e05b6aeb..bf7da12b1 100644 --- a/src/plugins/height.js +++ b/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}`)}`, { diff --git a/src/plugins/inset.js b/src/plugins/inset.js index bc75a144b..4787ec2da 100644 --- a/src/plugins/inset.js +++ b/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')) diff --git a/src/plugins/letterSpacing.js b/src/plugins/letterSpacing.js index d9e248a12..7efeaa38f 100644 --- a/src/plugins/letterSpacing.js +++ b/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}`)}`, { diff --git a/src/plugins/lineHeight.js b/src/plugins/lineHeight.js index bbd582adc..ac9d4fc5d 100644 --- a/src/plugins/lineHeight.js +++ b/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}`)}`, { diff --git a/src/plugins/listStyleType.js b/src/plugins/listStyleType.js index 1deb93f0c..4caa59c80 100644 --- a/src/plugins/listStyleType.js +++ b/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}`)}`, { diff --git a/src/plugins/margin.js b/src/plugins/margin.js index 8ba48333e..7e912e0e6 100644 --- a/src/plugins/margin.js +++ b/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')) diff --git a/src/plugins/maxHeight.js b/src/plugins/maxHeight.js index e3d710fef..0c2a199fb 100644 --- a/src/plugins/maxHeight.js +++ b/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}`)}`, { diff --git a/src/plugins/maxWidth.js b/src/plugins/maxWidth.js index 4a765c251..b893fe3ee 100644 --- a/src/plugins/maxWidth.js +++ b/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}`)}`, { diff --git a/src/plugins/minHeight.js b/src/plugins/minHeight.js index 0b246ebbd..5f42806ad 100644 --- a/src/plugins/minHeight.js +++ b/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}`)}`, { diff --git a/src/plugins/minWidth.js b/src/plugins/minWidth.js index 065c9081c..4dc351065 100644 --- a/src/plugins/minWidth.js +++ b/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}`)}`, { diff --git a/src/plugins/negativeMargin.js b/src/plugins/negativeMargin.js index ef8f168f6..559982eab 100644 --- a/src/plugins/negativeMargin.js +++ b/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) }) }) diff --git a/src/plugins/objectPosition.js b/src/plugins/objectPosition.js index d34bc268d..10cb8b18a 100644 --- a/src/plugins/objectPosition.js +++ b/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}`)}`, { diff --git a/src/plugins/opacity.js b/src/plugins/opacity.js index c4aa1804d..b6745b4b8 100644 --- a/src/plugins/opacity.js +++ b/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}`)}`, { diff --git a/src/plugins/padding.js b/src/plugins/padding.js index ca5eef314..578efb1ce 100644 --- a/src/plugins/padding.js +++ b/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')) diff --git a/src/plugins/stroke.js b/src/plugins/stroke.js index a3fe71d39..0dd862a29 100644 --- a/src/plugins/stroke.js +++ b/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}`)}`, { diff --git a/src/plugins/textColor.js b/src/plugins/textColor.js index 9db52320a..0b22dd7d3 100644 --- a/src/plugins/textColor.js +++ b/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}`)}`, { diff --git a/src/plugins/width.js b/src/plugins/width.js index d4ccba3b5..0492ef3a9 100644 --- a/src/plugins/width.js +++ b/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}`)}`, { diff --git a/src/plugins/zIndex.js b/src/plugins/zIndex.js index 7fd0a2096..0d049677f 100644 --- a/src/plugins/zIndex.js +++ b/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}`, { diff --git a/src/util/processPlugins.js b/src/util/processPlugins.js index c0804a9c9..a607e8472 100644 --- a/src/util/processPlugins.js +++ b/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,