Add :read-only variant (#4102)

* Add :read-only variant

* Added read-only variant to defaultConfig.stub

Co-authored-by: FunnyScarf <5177092+dyzajash@users.noreply.github.com>

src/lib/substituteVariantsAtRules.js

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

stubs/defaultConfig.stub.js

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

tests/variantsAtRule.test.js

@@ -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) => {