mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
c3dd3b6845
This is to prevent box-shadows from overriding rings that are added manually by plugins like the custom forms plugin.
72 lines
2.3 KiB
JavaScript
72 lines
2.3 KiB
JavaScript
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, variants) {
|
|
addedUtilities.push({
|
|
utilities,
|
|
variants,
|
|
})
|
|
},
|
|
}
|
|
|
|
plugin()(pluginApi)
|
|
|
|
expect(addedUtilities).toEqual([
|
|
{
|
|
utilities: {
|
|
'.shadow': {
|
|
'--box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
|
|
'box-shadow':
|
|
'var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow)',
|
|
},
|
|
'.shadow-md': {
|
|
'--box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
'box-shadow':
|
|
'var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow)',
|
|
},
|
|
'.-shadow': {
|
|
'--box-shadow': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
|
|
'box-shadow':
|
|
'var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow)',
|
|
},
|
|
'.-shadow-md': {
|
|
'--box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
'box-shadow':
|
|
'var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow)',
|
|
},
|
|
},
|
|
variants: ['responsive'],
|
|
},
|
|
])
|
|
})
|