Allow users to customize default variant placement

__tests__/variantsAtRule.test.js

@@ -218,6 +218,33 @@ test('variants are generated in the order specified', () => {
   })
 })
 
+test('the default variant can be generated in a specified position', () => {
+  const input = `
+    @variants focus, active, default, hover {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+      .focus\\:banana:focus { color: yellow; }
+      .focus\\:chocolate:focus { color: brown; }
+      .active\\:banana:active { color: yellow; }
+      .active\\:chocolate:active { color: brown; }
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .hover\\:banana:hover { color: yellow; }
+      .hover\\:chocolate:hover { color: brown; }
+  `
+
+  return run(input, {
+    ...config,
+  }).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('plugin variants can modify rules using the raw PostCSS API', () => {
   const input = `
     @variants important {

src/lib/substituteVariantsAtRules.js

@@ -10,7 +10,12 @@ function generatePseudoClassVariant(pseudoClass) {
   })
 }
 
+function ensureIncludesDefault(variants) {
+  return variants.includes('default') ? variants : ['default', ...variants]
+}
+
 const defaultVariantGenerators = {
+  default: generateVariantFunction(() => {}),
   'group-hover': generateVariantFunction(({ modifySelectors, separator }) => {
     return modifySelectors(({ className }) => {
       return `.group:hover .group-hover${separator}${className}`
@@ -38,9 +43,7 @@ export default function(config, { variantGenerators: pluginVariantGenerators })
         responsiveParent.append(atRule)
       }
 
-      atRule.before(atRule.clone().nodes)
-
-      _.forEach(_.without(variants, 'responsive'), variant => {
+      _.forEach(_.without(ensureIncludesDefault(variants), 'responsive'), variant => {
         variantGenerators[variant](atRule, config)
       })