Support for basic variant generator plugins

Allows you to write a plugin that registers a new variant but only
allows you to modify the selector (like what our built-in generators
do.)

Next steps are to support variants that wrap rules with at-rules
(like @supports for example), variants that can modify properties
(as opposed to just selectors), and to give variant plugin authors
control over how responsive variants interact with their own variants.

__tests__/variantsAtRule.test.js

@@ -166,3 +166,34 @@ test('variants are generated in the order specified', () => {
     expect(result.warnings().length).toBe(0)
   })
 })
+
+test('plugin variants work', () => {
+  const input = `
+    @variants first-child {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .first-child\\:banana:first-child { color: yellow; }
+      .first-child\\:chocolate:first-child { color: brown; }
+  `
+
+  return run(input, () => ({
+    ...config,
+    plugins: [
+      ...config.plugins,
+      function({ addVariant }) {
+        addVariant('first-child', ({ className, separator }) => {
+          return `.first-child${separator}${className}:first-child`
+        })
+      },
+    ],
+  })).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})