wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add :read-only variant (#4102)

Browse source 
* Add :read-only variant

* Added read-only variant to defaultConfig.stub

Co-authored-by: FunnyScarf <5177092+dyzajash@users.noreply.github.com>
This commit is contained in:
Mateusz 2021-05-11 21:29:23 +02:00 • committed by GitHub
parent 7991646eff
commit f89bf5f4a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/lib/substituteVariantsAtRules.js
View file

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

1
stubs/defaultConfig.stub.js
View file

@ -807,6 +807,7 @@ module.exports = {
'visited',
'checked',
'empty',
'read-only',
'group-hover',
'group-focus',
'focus-within',

24
tests/variantsAtRule.test.js
View file

@ -569,6 +569,27 @@ test('it can generate hover, active and focus variants', () => {
})
})
test('it can generate read-only variants', () => {
const input = `
@variants read-only {
.banana { color: yellow; }
.chocolate { color: brown; }
}
`
const output = `
.banana { color: yellow; }
.chocolate { color: brown; }
.read-only\\:banana:read-only { color: yellow; }
.read-only\\:chocolate:read-only { color: brown; }
`
return run(input).then((result) => {
expect(result.css).toMatchCss(output)
expect(result.warnings().length).toBe(0)
})
})
test('it can generate hover, active and focus variants for multiple classes in one rule', () => {
const input = `
@variants hover, focus, active {
@ -648,7 +669,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-visible, focus, active, group-hover {
@variants hover, focus-within, focus-visible, focus, active, group-hover, read-only {
.placeholder-yellow::placeholder { color: yellow; }
}
`
@ -661,6 +682,7 @@ test('the built-in variant pseudo-selectors are appended before any pseudo-eleme
.focus\\:placeholder-yellow:focus::placeholder { color: yellow; }
.active\\:placeholder-yellow:active::placeholder { color: yellow; }
.group:hover .group-hover\\:placeholder-yellow::placeholder { color: yellow; }
.read-only\\:placeholder-yellow:read-only::placeholder { color: yellow; }
`
return run(input).then((result) => {