Enable focus-within where useful by default

This commit is contained in:
Adam Wathan 2020-11-07 15:14:09 -05:00
parent 65d6f225c8
commit 1a21f0721c
6 changed files with 34972 additions and 10 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -2035,6 +2035,12 @@ test('plugins can extend variants', () => {
.group:hover .group-hover\\:opacity-100 {
opacity: 1
}
.focus-within\\:opacity-0:focus-within {
opacity: 0
}
.focus-within\\:opacity-100:focus-within {
opacity: 1
}
.hover\\:opacity-0:hover {
opacity: 0
}

View File

@ -708,7 +708,7 @@ module.exports = {
'disabled',
],
variants: {
accessibility: ['responsive', 'focus'],
accessibility: ['responsive', 'focus-within', 'focus'],
alignContent: ['responsive'],
alignItems: ['responsive'],
alignSelf: ['responsive'],
@ -716,19 +716,19 @@ module.exports = {
appearance: ['responsive'],
backgroundAttachment: ['responsive'],
backgroundClip: ['responsive'],
backgroundColor: ['responsive', 'dark', 'group-hover', 'hover', 'focus'],
backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
backgroundImage: ['responsive'],
backgroundOpacity: ['responsive', 'group-hover', 'hover', 'focus'],
backgroundOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
backgroundPosition: ['responsive'],
backgroundRepeat: ['responsive'],
backgroundSize: ['responsive'],
borderCollapse: ['responsive'],
borderColor: ['responsive', 'dark', 'group-hover', 'hover', 'focus'],
borderOpacity: ['responsive', 'group-hover', 'hover', 'focus'],
borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
borderOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
borderRadius: ['responsive'],
borderStyle: ['responsive'],
borderWidth: ['responsive'],
boxShadow: ['responsive', 'hover', 'focus'],
boxShadow: ['responsive', 'focus-within', 'hover', 'focus'],
boxSizing: ['responsive'],
clear: ['responsive'],
container: ['responsive'],
@ -780,7 +780,7 @@ module.exports = {
minWidth: ['responsive'],
objectFit: ['responsive'],
objectPosition: ['responsive'],
opacity: ['responsive', 'group-hover', 'hover', 'focus'],
opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
order: ['responsive'],
outline: ['responsive', 'focus'],
overflow: ['responsive'],
@ -802,9 +802,9 @@ module.exports = {
strokeWidth: ['responsive'],
tableLayout: ['responsive'],
textAlign: ['responsive'],
textColor: ['responsive', 'dark', 'group-hover', 'hover', 'focus'],
textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
textDecoration: ['responsive', 'hover', 'focus'],
textOpacity: ['responsive', 'group-hover', 'hover', 'focus'],
textOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
textOverflow: ['responsive'],
textTransform: ['responsive'],
transform: ['responsive'],
@ -820,7 +820,7 @@ module.exports = {
whitespace: ['responsive'],
width: ['responsive'],
wordBreak: ['responsive'],
zIndex: ['responsive', 'focus'],
zIndex: ['responsive', 'focus-within', 'focus'],
},
plugins: [],
}