diff --git a/__tests__/themeFunction.test.js b/__tests__/themeFunction.test.js index 6b777da87..d795a44dd 100644 --- a/__tests__/themeFunction.test.js +++ b/__tests__/themeFunction.test.js @@ -109,3 +109,48 @@ test('an unquoted list is valid as a default value', () => { expect(result.warnings().length).toBe(0) }) }) + +test('array values are joined by default', () => { + const input = ` + .heading { font-family: theme('fontFamily.sans'); } + ` + + const output = ` + .heading { font-family: Inter, Helvetica, sans-serif; } + ` + + return run(input, { + theme: { + fontFamily: { + sans: ['Inter', 'Helvetica', 'sans-serif'], + }, + }, + }).then(result => { + expect(result.css).toEqual(output) + expect(result.warnings().length).toBe(0) + }) +}) + +test('font sizes are retrieved without default line-heights or letter-spacing', () => { + const input = ` + .heading-1 { font-size: theme('fontSize.lg'); } + .heading-2 { font-size: theme('fontSize.xl'); } + ` + + const output = ` + .heading-1 { font-size: 20px; } + .heading-2 { font-size: 24px; } + ` + + return run(input, { + theme: { + fontSize: { + lg: ['20px', '28px'], + xl: ['24px', { lineHeight: '32px', letterSpacing: '-0.01em' }], + }, + }, + }).then(result => { + expect(result.css).toEqual(output) + expect(result.warnings().length).toBe(0) + }) +}) diff --git a/src/lib/evaluateTailwindFunctions.js b/src/lib/evaluateTailwindFunctions.js index 5f03bb95b..80333456e 100644 --- a/src/lib/evaluateTailwindFunctions.js +++ b/src/lib/evaluateTailwindFunctions.js @@ -1,12 +1,25 @@ import _ from 'lodash' import functions from 'postcss-functions' +const themeTransforms = { + fontSize(value) { + return Array.isArray(value) ? value[0] : value + }, +} + +function defaultTransform(value) { + return Array.isArray(value) ? value.join(', ') : value +} + export default function(config) { return functions({ functions: { theme: (path, ...defaultValue) => { - return _.thru(_.get(config.theme, _.trim(path, `'"`), defaultValue), value => { - return Array.isArray(value) ? value.join(', ') : value + const trimmedPath = _.trim(path, `'"`) + return _.thru(_.get(config.theme, trimmedPath, defaultValue), value => { + const [themeSection] = trimmedPath.split('.') + + return _.get(themeTransforms, themeSection, defaultTransform)(value) }) }, },