mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
b86bdbcd7e
* prefix custom properties with tw- * prefix custom properties with tw- in tests * prefix gradient values in the defaultConfig * inline gradient-via-color * simplify --tw-tailwind-empty to --tw-empty * replace the long --tw-font-variant-numeric-... to the way shorter --tw-fvn-... * Rename --tw-box-shadow to --tw-shadow To match class name. * Rename font-variant-numeric variables * Remove 'transform' from transform variables * Shorten gradient variables * Fix style Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
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': {
|
|
'--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)',
|
|
},
|
|
},
|
|
variants: ['responsive'],
|
|
},
|
|
])
|
|
})
|