diff --git a/package.json b/package.json index 9906b1ac4..751f68bb6 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "normalize.css": "^6.0.0", "postcss": "^6.0.9", "postcss-import": "^11.0.0", + "postcss-functions": "^3.0.0", "stylefmt": "^6.0.0", "suitcss-base": "^3.0.0" }, diff --git a/src/generators/backgroundColors.js b/src/generators/backgroundColors.js index 2e2e90d26..b398823d9 100644 --- a/src/generators/backgroundColors.js +++ b/src/generators/backgroundColors.js @@ -1,10 +1,9 @@ import _ from 'lodash' import defineClass from '../util/defineClass' -import normalizeColorList from '../util/normalizeColorList' import hoverable from '../util/hoverable' -export default function ({ colors, backgrounds }) { - return hoverable(_.map(normalizeColorList(backgrounds.colors, colors), (color, className) => { +export default function ({ backgrounds }) { + return hoverable(_.map(backgrounds.colors, (color, className) => { return defineClass(`bg-${className}`, { 'background-color': color, }) diff --git a/src/generators/borderColors.js b/src/generators/borderColors.js index 6f7f1ddd7..32b8fb850 100644 --- a/src/generators/borderColors.js +++ b/src/generators/borderColors.js @@ -1,12 +1,9 @@ import _ from 'lodash' import defineClass from '../util/defineClass' -import normalizeColorList from '../util/normalizeColorList' import hoverable from '../util/hoverable' export default function ({ colors, borders }) { - const borderColors = normalizeColorList(borders.colors, colors) - - return hoverable(_.map(borderColors, (color, className) => { + return hoverable(_.map(borders.colors, (color, className) => { return defineClass(`border-${className}`, { 'border-color': color, }) diff --git a/src/generators/textColors.js b/src/generators/textColors.js index 0225604eb..b4500b68d 100644 --- a/src/generators/textColors.js +++ b/src/generators/textColors.js @@ -1,10 +1,9 @@ import _ from 'lodash' import defineClass from '../util/defineClass' -import normalizeColorList from '../util/normalizeColorList' import hoverable from '../util/hoverable' export default function ({ colors, text }) { - return hoverable(_.map(normalizeColorList(text.colors, colors), (color, modifier) => { + return hoverable(_.map(text.colors, (color, modifier) => { return defineClass(`text-${modifier}`, { 'color': color, }) diff --git a/src/index.js b/src/index.js index 474693a43..a4404fde5 100644 --- a/src/index.js +++ b/src/index.js @@ -6,8 +6,9 @@ import stylefmt from 'stylefmt' import defaultConfig from './defaultConfig' import mergeConfig from './util/mergeConfig' -import generateUtilities from './lib/generateUtilities' import substituteResetAtRule from './lib/substituteResetAtRule' +import evaluateTailwindFunctions from './lib/evaluateTailwindFunctions' +import generateUtilities from './lib/generateUtilities' import substituteHoverableAtRules from './lib/substituteHoverableAtRules' import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules' import substituteBreakpointAtRules from './lib/substituteBreakpointAtRules' @@ -18,6 +19,7 @@ const plugin = postcss.plugin('tailwind', (options = {}) => { return postcss([ substituteResetAtRule(config), + evaluateTailwindFunctions(config), generateUtilities(config), substituteHoverableAtRules(config), substituteResponsiveAtRules(config), diff --git a/src/lib/evaluateTailwindFunctions.js b/src/lib/evaluateTailwindFunctions.js new file mode 100644 index 000000000..711e4c6e8 --- /dev/null +++ b/src/lib/evaluateTailwindFunctions.js @@ -0,0 +1,12 @@ +import _ from 'lodash' +import functions from 'postcss-functions' + +export default function(options) { + return functions({ + functions: { + tailwind: function (path) { + return _.get(options, _.trim(path, `'"`)) + } + } + }) +} diff --git a/src/util/mergeConfig.js b/src/util/mergeConfig.js index 24db80900..e5edc9960 100644 --- a/src/util/mergeConfig.js +++ b/src/util/mergeConfig.js @@ -1,4 +1,6 @@ import _ from 'lodash' +import normalizeColorList from './normalizeColorList' +import findColor from './findColor' const configTemplate = { breakpoints: null, @@ -63,7 +65,19 @@ function appendConfig(base, appends) { }) } +function normalizeConfigColors(config, colorPalette) { + const cloned = _.cloneDeep(config) + + cloned.text.colors = normalizeColorList(cloned.text.colors, colorPalette) + cloned.borders.defaults.color = findColor(colorPalette, cloned.borders.defaults.color) + cloned.borders.colors = normalizeColorList(cloned.borders.colors, colorPalette) + cloned.backgrounds.colors = normalizeColorList(cloned.backgrounds.colors, colorPalette) + + return cloned +} + export default function mergeConfig(base, other) { const replaced = replaceDefaults(configTemplate, base, other) - return appendConfig(replaced, _.get(other, 'extend', {})) + const config = appendConfig(replaced, _.get(other, 'extend', {})) + return normalizeConfigColors(config, config.colors) } diff --git a/yarn.lock b/yarn.lock index 5a62f64a2..e8a9635a0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2872,7 +2872,7 @@ oauth-sign@~0.8.1: version "0.8.2" resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43" -object-assign@^4.0.1, object-assign@^4.1.0: +object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" @@ -3065,6 +3065,15 @@ plur@^2.0.0, plur@^2.1.2: dependencies: irregular-plurals "^1.0.0" +postcss-functions@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e" + dependencies: + glob "^7.1.2" + object-assign "^4.1.1" + postcss "^6.0.9" + postcss-value-parser "^3.3.0" + postcss-import@^11.0.0: version "11.0.0" resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-11.0.0.tgz#a962e2df82d3bc5a6da6a386841747204f41ef5b"