diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js index 619999f74..9cc5e4132 100644 --- a/__tests__/variantsAtRule.test.js +++ b/__tests__/variantsAtRule.test.js @@ -156,6 +156,27 @@ test('it can generate first-child variants', () => { }) }) +test('it can generate odd variants', () => { + const input = ` + @variants odd { + .banana { color: yellow; } + .chocolate { color: brown; } + } + ` + + const output = ` + .banana { color: yellow; } + .chocolate { color: brown; } + .odd\\:banana:nth-child(odd) { color: yellow; } + .odd\\:chocolate:nth-child(odd) { color: brown; } + ` + + return run(input).then(result => { + expect(result.css).toMatchCss(output) + expect(result.warnings().length).toBe(0) + }) +}) + test('it can generate last-child variants', () => { const input = ` @variants last { @@ -177,6 +198,27 @@ test('it can generate last-child variants', () => { }) }) +test('it can generate even variants', () => { + const input = ` + @variants even { + .banana { color: yellow; } + .chocolate { color: brown; } + } + ` + + const output = ` + .banana { color: yellow; } + .chocolate { color: brown; } + .even\\:banana:nth-child(even) { color: yellow; } + .even\\:chocolate:nth-child(even) { color: brown; } + ` + + return run(input).then(result => { + expect(result.css).toMatchCss(output) + expect(result.warnings().length).toBe(0) + }) +}) + test('it can generate group-hover variants', () => { const input = ` @variants group-hover { diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js index ab2564167..f2af0b207 100644 --- a/src/lib/substituteVariantsAtRules.js +++ b/src/lib/substituteVariantsAtRules.js @@ -40,6 +40,8 @@ const defaultVariantGenerators = { disabled: generatePseudoClassVariant('disabled'), first: generatePseudoClassVariant('first-child', 'first'), last: generatePseudoClassVariant('last-child', 'last'), + odd: generatePseudoClassVariant('nth-child(odd)', 'odd'), + even: generatePseudoClassVariant('nth-child(even)', 'even'), } export default function(config, { variantGenerators: pluginVariantGenerators }) {