diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js index af81375e5..211ab98ad 100644 --- a/__tests__/variantsAtRule.test.js +++ b/__tests__/variantsAtRule.test.js @@ -51,6 +51,27 @@ test('it can generate active variants', () => { }) }) +test('it can generate visited variants', () => { + const input = ` + @variants visited { + .banana { color: yellow; } + .chocolate { color: brown; } + } + ` + + const output = ` + .banana { color: yellow; } + .chocolate { color: brown; } + .visited\\:banana:visited { color: yellow; } + .visited\\:chocolate:visited { color: brown; } + ` + + return run(input).then(result => { + expect(result.css).toMatchCss(output) + expect(result.warnings().length).toBe(0) + }) +}) + test('it can generate focus variants', () => { const input = ` @variants focus { diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js index 73981d6c3..11a13adbf 100644 --- a/src/lib/substituteVariantsAtRules.js +++ b/src/lib/substituteVariantsAtRules.js @@ -26,6 +26,7 @@ const defaultVariantGenerators = { 'focus-within': generatePseudoClassVariant('focus-within'), focus: generatePseudoClassVariant('focus'), active: generatePseudoClassVariant('active'), + visited: generatePseudoClassVariant('visited'), } export default function(config, { variantGenerators: pluginVariantGenerators }) {