Merge pull request #970 from tailwindcss/support-pseudo-elements-with-variants

Support built-in variants for utilities that include pseudo-elements

__tests__/variantsAtRule.test.js

@@ -218,6 +218,28 @@ test('variants are generated in the order specified', () => {
   })
 })
 
+test('the built-in variant pseudo-selectors are appended before any pseudo-elements', () => {
+  const input = `
+    @variants hover, focus-within, focus, active, group-hover {
+      .placeholder-yellow::placeholder { color: yellow; }
+    }
+  `
+
+  const output = `
+    .placeholder-yellow::placeholder { color: yellow; }
+    .hover\\:placeholder-yellow:hover::placeholder { color: yellow; }
+    .focus-within\\:placeholder-yellow:focus-within::placeholder { color: yellow; }
+    .focus\\:placeholder-yellow:focus::placeholder { color: yellow; }
+    .active\\:placeholder-yellow:active::placeholder { color: yellow; }
+    .group:hover .group-hover\\:placeholder-yellow::placeholder { color: yellow; }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('the default variant can be generated in a specified position', () => {
   const input = `
     @variants focus, active, default, hover {

src/lib/substituteVariantsAtRules.js

@@ -1,12 +1,17 @@
 import _ from 'lodash'
 import postcss from 'postcss'
+import selectorParser from 'postcss-selector-parser'
 import generateVariantFunction from '../util/generateVariantFunction'
-import e from '../util/escapeClassName'
 
 function generatePseudoClassVariant(pseudoClass) {
   return generateVariantFunction(({ modifySelectors, separator }) => {
-    return modifySelectors(({ className }) => {
-      return `.${e(`${pseudoClass}${separator}${className}`)}:${pseudoClass}`
+    return modifySelectors(({ selector }) => {
+      return selectorParser(selectors => {
+        selectors.walkClasses(sel => {
+          sel.value = `${pseudoClass}${separator}${sel.value}`
+          sel.parent.insertAfter(sel, selectorParser.pseudo({ value: `:${pseudoClass}` }))
+        })
+      }).processSync(selector)
     })
   })
 }
@@ -18,8 +23,13 @@ function ensureIncludesDefault(variants) {
 const defaultVariantGenerators = {
   default: generateVariantFunction(() => {}),
   'group-hover': generateVariantFunction(({ modifySelectors, separator }) => {
-    return modifySelectors(({ className }) => {
-      return `.group:hover .${e(`group-hover${separator}${className}`)}`
+    return modifySelectors(({ selector }) => {
+      return selectorParser(selectors => {
+        selectors.walkClasses(sel => {
+          sel.value = `group-hover${separator}${sel.value}`
+          sel.parent.insertBefore(sel, selectorParser().astSync('.group:hover '))
+        })
+      }).processSync(selector)
     })
   }),
   hover: generatePseudoClassVariant('hover'),