add odd and even nth child pseudo selectors

Author: Cody

__tests__/variantsAtRule.test.js

@@ -135,6 +135,48 @@ test('it can generate focus-within variants', () => {
   })
 })
 
+test('it can generate odd-child variants', () => {
+  const input = `
+    @variants odd-child {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+    .banana { color: yellow; }
+    .chocolate { color: brown; }
+    .odd-child\\:banana:nth-child(odd) { color: yellow; }
+    .odd-child\\: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 even-child variants', () => {
+  const input = `
+    @variants even-child {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+    .banana { color: yellow; }
+    .chocolate { color: brown; }
+    .even-child\\:banana:nth-child(even) { color: yellow; }
+    .even-child\\: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 {

src/lib/substituteVariantsAtRules.js

@@ -3,13 +3,13 @@ import postcss from 'postcss'
 import selectorParser from 'postcss-selector-parser'
 import generateVariantFunction from '../util/generateVariantFunction'
 
-function generatePseudoClassVariant(pseudoClass) {
+function generatePseudoClassVariant(pseudoClass, pseudoSelector = pseudoClass) {
   return generateVariantFunction(({ modifySelectors, separator }) => {
     return modifySelectors(({ selector }) => {
       return selectorParser(selectors => {
         selectors.walkClasses(sel => {
           sel.value = `${pseudoClass}${separator}${sel.value}`
-          sel.parent.insertAfter(sel, selectorParser.pseudo({ value: `:${pseudoClass}` }))
+          sel.parent.insertAfter(sel, selectorParser.pseudo({ value: `:${pseudoSelector}` }))
         })
       }).processSync(selector)
     })
@@ -38,6 +38,8 @@ const defaultVariantGenerators = {
   active: generatePseudoClassVariant('active'),
   visited: generatePseudoClassVariant('visited'),
   disabled: generatePseudoClassVariant('disabled'),
+  'odd-child': generatePseudoClassVariant('odd-child', 'nth-child(odd)'),
+  'even-child': generatePseudoClassVariant('even-child', 'nth-child(even)'),
 }
 
 export default function(config, { variantGenerators: pluginVariantGenerators }) {