From 78554a34d212b8a3d789e4dda27a2290ce32ddd4 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sat, 20 Jul 2019 11:14:25 -0400
Subject: [PATCH] Rename first-child and last-child to first and last

---
 __tests__/variantsAtRule.test.js     | 12 ++++++------
 src/lib/substituteVariantsAtRules.js |  8 ++++----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
index bed5ed12b..619999f74 100644
--- a/__tests__/variantsAtRule.test.js
+++ b/__tests__/variantsAtRule.test.js
@@ -137,7 +137,7 @@ test('it can generate focus-within variants', () => {
 
 test('it can generate first-child variants', () => {
   const input = `
-    @variants first-child {
+    @variants first {
       .banana { color: yellow; }
       .chocolate { color: brown; }
     }
@@ -146,8 +146,8 @@ test('it can generate first-child variants', () => {
   const output = `
       .banana { color: yellow; }
       .chocolate { color: brown; }
-      .first-child\\:banana:first-child { color: yellow; }
-      .first-child\\:chocolate:first-child { color: brown; }
+      .first\\:banana:first-child { color: yellow; }
+      .first\\:chocolate:first-child { color: brown; }
   `
 
   return run(input).then(result => {
@@ -158,7 +158,7 @@ test('it can generate first-child variants', () => {
 
 test('it can generate last-child variants', () => {
   const input = `
-    @variants last-child {
+    @variants last {
       .banana { color: yellow; }
       .chocolate { color: brown; }
     }
@@ -167,8 +167,8 @@ test('it can generate last-child variants', () => {
   const output = `
       .banana { color: yellow; }
       .chocolate { color: brown; }
-      .last-child\\:banana:last-child { color: yellow; }
-      .last-child\\:chocolate:last-child { color: brown; }
+      .last\\:banana:last-child { color: yellow; }
+      .last\\:chocolate:last-child { color: brown; }
   `
 
   return run(input).then(result => {
diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js
index 8888c3153..ab2564167 100644
--- a/src/lib/substituteVariantsAtRules.js
+++ b/src/lib/substituteVariantsAtRules.js
@@ -3,12 +3,12 @@ import postcss from 'postcss'
 import selectorParser from 'postcss-selector-parser'
 import generateVariantFunction from '../util/generateVariantFunction'
 
-function generatePseudoClassVariant(pseudoClass) {
+function generatePseudoClassVariant(pseudoClass, selectorPrefix = pseudoClass) {
   return generateVariantFunction(({ modifySelectors, separator }) => {
     return modifySelectors(({ selector }) => {
       return selectorParser(selectors => {
         selectors.walkClasses(sel => {
-          sel.value = `${pseudoClass}${separator}${sel.value}`
+          sel.value = `${selectorPrefix}${separator}${sel.value}`
           sel.parent.insertAfter(sel, selectorParser.pseudo({ value: `:${pseudoClass}` }))
         })
       }).processSync(selector)
@@ -38,8 +38,8 @@ const defaultVariantGenerators = {
   active: generatePseudoClassVariant('active'),
   visited: generatePseudoClassVariant('visited'),
   disabled: generatePseudoClassVariant('disabled'),
-  'first-child': generatePseudoClassVariant('first-child'),
-  'last-child': generatePseudoClassVariant('last-child'),
+  first: generatePseudoClassVariant('first-child', 'first'),
+  last: generatePseudoClassVariant('last-child', 'last'),
 }
 
 export default function(config, { variantGenerators: pluginVariantGenerators }) {