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:
Robin Malfait 2021-05-05 15:23:32 +02:00 • committed by GitHub
parent d76c55afc6
commit 6628eb00ca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
70 changed files with 81467 additions and 82678 deletions

View file

@ -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',
}
)
}
}