Improve matchUtilities API and make it work with the AOT engine (#4232)
* implement matchUtilities2 * ensure animation names without keyframes are not prefixed * remove matchBase * call addUtilities for each group individually * WIP: Write plugins using matchUtilities2 * MORE * Fix arbitrary value support for fontSize * Fixes, update fixtures * Rebuild fixtures * Don't generate `divide` class with no modifier * Fixes, rebuild fixtures * Rename matchUtilities2 to matchUtilities * Delete bad tests * Remove temp files GROSS * Clean stuff up * Support no return in matchUtilities Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
This commit is contained in:
parent
d76c55afc6
commit
6628eb00ca
70 changed files with 81467 additions and 82678 deletions
|
|
@ -1,6 +1,4 @@
|
|||
import _ from 'lodash'
|
||||
import transformThemeValue from '../util/transformThemeValue'
|
||||
import nameClass from '../util/nameClass'
|
||||
|
||||
let transformValue = transformThemeValue('boxShadow')
|
||||
let shadowReset = {
|
||||
|
|
@ -8,60 +6,36 @@ let shadowReset = {
|
|||
'--tw-shadow': '0 0 #0000',
|
||||
},
|
||||
}
|
||||
let defaultBoxShadow = [
|
||||
`var(--tw-ring-offset-shadow, 0 0 #0000)`,
|
||||
`var(--tw-ring-shadow, 0 0 #0000)`,
|
||||
`var(--tw-shadow)`,
|
||||
].join(', ')
|
||||
|
||||
export default function () {
|
||||
return function ({ config, matchUtilities, addBase, addUtilities, theme, variants }) {
|
||||
if (config('mode') === 'jit') {
|
||||
addBase(shadowReset)
|
||||
matchUtilities({
|
||||
shadow: (modifier, { theme }) => {
|
||||
let value = transformValue(theme.boxShadow[modifier])
|
||||
|
||||
if (value === undefined) {
|
||||
return []
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
[nameClass('shadow', modifier)]: {
|
||||
'--tw-shadow': value === 'none' ? '0 0 #0000' : value,
|
||||
'box-shadow': [
|
||||
`var(--tw-ring-offset-shadow, 0 0 #0000)`,
|
||||
`var(--tw-ring-shadow, 0 0 #0000)`,
|
||||
`var(--tw-shadow)`,
|
||||
].join(', '),
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
})
|
||||
} else {
|
||||
addUtilities(
|
||||
{
|
||||
'*': {
|
||||
'--tw-shadow': '0 0 #0000',
|
||||
},
|
||||
},
|
||||
{ respectImportant: false }
|
||||
)
|
||||
|
||||
const utilities = _.fromPairs(
|
||||
_.map(theme('boxShadow'), (value, modifier) => {
|
||||
return [
|
||||
nameClass('shadow', modifier),
|
||||
{
|
||||
'--tw-shadow': value === 'none' ? '0 0 #0000' : value,
|
||||
'box-shadow': [
|
||||
`var(--tw-ring-offset-shadow, 0 0 #0000)`,
|
||||
`var(--tw-ring-shadow, 0 0 #0000)`,
|
||||
`var(--tw-shadow)`,
|
||||
].join(', '),
|
||||
},
|
||||
]
|
||||
})
|
||||
)
|
||||
|
||||
addUtilities(utilities, variants('boxShadow'))
|
||||
addUtilities(shadowReset, { respectImportant: false })
|
||||
}
|
||||
|
||||
matchUtilities(
|
||||
{
|
||||
shadow: (value) => {
|
||||
value = transformValue(value)
|
||||
|
||||
return {
|
||||
'--tw-shadow': value === 'none' ? '0 0 #0000' : value,
|
||||
'box-shadow': defaultBoxShadow,
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
values: theme('boxShadow'),
|
||||
variants: variants('boxShadow'),
|
||||
type: 'lookup',
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue