mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
1739 lines
35 KiB
JavaScript
1739 lines
35 KiB
JavaScript
import resolveConfig from '../src/util/resolveConfig'
|
|
|
|
test('prefix key overrides default prefix', () => {
|
|
const userConfig = {
|
|
prefix: 'tw-',
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: 'tw-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('important key overrides default important', () => {
|
|
const userConfig = {
|
|
important: true,
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '',
|
|
important: true,
|
|
separator: ':',
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('important (selector) key overrides default important', () => {
|
|
const userConfig = {
|
|
important: '#app',
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '',
|
|
important: '#app',
|
|
separator: ':',
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('separator key overrides default separator', () => {
|
|
const userConfig = {
|
|
separator: '__',
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '',
|
|
important: false,
|
|
separator: '__',
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('theme key is merged instead of replaced', () => {
|
|
const userConfig = {
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
'grey-darker': '#606f7b',
|
|
'grey-dark': '#8795a1',
|
|
grey: '#b8c2cc',
|
|
'grey-light': '#dae1e7',
|
|
'grey-lighter': '#f1f5f8',
|
|
},
|
|
fonts: {
|
|
sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
|
|
serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
|
|
},
|
|
screens: {
|
|
sm: '500px',
|
|
md: '750px',
|
|
lg: '1000px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
'grey-darker': '#606f7b',
|
|
'grey-dark': '#8795a1',
|
|
grey: '#b8c2cc',
|
|
'grey-light': '#dae1e7',
|
|
'grey-lighter': '#f1f5f8',
|
|
},
|
|
fonts: {
|
|
sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
|
|
serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
|
|
},
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('variants key is merged instead of replaced', () => {
|
|
const userConfig = {
|
|
variants: {
|
|
backgroundAttachment: [],
|
|
borderColors: ['responsive', 'hover', 'focus', 'active'],
|
|
},
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
'grey-darker': '#606f7b',
|
|
'grey-dark': '#8795a1',
|
|
grey: '#b8c2cc',
|
|
'grey-light': '#dae1e7',
|
|
'grey-lighter': '#f1f5f8',
|
|
},
|
|
fonts: {
|
|
sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
|
|
serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
|
|
},
|
|
screens: {
|
|
sm: '500px',
|
|
md: '750px',
|
|
lg: '1000px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
backgroundAttachment: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
borderRadius: ['responsive'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
'grey-darker': '#606f7b',
|
|
'grey-dark': '#8795a1',
|
|
grey: '#b8c2cc',
|
|
'grey-light': '#dae1e7',
|
|
'grey-lighter': '#f1f5f8',
|
|
},
|
|
fonts: {
|
|
sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
|
|
serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
|
|
},
|
|
screens: {
|
|
sm: '500px',
|
|
md: '750px',
|
|
lg: '1000px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
backgroundAttachment: [],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus', 'active'],
|
|
borderRadius: ['responsive'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('a global variants list replaces the default', () => {
|
|
const userConfig = {
|
|
variants: ['responsive', 'hover', 'focus', 'active'],
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
'grey-darker': '#606f7b',
|
|
'grey-dark': '#8795a1',
|
|
grey: '#b8c2cc',
|
|
'grey-light': '#dae1e7',
|
|
'grey-lighter': '#f1f5f8',
|
|
},
|
|
fonts: {
|
|
sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
|
|
serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
|
|
},
|
|
screens: {
|
|
sm: '500px',
|
|
md: '750px',
|
|
lg: '1000px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
backgroundAttachment: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
borderRadius: ['responsive'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
'grey-darker': '#606f7b',
|
|
'grey-dark': '#8795a1',
|
|
grey: '#b8c2cc',
|
|
'grey-light': '#dae1e7',
|
|
'grey-lighter': '#f1f5f8',
|
|
},
|
|
fonts: {
|
|
sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
|
|
serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
|
|
},
|
|
screens: {
|
|
sm: '500px',
|
|
md: '750px',
|
|
lg: '1000px',
|
|
},
|
|
},
|
|
variants: ['responsive', 'hover', 'focus', 'active'],
|
|
})
|
|
})
|
|
|
|
test('missing top level keys are pulled from the default config', () => {
|
|
const userConfig = {}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: { green: '#00ff00' },
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: { green: '#00ff00' },
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('functions in the default theme section are lazily evaluated', () => {
|
|
const userConfig = {
|
|
theme: {
|
|
colors: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
},
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
cyan: 'cyan',
|
|
magenta: 'magenta',
|
|
yellow: 'yellow',
|
|
},
|
|
backgroundColors: theme => theme('colors'),
|
|
textColors: theme => theme('colors'),
|
|
},
|
|
variants: {
|
|
backgroundColors: ['responsive', 'hover', 'focus'],
|
|
textColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
backgroundColors: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
textColors: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
},
|
|
variants: {
|
|
backgroundColors: ['responsive', 'hover', 'focus'],
|
|
textColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('functions in the user theme section are lazily evaluated', () => {
|
|
const userConfig = {
|
|
theme: {
|
|
colors: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
backgroundColors: theme => ({
|
|
...theme('colors'),
|
|
customBackground: '#bada55',
|
|
}),
|
|
textColors: theme => ({
|
|
...theme('colors'),
|
|
customText: '#facade',
|
|
}),
|
|
},
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
cyan: 'cyan',
|
|
magenta: 'magenta',
|
|
yellow: 'yellow',
|
|
},
|
|
backgroundColors: ({ colors }) => colors,
|
|
textColors: ({ colors }) => colors,
|
|
},
|
|
variants: {
|
|
backgroundColors: ['responsive', 'hover', 'focus'],
|
|
textColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
backgroundColors: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
customBackground: '#bada55',
|
|
},
|
|
textColors: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
customText: '#facade',
|
|
},
|
|
},
|
|
variants: {
|
|
backgroundColors: ['responsive', 'hover', 'focus'],
|
|
textColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('theme values in the extend section extend the existing theme', () => {
|
|
const userConfig = {
|
|
theme: {
|
|
extend: {
|
|
opacity: {
|
|
'25': '25',
|
|
'75': '.75',
|
|
},
|
|
backgroundColors: {
|
|
customBackground: '#bada55',
|
|
},
|
|
},
|
|
},
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
cyan: 'cyan',
|
|
magenta: 'magenta',
|
|
yellow: 'yellow',
|
|
},
|
|
opacity: {
|
|
'0': '0',
|
|
'50': '.5',
|
|
'100': '1',
|
|
},
|
|
backgroundColors: theme => theme('colors'),
|
|
},
|
|
variants: {
|
|
backgroundColors: ['responsive', 'hover', 'focus'],
|
|
opacity: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
cyan: 'cyan',
|
|
magenta: 'magenta',
|
|
yellow: 'yellow',
|
|
},
|
|
opacity: {
|
|
'0': '0',
|
|
'50': '.5',
|
|
'100': '1',
|
|
'25': '25',
|
|
'75': '.75',
|
|
},
|
|
backgroundColors: {
|
|
cyan: 'cyan',
|
|
magenta: 'magenta',
|
|
yellow: 'yellow',
|
|
customBackground: '#bada55',
|
|
},
|
|
},
|
|
variants: {
|
|
backgroundColors: ['responsive', 'hover', 'focus'],
|
|
opacity: ['responsive', 'hover', 'focus'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('theme values in the extend section extend the user theme', () => {
|
|
const userConfig = {
|
|
theme: {
|
|
opacity: {
|
|
'0': '0',
|
|
'20': '.2',
|
|
'40': '.4',
|
|
},
|
|
height: theme => theme('width'),
|
|
extend: {
|
|
opacity: {
|
|
'60': '.6',
|
|
'80': '.8',
|
|
'100': '1',
|
|
},
|
|
height: {
|
|
customHeight: '500vh',
|
|
},
|
|
},
|
|
},
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
opacity: {
|
|
'0': '0',
|
|
'50': '.5',
|
|
'100': '1',
|
|
},
|
|
height: {
|
|
'0': 0,
|
|
full: '100%',
|
|
},
|
|
width: {
|
|
'0': 0,
|
|
'1': '.25rem',
|
|
'2': '.5rem',
|
|
'3': '.75rem',
|
|
'4': '1rem',
|
|
},
|
|
},
|
|
variants: {
|
|
opacity: ['responsive', 'hover', 'focus'],
|
|
height: ['responsive'],
|
|
width: ['responsive'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
opacity: {
|
|
'0': '0',
|
|
'20': '.2',
|
|
'40': '.4',
|
|
'60': '.6',
|
|
'80': '.8',
|
|
'100': '1',
|
|
},
|
|
height: {
|
|
'0': 0,
|
|
'1': '.25rem',
|
|
'2': '.5rem',
|
|
'3': '.75rem',
|
|
'4': '1rem',
|
|
customHeight: '500vh',
|
|
},
|
|
width: {
|
|
'0': 0,
|
|
'1': '.25rem',
|
|
'2': '.5rem',
|
|
'3': '.75rem',
|
|
'4': '1rem',
|
|
},
|
|
},
|
|
variants: {
|
|
opacity: ['responsive', 'hover', 'focus'],
|
|
height: ['responsive'],
|
|
width: ['responsive'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('theme values in the extend section can extend values that are depended on lazily', () => {
|
|
const userConfig = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
backgroundColors: {
|
|
customBackground: '#bada55',
|
|
},
|
|
},
|
|
},
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
cyan: 'cyan',
|
|
magenta: 'magenta',
|
|
yellow: 'yellow',
|
|
},
|
|
backgroundColors: theme => theme('colors'),
|
|
},
|
|
variants: {
|
|
backgroundColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
cyan: 'cyan',
|
|
magenta: 'magenta',
|
|
yellow: 'yellow',
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
backgroundColors: {
|
|
cyan: 'cyan',
|
|
magenta: 'magenta',
|
|
yellow: 'yellow',
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
customBackground: '#bada55',
|
|
},
|
|
},
|
|
variants: {
|
|
backgroundColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('theme values in the extend section are not deeply merged', () => {
|
|
const userConfig = {
|
|
theme: {
|
|
extend: {
|
|
fonts: {
|
|
sans: ['Comic Sans'],
|
|
},
|
|
},
|
|
},
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
fonts: {
|
|
sans: ['system-ui', 'Helvetica Neue', 'sans-serif'],
|
|
serif: ['Constantia', 'Georgia', 'serif'],
|
|
mono: ['Menlo', 'Courier New', 'monospace'],
|
|
},
|
|
},
|
|
variants: {
|
|
fonts: ['responsive'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
fonts: {
|
|
sans: ['Comic Sans'],
|
|
serif: ['Constantia', 'Georgia', 'serif'],
|
|
mono: ['Menlo', 'Courier New', 'monospace'],
|
|
},
|
|
},
|
|
variants: {
|
|
fonts: ['responsive'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('the theme function can use a default value if the key is missing', () => {
|
|
const userConfig = {
|
|
theme: {
|
|
colors: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
},
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
cyan: 'cyan',
|
|
magenta: 'magenta',
|
|
yellow: 'yellow',
|
|
},
|
|
borderColor: theme => ({
|
|
default: theme('colors.gray', 'currentColor'),
|
|
...theme('colors'),
|
|
}),
|
|
},
|
|
variants: {
|
|
borderColor: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
borderColor: {
|
|
default: 'currentColor',
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
},
|
|
variants: {
|
|
borderColor: ['responsive', 'hover', 'focus'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('the theme function can resolve function values', () => {
|
|
const userConfig = {
|
|
theme: {
|
|
textColor: theme => ({
|
|
lime: 'lime',
|
|
...theme('colors'),
|
|
}),
|
|
backgroundColor: theme => ({
|
|
orange: 'orange',
|
|
...theme('textColor'),
|
|
}),
|
|
borderColor: theme => theme('backgroundColor'),
|
|
},
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
},
|
|
variants: {
|
|
backgroundColor: ['responsive', 'hover', 'focus'],
|
|
borderColor: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
textColor: {
|
|
lime: 'lime',
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
backgroundColor: {
|
|
lime: 'lime',
|
|
orange: 'orange',
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
borderColor: {
|
|
lime: 'lime',
|
|
orange: 'orange',
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
},
|
|
variants: {
|
|
backgroundColor: ['responsive', 'hover', 'focus'],
|
|
borderColor: ['responsive', 'hover', 'focus'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('the theme function can resolve deep function values', () => {
|
|
const userConfig = {
|
|
theme: {
|
|
minWidth: theme => ({
|
|
'1/3': theme('width.1/3'),
|
|
}),
|
|
},
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
spacing: {
|
|
'0': '0',
|
|
},
|
|
width: theme => ({
|
|
...theme('spacing'),
|
|
'1/3': '33.33333%',
|
|
}),
|
|
},
|
|
variants: {
|
|
backgroundColor: ['responsive', 'hover', 'focus'],
|
|
borderColor: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
spacing: {
|
|
'0': '0',
|
|
},
|
|
width: {
|
|
'0': '0',
|
|
'1/3': '33.33333%',
|
|
},
|
|
minWidth: {
|
|
'1/3': '33.33333%',
|
|
},
|
|
},
|
|
variants: {
|
|
backgroundColor: ['responsive', 'hover', 'focus'],
|
|
borderColor: ['responsive', 'hover', 'focus'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('theme values in the extend section are lazily evaluated', () => {
|
|
const userConfig = {
|
|
theme: {
|
|
colors: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
extend: {
|
|
colors: {
|
|
orange: 'orange',
|
|
},
|
|
borderColor: theme => ({
|
|
foo: theme('colors.orange'),
|
|
bar: theme('colors.red'),
|
|
}),
|
|
},
|
|
},
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
cyan: 'cyan',
|
|
magenta: 'magenta',
|
|
yellow: 'yellow',
|
|
},
|
|
borderColor: theme => ({
|
|
default: theme('colors.yellow', 'currentColor'),
|
|
...theme('colors'),
|
|
}),
|
|
},
|
|
variants: {
|
|
borderColor: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
orange: 'orange',
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
borderColor: {
|
|
default: 'currentColor',
|
|
foo: 'orange',
|
|
bar: 'red',
|
|
orange: 'orange',
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
},
|
|
},
|
|
variants: {
|
|
borderColor: ['responsive', 'hover', 'focus'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('lazily evaluated values have access to the config utils', () => {
|
|
const userConfig = {
|
|
theme: {
|
|
inset: theme => theme('margin'),
|
|
shift: (theme, { negative }) => ({
|
|
...theme('spacing'),
|
|
...negative(theme('spacing')),
|
|
}),
|
|
extend: {
|
|
nudge: (theme, { negative }) => ({
|
|
...theme('spacing'),
|
|
...negative(theme('spacing')),
|
|
}),
|
|
},
|
|
},
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
spacing: {
|
|
'1': '1px',
|
|
'2': '2px',
|
|
'3': '3px',
|
|
'4': '4px',
|
|
},
|
|
margin: (theme, { negative }) => ({
|
|
...theme('spacing'),
|
|
...negative(theme('spacing')),
|
|
}),
|
|
},
|
|
variants: {},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
spacing: {
|
|
'1': '1px',
|
|
'2': '2px',
|
|
'3': '3px',
|
|
'4': '4px',
|
|
},
|
|
inset: {
|
|
'-1': '-1px',
|
|
'-2': '-2px',
|
|
'-3': '-3px',
|
|
'-4': '-4px',
|
|
'1': '1px',
|
|
'2': '2px',
|
|
'3': '3px',
|
|
'4': '4px',
|
|
},
|
|
margin: {
|
|
'-1': '-1px',
|
|
'-2': '-2px',
|
|
'-3': '-3px',
|
|
'-4': '-4px',
|
|
'1': '1px',
|
|
'2': '2px',
|
|
'3': '3px',
|
|
'4': '4px',
|
|
},
|
|
shift: {
|
|
'-1': '-1px',
|
|
'-2': '-2px',
|
|
'-3': '-3px',
|
|
'-4': '-4px',
|
|
'1': '1px',
|
|
'2': '2px',
|
|
'3': '3px',
|
|
'4': '4px',
|
|
},
|
|
nudge: {
|
|
'-1': '-1px',
|
|
'-2': '-2px',
|
|
'-3': '-3px',
|
|
'-4': '-4px',
|
|
'1': '1px',
|
|
'2': '2px',
|
|
'3': '3px',
|
|
'4': '4px',
|
|
},
|
|
},
|
|
variants: {},
|
|
})
|
|
})
|
|
|
|
test('the original theme is not mutated', () => {
|
|
const userConfig = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
orange: 'orange',
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
borderColor: ['responsive', 'hover'],
|
|
},
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
colors: {
|
|
cyan: 'cyan',
|
|
magenta: 'magenta',
|
|
yellow: 'yellow',
|
|
},
|
|
},
|
|
variants: {
|
|
backgroundColor: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(userConfig).toEqual({
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
orange: 'orange',
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
borderColor: ['responsive', 'hover'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('custom properties are multiplied by -1 for negative values', () => {
|
|
const userConfig = {
|
|
theme: {
|
|
spacing: {
|
|
'1': '1px',
|
|
'2': '2px',
|
|
'3': '3px',
|
|
'4': '4px',
|
|
foo: 'var(--foo)',
|
|
bar: 'var(--bar, 500px)',
|
|
baz: 'calc(50% - 10px)',
|
|
},
|
|
margin: (theme, { negative }) => ({
|
|
...theme('spacing'),
|
|
...negative(theme('spacing')),
|
|
}),
|
|
},
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {},
|
|
variants: {},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
spacing: {
|
|
'1': '1px',
|
|
'2': '2px',
|
|
'3': '3px',
|
|
'4': '4px',
|
|
foo: 'var(--foo)',
|
|
bar: 'var(--bar, 500px)',
|
|
baz: 'calc(50% - 10px)',
|
|
},
|
|
margin: {
|
|
'1': '1px',
|
|
'2': '2px',
|
|
'3': '3px',
|
|
'4': '4px',
|
|
foo: 'var(--foo)',
|
|
bar: 'var(--bar, 500px)',
|
|
baz: 'calc(50% - 10px)',
|
|
'-1': '-1px',
|
|
'-2': '-2px',
|
|
'-3': '-3px',
|
|
'-4': '-4px',
|
|
'-foo': 'calc(var(--foo) * -1)',
|
|
'-bar': 'calc(var(--bar, 500px) * -1)',
|
|
'-baz': 'calc(-50% - -10px)',
|
|
},
|
|
},
|
|
variants: {},
|
|
})
|
|
})
|
|
|
|
test('more than two config objects can be resolved', () => {
|
|
const firstConfig = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: () => ({
|
|
code: ['Menlo', 'monospace'],
|
|
}),
|
|
colors: {
|
|
red: 'red',
|
|
},
|
|
backgroundColor: {
|
|
customBackgroundOne: '#bada55',
|
|
},
|
|
textDecorationColor: {
|
|
orange: 'orange',
|
|
},
|
|
},
|
|
},
|
|
}
|
|
|
|
const secondConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
quote: ['Helvetica', 'serif'],
|
|
},
|
|
colors: {
|
|
green: 'green',
|
|
},
|
|
backgroundColor: {
|
|
customBackgroundTwo: '#facade',
|
|
},
|
|
textDecorationColor: theme => theme('colors'),
|
|
},
|
|
},
|
|
}
|
|
|
|
const thirdConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
hero: ['Futura', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
pink: 'pink',
|
|
},
|
|
backgroundColor: () => ({
|
|
customBackgroundThree: '#c0ffee',
|
|
}),
|
|
textDecorationColor: {
|
|
lime: 'lime',
|
|
},
|
|
},
|
|
},
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
fontFamily: {
|
|
body: ['Arial', 'sans-serif'],
|
|
display: ['Georgia', 'serif'],
|
|
},
|
|
colors: {
|
|
blue: 'blue',
|
|
},
|
|
backgroundColor: theme => theme('colors'),
|
|
},
|
|
variants: {
|
|
backgroundColor: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([firstConfig, secondConfig, thirdConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
fontFamily: {
|
|
body: ['Arial', 'sans-serif'],
|
|
display: ['Georgia', 'serif'],
|
|
code: ['Menlo', 'monospace'],
|
|
quote: ['Helvetica', 'serif'],
|
|
hero: ['Futura', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
pink: 'pink',
|
|
},
|
|
backgroundColor: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
pink: 'pink',
|
|
customBackgroundOne: '#bada55',
|
|
customBackgroundTwo: '#facade',
|
|
customBackgroundThree: '#c0ffee',
|
|
},
|
|
textDecorationColor: {
|
|
red: 'red',
|
|
green: 'green',
|
|
blue: 'blue',
|
|
pink: 'pink',
|
|
orange: 'orange',
|
|
lime: 'lime',
|
|
},
|
|
},
|
|
variants: {
|
|
backgroundColor: ['responsive', 'hover', 'focus'],
|
|
},
|
|
})
|
|
})
|
|
|
|
test('plugin config modifications are applied', () => {
|
|
const userConfig = {
|
|
plugins: [
|
|
{
|
|
config: {
|
|
prefix: 'tw-',
|
|
},
|
|
},
|
|
],
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: 'tw-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
plugins: userConfig.plugins,
|
|
})
|
|
})
|
|
|
|
test('user config takes precedence over plugin config modifications', () => {
|
|
const userConfig = {
|
|
prefix: 'user-',
|
|
plugins: [
|
|
{
|
|
config: {
|
|
prefix: 'tw-',
|
|
},
|
|
},
|
|
],
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: 'user-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
plugins: userConfig.plugins,
|
|
})
|
|
})
|
|
|
|
test('plugin config can register plugins that also have config', () => {
|
|
const userConfig = {
|
|
plugins: [
|
|
{
|
|
config: {
|
|
prefix: 'tw-',
|
|
plugins: [
|
|
{
|
|
config: {
|
|
important: true,
|
|
},
|
|
},
|
|
{
|
|
config: {
|
|
separator: '__',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
handler() {},
|
|
},
|
|
],
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: 'tw-',
|
|
important: true,
|
|
separator: '__',
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
plugins: userConfig.plugins,
|
|
})
|
|
})
|
|
|
|
test('plugin configs take precedence over plugin configs registered by that plugin', () => {
|
|
const userConfig = {
|
|
plugins: [
|
|
{
|
|
config: {
|
|
prefix: 'outer-',
|
|
plugins: [
|
|
{
|
|
config: {
|
|
prefix: 'inner-',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
handler() {},
|
|
},
|
|
],
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: 'outer-',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
plugins: userConfig.plugins,
|
|
})
|
|
})
|
|
|
|
test('plugin theme extensions are added even if user overrides top-level theme config', () => {
|
|
const userConfig = {
|
|
theme: {
|
|
width: {
|
|
'1px': '1px',
|
|
},
|
|
},
|
|
plugins: [
|
|
{
|
|
config: {
|
|
theme: {
|
|
extend: {
|
|
width: {
|
|
'2px': '2px',
|
|
'3px': '3px',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
handler() {},
|
|
},
|
|
],
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
width: {
|
|
sm: '1rem',
|
|
md: '2rem',
|
|
lg: '3rem',
|
|
},
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
width: {
|
|
'1px': '1px',
|
|
'2px': '2px',
|
|
'3px': '3px',
|
|
},
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
plugins: userConfig.plugins,
|
|
})
|
|
})
|
|
|
|
test('user theme extensions take precedence over plugin theme extensions with the same key', () => {
|
|
const userConfig = {
|
|
theme: {
|
|
extend: {
|
|
width: {
|
|
xl: '6rem',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
{
|
|
config: {
|
|
theme: {
|
|
extend: {
|
|
width: {
|
|
xl: '4rem',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
handler() {},
|
|
},
|
|
],
|
|
}
|
|
|
|
const defaultConfig = {
|
|
prefix: '',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
width: {
|
|
sm: '1rem',
|
|
md: '2rem',
|
|
lg: '3rem',
|
|
},
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
}
|
|
|
|
const result = resolveConfig([userConfig, defaultConfig])
|
|
|
|
expect(result).toEqual({
|
|
prefix: '',
|
|
important: false,
|
|
separator: ':',
|
|
theme: {
|
|
width: {
|
|
sm: '1rem',
|
|
md: '2rem',
|
|
lg: '3rem',
|
|
xl: '6rem',
|
|
},
|
|
screens: {
|
|
mobile: '400px',
|
|
},
|
|
},
|
|
variants: {
|
|
appearance: ['responsive'],
|
|
borderCollapse: [],
|
|
borderColors: ['responsive', 'hover', 'focus'],
|
|
},
|
|
plugins: userConfig.plugins,
|
|
})
|
|
})
|