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