From c74ff9973ff2c4b3c670ed7077391cd4dae45d5a Mon Sep 17 00:00:00 2001
From: Geoff Selby <geoff.w.selby@gmail.com>
Date: Fri, 27 Dec 2019 10:11:04 -0600
Subject: [PATCH] Add checked variant

This adds a `checked` variant per #1255 to allow styling of checked elements like checkboxes and radios. It is not enabled for anything by default.
---
 __tests__/variantsAtRule.test.js     | 21 +++++++++++++++++++++
 src/lib/substituteVariantsAtRules.js |  1 +
 2 files changed, 22 insertions(+)

diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
index 7433a90cb..e6b61a882 100644
--- a/__tests__/variantsAtRule.test.js
+++ b/__tests__/variantsAtRule.test.js
@@ -51,6 +51,27 @@ test('it can generate disabled variants', () => {
   })
 })
 
+test('it can generate checked variants', () => {
+  const input = `
+    @variants checked {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+    .banana { color: yellow; }
+    .chocolate { color: brown; }
+    .checked\\:banana:checked { color: yellow; }
+    .checked\\:chocolate:checked { color: brown; }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('it can generate active variants', () => {
   const input = `
     @variants active {
diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js
index 6cfca755d..c4d0c7f4f 100644
--- a/src/lib/substituteVariantsAtRules.js
+++ b/src/lib/substituteVariantsAtRules.js
@@ -42,6 +42,7 @@ const defaultVariantGenerators = config => ({
   active: generatePseudoClassVariant('active'),
   visited: generatePseudoClassVariant('visited'),
   disabled: generatePseudoClassVariant('disabled'),
+  checked: generatePseudoClassVariant('checked'),
   first: generatePseudoClassVariant('first-child', 'first'),
   last: generatePseudoClassVariant('last-child', 'last'),
   odd: generatePseudoClassVariant('nth-child(odd)', 'odd'),