archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Add :focus-visible variant

Browse Source
This commit is contained in:
Austin Green 2020-05-26 11:10:03 -07:00
parent 0b839a10de
commit 4187e6db70
2 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
__tests__/variantsAtRule.test.js
View File

@ -135,6 +135,27 @@ test('it can generate focus-within variants', () => {
})
})
test('it can generate focus-visible variants', () => {
const input = `
@variants focus-visible {
.banana { color: yellow; }
.chocolate { color: brown; }
}
`
const output = `
.banana { color: yellow; }
.chocolate { color: brown; }
.focus-visible\\:banana:focus-visible { color: yellow; }
.focus-visible\\:chocolate:focus-visible { color: brown; }
`
return run(input).then(result => {
expect(result.css).toMatchCss(output)
expect(result.warnings().length).toBe(0)
})
})
test('it can generate first-child variants', () => {
const input = `
@variants first {
@ -415,7 +436,7 @@ test('variants are generated in the order specified', () => {
test('the built-in variant pseudo-selectors are appended before any pseudo-elements', () => {
const input = `
@variants hover, focus-within, focus, active, group-hover {
@variants hover, focus-within, focus-visible, focus, active, group-hover {
.placeholder-yellow::placeholder { color: yellow; }
}
`
@ -424,6 +445,7 @@ test('the built-in variant pseudo-selectors are appended before any pseudo-eleme
.placeholder-yellow::placeholder { color: yellow; }
.hover\\:placeholder-yellow:hover::placeholder { color: yellow; }
.focus-within\\:placeholder-yellow:focus-within::placeholder { color: yellow; }
.focus-visible\\:placeholder-yellow:focus-visible::placeholder { color: yellow; }
.focus\\:placeholder-yellow:focus::placeholder { color: yellow; }
.active\\:placeholder-yellow:active::placeholder { color: yellow; }
.group:hover .group-hover\\:placeholder-yellow::placeholder { color: yellow; }
@ -624,7 +646,10 @@ test('plugin variants can wrap rules in another at-rule using the raw PostCSS AP
...config.plugins,
function({ addVariant, e }) {
addVariant('supports-grid', ({ container, separator }) => {
const supportsRule = postcss.atRule({ name: 'supports', params: '(display: grid)' })
const supportsRule = postcss.atRule({
name: 'supports',
params: '(display: grid)',
})
supportsRule.nodes = container.nodes
container.nodes = [supportsRule]
supportsRule.walkRules(rule => {

1
src/lib/substituteVariantsAtRules.js
View File

@ -51,6 +51,7 @@ const defaultVariantGenerators = config => ({
}),
hover: generatePseudoClassVariant('hover'),
'focus-within': generatePseudoClassVariant('focus-within'),
'focus-visible': generatePseudoClassVariant('focus-visible'),
focus: generatePseudoClassVariant('focus'),
active: generatePseudoClassVariant('active'),
visited: generatePseudoClassVariant('visited'),