wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add test coverage for default letter-spacing feature

Browse source
This commit is contained in:
Adam Wathan 2020-08-06 15:42:52 -04:00
parent 2c05a4a633
commit a7c410656d
2 changed files with 61 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

56
__tests__/plugins/fontSize.test.js
View file

@ -28,3 +28,59 @@ test('font-size utilities can include a default line-height', () => {
],
])
})
test('font-size utilities can include a default letter-spacing', () => {
const config = {
theme: {
fontSize: {
sm: '12px',
md: ['16px', { letterSpacing: '-0.01em' }],
lg: ['20px', { letterSpacing: '-0.02em' }],
},
},
variants: {
fontSize: ['responsive'],
},
}
const { utilities } = invokePlugin(plugin(), config)
expect(utilities).toEqual([
[
{
'.text-sm': { 'font-size': '12px' },
'.text-md': { 'font-size': '16px', 'letter-spacing': '-0.01em' },
'.text-lg': { 'font-size': '20px', 'letter-spacing': '-0.02em' },
},
['responsive'],
],
])
})
test('font-size utilities can include a default line-height and letter-spacing', () => {
const config = {
theme: {
fontSize: {
sm: '12px',
md: ['16px', { lineHeight: '24px', letterSpacing: '-0.01em' }],
lg: ['20px', { lineHeight: '28px', letterSpacing: '-0.02em' }],
},
},
variants: {
fontSize: ['responsive'],
},
}
const { utilities } = invokePlugin(plugin(), config)
expect(utilities).toEqual([
[
{
'.text-sm': { 'font-size': '12px' },
'.text-md': { 'font-size': '16px', 'line-height': '24px', 'letter-spacing': '-0.01em' },
'.text-lg': { 'font-size': '20px', 'line-height': '28px', 'letter-spacing': '-0.02em' },
},
['responsive'],
],
])
})

9
src/plugins/fontSize.js
View file

@ -5,10 +5,11 @@ export default function() {
const utilities = _.fromPairs(
_.map(theme('fontSize'), (value, modifier) => {
const [fontSize, options] = Array.isArray(value) ? value : [value]
// Tailwind 1.3+ syntax allowed line height to be specified in the array like
// ['16px', '24px'], so we can get it from there as well as from object syntax
const lineHeight = options instanceof Object ? options.lineHeight : options
const letterSpacing = options && options.letterSpacing
const { lineHeight, letterSpacing } = _.isPlainObject(options)
? options
: {
lineHeight: options,
}
return [
`.${e(`text-${modifier}`)}`,