From 0824bba0113de976c51fc1fd2910fd9abc52fbfc Mon Sep 17 00:00:00 2001 From: Nikita Dyomin Date: Wed, 24 Jul 2019 17:44:20 +0200 Subject: [PATCH 1/3] added ability of theme function to return default value of config object instead of [object Object] --- src/lib/evaluateTailwindFunctions.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/lib/evaluateTailwindFunctions.js b/src/lib/evaluateTailwindFunctions.js index 5f03bb95b21b..3710bace8d81 100644 --- a/src/lib/evaluateTailwindFunctions.js +++ b/src/lib/evaluateTailwindFunctions.js @@ -6,6 +6,9 @@ export default function(config) { functions: { theme: (path, ...defaultValue) => { return _.thru(_.get(config.theme, _.trim(path, `'"`), defaultValue), value => { + if (value.hasOwnProperty('default')) { + return value.default + } return Array.isArray(value) ? value.join(', ') : value }) }, From de73ecf566fedcedc08be86153ff9c8291c9e107 Mon Sep 17 00:00:00 2001 From: Nikita Dyomin Date: Mon, 29 Jul 2019 10:44:06 +0200 Subject: [PATCH 2/3] updated configs `theme` function to be same as postcss one, switched plugins to using `config` function to fetch raw value --- 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/objectPosition.js | 4 ++-- src/plugins/opacity.js | 4 ++-- src/plugins/order.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 | 10 +++++++++- 35 files changed, 83 insertions(+), 73 deletions(-) diff --git a/src/plugins/backgroundColor.js b/src/plugins/backgroundColor.js index f532dfe403e4..32f19c6abd98 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => { + _.map(flattenColorPalette(config('theme.backgroundColor')), (value, modifier) => { return [ `.${e(`bg-${modifier}`)}`, { diff --git a/src/plugins/backgroundPosition.js b/src/plugins/backgroundPosition.js index 88c2e5d8a827..c39bf439e9b1 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('backgroundPosition'), (value, modifier) => { + _.map(config('theme.backgroundPosition'), (value, modifier) => { return [ `.${e(`bg-${modifier}`)}`, { diff --git a/src/plugins/backgroundSize.js b/src/plugins/backgroundSize.js index a03f90a519ac..c662e8367309 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('backgroundSize'), (value, modifier) => { + _.map(config('theme.backgroundSize'), (value, modifier) => { return [ `.${e(`bg-${modifier}`)}`, { diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js index 112e6555cff7..d67649753a49 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, theme, variants }) { - const colors = flattenColorPalette(theme('borderColor')) + return function({ addUtilities, e, config, variants }) { + const colors = flattenColorPalette(config('theme.borderColor')) const utilities = _.fromPairs( _.map(_.omit(colors, 'default'), (value, modifier) => { diff --git a/src/plugins/borderRadius.js b/src/plugins/borderRadius.js index e491d30f6750..a06d2c5c3a57 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const generators = [ (value, modifier) => ({ [`.${e(`rounded${modifier}`)}`]: { borderRadius: `${value}` }, @@ -33,7 +33,7 @@ export default function() { ] const utilities = _.flatMap(generators, generator => { - return _.flatMap(theme('borderRadius'), (value, modifier) => { + return _.flatMap(config('theme.borderRadius'), (value, modifier) => { return generator(value, modifier === 'default' ? '' : `-${modifier}`) }) }) diff --git a/src/plugins/borderWidth.js b/src/plugins/borderWidth.js index d84fb440eb97..c56e695869db 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const generators = [ (value, modifier) => ({ [`.${e(`border${modifier}`)}`]: { borderWidth: `${value}` }, @@ -15,7 +15,7 @@ export default function() { ] const utilities = _.flatMap(generators, generator => { - return _.flatMap(theme('borderWidth'), (value, modifier) => { + return _.flatMap(config('theme.borderWidth'), (value, modifier) => { return generator(value, modifier === 'default' ? '' : `-${modifier}`) }) }) diff --git a/src/plugins/boxShadow.js b/src/plugins/boxShadow.js index abfd9097ec66..92632580b36e 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('boxShadow'), (value, modifier) => { + _.map(config('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 269e6da297e1..9c7ca73abc54 100644 --- a/src/plugins/container.js +++ b/src/plugins/container.js @@ -23,8 +23,8 @@ function extractMinWidths(breakpoints) { } module.exports = function() { - return function({ addComponents, theme }) { - const minWidths = extractMinWidths(theme('container.screens', theme('screens'))) + return function({ addComponents, config }) { + const minWidths = extractMinWidths(config('theme.container.screens', config('theme.screens'))) const atRules = _(minWidths) .sortBy(minWidth => parseInt(minWidth)) @@ -44,11 +44,13 @@ module.exports = function() { { '.container': Object.assign( { width: '100%' }, - theme('container.center', false) ? { marginRight: 'auto', marginLeft: 'auto' } : {}, - _.has(theme('container', {}), 'padding') + config('theme.container.center', false) + ? { marginRight: 'auto', marginLeft: 'auto' } + : {}, + _.has(config('theme.container', {}), 'padding') ? { - paddingRight: theme('container.padding'), - paddingLeft: theme('container.padding'), + paddingRight: config('theme.container.padding'), + paddingLeft: config('theme.container.padding'), } : {} ), diff --git a/src/plugins/cursor.js b/src/plugins/cursor.js index a0006dc631ef..2421852a61eb 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('cursor'), (value, modifier) => { + _.map(config('theme.cursor'), (value, modifier) => { return [ `.${e(`cursor-${modifier}`)}`, { diff --git a/src/plugins/fill.js b/src/plugins/fill.js index 93b6804e38e5..9c9ed686ab4e 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(flattenColorPalette(theme('fill')), (value, modifier) => { + _.map(flattenColorPalette(config('theme.fill')), (value, modifier) => { return [ `.${e(`fill-${modifier}`)}`, { diff --git a/src/plugins/flex.js b/src/plugins/flex.js index 0f637dad5ca3..d8c1087a777f 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('flex'), (value, modifier) => { + _.map(config('theme.flex'), (value, modifier) => { return [ `.${e(`flex-${modifier}`)}`, { diff --git a/src/plugins/flexGrow.js b/src/plugins/flexGrow.js index ae9e04921358..f3a004a6a977 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { addUtilities( _.fromPairs( - _.map(theme('flexGrow'), (value, modifier) => { + _.map(config('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 073836d2847a..bf866dfb65a6 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { addUtilities( _.fromPairs( - _.map(theme('flexShrink'), (value, modifier) => { + _.map(config('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 b682984d426a..b34095e0f9c1 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('fontFamily'), (value, modifier) => { + _.map(config('theme.fontFamily'), (value, modifier) => { return [ `.${e(`font-${modifier}`)}`, { diff --git a/src/plugins/fontSize.js b/src/plugins/fontSize.js index 709cb0371995..7a83a554bb84 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('fontSize'), (value, modifier) => { + _.map(config('theme.fontSize'), (value, modifier) => { return [ `.${e(`text-${modifier}`)}`, { diff --git a/src/plugins/fontWeight.js b/src/plugins/fontWeight.js index 3cc80ebdc445..aaf21c13428f 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('fontWeight'), (value, modifier) => { + _.map(config('theme.fontWeight'), (value, modifier) => { return [ `.${e(`font-${modifier}`)}`, { diff --git a/src/plugins/height.js b/src/plugins/height.js index bf7da12b162d..6e05b6aeb525 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('height'), (value, modifier) => { + _.map(config('theme.height'), (value, modifier) => { return [ `.${e(`h-${modifier}`)}`, { diff --git a/src/plugins/inset.js b/src/plugins/inset.js index 10abc55a46b6..21367353cae4 100644 --- a/src/plugins/inset.js +++ b/src/plugins/inset.js @@ -2,7 +2,7 @@ import _ from 'lodash' import prefixNegativeModifiers from '../util/prefixNegativeModifiers' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const generators = [ (size, modifier) => ({ [`.${e(prefixNegativeModifiers('inset', modifier))}`]: { @@ -31,7 +31,7 @@ export default function() { ] const utilities = _.flatMap(generators, generator => { - return _.flatMap(theme('inset'), generator) + return _.flatMap(config('theme.inset'), generator) }) addUtilities(utilities, variants('inset')) diff --git a/src/plugins/letterSpacing.js b/src/plugins/letterSpacing.js index 7efeaa38fed9..d9e248a12d51 100644 --- a/src/plugins/letterSpacing.js +++ b/src/plugins/letterSpacing.js @@ -1,9 +1,9 @@ import _ from 'lodash' export default function() { - return function({ addUtilities, theme, variants, e }) { + return function({ addUtilities, config, variants, e }) { const utilities = _.fromPairs( - _.map(theme('letterSpacing'), (value, modifier) => { + _.map(config('theme.letterSpacing'), (value, modifier) => { return [ `.${e(`tracking-${modifier}`)}`, { diff --git a/src/plugins/lineHeight.js b/src/plugins/lineHeight.js index ac9d4fc5d412..bbd582adc5bf 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('lineHeight'), (value, modifier) => { + _.map(config('theme.lineHeight'), (value, modifier) => { return [ `.${e(`leading-${modifier}`)}`, { diff --git a/src/plugins/listStyleType.js b/src/plugins/listStyleType.js index 4caa59c80ad6..1deb93f0c424 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('listStyleType'), (value, modifier) => { + _.map(config('theme.listStyleType'), (value, modifier) => { return [ `.${e(`list-${modifier}`)}`, { diff --git a/src/plugins/margin.js b/src/plugins/margin.js index 67399d489b9d..1c6ab073e875 100644 --- a/src/plugins/margin.js +++ b/src/plugins/margin.js @@ -2,7 +2,7 @@ import _ from 'lodash' import prefixNegativeModifiers from '../util/prefixNegativeModifiers' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const generators = [ (size, modifier) => ({ [`.${e(prefixNegativeModifiers('m', modifier))}`]: { margin: `${size}` }, @@ -26,7 +26,7 @@ export default function() { ] const utilities = _.flatMap(generators, generator => { - return _.flatMap(theme('margin'), generator) + return _.flatMap(config('theme.margin'), generator) }) addUtilities(utilities, variants('margin')) diff --git a/src/plugins/maxHeight.js b/src/plugins/maxHeight.js index 0c2a199fbd76..e3d710fefc22 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('maxHeight'), (value, modifier) => { + _.map(config('theme.maxHeight'), (value, modifier) => { return [ `.${e(`max-h-${modifier}`)}`, { diff --git a/src/plugins/maxWidth.js b/src/plugins/maxWidth.js index b893fe3eee20..4a765c251cad 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('maxWidth'), (value, modifier) => { + _.map(config('theme.maxWidth'), (value, modifier) => { return [ `.${e(`max-w-${modifier}`)}`, { diff --git a/src/plugins/minHeight.js b/src/plugins/minHeight.js index 5f42806ad3ff..0b246ebbddc9 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('minHeight'), (value, modifier) => { + _.map(config('theme.minHeight'), (value, modifier) => { return [ `.${e(`min-h-${modifier}`)}`, { diff --git a/src/plugins/minWidth.js b/src/plugins/minWidth.js index 4dc351065a41..065c9081c6d9 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('minWidth'), (value, modifier) => { + _.map(config('theme.minWidth'), (value, modifier) => { return [ `.${e(`min-w-${modifier}`)}`, { diff --git a/src/plugins/objectPosition.js b/src/plugins/objectPosition.js index 10cb8b18a45c..d34bc268de6f 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('objectPosition'), (value, modifier) => { + _.map(config('theme.objectPosition'), (value, modifier) => { return [ `.${e(`object-${modifier}`)}`, { diff --git a/src/plugins/opacity.js b/src/plugins/opacity.js index b6745b4b87a5..c4aa1804d0f7 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('opacity'), (value, modifier) => { + _.map(config('theme.opacity'), (value, modifier) => { return [ `.${e(`opacity-${modifier}`)}`, { diff --git a/src/plugins/order.js b/src/plugins/order.js index 1c5dd9279e36..ea1a276e794d 100644 --- a/src/plugins/order.js +++ b/src/plugins/order.js @@ -1,9 +1,9 @@ import _ from 'lodash' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('order'), (value, modifier) => { + _.map(config('theme.order'), (value, modifier) => { return [ `.${e(`order-${modifier}`)}`, { diff --git a/src/plugins/padding.js b/src/plugins/padding.js index 578efb1ce389..ca5eef314783 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const generators = [ (size, modifier) => ({ [`.${e(`p-${modifier}`)}`]: { padding: `${size}` }, @@ -19,7 +19,7 @@ export default function() { ] const utilities = _.flatMap(generators, generator => { - return _.flatMap(theme('padding'), generator) + return _.flatMap(config('theme.padding'), generator) }) addUtilities(utilities, variants('padding')) diff --git a/src/plugins/stroke.js b/src/plugins/stroke.js index 0dd862a29a5a..a3fe71d39620 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(flattenColorPalette(theme('stroke')), (value, modifier) => { + _.map(flattenColorPalette(config('theme.stroke')), (value, modifier) => { return [ `.${e(`stroke-${modifier}`)}`, { diff --git a/src/plugins/textColor.js b/src/plugins/textColor.js index 0b22dd7d3548..9db52320a4e8 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(flattenColorPalette(theme('textColor')), (value, modifier) => { + _.map(flattenColorPalette(config('theme.textColor')), (value, modifier) => { return [ `.${e(`text-${modifier}`)}`, { diff --git a/src/plugins/width.js b/src/plugins/width.js index 0492ef3a918b..d4ccba3b51ce 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, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('width'), (value, modifier) => { + _.map(config('theme.width'), (value, modifier) => { return [ `.${e(`w-${modifier}`)}`, { diff --git a/src/plugins/zIndex.js b/src/plugins/zIndex.js index 479463865ab5..ecd7f8f9154a 100644 --- a/src/plugins/zIndex.js +++ b/src/plugins/zIndex.js @@ -2,9 +2,9 @@ import _ from 'lodash' import prefixNegativeModifiers from '../util/prefixNegativeModifiers' export default function() { - return function({ addUtilities, e, theme, variants }) { + return function({ addUtilities, e, config, variants }) { const utilities = _.fromPairs( - _.map(theme('zIndex'), (value, modifier) => { + _.map(config('theme.zIndex'), (value, modifier) => { return [ `.${e(prefixNegativeModifiers('z', modifier))}`, { diff --git a/src/util/processPlugins.js b/src/util/processPlugins.js index 95620fc171c1..19d1cef9c15f 100644 --- a/src/util/processPlugins.js +++ b/src/util/processPlugins.js @@ -30,7 +30,15 @@ export default function(plugins, config) { plugin({ postcss, config: getConfigValue, - theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue), + theme: (path, defaultValue) => { + let value = getConfigValue(`theme.${path}`, defaultValue) + + if (value && value.hasOwnProperty('default')) { + return value.default + } else { + return value + } + }, variants: (path, defaultValue) => { if (Array.isArray(config.variants)) { return config.variants From 2bc1be10d4afe6765d1d7869431dda0a88cb20b7 Mon Sep 17 00:00:00 2001 From: Nikita Dyomin Date: Mon, 29 Jul 2019 10:45:00 +0200 Subject: [PATCH 3/3] ability to add user defined custom css functions in tailwind config --- src/lib/evaluateTailwindFunctions.js | 3 ++- src/processTailwindFeatures.js | 2 +- src/util/processPlugins.js | 5 +++++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/lib/evaluateTailwindFunctions.js b/src/lib/evaluateTailwindFunctions.js index 3710bace8d81..0d2bc16b463b 100644 --- a/src/lib/evaluateTailwindFunctions.js +++ b/src/lib/evaluateTailwindFunctions.js @@ -1,7 +1,7 @@ import _ from 'lodash' import functions from 'postcss-functions' -export default function(config) { +export default function(config, postcssFunctions = []) { return functions({ functions: { theme: (path, ...defaultValue) => { @@ -12,6 +12,7 @@ export default function(config) { return Array.isArray(value) ? value.join(', ') : value }) }, + ...postcssFunctions, }, }) } diff --git a/src/processTailwindFeatures.js b/src/processTailwindFeatures.js index 61fecaf12280..199761ff2616 100644 --- a/src/processTailwindFeatures.js +++ b/src/processTailwindFeatures.js @@ -18,7 +18,7 @@ export default function(getConfig) { return postcss([ substituteTailwindAtRules(config, processedPlugins), - evaluateTailwindFunctions(config), + evaluateTailwindFunctions(config, processedPlugins.postcssFunctions), substituteVariantsAtRules(config, processedPlugins), substituteResponsiveAtRules(config), substituteScreenAtRules(config), diff --git a/src/util/processPlugins.js b/src/util/processPlugins.js index 19d1cef9c15f..e0a764dc47e5 100644 --- a/src/util/processPlugins.js +++ b/src/util/processPlugins.js @@ -19,6 +19,7 @@ export default function(plugins, config) { const pluginBaseStyles = [] const pluginComponents = [] const pluginUtilities = [] + const pluginFunctions = [] const pluginVariantGenerators = {} const applyConfiguredPrefix = selector => { @@ -88,6 +89,9 @@ export default function(plugins, config) { addVariant: (name, generator) => { pluginVariantGenerators[name] = generateVariantFunction(generator) }, + addFunction: (name, executor) => { + pluginFunctions[name] = executor + }, }) }) @@ -96,5 +100,6 @@ export default function(plugins, config) { components: pluginComponents, utilities: pluginUtilities, variantGenerators: pluginVariantGenerators, + postcssFunctions: pluginFunctions, } }