80 lines
2.6 KiB
JavaScript
Executable File
80 lines
2.6 KiB
JavaScript
Executable File
import _ from 'lodash'
|
|
import escapeClassName from '../../src/util/escapeClassName'
|
|
import plugin from '../../src/plugins/boxShadow'
|
|
|
|
test('box shadow can use DEFAULT keyword and negative prefix syntax', () => {
|
|
const addedUtilities = []
|
|
|
|
const config = {
|
|
theme: {
|
|
boxShadow: {
|
|
DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
|
|
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
'-': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
|
|
'-md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
},
|
|
},
|
|
variants: {
|
|
boxShadow: ['responsive'],
|
|
},
|
|
}
|
|
|
|
const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
|
|
const pluginApi = {
|
|
config: getConfigValue,
|
|
e: escapeClassName,
|
|
theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
|
|
variants: (path, defaultValue) => {
|
|
if (_.isArray(config.variants)) {
|
|
return config.variants
|
|
}
|
|
|
|
return getConfigValue(`variants.${path}`, defaultValue)
|
|
},
|
|
addUtilities(utilities, options) {
|
|
addedUtilities.push({
|
|
utilities,
|
|
options,
|
|
})
|
|
},
|
|
}
|
|
|
|
plugin()(pluginApi)
|
|
|
|
expect(addedUtilities).toEqual([
|
|
{
|
|
utilities: {
|
|
'*': {
|
|
'--tw-shadow': '0 0 #0000',
|
|
},
|
|
},
|
|
options: { respectImportant: false },
|
|
},
|
|
{
|
|
utilities: {
|
|
'.shadow': {
|
|
'--tw-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
|
|
'box-shadow':
|
|
'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)',
|
|
},
|
|
'.shadow-md': {
|
|
'--tw-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
'box-shadow':
|
|
'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)',
|
|
},
|
|
'.-shadow': {
|
|
'--tw-shadow': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
|
|
'box-shadow':
|
|
'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)',
|
|
},
|
|
'.-shadow-md': {
|
|
'--tw-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
'box-shadow':
|
|
'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)',
|
|
},
|
|
},
|
|
options: ['responsive'],
|
|
},
|
|
])
|
|
})
|